@vaadin/aura 25.0.0-alpha18 → 25.0.0-alpha20

package/aura.css

@@ -1,3 +1,30 @@
-html {
-  /* Global custom properties */
+@import './src/color.css';
+@import './src/color-scheme.css';
+@import './src/palette.css';
+@import './src/shadow.css';
+@import './src/size.css';
+@import './src/surface.css';
+@import './src/typography.css';
+
+@import './src/components/app-layout.css';
+@import './src/components/avatar.css';
+@import './src/components/button.css';
+@import './src/components/card.css';
+@import './src/components/checkbox-radio.css';
+@import './src/components/date-picker.css';
+@import './src/components/dialog.css';
+@import './src/components/grid.css';
+@import './src/components/input-container.css';
+@import './src/components/master-detail-layout.css';
+@import './src/components/message-input.css';
+@import './src/components/multi-select-combo-box.css';
+@import './src/components/notification.css';
+@import './src/components/overlay.css';
+@import './src/components/select.css';
+@import './src/components/side-nav.css';
+
+:where(:root, :host) {
+  cursor: default;
+  /* TODO: slightly smaller chevron than the one in base styles - consider if we should do this in base styles */
+  --_vaadin-icon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
 }

package/dist/aura.css

@@ -0,0 +1 @@
+:where(:root,:host){--aura-contrast:1;--aura-accent-light:#1858d8;--aura-accent-dark:#3670e2;--_color-base:light-dark(oklch(from var(--aura-background-light) 0.1 calc(c / 2 + c * (1 - c)) h),oklch(from var(--aura-background-dark) 1 c h));--vaadin-text-color:light-dark(color-mix(in srgb,var(--_color-base) calc(90% + 5%*var(--aura-contrast)),transparent),color-mix(in srgb,#fff calc(90% + 5%*var(--aura-contrast)),transparent));--vaadin-text-color-secondary:light-dark(color-mix(in srgb,var(--_color-base) calc(55% + 10%*var(--aura-contrast)),transparent),color-mix(in srgb,var(--_color-base) calc(57% + 10%*var(--aura-contrast)),transparent));--vaadin-text-color-disabled:color-mix(in srgb,var(--_color-base) calc(30% + 10%*var(--aura-contrast)),transparent);--_border-color-base:light-dark(oklch(from var(--aura-background-light) 0.1 c h),oklch(from var(--aura-background-dark) 0.85 c h));--vaadin-border-color:color-mix(in srgb,var(--_border-color-base) calc(14% + 6%*var(--aura-contrast)),transparent);--vaadin-border-color-secondary:light-dark(color-mix(in srgb,var(--_border-color-base) max(5%,5% + 3% * var(--aura-contrast)),transparent),color-mix(in srgb,var(--_border-color-base) max(6%,5% + 5% * var(--aura-contrast)),transparent));--aura-background-light:oklch(from var(--aura-accent-light) min(1,l + (1 - l) * 0.9) calc(c * 0.05) h);--aura-background-dark:oklch(from var(--aura-accent-dark) max(0,l/2 - (1 - l) * 0.2) calc(c * 0.05) h);--aura-background:light-dark(var(--aura-background-light),var(--aura-background-dark));--_bg-alt:oklch(from var(--aura-background) calc(l + c) min(c,c * 2 - l/20) calc(h + 180 * var(--_safari-17-deg, 1deg) * l * c * 4));--_bg-accent:radial-gradient(circle at 0% 0%,light-dark(oklch(from var(--aura-background-light) min(1,l + c * 3) min(c,c * 3 - l/20) h),oklch(from var(--aura-background-dark) min(1,l + c) clamp(0,c * 1.5,0.4) h)),transparent 30%);--aura-app-background:var(--_bg-accent),radial-gradient(circle at 25% 0% in xyz,var(--aura-background) 33%,var(--_bg-alt));--aura-accent-color:light-dark(var(--aura-accent-light),var(--aura-accent-dark));--vaadin-focus-ring-color:var(--aura-accent-color);accent-color:var(--aura-accent-color);--aura-accent-contrast:light-dark(oklch(from var(--aura-accent-light) clamp(0,(0.62 - l) * 1000,1) 0 0),oklch(from var(--aura-accent-dark) clamp(0,(0.62 - l) * 1000,1) 0 0));--aura-accent-text-light:color-mix(in srgb,var(--aura-accent-light) calc(70% - 15%*var(--aura-contrast)),var(--vaadin-text-color));--aura-accent-text-dark:color-mix(in srgb,var(--aura-accent-dark) calc(70% - 15%*var(--aura-contrast)),var(--vaadin-text-color));--aura-accent-text:light-dark(var(--aura-accent-text-light),var(--aura-accent-text-dark));--vaadin-user-color:var(--aura-accent-color);--vaadin-background-container:color-mix(in srgb,var(--_color-base) calc(3% + min(3%, 1% * var(--aura-contrast))),transparent);--vaadin-background-container-strong:color-mix(in srgb,var(--_color-base) calc(7% + min(8%, 1.5% * var(--aura-contrast))),transparent);background:var(--aura-app-background);background-attachment:fixed;background-size:100vw 100vh;color:var(--vaadin-text-color)}@supports (color:hsl(0 0 0)){:where(:root,:host){--_safari-17-deg:1}}:where(h1,h2,h3,h4,h5,h6){color:var(--vaadin-text-color)}:where(:root,:host){--aura-color-scheme:light;--aura-content-color-scheme:var(--aura-color-scheme);--aura-notification-color-scheme:var(--aura-color-scheme)}html{color-scheme:var(--aura-color-scheme)}:where(:root,:host){--aura-red:oklch(0.6 0.22 25);--aura-orange:oklch(0.61 0.4 93);--aura-yellow:oklch(0.9 0.36 105);--aura-green:oklch(0.6 0.28 160);--aura-blue:oklch(0.6 0.3 240);--aura-purple:oklch(0.6 0.3 280);--aura-red-text:color-mix(in srgb,var(--aura-red) calc(70% - 15%*var(--aura-contrast)),var(--vaadin-text-color));--aura-orange-text:color-mix(in srgb,var(--aura-orange) calc(70% - 15%*var(--aura-contrast)),var(--vaadin-text-color));--aura-yellow-text:color-mix(in srgb,var(--aura-yellow) calc(65% - 15%*var(--aura-contrast)),var(--vaadin-text-color));--aura-green-text:color-mix(in srgb,var(--aura-green) calc(70% - 15%*var(--aura-contrast)),var(--vaadin-text-color));--aura-blue-text:color-mix(in srgb,var(--aura-blue) calc(70% - 15%*var(--aura-contrast)),var(--vaadin-text-color));--aura-purple-text:color-mix(in srgb,var(--aura-purple) calc(70% - 15%*var(--aura-contrast)),var(--vaadin-text-color))}:where(:root,:host){--aura-shadow-color:light-dark(oklch(from var(--aura-background-light) calc(l - l * 0.8) calc(c / 10) h/0.2),oklch(from var(--aura-background-dark) calc(l - l * 0.8) calc(c / 10) h/0.2));--aura-shadow-m:0 8px 16px -3px var(--aura-shadow-color)}:where(:root,:host){--aura-base-size:16;--_size-ref:16;--aura-base-radius:3;--vaadin-radius-s:min(0.25lh,round(var(--aura-base-radius) * 1px + 2px,1px));--vaadin-radius-m:round(var(--aura-base-radius) * 2px + 3px,1px);--vaadin-radius-l:round(var(--aura-base-radius) * 1.5px + 10px,1px)}:where(:root,:host,[theme]){--vaadin-padding-xs:round(var(--aura-base-size) * 0.25 * pow(var(--aura-base-size)/var(--_size-ref),0.5) * 1px,1px);--vaadin-padding-s:round(var(--aura-base-size) * 0.5 * pow(var(--aura-base-size)/var(--_size-ref),0.75) * 1px,1px);--vaadin-padding-m:round(var(--aura-base-size) * 0.75 * pow(var(--aura-base-size)/var(--_size-ref),0.3) * 1px,1px);--vaadin-padding-l:calc(var(--aura-base-size)*1px);--vaadin-padding-xl:round(var(--aura-base-size) * 1.5 * pow(var(--aura-base-size)/var(--_size-ref),0.1) * 1px,1px);--vaadin-padding-container:round(var(--vaadin-padding-s)/1.4,1px) max(var(--vaadin-padding-s),round(var(--vaadin-radius-m)/2,1px));--vaadin-gap-xs:var(--vaadin-padding-xs);--vaadin-gap-s:var(--vaadin-padding-s);--vaadin-gap-m:var(--vaadin-padding-m);--vaadin-gap-l:var(--vaadin-padding-l);--vaadin-gap-xl:var(--vaadin-padding-xl)}@media (pointer:coarse){:where(:root,:host){--aura-base-size:19}}:where(:root,:host){--aura-surface-level:1}.aura-surface,.aura-surface-solid,::part(input-field),::part(overlay),:is(:root,:host),vaadin-app-layout::part(drawer),vaadin-app-layout::part(navbar),vaadin-button,vaadin-card,vaadin-checkbox::part(checkbox),vaadin-master-detail-layout::part(detail),vaadin-menu-bar-button,vaadin-message-input,vaadin-radio-button::part(radio),vaadin-side-nav-item::part(content){--aura-surface-opacity:0.5;--aura-surface-solid:light-dark(oklch(from var(--aura-background-light) min(1,l + (0.98 - l) * 4 + var(--aura-surface-level) * (0.07 - 0.01 * var(--aura-contrast)) - var(--aura-surface-opacity)/20) clamp(0,c - l/10 * var(--aura-surface-level) + var(--aura-surface-opacity)/40,c) h),oklch(from var(--aura-background-dark) calc(max(l + 0.03, 0.25) + var(--aura-surface-level)*(0.03 - var(--aura-contrast)*0.008) - var(--aura-surface-opacity)/40) clamp(0,c * (1 + l),0.2) h));--aura-surface:color-mix(in oklab,var(--aura-surface-solid) calc(100%*var(--aura-surface-opacity)),transparent);--vaadin-background-color:var(--aura-surface-solid)}.aura-surface{background:var(--aura-surface) padding-box}.aura-surface-solid{--aura-surface-opacity:1;background:var(--aura-surface-solid) padding-box}@font-face{font-display:swap;font-family:Instrument Sans;font-style:normal;font-weight:400 700;src:url(fonts/InstrumentSans/InstrumentSans.woff2) format("woff2")}:where(:root,:host){--aura-font-family-system:system-ui,ui-sans-serif,sans-serif;--aura-font-family-instrument-sans:"Instrument Sans",var(--aura-font-family-system);--aura-font-family:var(--aura-font-family-instrument-sans);--aura-base-font-size:16;--aura-font-size-scale:1.125;--aura-base-line-height:1.4;--aura-font-weight:400;--aura-font-weight-medium:500;--aura-font-weight-semibold:600}@media (pointer:fine){:where(:root,:host){--aura-base-font-size:14}}@supports (-webkit-touch-callout:none){@media (pointer:coarse){:where(:root,:host){font:-apple-system-body;--aura-base-font-size:14}}}:where(:root,:host,[theme]){--aura-font-size-xs:round(var(--aura-font-size-s)/var(--aura-font-size-scale),0.0625rem);--aura-font-size-s:round(var(--aura-font-size-m)/var(--aura-font-size-scale),0.0625rem);--aura-font-size-m:round(var(--aura-base-font-size)/16 * 1rem,0.0625rem);--aura-font-size-l:round(var(--aura-font-size-m) * var(--aura-font-size-scale),0.0625rem);--aura-font-size-xl:round(var(--aura-font-size-l) * var(--aura-font-size-scale),0.0625rem);--aura-line-height-xs:round(var(--aura-font-size-xs) * var(--aura-base-line-height),0.125rem);--aura-line-height-s:round(var(--aura-font-size-s) * var(--aura-base-line-height),0.125rem);--aura-line-height-m:round(var(--aura-font-size-m) * var(--aura-base-line-height),0.125rem);--aura-line-height-l:round(var(--aura-font-size-l) * var(--aura-base-line-height),0.125rem);--aura-line-height-xl:round(var(--aura-font-size-xl) * var(--aura-base-line-height),0.125rem)}:where(body,:host){font-family:var(--aura-font-family);font-optical-sizing:auto;font-style:normal;font-weight:var(--aura-font-weight);-webkit-font-smoothing:var(--aura-font-smoothing,antialiased);-moz-osx-font-smoothing:var(--aura-font-smoothing,grayscale);-webkit-text-size-adjust:none;text-size-adjust:none}:where(body,:host,[theme]:not(html)){font-size:var(--aura-font-size-m);line-height:var(--aura-line-height-m)}:where(h1,h2,h3,h4,h5,h6){font-weight:var(--aura-font-weight-semibold);margin:0;text-wrap:balance}:where(h1){font-size:var(--aura-font-size-xl);line-height:var(--aura-line-height-xl)}:where(h2,h3){font-size:var(--aura-font-size-l);line-height:var(--aura-line-height-l)}:where(h4,h5){font-size:var(--aura-font-size-m);line-height:var(--aura-line-height-m)}:where(h6){font-size:var(--aura-font-size-s);line-height:var(--aura-line-height-s)}:where(:root,:host){--aura-app-layout-inset:1.5vmin;--aura-app-layout-radius:var(--vaadin-radius-l);--_aura-mdl-border:1px;--vaadin-app-layout-navbar-padding-top:0;--vaadin-app-layout-navbar-padding-bottom:0;--vaadin-app-layout-navbar-padding-inline-start:0;--vaadin-app-layout-navbar-padding-inline-end:0}@media (height <= 600px),(width <= 800px){html{--aura-app-layout-inset:0px!important;--_aura-mdl-border:0px}}html:has(vaadin-app-layout){&,body{box-sizing:border-box;height:100%;margin:0;width:100%}}vaadin-app-layout{--_app-layout-radius:clamp(0px,var(--aura-app-layout-radius),var(--aura-app-layout-inset) * 100);padding-block:var(--aura-app-layout-inset);padding-inline-end:var(--aura-app-layout-inset);padding-top:calc(var(--aura-app-layout-inset) + var(--_vaadin-app-layout-navbar-offset-size))}vaadin-app-layout[overlay]{&::part(drawer),&::part(navbar){--vaadin-app-layout-navbar-background:var(--aura-surface);--vaadin-app-layout-drawer-background:var(--aura-surface);--aura-surface-opacity:var(--aura-overlay-surface-opacity);-webkit-backdrop-filter:var(--aura-overlay-backdrop-filter);backdrop-filter:var(--aura-overlay-backdrop-filter)}}vaadin-app-layout:is([overlay],:not([drawer-opened])){padding-inline-start:var(--aura-app-layout-inset)}vaadin-app-layout::part(navbar){justify-content:space-between}vaadin-app-layout:not([overlay])::part(navbar){--vaadin-app-layout-navbar-background:transparent}vaadin-app-layout:not([overlay])::part(drawer){padding-block:var(--aura-app-layout-inset);padding-inline:max(0px,var(--aura-app-layout-inset) - var(--vaadin-padding-s))}vaadin-app-layout>vaadin-scroller[slot=drawer]{padding-inline:var(--vaadin-padding-m);scrollbar-width:thin}vaadin-app-layout>vaadin-scroller:nth-child(1 of [slot=drawer]){padding-top:var(--vaadin-padding-s)}vaadin-app-layout>vaadin-scroller:nth-last-child(1 of [slot=drawer]){padding-bottom:var(--vaadin-padding-s)}vaadin-app-layout>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){background:linear-gradient(var(--aura-surface),var(--aura-surface)),var(--aura-app-background);background-clip:padding-box;background-origin:border-box;border:var(--_aura-mdl-border) solid var(--vaadin-border-color-secondary);border-block-width:min(var(--aura-app-layout-inset),var(--_aura-mdl-border));border-inline-end-width:min(var(--aura-app-layout-inset),var(--_aura-mdl-border));border-radius:var(--_app-layout-radius);box-sizing:border-box;color:var(--vaadin-text-color);color-scheme:var(--aura-content-color-scheme);min-height:100%}vaadin-app-layout>vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){&:not([drawer])::part(detail),&>vaadin-master-detail-layout{border-end-end-radius:var(--_app-layout-radius);border-start-end-radius:var(--_app-layout-radius)}&::part(backdrop){border-radius:calc(var(--_app-layout-radius) - var(--_aura-mdl-border))}&:is([drawer][has-detail]){border-color:light-dark(var(--vaadin-border-color),var(--vaadin-border-color-secondary))}}vaadin-app-layout:has([slot=navbar]):has([slot=drawer]){padding-top:var(--_vaadin-app-layout-navbar-offset-size);&::part(drawer){padding-top:0}}vaadin-app-layout:has([slot=drawer]):not([overlay]):not([drawer-opened])>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){border-inline-start-width:min(var(--aura-app-layout-inset),var(--_aura-mdl-border))}vaadin-app-layout:has([slot=navbar]):has([slot=drawer])[drawer-opened]:not([overlay])>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){border-start-start-radius:var(--aura-app-layout-radius)}vaadin-app-layout:has([slot=navbar]):has([slot=drawer])>:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])){border-top-width:var(--_aura-mdl-border)}vaadin-app-layout:has([slot=navbar])>:is(:not([slot]),[slot=drawer]) vaadin-drawer-toggle:not([theme~=permanent]),vaadin-app-layout:not(:has([slot=navbar]))>[slot=drawer] vaadin-drawer-toggle:not([theme~=permanent]){display:none}:where(:root,:host){--vaadin-avatar-border-color:var(--vaadin-border-color-secondary);--vaadin-avatar-background:var(--vaadin-background-container);--vaadin-avatar-font-weight:var(--aura-font-weight-medium);--vaadin-avatar-font-size:var(--aura-font-size-m)}vaadin-avatar:not([img]){--_shade:color-mix(in srgb,var(--vaadin-border-color) 20%,transparent);background-image:linear-gradient(light-dark(transparent,var(--_shade)),transparent 50%,light-dark(var(--_shade),transparent))}:where(:root,:host){--vaadin-button-border-color:var(--vaadin-border-color);--vaadin-button-shadow:0 1px 4px -1px rgba(0,0,0,.07)}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle){position:relative;transition:scale .18s}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle):where(:not([theme~=tertiary])){--aura-surface-level:6;--aura-surface-opacity:0.3;box-shadow:var(--vaadin-button-shadow)}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle):not([theme~=primary],[theme~=tertiary]){background:var(--vaadin-button-background,var(--aura-surface) padding-box)}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle):where(:not([theme~=primary])){outline-offset:calc(var(--vaadin-button-border-width, 1px)*-1)}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle):where([theme~=primary]){outline-offset:2px}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle):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):has([slot=suffix]:is(vaadin-icon,svg,i[class*=fa-],vaadin-avatar)),vaadin-drawer-toggle:empty,vaadin-menu-bar-button[aria-haspopup=true]{padding-inline-end:max(var(--vaadin-padding-s),round(var(--vaadin-radius-m)/1.75,1px))}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle)[theme~=primary]{--vaadin-button-font-weight:var(--aura-font-weight-semibold);--vaadin-button-text-color:light-dark(var(--vaadin-background-color),var(--aura-background-dark))}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle)[disabled][theme~=primary]{--vaadin-button-text-color:var(--vaadin-text-color-secondary)}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle):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):not([disabled]):before{background-color:oklch(from currentColor calc(l + .4 - c) c h)}}@media (any-hover:hover){:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle):hover:not([disabled],[active]):before{opacity:.05}:is(vaadin-button,vaadin-menu-bar-button,vaadin-drawer-toggle)[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)[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)[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(:root,:host){--vaadin-card-title-font-weight:var(--aura-font-weight-medium);--vaadin-card-padding:var(--vaadin-padding-l);--vaadin-card-gap:var(--vaadin-gap-m) var(--vaadin-gap-l);--vaadin-card-border-color:var(--vaadin-border-color-secondary);--vaadin-card-background:var(--aura-surface) padding-box}vaadin-card{--vaadin-card-background:var(--aura-surface) padding-box;--aura-surface-level:2}vaadin-card[theme~=outlined]{border:var(--vaadin-card-border-width,1px) solid transparent;--vaadin-card-padding:calc(var(--vaadin-padding-l) - var(--vaadin-card-border-width, 1px))}vaadin-card[theme~=outlined]:before{inset:calc(var(--vaadin-card-border-width, 1px)*-1)}vaadin-card[theme~=outlined][theme~=cover-media] [slot=media]:is(img,video,svg,vaadin-icon){margin-inline:calc((var(--_padding) + var(--vaadin-card-border-width, 1px))*-1);margin-top:calc((var(--_padding) + var(--vaadin-card-border-width, 1px))*-1);width:calc(100% + (var(--_padding) + var(--vaadin-card-border-width, 1px))*2)}vaadin-card[theme~=elevated]{--aura-surface-opacity:0.7;--aura-surface-level:3;--_shadow-color:light-dark(oklch(from var(--aura-background-light) calc(l - l * 0.8) calc(c / 10) h/0.1),oklch(from var(--aura-background-dark) calc(l - l * 0.8) calc(c / 10) h/0.2));--vaadin-card-shadow:0 1px 6px -1px var(--_shadow-color);background-clip:padding-box}vaadin-card[theme~=stretch-media]:not([theme~=cover-media]) [slot=media]:is(img,video,svg,vaadin-icon){border-radius:var(--vaadin-radius-s)}:where(:root,:host){--vaadin-radio-button-dot-size:6px;--vaadin-checkbox-size:round(1lh - 2px,2px);--vaadin-radio-button-size:round(1lh - 2px,2px)}vaadin-checkbox::part(checkbox),vaadin-radio-button::part(radio){--vaadin-checkbox-background:var(--aura-surface);--vaadin-radio-button-background:var(--aura-surface);transition:background-color .1s}vaadin-checkbox:not([readonly],[disabled])::part(checkbox),vaadin-radio-button:not([disabled])::part(radio){--aura-surface-level:4;box-shadow:0 2px 1px -1px rgba(0,0,0,.07);--_shade:color-mix(in srgb,var(--vaadin-border-color-secondary) 50%,transparent);background-image:linear-gradient(light-dark(transparent,var(--_shade)),transparent 33%,transparent 66%,light-dark(var(--_shade),transparent))}vaadin-checkbox:not([checked],[indeterminate])::part(checkbox),vaadin-radio-button:not([checked])::part(radio){background-clip:padding-box}vaadin-checkbox:is([checked],[indeterminate]):not([readonly],[disabled])::part(checkbox){--vaadin-checkbox-background:var(--aura-accent-color);--vaadin-checkbox-color:var(--aura-accent-contrast)}vaadin-radio-button[checked]:not([readonly],[disabled])::part(radio){--vaadin-radio-button-background:var(--aura-accent-color);--vaadin-radio-button-color:var(--aura-accent-contrast)}vaadin-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}:where(:root,:host){--vaadin-date-picker-year-scroller-background:light-dark(var(--vaadin-background-container),transparent);--vaadin-date-picker-month-header-font-weight:var(--aura-font-weight-semibold);--vaadin-date-picker-date-selected-background:var(--aura-accent-color);--vaadin-date-picker-date-selected-color:var(--aura-accent-contrast)}:where(:root,:host,[theme]){--vaadin-date-picker-date-width:calc(var(--aura-font-size-m)*2.5);--vaadin-date-picker-year-scroller-width:calc(var(--aura-font-size-m)*3.5)}vaadin-date-picker-month-scroller,vaadin-date-picker-overlay-content::part(toolbar){background:var(--aura-surface)}vaadin-date-picker-year-scroller:before{background:var(--aura-surface-solid) padding-box;height:12px;width:12px}vaadin-date-picker-year::part(year-number){font-size:var(--aura-font-size-s);font-weight:var(--aura-font-weight-medium)}vaadin-date-picker-year[current]::part(year-number){font-weight:var(--aura-font-weight-semibold)}vaadin-date-picker-year[selected]{position:relative}vaadin-date-picker-year[selected]::part(year-number){color:var(--aura-accent-text)}vaadin-date-picker-year[selected]:after{background:var(--aura-accent-color);border-radius:var(--vaadin-radius-s);content:"";height:100%;position:absolute;top:-.5lh;inset-inline:3px;opacity:.1;z-index:-1}vaadin-date-picker-year::part(year-separator){height:8px;line-height:0;text-align:center;translate:0 -50%}vaadin-date-picker-year::part(year-separator):before{background:var(--vaadin-text-color-disabled);border-radius:50%;content:"";display:inline-block;height:3px;width:3px}:where(:root,:host){--vaadin-dialog-title-font-size:var(--aura-font-size-l);--vaadin-dialog-border-width:0px}vaadin-confirm-dialog,vaadin-dialog{color-scheme:var(--aura-content-color-scheme)}vaadin-confirm-dialog::part(overlay),vaadin-dialog::part(overlay){--vaadin-dialog-background:var(--aura-surface);--aura-surface-level:4;view-transition-name:vaadin-dialog}vaadin-confirm-dialog::part(message){color:var(--vaadin-text-color-secondary)}::view-transition-group(vaadin-dialog){border-radius:var(--vaadin-dialog-border-radius,var(--vaadin-radius-l));z-index:1}:where(:root,:host){--vaadin-grid-row-selected-background:linear-gradient(var(--vaadin-background-container),var(--vaadin-background-container))}vaadin-grid[theme~=no-border]::part(first-column-cell){--_cell-padding:var(--vaadin-padding-xs) var(--vaadin-padding-s) var(--vaadin-padding-xs) var(--vaadin-padding-l)}vaadin-grid[theme~=no-border]::part(last-column-cell){--_cell-padding:var(--vaadin-padding-xs) var(--vaadin-padding-l) var(--vaadin-padding-xs) var(--vaadin-padding-s)}vaadin-grid::part(active-nav-item){--vaadin-grid-cell-background:linear-gradient(var(--vaadin-background-container),var(--vaadin-background-container)) var(--vaadin-background-color)}:where(:root,:host,[theme]){--vaadin-input-field-background:var(--aura-surface);--vaadin-input-field-error-color:var(--aura-red)}::part(input-field),vaadin-input-container,vaadin-message-input{--vaadin-input-field-background:var(--aura-surface);--aura-surface-level:4;--aura-surface-opacity:0.7;background-clip:padding-box}:not([readonly],[disabled])::part(input-field),vaadin-message-input:not([readonly],[disabled]){box-shadow:0 2px 1px -1px rgba(0,0,0,.04)}[disabled]::part(input-field){--aura-surface-opacity:0.5;--aura-surface-level:1}::part(field-button){transition:color .1s}:not([readonly],[disabled])::part(field-button):active{color:var(--vaadin-text-color)}@media (any-hover:hover){:not([readonly],[disabled])::part(field-button):hover{color:var(--vaadin-text-color)}}vaadin-master-detail-layout::part(detail){--aura-surface-level:2;background:var(--aura-surface) padding-box}vaadin-master-detail-layout[drawer]::part(detail){--aura-surface-opacity:var(--aura-overlay-surface-opacity);-webkit-backdrop-filter:var(--aura-overlay-backdrop-filter);backdrop-filter:var(--aura-overlay-backdrop-filter);background:var(--aura-surface) padding-box;box-shadow:inset 1px 0 0 0 var(--aura-overlay-inner-outline-color),-1px 0 0 0 var(--aura-overlay-outline-color),var(--aura-shadow-m)}vaadin-master-detail-layout[containment=viewport][drawer]::part(detail){box-shadow:var(--aura-overlay-shadow)}vaadin-master-detail-layout[containment=viewport][drawer]::part(detail),vaadin-master-detail-layout[theme~=inset-drawer][drawer]::part(detail){border-radius:var(--_app-layout-radius);margin:calc(var(--aura-app-layout-inset)/2)}vaadin-master-detail-layout:not([drawer])::part(detail),vaadin-master-detail-layout>vaadin-master-detail-layout{border-end-end-radius:var(--_app-layout-radius);border-start-end-radius:var(--_app-layout-radius)}::view-transition-group(vaadin-mdl-backdrop),::view-transition-group(vaadin-mdl-detail),::view-transition-group(vaadin-mdl-master){border-radius:var(--_app-layout-radius);overflow:hidden}vaadin-message-input vaadin-text-area::part(input-field){--vaadin-input-field-background:transparent}vaadin-message-input[theme~=icon-button] vaadin-message-input-button{color:transparent;contain:strict;height:var(--vaadin-icon-size,1lh);position:relative;width:var(--vaadin-icon-size,1lh)}vaadin-message-input[theme~=icon-button] vaadin-message-input-button:before{background:var(--vaadin-button-text-color);content:"";inset:0;mask-image:var(--_vaadin-icon-paper-airplane);position:absolute}vaadin-message-input[theme~=icon-button][dir=rtl] vaadin-message-input-button:before{scale:-1}@media (forced-colors:active){vaadin-message-input[theme~=icon-button] vaadin-message-input-button{forced-color-adjust:none;--vaadin-button-text-color:CanvasText}}:where(:root,:host){--vaadin-chip-padding:0.4em;--vaadin-chip-background:var(--vaadin-background-container-strong)}vaadin-multi-select-combo-box-chip{--vaadin-chip-height:1lh;--vaadin-icon-size:1.25em;--vaadin-chip-padding:0.4em;--vaadin-chip-border-radius:var(--vaadin-radius-s);--vaadin-chip-border-width:0px}:where(:root,:host){--vaadin-notification-border-width:0px;--vaadin-ease-fluid:cubic-bezier(0.78,0,0.22,1)}vaadin-notification-container{color-scheme:var(--aura-notification-color-scheme)}vaadin-notification-card::part(overlay){--aura-surface-level:4;--vaadin-notification-background:var(--aura-surface);view-transition-name:vaadin-notification}::view-transition-group(vaadin-notification){border-radius:var(--vaadin-notification-border-radius,var(--vaadin-radius-l));z-index:1}@supports (background:-webkit-named-image(i)){::view-transition-group(vaadin-notification){backdrop-filter:none}}vaadin-notification-card vaadin-card{--vaadin-card-gap:var(--vaadin-gap-xs) var(--vaadin-gap-s);color:var(--vaadin-text-color-secondary)}vaadin-notification-card vaadin-button{--aura-surface-level:8;--aura-surface-opacity:0.3}:where(:root,:host){--vaadin-overlay-border-width:0px;--vaadin-overlay-backdrop-background:light-dark(oklch(from var(--aura-background-light) calc(l * 0.1) c h/0.15),rgba(0,0,0,.3));--aura-overlay-outline-color:light-dark(oklch(from var(--aura-background-light) 0.1 c h/max(0.04,0.03 + 0.04 * var(--aura-contrast))),oklch(from var(--aura-background-dark) 0.1 c h/max(0.04,0.03 + 0.04 * var(--aura-contrast))));--aura-overlay-inner-outline-color:hsla(0deg,0%,100%,max(3%,2% + 4% * var(--aura-contrast)));--aura-overlay-shadow:inset 0 0 0 1px var(--aura-overlay-inner-outline-color),0 0 0 1px var(--aura-overlay-outline-color),var(--aura-shadow-m);--aura-overlay-backdrop-filter:blur(12px) brightness(1.2) saturate(1.2);--aura-overlay-surface-opacity:0.85;@media (prefers-reduced-transparency:reduce){--aura-overlay-surface-opacity:1!important}}::part(overlay){--vaadin-overlay-background:var(--aura-surface);--aura-surface-level:4;--aura-surface-opacity:var(--aura-overlay-surface-opacity);-webkit-backdrop-filter:var(--aura-overlay-backdrop-filter);backdrop-filter:var(--aura-overlay-backdrop-filter);box-shadow:var(--aura-overlay-shadow);color:var(--vaadin-text-color);font-family:var(--aura-font-family);font-size:var(--aura-font-size-m);font-weight:var(--aura-font-weight);line-height:var(--aura-line-height-m)}vaadin-select-item::part(content){align-items:center;display:flex;gap:inherit}vaadin-select[theme~=subtle]::part(input-field){--vaadin-input-field-border-color:transparent;--vaadin-input-field-background:transparent}vaadin-select[theme~=subtle]::part(toggle-button){opacity:0;transition:opacity .2s;--vaadin-icon-size:0.75lh}vaadin-select[theme~=subtle][focus-ring]::part(toggle-button){opacity:1}@media (any-hover:hover){vaadin-select[theme~=subtle]:hover::part(toggle-button){opacity:1}}vaadin-select[theme~=auto-size]{--vaadin-field-default-width:auto}:where(:root,:host){--vaadin-side-nav-label-line-height:var(--aura-line-height-xs);--vaadin-side-nav-label-font-weight:var(--aura-font-weight-medium);--vaadin-side-nav-item-font-weight:var(--aura-font-weight-medium);--vaadin-side-nav-item-border-width:1px;--vaadin-side-nav-items-gap:var(--vaadin-gap-xs)}vaadin-side-nav+vaadin-side-nav{margin-top:var(--vaadin-gap-l)}vaadin-side-nav-item::part(content){background-clip:padding-box;transition:color .12s,border-color .12s,background-color .12s;--aura-surface-level:3}vaadin-side-nav-item:not([disabled])::part(content):hover{--vaadin-side-nav-item-color:var(--vaadin-text-color)}vaadin-side-nav-item[current]::part(content){--vaadin-side-nav-item-background:var(--aura-surface);--vaadin-side-nav-item-border-color:var(--vaadin-border-color-secondary)}vaadin-side-nav[theme~=contrast] vaadin-side-nav-item[current]::part(content){background:var(--aura-surface-solid);border-color:transparent;color-scheme:var(--_side-nav-current-item-color-scheme,dark);outline-offset:2px}vaadin-side-nav[theme~=contrast] vaadin-side-nav-item[current]>:not([slot=children]){--aura-red:var(--vaadin-text-color);--aura-red-text:var(--vaadin-text-color);--aura-orange:var(--vaadin-text-color);--aura-orange-text:var(--vaadin-text-color);--aura-yellow:var(--vaadin-text-color);--aura-yellow-text:var(--vaadin-text-color);--aura-green:var(--vaadin-text-color);--aura-green-text:var(--vaadin-text-color);--aura-blue:var(--vaadin-text-color);--aura-blue-text:var(--vaadin-text-color);--aura-purple:var(--vaadin-text-color);--aura-purple-text:var(--vaadin-text-color)}@container style(--aura-color-scheme: dark){[slot=drawer]{--_side-nav-current-item-color-scheme:light}}@container style(--aura-content-color-scheme: dark){vaadin-app-layout>:not([slot]){--_side-nav-current-item-color-scheme:light}}@container style(--aura-content-color-scheme: light){vaadin-app-layout>:not([slot]){--_side-nav-current-item-color-scheme:dark}}@media (prefers-color-scheme:dark){@container style(--aura-content-color-scheme: light dark){vaadin-app-layout>:not([slot]){--_side-nav-current-item-color-scheme:light}}@container style(--aura-color-scheme: light dark){[slot=drawer]{--_side-nav-current-item-color-scheme:light}}}vaadin-side-nav:not(:has([slot=label]))::part(label){display:none}:where(:root,:host){cursor:default;--_vaadin-icon-chevron-down:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>')}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/aura",
-  "version": "25.0.0-alpha18",
+  "version": "25.0.0-alpha20",
   "publishConfig": {
     "access": "public"
   },
@@ -18,7 +18,12 @@
   },
   "main": "aura.css",
   "type": "module",
+  "scripts": {
+    "build": "postcss ./aura.css --dir dist"
+  },
   "files": [
+    "dist",
+    "src",
     "*.css"
   ],
   "keywords": [
@@ -28,5 +33,12 @@
     "web-components",
     "web-component"
   ],
-  "gitHead": "cb5cafb5687a117ebead1b81e2116991cec13abe"
+  "devDependencies": {
+    "cssnano": "^7.1.1",
+    "postcss": "^8.1.0",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1",
+    "postcss-url": "^10.1.3"
+  },
+  "gitHead": "c948aae591a30b432f3784000d4677674cae56e0"
 }

package/src/color-scheme.css

@@ -0,0 +1,9 @@
+:where(:root, :host) {
+  --aura-color-scheme: light;
+  --aura-content-color-scheme: var(--aura-color-scheme);
+  --aura-notification-color-scheme: var(--aura-color-scheme);
+}
+
+html {
+  color-scheme: var(--aura-color-scheme);
+}

package/src/color.css

@@ -0,0 +1,107 @@
+:where(:root, :host) {
+  --aura-contrast: 1;
+
+  --aura-accent-light: hsl(220, 80%, 47%);
+  --aura-accent-dark: hsl(220, 75%, 55%);
+
+  --_color-base: light-dark(
+    oklch(from var(--aura-background-light) 0.1 calc(c / 2 + c * (1 - c)) h),
+    oklch(from var(--aura-background-dark) 1 c h)
+  );
+  --vaadin-text-color: light-dark(
+    color-mix(in srgb, var(--_color-base) calc(90% + 5% * var(--aura-contrast)), transparent),
+    color-mix(in srgb, #fff calc(90% + 5% * var(--aura-contrast)), transparent)
+  );
+  --vaadin-text-color-secondary: light-dark(
+    color-mix(in srgb, var(--_color-base) calc(55% + 10% * var(--aura-contrast)), transparent),
+    color-mix(in srgb, var(--_color-base) calc(57% + 10% * var(--aura-contrast)), transparent)
+  );
+  --vaadin-text-color-disabled: color-mix(
+    in srgb,
+    var(--_color-base) calc(30% + 10% * var(--aura-contrast)),
+    transparent
+  );
+
+  --_border-color-base: light-dark(
+    oklch(from var(--aura-background-light) 0.1 c h),
+    oklch(from var(--aura-background-dark) 0.85 c h)
+  );
+  --vaadin-border-color: color-mix(
+    in srgb,
+    var(--_border-color-base) calc(14% + 6% * var(--aura-contrast)),
+    transparent
+  );
+  --vaadin-border-color-secondary: light-dark(
+    color-mix(in srgb, var(--_border-color-base) max(5%, 5% + 3% * var(--aura-contrast)), transparent),
+    color-mix(in srgb, var(--_border-color-base) max(6%, 5% + 5% * var(--aura-contrast)), transparent)
+  );
+
+  --aura-background-light: oklch(from var(--aura-accent-light) min(1, l + (1 - l) * 0.9) calc(c * 0.05) h);
+  --aura-background-dark: oklch(from var(--aura-accent-dark) max(0, l/2 - (1 - l) * 0.2) calc(c * 0.05) h);
+  --aura-background: light-dark(var(--aura-background-light), var(--aura-background-dark));
+
+  --_bg-alt: oklch(
+    from var(--aura-background) calc(l + c) min(c, c * 2 - l/20) calc(h + 180 * var(--_safari-17-deg, 1deg) * l * c * 4)
+  );
+  --_bg-accent: radial-gradient(
+    circle at 0% 0%,
+    light-dark(
+      oklch(from var(--aura-background-light) min(1, l + c * 3) min(c, c * 3 - l/20) h),
+      oklch(from var(--aura-background-dark) min(1, l + c) clamp(0, c * 1.5, 0.4) h)
+    ),
+    transparent 30%
+  );
+  --aura-app-background:
+    var(--_bg-accent), radial-gradient(circle at 25% 0% in xyz, var(--aura-background) 33%, var(--_bg-alt));
+
+  --aura-accent-color: light-dark(var(--aura-accent-light), var(--aura-accent-dark));
+  --vaadin-focus-ring-color: var(--aura-accent-color);
+  accent-color: var(--aura-accent-color);
+  /* Workaround Safari 17 limitation and compute these separately for light and dark */
+  --aura-accent-contrast: light-dark(
+    oklch(from var(--aura-accent-light) clamp(0, (0.62 - l) * 1000, 1) 0 0),
+    oklch(from var(--aura-accent-dark) clamp(0, (0.62 - l) * 1000, 1) 0 0)
+  );
+
+  --aura-accent-text-light: color-mix(
+    in srgb,
+    var(--aura-accent-light) calc(70% - 15% * var(--aura-contrast)),
+    var(--vaadin-text-color)
+  );
+  --aura-accent-text-dark: color-mix(
+    in srgb,
+    var(--aura-accent-dark) calc(70% - 15% * var(--aura-contrast)),
+    var(--vaadin-text-color)
+  );
+  --aura-accent-text: light-dark(var(--aura-accent-text-light), var(--aura-accent-text-dark));
+
+  /* TODO probably broken for Safari 17 */
+  --vaadin-user-color: var(--aura-accent-color);
+
+  --vaadin-background-container: color-mix(
+    in srgb,
+    var(--_color-base) calc(3% + min(3%, 1% * var(--aura-contrast))),
+    transparent
+  );
+
+  --vaadin-background-container-strong: color-mix(
+    in srgb,
+    var(--_color-base) calc(7% + min(8%, 1.5% * var(--aura-contrast))),
+    transparent
+  );
+
+  color: var(--vaadin-text-color);
+  background: var(--aura-app-background);
+  background-size: 100vw 100vh;
+  background-attachment: fixed;
+}
+
+@supports (color: hsl(0 0 0)) {
+  :where(:root, :host) {
+    --_safari-17-deg: 1;
+  }
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  color: var(--vaadin-text-color);
+}

package/src/components/app-layout.css

@@ -0,0 +1,135 @@
+:where(:root, :host) {
+  --aura-app-layout-inset: 1.5vmin;
+  --aura-app-layout-radius: var(--vaadin-radius-l);
+  --_aura-mdl-border: 1px;
+  --vaadin-app-layout-navbar-padding-top: 0;
+  --vaadin-app-layout-navbar-padding-bottom: 0;
+  --vaadin-app-layout-navbar-padding-inline-start: 0;
+  --vaadin-app-layout-navbar-padding-inline-end: 0;
+}
+
+/* Aligned with App Layout overlay breakpoint */
+@media (width <= 800px), (height <= 600px) {
+  html {
+    --aura-app-layout-inset: 0px !important;
+    --_aura-mdl-border: 0px;
+  }
+}
+
+html:has(vaadin-app-layout) {
+  &,
+  body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    box-sizing: border-box;
+  }
+}
+
+vaadin-app-layout {
+  --_app-layout-radius: clamp(0px, var(--aura-app-layout-radius), var(--aura-app-layout-inset) * 100);
+  padding-block: var(--aura-app-layout-inset);
+  padding-inline-end: var(--aura-app-layout-inset);
+  padding-top: calc(var(--aura-app-layout-inset) + var(--_vaadin-app-layout-navbar-offset-size));
+}
+
+vaadin-app-layout[overlay] {
+  &::part(navbar),
+  &::part(drawer) {
+    --vaadin-app-layout-navbar-background: var(--aura-surface);
+    --vaadin-app-layout-drawer-background: var(--aura-surface);
+    --aura-surface-opacity: var(--aura-overlay-surface-opacity);
+    -webkit-backdrop-filter: var(--aura-overlay-backdrop-filter);
+    backdrop-filter: var(--aura-overlay-backdrop-filter);
+  }
+}
+
+vaadin-app-layout:is([overlay], :not([drawer-opened])) {
+  padding-inline-start: var(--aura-app-layout-inset);
+}
+
+vaadin-app-layout::part(navbar) {
+  justify-content: space-between;
+}
+
+vaadin-app-layout:not([overlay])::part(navbar) {
+  --vaadin-app-layout-navbar-background: transparent;
+}
+
+vaadin-app-layout:not([overlay])::part(drawer) {
+  padding-block: var(--aura-app-layout-inset);
+  padding-inline: max(0px, var(--aura-app-layout-inset) - var(--vaadin-padding-s));
+}
+
+vaadin-app-layout > vaadin-scroller[slot='drawer'] {
+  padding-inline: var(--vaadin-padding-m);
+  scrollbar-width: thin;
+}
+
+vaadin-app-layout > vaadin-scroller:nth-child(1 of [slot='drawer']) {
+  padding-top: var(--vaadin-padding-s);
+}
+
+vaadin-app-layout > vaadin-scroller:nth-last-child(1 of [slot='drawer']) {
+  padding-bottom: var(--vaadin-padding-s);
+}
+
+vaadin-app-layout > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+  color-scheme: var(--aura-content-color-scheme);
+  color: var(--vaadin-text-color);
+  background: linear-gradient(var(--aura-surface), var(--aura-surface)), var(--aura-app-background);
+  background-clip: padding-box;
+  background-origin: border-box;
+  min-height: 100%;
+  box-sizing: border-box;
+  border-radius: var(--_app-layout-radius);
+  border: var(--_aura-mdl-border) solid var(--vaadin-border-color-secondary);
+  border-block-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
+  border-inline-end-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
+}
+
+vaadin-app-layout > vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+  & > vaadin-master-detail-layout,
+  &:not([drawer])::part(detail) {
+    border-start-end-radius: var(--_app-layout-radius);
+    border-end-end-radius: var(--_app-layout-radius);
+  }
+
+  &::part(backdrop) {
+    border-radius: calc(var(--_app-layout-radius) - var(--_aura-mdl-border));
+  }
+
+  &:is([drawer][has-detail]) {
+    border-color: light-dark(var(--vaadin-border-color), var(--vaadin-border-color-secondary));
+  }
+}
+
+vaadin-app-layout:has([slot='navbar']):has([slot='drawer']) {
+  padding-top: var(--_vaadin-app-layout-navbar-offset-size);
+
+  &::part(drawer) {
+    padding-top: 0;
+  }
+}
+
+vaadin-app-layout:has([slot='drawer']):not([overlay]):not([drawer-opened])
+  > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+  border-inline-start-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
+}
+
+vaadin-app-layout:has([slot='navbar']):has([slot='drawer'])[drawer-opened]:not([overlay])
+  > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+  border-start-start-radius: var(--aura-app-layout-radius);
+}
+
+vaadin-app-layout:has([slot='navbar']):has([slot='drawer'])
+  > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+  border-top-width: var(--_aura-mdl-border);
+}
+
+vaadin-app-layout:has([slot='navbar'])
+  > :is(:not([slot]), [slot='drawer'])
+  vaadin-drawer-toggle:not([theme~='permanent']),
+vaadin-app-layout:not(:has([slot='navbar'])) > [slot='drawer'] vaadin-drawer-toggle:not([theme~='permanent']) {
+  display: none;
+}

package/src/components/avatar.css

@@ -0,0 +1,15 @@
+:where(:root, :host) {
+  --vaadin-avatar-border-color: var(--vaadin-border-color-secondary);
+  --vaadin-avatar-background: var(--vaadin-background-container);
+  --vaadin-avatar-font-weight: var(--aura-font-weight-medium);
+  --vaadin-avatar-font-size: var(--aura-font-size-m);
+}
+
+vaadin-avatar:not([img]) {
+  --_shade: color-mix(in srgb, var(--vaadin-border-color) 20%, transparent);
+  background-image: linear-gradient(
+    light-dark(transparent, var(--_shade)),
+    transparent 50%,
+    light-dark(var(--_shade), transparent)
+  );
+}

package/src/components/button.css

@@ -0,0 +1,113 @@
+:where(:root, :host) {
+  --vaadin-button-border-color: var(--vaadin-border-color);
+  --vaadin-button-shadow: 0 1px 4px -1px hsla(0, 0%, 0%, 0.07);
+}
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle) {
+  transition: scale 180ms;
+  position: relative;
+}
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='tertiary'])) {
+  --aura-surface-level: 6;
+  --aura-surface-opacity: 0.3;
+  box-shadow: var(--vaadin-button-shadow);
+}
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([theme~='primary'], [theme~='tertiary']) {
+  background: var(--vaadin-button-background, var(--aura-surface) padding-box);
+}
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='primary'])) {
+  outline-offset: calc(var(--vaadin-button-border-width, 1px) * -1);
+}
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where([theme~='primary']) {
+  outline-offset: 2px;
+}
+
+/*
+Increase padding, but only for buttons that don't have an icon in the default slot.
+Buttons that place an icon in the default slot are assumed to be icon-only buttons.
+*/
+/* prettier-ignore */
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not(:has(:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
+  --vaadin-button-padding: round(var(--vaadin-padding-s) / 1.4, 1px)
+    max(var(--vaadin-padding-m), round(var(--vaadin-radius-m) / 1.5, 1px));
+}
+
+/* Decrease padding when an icon is placed in the prefix or suffix slot */
+: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));
+}
+
+/* prettier-ignore */
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):has([slot='suffix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)),
+vaadin-drawer-toggle:empty,
+vaadin-menu-bar-button[aria-haspopup='true'] {
+  padding-inline-end: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));
+}
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'] {
+  --vaadin-button-font-weight: var(--aura-font-weight-semibold);
+  --vaadin-button-text-color: light-dark(var(--vaadin-background-color), var(--aura-background-dark));
+}
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[disabled][theme~='primary'] {
+  --vaadin-button-text-color: var(--vaadin-text-color-secondary);
+}
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([disabled])::before {
+  content: '';
+  position: absolute;
+  inset: calc(var(--vaadin-button-border-width, 1px) * -1);
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: currentColor;
+  opacity: 0;
+  transition:
+    opacity 100ms,
+    background-color 100ms;
+}
+
+@supports (color: hsl(0 0 0)) {
+  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([disabled])::before {
+    background-color: oklch(from currentColor calc(l + 0.4 - c) c h);
+  }
+}
+
+@media (any-hover: hover) {
+  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):hover:not([disabled], [active])::before {
+    opacity: 0.05;
+  }
+
+  /* prettier-ignore */
+  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary']:hover:not([disabled], [active])::before {
+    opacity: 0.12;
+  }
+}
+
+@media (min-resolution: 2x) {
+  /* prettier-ignore */
+  :is(vaadin-button, vaadin-menu-bar-button[first-visible][last-visible], vaadin-drawer-toggle)[active]:not([disabled], [aria-disabled='true']) {
+    scale: 0.98;
+    transition-duration: 50ms;
+  }
+}
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[active]:not([disabled])::before {
+  transition-duration: 0s;
+  opacity: 0.08;
+  background: oklch(from currentColor min(c, 1 - l + c) calc(c * 0.9) h);
+}
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'][active]:not([disabled])::before {
+  opacity: 0.16;
+}
+
+@container style(--_gap: 0) {
+  vaadin-menu-bar-button:not(:first-of-type) {
+    border-inline-start-color: transparent;
+  }
+}

package/src/components/card.css

@@ -0,0 +1,43 @@
+:where(:root, :host) {
+  --vaadin-card-title-font-weight: var(--aura-font-weight-medium);
+  --vaadin-card-padding: var(--vaadin-padding-l);
+  --vaadin-card-gap: var(--vaadin-gap-m) var(--vaadin-gap-l);
+  --vaadin-card-border-color: var(--vaadin-border-color-secondary);
+  --vaadin-card-background: var(--aura-surface) padding-box;
+}
+
+vaadin-card {
+  --vaadin-card-background: var(--aura-surface) padding-box;
+  --aura-surface-level: 2;
+}
+
+vaadin-card[theme~='outlined'] {
+  border: var(--vaadin-card-border-width, 1px) solid transparent;
+  --vaadin-card-padding: calc(var(--vaadin-padding-l) - var(--vaadin-card-border-width, 1px));
+}
+
+vaadin-card[theme~='outlined']::before {
+  inset: calc(var(--vaadin-card-border-width, 1px) * -1);
+}
+
+vaadin-card[theme~='outlined'][theme~='cover-media'] [slot='media']:is(img, video, svg, vaadin-icon) {
+  /* TODO relies on internal API - should refactor base styles to support this (background-clip: padding-box) */
+  margin-inline: calc((var(--_padding) + var(--vaadin-card-border-width, 1px)) * -1);
+  margin-top: calc((var(--_padding) + var(--vaadin-card-border-width, 1px)) * -1);
+  width: calc(100% + (var(--_padding) + var(--vaadin-card-border-width, 1px)) * 2);
+}
+
+vaadin-card[theme~='elevated'] {
+  --aura-surface-opacity: 0.7;
+  --aura-surface-level: 3;
+  --_shadow-color: light-dark(
+    oklch(from var(--aura-background-light) calc(l - l * 0.8) calc(c / 10) h / 0.1),
+    oklch(from var(--aura-background-dark) calc(l - l * 0.8) calc(c / 10) h / 0.2)
+  );
+  --vaadin-card-shadow: 0 1px 6px -1px var(--_shadow-color);
+  background-clip: padding-box;
+}
+
+vaadin-card[theme~='stretch-media']:not([theme~='cover-media']) [slot='media']:is(img, video, svg, vaadin-icon) {
+  border-radius: var(--vaadin-radius-s);
+}

package/src/components/checkbox-radio.css

@@ -0,0 +1,68 @@
+:where(:root, :host) {
+  --vaadin-radio-button-dot-size: 6px;
+  --vaadin-checkbox-size: round(1lh - 2px, 2px);
+  --vaadin-radio-button-size: round(1lh - 2px, 2px);
+}
+
+vaadin-checkbox::part(checkbox),
+vaadin-radio-button::part(radio) {
+  --vaadin-checkbox-background: var(--aura-surface);
+  --vaadin-radio-button-background: var(--aura-surface);
+  transition: background-color 100ms;
+}
+
+vaadin-checkbox:not([readonly], [disabled])::part(checkbox),
+vaadin-radio-button:not([disabled])::part(radio) {
+  --aura-surface-level: 4;
+  box-shadow: 0 2px 1px -1px hsla(0, 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) {
+  /* TODO add/use selection color */
+  --vaadin-checkbox-background: var(--aura-accent-color);
+  --vaadin-checkbox-color: var(--aura-accent-contrast);
+}
+
+vaadin-radio-button[checked]:not([readonly], [disabled])::part(radio) {
+  /* TODO add/use selection color */
+  --vaadin-radio-button-background: var(--aura-accent-color);
+  --vaadin-radio-button-color: var(--aura-accent-contrast);
+}
+
+vaadin-checkbox:not([readonly], [disabled])::part(checkbox)::before,
+vaadin-radio-button:not([disabled])::part(radio)::before {
+  content: '';
+  position: absolute;
+  inset: calc(var(--vaadin-input-field-border-width, 1px) * -1);
+  border-radius: inherit;
+  background-color: currentColor;
+  opacity: 0;
+  transition:
+    opacity 100ms,
+    background-color 100ms;
+}
+
+@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: 0.04;
+  }
+}
+
+vaadin-checkbox[active]:not([readonly], [disabled])::part(checkbox)::before,
+vaadin-radio-button[active]:not([disabled])::part(radio)::before {
+  opacity: 0.1;
+  background: #000;
+}