refactor: simplify and optimize some CSS selectors (#10677)

* refactor: optimize and simplify Aura selectors

* revert :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot]))

Author: vursen

packages/aura/src/components/accordion-details.css

@@ -18,11 +18,11 @@ vaadin-accordion-panel:not([theme~='no-padding'], [theme~='reverse'])::part(cont
 }
 
 :is(vaadin-details, vaadin-accordion-panel)[theme~='reverse'] {
-  [slot='summary']::part(content) {
+  > [slot='summary']::part(content) {
     width: 100%;
   }
 
-  [slot='summary']::part(toggle) {
+  > [slot='summary']::part(toggle) {
     order: 1;
     margin-inline-start: auto;
   }

packages/aura/src/components/app-layout.css

@@ -32,7 +32,7 @@ vaadin-app-layout[overlay]::part(drawer) {
 }
 
 vaadin-app-layout:is([overlay], :not([drawer-opened])),
-vaadin-app-layout:not(:has([slot='drawer'])) {
+vaadin-app-layout:not([has-drawer]) {
   padding-inline-start: var(--aura-app-layout-inset);
 }
 
@@ -52,18 +52,10 @@ vaadin-app-layout[has-navbar]::part(drawer) {
 }
 
 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']) {
   /* TODO would need a dedicated padding-top property */
+  --vaadin-scroller-padding-inline: var(--vaadin-padding-m);
   --vaadin-scroller-padding-block: var(--vaadin-padding-s);
-}
-
-vaadin-app-layout > vaadin-scroller:nth-last-child(1 of [slot='drawer']) {
-  /* TODO would need a dedicated padding-bottom property */
-  --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])) {

packages/aura/src/components/button.css

@@ -35,19 +35,19 @@ Increase padding, but only for buttons that don't have an icon in the default sl
 Buttons that place an icon in the default slot are assumed to be icon-only buttons.
 */
 /* prettier-ignore */
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(:has(:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(:has(> :is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
   --vaadin-button-padding: round(var(--vaadin-padding-s) / 1.4, 1px)
     max(var(--vaadin-padding-m), round(var(--vaadin-radius-m) / 1.5, 1px));
 }
 
 /* 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)),
+: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, vaadin-crud-edit):has([slot='suffix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)),
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):has(> [slot='suffix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)),
 vaadin-drawer-toggle:empty,
 vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
   padding-inline-end: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));

packages/aura/src/components/confirm-dialog.css

@@ -9,6 +9,6 @@ vaadin-confirm-dialog::part(confirm-button) {
   flex: 1;
 }
 
-vaadin-confirm-dialog :is([slot='cancel-button'], [slot='reject-button'], [slot='confirm-button']) {
+vaadin-confirm-dialog > :is([slot='cancel-button'], [slot='reject-button'], [slot='confirm-button']) {
   display: flex;
 }

packages/aura/src/components/item-overlay.css

@@ -12,16 +12,14 @@
   --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:where([role])
-) {
+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:where([role]) {
   font-weight: var(--aura-font-weight-medium);
   --vaadin-item-checkmark-color: var(--aura-accent-text-color);
   -webkit-user-select: none;

packages/aura/src/components/menu-bar.css

@@ -6,7 +6,7 @@
 
 @media (any-hover: hover) {
   /* Increase specificity to reset hover styles */
-  vaadin-menu-bar-button vaadin-menu-bar-item:not([disabled]):not([tabindex]):hover {
+  vaadin-menu-bar-button > vaadin-menu-bar-item:not([disabled]):not([tabindex]):hover {
     background: transparent;
   }
 }
@@ -20,11 +20,11 @@ vaadin-menu-bar-button[aria-haspopup='true']::part(suffix)::after {
   --vaadin-icon-visual-size: 90%;
 }
 
-vaadin-menu-bar-button vaadin-menu-bar-item {
+vaadin-menu-bar-button > vaadin-menu-bar-item {
   padding-inline: 0;
 }
 
-vaadin-menu-bar-button vaadin-menu-bar-item::part(content) {
+vaadin-menu-bar-button > vaadin-menu-bar-item::part(content) {
   padding-inline: 0;
   gap: var(--vaadin-button-gap, var(--vaadin-gap-s));
 }

packages/aura/src/components/message-input.css

@@ -1,29 +1,29 @@
-vaadin-message-input vaadin-text-area::part(input-field) {
+vaadin-message-input > vaadin-text-area::part(input-field) {
   --vaadin-input-field-background: transparent;
 }
 
-vaadin-message-input[theme~='icon-button'] vaadin-message-input-button {
+vaadin-message-input[theme~='icon-button'] > vaadin-message-input-button {
   width: var(--vaadin-icon-size, 1lh);
   height: var(--vaadin-icon-size, 1lh);
   color: transparent;
   position: relative;
   contain: strict;
 }
 
-vaadin-message-input[theme~='icon-button'] vaadin-message-input-button::before {
+vaadin-message-input[theme~='icon-button'] > vaadin-message-input-button::before {
   content: '';
   position: absolute;
   inset: 0;
   mask-image: var(--_vaadin-icon-paper-airplane);
   background: var(--vaadin-button-text-color);
 }
 
-vaadin-message-input[theme~='icon-button'][dir='rtl'] vaadin-message-input-button::before {
+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 {
+  vaadin-message-input[theme~='icon-button'] > vaadin-message-input-button {
     forced-color-adjust: none;
     --vaadin-button-text-color: CanvasText;
   }

packages/aura/src/components/side-nav.css

@@ -51,7 +51,7 @@ vaadin-side-nav-item::part(toggle-button) {
 
 /* Filled variant */
 
-vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current]::part(content) {
+vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current]::part(content) {
   --vaadin-side-nav-item-background: var(--aura-accent-color) border-box;
   --vaadin-side-nav-item-text-color: var(--aura-accent-contrast-color);
   --vaadin-text-color: var(--vaadin-side-nav-item-text-color);

packages/aura/src/components/tabs.css

@@ -89,7 +89,7 @@ vaadin-tab[selected] {
 
 /* Filled variant */
 
-vaadin-tabs[theme~='filled'] vaadin-tab[selected] {
+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);

packages/aura/src/components/upload.css

@@ -55,7 +55,7 @@ vaadin-upload-file-list li {
   }
 }
 
-vaadin-upload:not([theme~='no-border']) vaadin-upload-file-list:has(li) {
+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);
@@ -130,13 +130,13 @@ vaadin-upload[theme~='no-border'] {
   --_divider-offset-end: 0px;
   outline-offset: 2px;
 
-  vaadin-upload-file-list::part(list) {
+  > vaadin-upload-file-list::part(list) {
     display: flex;
     flex-direction: column;
     gap: var(--vaadin-gap-s);
   }
 
-  vaadin-upload-file-list li:first-child {
+  > vaadin-upload-file-list li:first-child {
     margin-top: var(--vaadin-gap-s);
   }