@vaadin/vaadin-lumo-styles 25.0.0-beta3 → 25.0.0-beta5

package/src/components/grid.css

@@ -118,7 +118,7 @@
     overflow: visible;
   }
 
-  [part~='row'] {
+  .row {
     display: flex;
     width: 100%;
     box-sizing: border-box;
@@ -126,23 +126,23 @@
     position: relative;
   }
 
-  [part~='row'][loading] [part~='body-cell'] ::slotted(vaadin-grid-cell-content) {
+  .body-row[loading] .body-cell ::slotted(vaadin-grid-cell-content) {
     visibility: hidden;
   }
 
-  [column-rendering='lazy'] [part~='body-cell']:not([frozen]):not([frozen-to-end]) {
+  [column-rendering='lazy'] .body-cell:not([frozen]):not([frozen-to-end]) {
     transform: translateX(var(--_grid-lazy-columns-start));
   }
 
-  #items [part~='row'] {
+  #items .body-row {
     position: absolute;
   }
 
-  #items [part~='row']:empty {
+  #items .body-row:empty {
     height: 100%;
   }
 
-  [part~='cell']:not([part~='details-cell']) {
+  .cell:not(.details-cell) {
     flex-shrink: 0;
     flex-grow: 1;
     box-sizing: border-box;
@@ -154,7 +154,7 @@
     white-space: nowrap;
   }
 
-  [part~='cell'] {
+  .cell {
     outline: none;
     min-height: var(--lumo-size-m);
     background-color: var(--vaadin-grid-cell-background, var(--lumo-base-color));
@@ -163,7 +163,7 @@
     --_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-m);
   }
 
-  [part~='cell'] > [tabindex] {
+  .cell > [tabindex] {
     display: flex;
     align-items: inherit;
     outline: none;
@@ -173,11 +173,11 @@
 
   /* Switch the focusButtonMode wrapping element to "position: static" temporarily
      when measuring real width of the cells in the auto-width columns. */
-  [measuring-auto-width] [part~='cell'] > [tabindex] {
+  #scroller[measuring-auto-width] .cell > [tabindex] {
     position: static;
   }
 
-  [part~='details-cell'] {
+  .details-cell {
     position: absolute;
     bottom: 0;
     width: 100%;
@@ -185,7 +185,7 @@
     padding: 0;
   }
 
-  [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+  .cell ::slotted(vaadin-grid-cell-content) {
     display: block;
     width: 100%;
     box-sizing: border-box;
@@ -237,13 +237,13 @@
   }
 
   /* Reordering styles */
-  :host([reordering]) [part~='cell'] ::slotted(vaadin-grid-cell-content),
-  :host([reordering]) [part~='resize-handle'],
-  #scroller[no-content-pointer-events] [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+  :host([reordering]) .cell ::slotted(vaadin-grid-cell-content),
+  :host([reordering]) .resize-handle,
+  #scroller[no-content-pointer-events] .cell ::slotted(vaadin-grid-cell-content) {
     pointer-events: none;
   }
 
-  [part~='reorder-ghost'] {
+  .reorder-ghost {
     visibility: hidden;
     position: fixed;
     pointer-events: none;
@@ -263,41 +263,25 @@
   }
 
   /* Resizing styles */
-  [part~='resize-handle'] {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 100%;
-    cursor: col-resize;
-    z-index: 1;
-  }
 
-  [part~='resize-handle']::before {
-    position: absolute;
-    content: '';
-    height: 100%;
-    width: 35px;
-    transform: translateX(-50%);
-  }
-
-  [last-column] [part~='resize-handle']::before,
-  [last-frozen] [part~='resize-handle']::before {
+  [last-column] .resize-handle::before,
+  [last-frozen] .resize-handle::before {
     width: 18px;
     transform: none;
     right: 0;
   }
 
-  [frozen-to-end] [part~='resize-handle'] {
+  [frozen-to-end] .resize-handle {
     left: 0;
     right: auto;
   }
 
-  [frozen-to-end] [part~='resize-handle']::before {
+  [frozen-to-end] .resize-handle::before {
     left: 0;
     right: auto;
   }
 
-  [first-frozen-to-end] [part~='resize-handle']::before {
+  [first-frozen-to-end] .resize-handle::before {
     width: 18px;
     transform: none;
   }
@@ -308,7 +292,7 @@
   }
 
   /* Hide resize handle if scrolled to end */
-  :host(:not([overflow~='end'])) [first-frozen-to-end] [part~='resize-handle'] {
+  :host(:not([overflow~='end'])) [first-frozen-to-end] .resize-handle {
     display: none;
   }
 
@@ -325,15 +309,15 @@
     visibility: hidden;
   }
 
-  #sizer [part~='details-cell'] {
+  #sizer .details-cell {
     display: none !important;
   }
 
-  #sizer [part~='cell'][hidden] {
+  #sizer .cell[hidden] {
     display: none !important;
   }
 
-  #sizer [part~='cell'] {
+  #sizer .cell {
     display: block;
     flex-shrink: 0;
     line-height: 0;
@@ -344,11 +328,11 @@
     border: none !important;
   }
 
-  #sizer [part~='cell']::before {
+  #sizer .cell::before {
     content: '-';
   }
 
-  #sizer [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+  #sizer .cell ::slotted(vaadin-grid-cell-content) {
     display: none !important;
   }
 
@@ -360,32 +344,32 @@
     left: auto;
   }
 
-  :host([dir='rtl']) [part~='reorder-ghost'] {
+  :host([dir='rtl']) .reorder-ghost {
     left: auto;
     right: 0;
   }
 
-  :host([dir='rtl']) [part~='resize-handle'] {
+  :host([dir='rtl']) .resize-handle {
     left: 0;
     right: auto;
   }
 
-  :host([dir='rtl']) [part~='resize-handle']::before {
+  :host([dir='rtl']) .resize-handle::before {
     transform: translateX(50%);
   }
 
-  :host([dir='rtl']) [last-column] [part~='resize-handle']::before,
-  :host([dir='rtl']) [last-frozen] [part~='resize-handle']::before {
+  :host([dir='rtl']) [last-column] .resize-handle::before,
+  :host([dir='rtl']) [last-frozen] .resize-handle::before {
     left: 0;
     right: auto;
   }
 
-  :host([dir='rtl']) [frozen-to-end] [part~='resize-handle'] {
+  :host([dir='rtl']) [frozen-to-end] .resize-handle {
     right: 0;
     left: auto;
   }
 
-  :host([dir='rtl']) [frozen-to-end] [part~='resize-handle']::before {
+  :host([dir='rtl']) [frozen-to-end] .resize-handle::before {
     right: 0;
     left: auto;
   }
@@ -399,25 +383,25 @@
   /* Cell styles */
 
   /* Apply row borders by default and introduce the "no-row-borders" variant */
-  :host(:not([theme~='no-row-borders'])) [part~='cell']:not([part~='details-cell']) {
+  :host(:not([theme~='no-row-borders'])) .cell:not(.details-cell) {
     border-top: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
   }
 
   /* Hide first body row top border */
-  :host(:not([theme~='no-row-borders'])) [part~='first-row'] [part~='cell']:not([part~='details-cell']) {
+  :host(:not([theme~='no-row-borders'])) .first-row .cell:not(.details-cell) {
     border-top: 0;
     min-height: calc(var(--lumo-size-m) - var(--_lumo-grid-border-width));
   }
 
   /* Focus-ring */
 
-  [part~='row']:focus,
-  [part~='focused-cell']:focus {
+  .row:focus,
+  .focused-cell:focus {
     outline: none;
   }
 
-  :host([navigating]) [part~='row']:focus::before,
-  :host([navigating]) [part~='focused-cell']:focus::before {
+  :host([navigating]) .row:focus::before,
+  :host([navigating]) .focused-cell:focus::before {
     content: '';
     position: absolute;
     inset: 0;
@@ -425,13 +409,13 @@
     box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
 
-  :host([navigating]) [part~='row']:focus::before {
+  :host([navigating]) .row:focus::before {
     transform: translateX(var(--_grid-horizontal-scroll-position));
     z-index: 3;
   }
 
   /* Empty state */
-  [part~='empty-state'] {
+  .empty-state {
     padding: var(--lumo-space-m);
     color: var(--lumo-secondary-text-color);
   }
@@ -446,15 +430,15 @@
     box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
 
-  [part~='row'][dragover] {
+  .body-row[dragover] {
     z-index: 100 !important;
   }
 
-  [part~='row'][dragover] [part~='cell'] {
+  .body-row[dragover] .cell {
     overflow: visible;
   }
 
-  [part~='row'][dragover] [part~='cell']::after {
+  .body-row[dragover] .cell::after {
     content: '';
     position: absolute;
     inset: 0;
@@ -463,54 +447,54 @@
     background: var(--lumo-primary-color-50pct);
   }
 
-  [part~='row'][dragover] [part~='cell'][last-frozen]::after {
+  .body-row[dragover] .cell[last-frozen]::after {
     right: -1px;
   }
 
-  :host([theme~='no-row-borders']) [dragover] [part~='cell']::after {
+  :host([theme~='no-row-borders']) [dragover] .cell::after {
     height: 2px;
   }
 
-  [part~='row'][dragover='below'] [part~='cell']::after {
+  .body-row[dragover='below'] .cell::after {
     top: 100%;
     bottom: auto;
     margin-top: -1px;
   }
 
-  :host([all-rows-visible]) [part~='last-row'][dragover='below'] [part~='cell']::after {
+  :host([all-rows-visible]) .last-row[dragover='below'] .cell::after {
     height: 1px;
   }
 
-  [part~='row'][dragover='above'] [part~='cell']::after {
+  .row[dragover='above'] .cell::after {
     top: auto;
     bottom: 100%;
     margin-bottom: -1px;
   }
 
-  [part~='row'][details-opened][dragover='below'] [part~='cell']:not([part~='details-cell'])::after,
-  [part~='row'][details-opened][dragover='above'] [part~='details-cell']::after {
+  .row[details-opened][dragover='below'] .cell:not(.details-cell)::after,
+  .row[details-opened][dragover='above'] .details-cell::after {
     display: none;
   }
 
-  [part~='row'][dragover][dragover='on-top'] [part~='cell']::after {
+  .row[dragover][dragover='on-top'] .cell::after {
     height: 100%;
     opacity: 0.5;
   }
 
-  [part~='row'][dragstart] [part~='cell'] {
+  .row[dragstart] .cell {
     border: none !important;
     box-shadow: none !important;
   }
 
-  [part~='row'][dragstart] [part~='cell'][last-column] {
+  .row[dragstart] .cell[last-column] {
     border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0;
   }
 
-  [part~='row'][dragstart] [part~='cell'][first-column] {
+  .row[dragstart] .cell[first-column] {
     border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
   }
 
-  #scroller [part~='row'][dragstart]:not([dragstart=''])::after {
+  #scroller .row[dragstart]:not([dragstart=''])::after {
     display: block;
     position: absolute;
     left: var(--_grid-drag-start-x);
@@ -536,99 +520,108 @@
 
   /* Headers and footers */
 
-  [part~='header-cell'],
-  [part~='footer-cell'],
-  [part~='reorder-ghost'] {
+  .header-cell,
+  .footer-cell,
+  .reorder-ghost {
     font-size: var(--lumo-font-size-s);
     font-weight: 500;
   }
 
-  [part~='footer-cell'] {
+  .footer-cell {
     font-weight: 400;
   }
 
-  [part~='row']:only-child [part~='header-cell'] {
+  .header-row:only-child .header-cell {
     min-height: var(--lumo-size-xl);
   }
 
   /* Header borders */
 
   /* Hide first header row top border */
-  :host(:not([theme~='no-row-borders'])) [part~='row']:first-child [part~='header-cell'] {
+  :host(:not([theme~='no-row-borders'])) .first-header-row .header-cell {
     border-top: 0;
   }
 
   /* Hide header row top border if previous row is hidden */
-  [part~='row'][hidden] + [part~='row'] [part~='header-cell'] {
+  .header-row[hidden] + .header-row .header-cell {
     border-top: 0;
   }
 
-  [part~='row']:last-child [part~='header-cell'] {
+  .last-header-row .header-cell {
     border-bottom: var(--_lumo-grid-border-width) solid transparent;
   }
 
-  :host(:not([theme~='no-row-borders'])) [part~='row']:last-child [part~='header-cell'] {
+  :host(:not([theme~='no-row-borders'])) .last-header-row .header-cell {
     border-bottom-color: var(--_lumo-grid-secondary-border-color);
   }
 
   /* Overflow uses a stronger border color */
-  :host([overflow~='top']) [part~='row']:last-child [part~='header-cell'] {
+  :host([overflow~='top']) .last-header-row .header-cell {
     border-bottom-color: var(--_lumo-grid-border-color);
   }
 
   /* Footer borders */
 
-  [part~='row']:first-child [part~='footer-cell'] {
+  .first-footer-row .footer-cell {
     border-top: var(--_lumo-grid-border-width) solid transparent;
   }
 
-  :host(:not([theme~='no-row-borders'])) [part~='row']:first-child [part~='footer-cell'] {
+  :host(:not([theme~='no-row-borders'])) .first-footer-row .footer-cell {
     border-top-color: var(--_lumo-grid-secondary-border-color);
   }
 
   /* Overflow uses a stronger border color */
-  :host([overflow~='bottom']) [part~='row']:first-child [part~='footer-cell'] {
+  :host([overflow~='bottom']) .first-footer-row .footer-cell {
     border-top-color: var(--_lumo-grid-border-color);
   }
 
   /* Column reordering */
 
-  :host([reordering]) [part~='cell'] {
+  :host([reordering]) .cell {
     background: linear-gradient(var(--lumo-shade-20pct), var(--lumo-shade-20pct)) var(--lumo-base-color);
   }
 
-  :host([reordering]) [part~='cell'][reorder-status='allowed'] {
+  :host([reordering]) .cell[reorder-status='allowed'] {
     background: var(--lumo-base-color);
   }
 
-  :host([reordering]) [part~='cell'][reorder-status='dragging'] {
+  :host([reordering]) .cell[reorder-status='dragging'] {
     background: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)) var(--lumo-base-color);
   }
 
   /* Column resizing */
 
-  [part='resize-handle'] {
+  .resize-handle {
     --_resize-handle-width: 3px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    cursor: col-resize;
+    z-index: 1;
     width: var(--_resize-handle-width);
     background-color: var(--lumo-primary-color-50pct);
     opacity: 0;
     transition: opacity 0.2s;
   }
 
-  [part='resize-handle']::before {
+  .resize-handle::before {
+    position: absolute;
+    content: '';
+    height: 100%;
     transform: translateX(calc(-50% + var(--_resize-handle-width) / 2));
     width: var(--lumo-size-s);
   }
 
-  :host(:not([reordering])) *:not([column-resizing]) [part~='cell']:hover [part='resize-handle'],
-  [part='resize-handle']:active {
+  :host(:not([reordering])) *:not([column-resizing]) .cell:hover .resize-handle,
+  .resize-handle:active {
     opacity: 1;
     transition-delay: 0.15s;
   }
 
   /* Column borders */
 
-  :host([theme~='column-borders']) [part~='cell']:not([last-column]):not([part~='details-cell']) {
+  :host([theme~='column-borders']) .cell:not([last-column]):not(.details-cell) {
     border-right: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
   }
 
@@ -639,18 +632,18 @@
     overflow: hidden;
   }
 
-  :host([overflow~='start']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
+  :host([overflow~='start']) .cell[last-frozen]:not(.details-cell) {
     border-right-color: var(--_lumo-grid-border-color);
   }
 
-  :host([overflow~='end']) [part~='cell'][first-frozen-to-end]:not([part~='details-cell']) {
+  :host([overflow~='end']) .cell[first-frozen-to-end]:not(.details-cell) {
     border-left-color: var(--_lumo-grid-border-color);
   }
 
   /* Row stripes */
 
-  :host([theme~='row-stripes']) [part~='even-row'] [part~='body-cell'],
-  :host([theme~='row-stripes']) [part~='even-row'] [part~='details-cell'] {
+  :host([theme~='row-stripes']) .even-row .body-cell,
+  :host([theme~='row-stripes']) .even-row .details-cell {
     background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
     background-repeat: repeat-x;
   }
@@ -658,56 +651,56 @@
   /* Selected row */
 
   /* Raise the selected rows above unselected rows (so that box-shadow can cover unselected rows) */
-  :host(:not([reordering])) [part~='row'][selected] {
+  :host(:not([reordering])) .row[selected] {
     z-index: 1;
   }
 
-  :host(:not([reordering])) [part~='row'][selected] [part~='body-cell']:not([part~='details-cell']) {
+  :host(:not([reordering])) .row[selected] .body-cell:not(.details-cell) {
     background-image: linear-gradient(var(--_lumo-grid-selected-row-color), var(--_lumo-grid-selected-row-color));
     background-repeat: repeat;
   }
 
   /* Cover the border of an unselected row */
-  :host(:not([theme~='no-row-borders'])) [part~='row'][selected] [part~='cell']:not([part~='details-cell']) {
+  :host(:not([theme~='no-row-borders'])) .row[selected] .cell:not(.details-cell) {
     box-shadow: 0 var(--_lumo-grid-border-width) 0 0 var(--_lumo-grid-selected-row-color);
   }
 
   /* Compact */
 
-  :host([theme~='compact']) [part~='row']:only-child [part~='header-cell'] {
+  :host([theme~='compact']) .header-row:only-child .header-cell {
     min-height: var(--lumo-size-m);
   }
 
-  :host([theme~='compact']) [part~='cell'] {
+  :host([theme~='compact']) .cell {
     min-height: var(--lumo-size-s);
     --_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-s);
   }
 
-  :host([theme~='compact']) [part~='first-row'] [part~='cell']:not([part~='details-cell']) {
+  :host([theme~='compact']) .first-row .cell:not(.details-cell) {
     min-height: calc(var(--lumo-size-s) - var(--_lumo-grid-border-width));
   }
 
-  :host([theme~='compact']) [part~='empty-state'] {
+  :host([theme~='compact']) .empty-state {
     padding: var(--lumo-space-s);
   }
 
   /* Wrap cell contents */
 
-  :host([theme~='wrap-cell-content']) [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+  :host([theme~='wrap-cell-content']) .cell ::slotted(vaadin-grid-cell-content) {
     white-space: normal;
   }
 
   /* RTL specific styles */
 
-  :host([dir='rtl']) [part~='row'][dragstart] [part~='cell'][last-column] {
+  :host([dir='rtl']) .row[dragstart] .cell[last-column] {
     border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
   }
 
-  :host([dir='rtl']) [part~='row'][dragstart] [part~='cell'][first-column] {
+  :host([dir='rtl']) .row[dragstart] .cell[first-column] {
     border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0;
   }
 
-  :host([dir='rtl'][theme~='column-borders']) [part~='cell']:not([last-column]):not([part~='details-cell']) {
+  :host([dir='rtl'][theme~='column-borders']) .cell:not([last-column]):not(.details-cell) {
     border-right: none;
     border-left: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
   }
@@ -722,16 +715,16 @@
     border-right: var(--_lumo-grid-border-width) solid transparent;
   }
 
-  :host([dir='rtl'][overflow~='start']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
+  :host([dir='rtl'][overflow~='start']) .cell[last-frozen]:not(.details-cell) {
     border-left-color: var(--_lumo-grid-border-color);
   }
 
-  :host([dir='rtl'][overflow~='end']) [part~='cell'][first-frozen-to-end]:not([part~='details-cell']) {
+  :host([dir='rtl'][overflow~='end']) .cell[first-frozen-to-end]:not(.details-cell) {
     border-right-color: var(--_lumo-grid-border-color);
   }
 
   @media (forced-colors: active) {
-    [part~='selected-row'] [part~='first-column-cell']::after {
+    .selected-row .first-column-cell::after {
       content: '';
       position: absolute;
       top: 0;
@@ -740,7 +733,7 @@
       border: 2px solid;
     }
 
-    [part~='focused-cell']::before {
+    .focused-cell::before {
       outline: 2px solid !important;
       outline-offset: -1px;
     }

package/src/components/horizontal-layout.css

@@ -5,11 +5,11 @@
  */
 @media lumo_components_horizontal-layout {
   :host([theme~='margin']) {
-    margin: var(--lumo-space-m);
+    margin: var(--vaadin-horizontal-layout-margin, var(--lumo-space-m));
   }
 
   :host([theme~='padding']) {
-    padding: var(--lumo-space-m);
+    padding: var(--vaadin-horizontal-layout-padding, var(--lumo-space-m));
   }
 
   :host([theme~='spacing-xs']) {
@@ -21,7 +21,7 @@
   }
 
   :host([theme~='spacing']) {
-    gap: var(--lumo-space-m);
+    gap: var(--vaadin-horizontal-layout-gap, var(--lumo-space-m));
   }
 
   :host([theme~='spacing-l']) {

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

@@ -4,6 +4,11 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_rich-text-editor-popup-overlay {
+  :host {
+    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+  }
+
   [part='overlay'] {
     margin: var(--lumo-space-xs) 0;
   }
@@ -20,8 +25,29 @@
 
   [part='content'] ::slotted(button) {
     border: none;
+    background-color: var(--_btn-background);
     width: var(--_button-size);
     height: var(--_button-size);
     margin: var(--_button-margin);
   }
+
+  [part='content'] ::slotted(button:focus-visible) {
+    outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
+    outline-offset: calc(var(--_focus-ring-width) * -1 + 1px);
+  }
+
+  [part='content'] ::slotted(button:first-of-type) {
+    position: relative;
+    border: solid 1px var(--lumo-contrast-10pct);
+    background-image: repeating-linear-gradient(
+      135deg,
+      transparent 0%,
+      transparent 47%,
+      red 50%,
+      transparent 53%,
+      transparent 100%
+    );
+    background-color: transparent;
+    background-clip: padding-box;
+  }
 }