@vaadin/aura 25.0.0-alpha20 → 25.0.0-beta1

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

@@ -0,0 +1,72 @@
+:where(:root),
+:where(:host) {
+  --vaadin-rich-text-editor-toolbar-background: transparent;
+  --vaadin-rich-text-editor-toolbar-padding: var(--vaadin-padding-xs);
+  --vaadin-rich-text-editor-toolbar-gap: var(--vaadin-gap-xs) var(--vaadin-gap-m);
+  --vaadin-rich-text-editor-toolbar-button-background: transparent;
+  --vaadin-rich-text-editor-toolbar-button-border-radius: calc(var(--vaadin-radius-m) - 2px);
+  --vaadin-rich-text-editor-toolbar-button-padding: var(--vaadin-padding-xs);
+  --vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color-secondary);
+}
+
+vaadin-rich-text-editor {
+  --vaadin-icon-visual-size: 90%;
+  --vaadin-rich-text-editor-background: var(--aura-surface) padding-box;
+  --aura-surface-level: 4;
+  --aura-surface-opacity: 0.7 !important;
+  box-shadow: 0 2px 1px -1px hsla(0, 0%, 0%, 0.04);
+
+  &:not(:focus-within) {
+    --vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color-disabled);
+  }
+}
+
+vaadin-rich-text-editor::part(toolbar) {
+  contain: paint;
+}
+
+vaadin-rich-text-editor::part(toolbar-group) {
+  gap: 1px;
+  align-items: center;
+}
+
+vaadin-rich-text-editor::part(toolbar-group)::before {
+  content: '';
+  position: absolute;
+  width: 1px;
+  height: 1lh;
+  background: var(--vaadin-border-color-secondary);
+  translate: calc(var(--vaadin-gap-m) / -2);
+}
+
+vaadin-rich-text-editor::part(toolbar-button) {
+  transition:
+    color 80ms,
+    background-color 80ms,
+    scale 180ms;
+  outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
+  border: 1px solid transparent;
+  position: relative;
+}
+
+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: 0.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);
+  }
+}

package/src/components/side-nav.css

@@ -1,4 +1,5 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --vaadin-side-nav-label-line-height: var(--aura-line-height-xs);
   --vaadin-side-nav-label-font-weight: var(--aura-font-weight-medium);
   --vaadin-side-nav-item-font-weight: var(--aura-font-weight-medium);
@@ -15,76 +16,51 @@ vaadin-side-nav-item::part(content) {
     color 120ms,
     border-color 120ms,
     background-color 120ms;
-  background-clip: padding-box;
   --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-text-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);
+  --_accent: light-dark(
+    oklch(from var(--aura-accent-light) calc(l + 0.2) c h / min(0.3, c / 2)),
+    oklch(from var(--aura-accent-dark) calc(l - 0.2) c h / min(0.3, c / 2))
+  );
+  --_accent-border: light-dark(
+    oklch(from var(--aura-accent-light) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast))),
+    oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast)))
+  );
+  --vaadin-side-nav-item-background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
+  --vaadin-side-nav-item-text-color: var(--aura-accent-text);
+  --vaadin-side-nav-item-border-color: var(--_accent-border);
 }
 
-/* Contrast variant */
+/* Filled variant */
 
-vaadin-side-nav[theme~='contrast'] vaadin-side-nav-item[current]::part(content) {
-  color-scheme: var(--_side-nav-current-item-color-scheme, dark);
-  background: var(--aura-surface-solid);
-  border-color: transparent;
+vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current]::part(content) {
+  --vaadin-side-nav-item-background: var(--aura-accent-color) border-box;
+  --vaadin-side-nav-item-text-color: var(--aura-accent-contrast);
   outline-offset: 2px;
 }
 
-vaadin-side-nav[theme~='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;
-    }
-  }
-}
-
-/* TODO bug in component/base styles: hide label part if no label is provided */
-vaadin-side-nav:not(:has([slot='label']))::part(label) {
-  display: none;
+/* Badges and other content that uses the palette inside a filled nav item */
+vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current] > :not([slot='children']):not([slot='tooltip']) {
+  --vaadin-text-color: var(--vaadin-side-nav-item-text-color);
+  --vaadin-text-color-secondary: var(--vaadin-side-nav-item-text-color);
+  --aura-accent-color: var(--vaadin-side-nav-item-text-color);
+  --aura-accent-text: var(--vaadin-side-nav-item-text-color);
+  --aura-red: var(--vaadin-side-nav-item-text-color);
+  --aura-red-text: var(--vaadin-side-nav-item-text-color);
+  --aura-orange: var(--vaadin-side-nav-item-text-color);
+  --aura-orange-text: var(--vaadin-side-nav-item-text-color);
+  --aura-yellow: var(--vaadin-side-nav-item-text-color);
+  --aura-yellow-text: var(--vaadin-side-nav-item-text-color);
+  --aura-green: var(--vaadin-side-nav-item-text-color);
+  --aura-green-text: var(--vaadin-side-nav-item-text-color);
+  --aura-blue: var(--vaadin-side-nav-item-text-color);
+  --aura-blue-text: var(--vaadin-side-nav-item-text-color);
+  --aura-purple: var(--vaadin-side-nav-item-text-color);
+  --aura-purple-text: var(--vaadin-side-nav-item-text-color);
 }

package/src/components/tabs.css

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

package/src/components/upload.css

@@ -0,0 +1,154 @@
+:where(:root),
+:where(:host) {
+  --vaadin-upload-background: var(--aura-surface) padding-box;
+  --vaadin-upload-border: 1px solid var(--vaadin-border-color-secondary);
+  --vaadin-upload-padding: var(--vaadin-padding-s);
+  --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;
+  padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
+  min-width: fit-content;
+  margin-inline-start: calc(var(--vaadin-upload-padding) * -1);
+}
+
+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);
+  padding-block: var(--vaadin-padding-m);
+  margin-inline: calc(var(--_divider-offset-start, 0) * -1) calc(var(--_divider-offset-end, 0) * -1);
+
+  &::part(done-icon),
+  &::part(warning-icon),
+  &::part(commands) {
+    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) {
+    max-height: 2lh;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  &[complete]::part(status) {
+    height: 1lh; /* ensure some height to transition from */
+    visibility: hidden;
+    transition: 200ms max-height;
+    max-height: 0;
+  }
+
+  &[complete] vaadin-progress-bar {
+    visibility: hidden;
+    transition: 200ms height;
+    height: 0;
+    margin-top: 0;
+  }
+}
+
+vaadin-upload[theme~='no-border'] {
+  --vaadin-upload-padding: 0;
+  --vaadin-upload-background: transparent;
+  --vaadin-upload-border: none;
+  --vaadin-upload-file-list-divider-width: 0;
+  --_divider-offset-start: 0px;
+  --_divider-offset-end: 0px;
+  outline-offset: 2px;
+
+  vaadin-upload-file-list::part(list) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vaadin-gap-s);
+  }
+
+  vaadin-upload-file-list li:first-child {
+    margin-top: var(--vaadin-gap-s);
+  }
+
+  vaadin-upload-file {
+    background: var(--aura-surface) padding-box;
+    border: 1px solid var(--vaadin-border-color-secondary);
+  }
+}
+
+@media (any-hover: hover) {
+  vaadin-upload-file::part(remove-button):hover,
+  vaadin-upload-file::part(retry-button):hover {
+    --vaadin-upload-file-button-text-color: var(--vaadin-text-color);
+  }
+}

package/src/palette.css

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

package/src/shadow.css

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

package/src/size.css

@@ -1,13 +1,17 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --aura-base-size: 16;
   --_size-ref: 16;
   --aura-base-radius: 3;
   --vaadin-radius-s: min(0.25lh, round(var(--aura-base-radius) * 1px + 2px, 1px));
   --vaadin-radius-m: round(var(--aura-base-radius) * 2px + 3px, 1px);
   --vaadin-radius-l: round(var(--aura-base-radius) * 1.5px + 10px, 1px);
+  --vaadin-icon-stroke-width: 1.75;
 }
 
-:where(:root, :host, [theme]) {
+:where(:root),
+:where(:host),
+:where([theme]) {
   --vaadin-padding-xs: round(
     var(--aura-base-size) * 0.25 * pow(var(--aura-base-size) / var(--_size-ref), 0.5) * 1px,
     1px
@@ -38,7 +42,8 @@
 }
 
 @media (pointer: coarse) {
-  :where(:root, :host) {
+  :where(:root),
+  :where(:host) {
     --aura-base-size: 19;
   }
 }

package/src/surface.css

@@ -1,23 +1,36 @@
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --aura-surface-level: 1;
 }
 
 /* List all elements that are surfaces */
-:is(:root, :host),
+:root,
+:host,
 .aura-surface,
 .aura-surface-solid,
+vaadin-accordion-panel[theme~='filled'],
 vaadin-app-layout::part(navbar),
 vaadin-app-layout::part(drawer),
 vaadin-button,
 vaadin-card,
 vaadin-checkbox::part(checkbox),
+vaadin-details[theme~='filled'],
+vaadin-dashboard-widget,
 vaadin-master-detail-layout::part(detail),
 vaadin-menu-bar-button,
 vaadin-message-input,
 vaadin-radio-button::part(radio),
+vaadin-rich-text-editor,
 vaadin-side-nav-item::part(content),
+vaadin-tab,
+vaadin-upload,
+vaadin-upload-file,
 ::part(input-field),
-::part(overlay) {
+::part(overlay),
+vaadin-confirm-dialog::part(overlay),
+vaadin-dialog::part(overlay),
+vaadin-login-overlay::part(overlay),
+vaadin-crud-dialog::part(overlay) {
   --aura-surface-opacity: 0.5;
 
   --aura-surface-solid: light-dark(

package/src/typography.css

@@ -1,6 +1,7 @@
 @import './fonts/InstrumentSans/InstrumentSans.css';
 
-:where(:root, :host) {
+:where(:root),
+:where(:host) {
   --aura-font-family-system: system-ui, ui-sans-serif, sans-serif;
   --aura-font-family-instrument-sans: 'Instrument Sans', var(--aura-font-family-system);
 
@@ -16,7 +17,8 @@
 }
 
 @media (pointer: fine) {
-  :where(:root, :host) {
+  :where(:root),
+  :where(:host) {
     --aura-base-font-size: 14;
   }
 }
@@ -29,17 +31,19 @@
 
 @supports (-webkit-touch-callout: none) {
   @media (pointer: coarse) {
-    :where(:root, :host) {
+    :where(:root),
+    :where(:host) {
       /* iOS/iPadOS optimizations */
 
       /* Support iOS dynamic text size */
       font: -apple-system-body;
-      --aura-base-font-size: 14;
     }
   }
 }
 
-:where(:root, :host, [theme]) {
+:where(:root),
+:where(:host),
+:where([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);
@@ -54,7 +58,8 @@
   --aura-line-height-xl: round(var(--aura-font-size-xl) * var(--aura-base-line-height), 0.125rem);
 }
 
-:where(body, :host) {
+:where(body),
+:where(:host) {
   font-family: var(--aura-font-family);
   font-optical-sizing: auto;
   font-style: normal;
@@ -69,7 +74,9 @@
   text-size-adjust: none;
 }
 
-:where(body, :host, [theme]:not(html)) {
+:where(body),
+:where(:host),
+:where([theme]:not(html)) {
   font-size: var(--aura-font-size-m);
   line-height: var(--aura-line-height-m);
 }