@vaadin/vaadin-lumo-styles 25.0.0-alpha8 → 25.0.0-beta1

package/src/components/multi-select-combo-box.css

@@ -11,6 +11,10 @@
     --_wrapper-gap: 0;
   }
 
+  :host([opened]) {
+    pointer-events: auto;
+  }
+
   #chips {
     display: flex;
     align-items: center;
@@ -87,11 +91,11 @@
     color: var(--lumo-primary-contrast-color);
   }
 
-  [part='toggle-button']::before {
+  [part~='toggle-button']::before {
     content: var(--lumo-icons-dropdown);
   }
 
-  :host([readonly][has-value]) [part='toggle-button'] {
+  :host([readonly][has-value]) [part~='toggle-button'] {
     color: var(--lumo-contrast-60pct);
     cursor: var(--lumo-clickable-cursor);
   }

package/src/components/notification-container.css

@@ -6,13 +6,20 @@
 @media lumo_components_notification-container {
   :host {
     position: fixed;
-    z-index: 1000;
     inset: 0;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     pointer-events: none;
+
+    /* Override native [popover] user agent styles */
+    width: auto;
+    height: auto;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    overflow: visible;
   }
 
   [region-group] {

package/src/components/number-field.css

@@ -20,8 +20,8 @@
     padding: 0;
   }
 
-  [part='decrease-button'],
-  [part='increase-button'] {
+  [part~='decrease-button'],
+  [part~='increase-button'] {
     cursor: pointer;
     width: 1.5em;
     height: 1.5em;
@@ -29,16 +29,16 @@
     user-select: none;
   }
 
-  [part='decrease-button']::before,
-  [part='increase-button']::before {
+  [part~='decrease-button']::before,
+  [part~='increase-button']::before {
     margin-top: 0.25em;
   }
 
-  [part='decrease-button']::before {
+  [part~='decrease-button']::before {
     content: var(--lumo-icons-minus);
   }
 
-  [part='increase-button']::before {
+  [part~='increase-button']::before {
     content: var(--lumo-icons-plus);
   }
 

package/src/components/password-field.css

@@ -4,21 +4,21 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_password-field {
-  [part='reveal-button']::before {
+  [part~='reveal-button']::before {
     content: var(--lumo-icons-eye);
   }
 
-  :host([password-visible]) [part='reveal-button']::before {
+  :host([password-visible]) [part~='reveal-button']::before {
     content: var(--lumo-icons-eye-disabled);
   }
 
   /* Make it easy to hide the button across the whole app */
-  [part='reveal-button'] {
+  [part~='reveal-button'] {
     position: relative;
     display: var(--lumo-password-field-reveal-button-display, block);
   }
 
-  [part='reveal-button'][hidden] {
+  [part~='reveal-button'][hidden] {
     display: none !important;
   }
 }

package/src/components/popover-overlay.css

@@ -5,152 +5,16 @@
  */
 @media lumo_components_popover-overlay {
   :host {
-    --vaadin-popover-arrow-size: 0.5rem;
+    --_arrow-size: var(--vaadin-popover-arrow-size, 0.75rem);
     --_default-offset: var(--lumo-space-xs);
   }
 
   [part='overlay'] {
-    position: relative;
     overflow: visible;
-    max-height: 100%;
-    outline: none;
+    border: none;
   }
 
   [part='content'] {
-    overflow: auto;
-    box-sizing: border-box;
-    max-height: 100%;
     padding: var(--lumo-space-xs) var(--lumo-space-s);
   }
-
-  /* Increase the area of the popover so the pointer can go from the target directly to it. */
-  [part='overlay']::before {
-    position: absolute;
-    content: '';
-    inset-block: calc(var(--vaadin-popover-offset-top, var(--_default-offset)) * -1)
-      calc(var(--vaadin-popover-offset-bottom, var(--_default-offset)) * -1);
-    inset-inline: calc(var(--vaadin-popover-offset-start, var(--_default-offset)) * -1)
-      calc(var(--vaadin-popover-offset-end, var(--_default-offset)) * -1);
-    z-index: -1;
-    pointer-events: auto;
-  }
-
-  :host([theme~='no-padding']) [part='content'] {
-    padding: 0;
-  }
-
-  [part='arrow'] {
-    display: none;
-    position: absolute;
-    height: 0;
-    width: 0;
-  }
-
-  :host([theme~='arrow']) {
-    --_default-offset: calc(var(--lumo-space-s) + var(--vaadin-popover-arrow-size) / 2);
-  }
-
-  :host([theme~='arrow']) [part='arrow'] {
-    display: block;
-  }
-
-  :host([modeless][with-backdrop]) [part='backdrop'] {
-    pointer-events: none;
-  }
-
-  :host([position^='top'][top-aligned]) [part='overlay'],
-  :host([position^='bottom'][top-aligned]) [part='overlay'] {
-    margin-top: var(--vaadin-popover-offset-top, var(--_default-offset));
-  }
-
-  :host([position^='top'][bottom-aligned]) [part='overlay'],
-  :host([position^='bottom'][bottom-aligned]) [part='overlay'] {
-    margin-bottom: var(--vaadin-popover-offset-bottom, var(--_default-offset));
-  }
-
-  :host([position^='start'][start-aligned]) [part='overlay'],
-  :host([position^='end'][start-aligned]) [part='overlay'] {
-    margin-inline-start: var(--vaadin-popover-offset-start, var(--_default-offset));
-  }
-
-  :host([position^='start'][end-aligned]) [part='overlay'],
-  :host([position^='end'][end-aligned]) [part='overlay'] {
-    margin-inline-end: var(--vaadin-popover-offset-end, var(--_default-offset));
-  }
-
-  /* top / bottom position */
-  :host([theme~='arrow'][position^='top']) [part='arrow'],
-  :host([theme~='arrow'][position^='bottom']) [part='arrow'] {
-    border-left: var(--vaadin-popover-arrow-size) solid transparent;
-    border-right: var(--vaadin-popover-arrow-size) solid transparent;
-  }
-
-  :host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
-    bottom: calc(var(--vaadin-popover-arrow-size) * -1);
-    border-top: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
-    filter: drop-shadow(0 2px 1px var(--lumo-shade-10pct));
-  }
-
-  :host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] {
-    top: calc(var(--vaadin-popover-arrow-size) * -1);
-    border-bottom: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
-    filter: drop-shadow(0 -2px 1px var(--lumo-shade-10pct));
-  }
-
-  :host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] {
-    transform: translateX(-50%);
-    inset-inline-start: 1.5rem;
-  }
-
-  :host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] {
-    transform: translateX(50%);
-    inset-inline-end: 1.5rem;
-  }
-
-  :host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
-  :host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] {
-    transform: translateX(-50%);
-    inset-inline-start: 50%;
-  }
-
-  /* start / end position */
-  :host([theme~='arrow'][position^='start']) [part='arrow'],
-  :host([theme~='arrow'][position^='end']) [part='arrow'] {
-    border-top: var(--vaadin-popover-arrow-size) solid transparent;
-    border-bottom: var(--vaadin-popover-arrow-size) solid transparent;
-  }
-
-  :host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] {
-    inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1);
-    border-right: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
-    filter: drop-shadow(-2px 0 1px var(--lumo-shade-10pct));
-  }
-
-  :host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] {
-    inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1);
-    border-left: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
-    filter: drop-shadow(2px 0 1px var(--lumo-shade-10pct));
-  }
-
-  :host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] {
-    top: 0.5rem;
-  }
-
-  :host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] {
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  :host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'],
-  :host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
-    bottom: 0.5rem;
-  }
 }

package/src/components/radio-button.css

@@ -66,7 +66,7 @@
     pointer-events: none;
     width: 0;
     height: 0;
-    border: var(--vaadin-radio-button-dot-size, 3px) solid
+    border: var(--vaadin-radio-button-marker-size, 3px) solid
       var(--vaadin-radio-button-dot-color, var(--lumo-primary-contrast-color));
     border-radius: 50%;
     position: absolute;

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

@@ -5,57 +5,34 @@
  */
 @media lumo_components_rich-text-editor {
   :host {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
     min-height: calc(var(--lumo-size-m) * 8);
     font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size-m);
     line-height: var(--lumo-line-height-m);
+    background: transparent;
+    border: none;
+    border-radius: 0;
     -webkit-text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+    --_item-indent: var(--lumo-space-m);
+    --_marker-indent: var(--lumo-space-xs);
   }
 
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  .announcer {
-    position: fixed;
-    clip: rect(0, 0, 0, 0);
-  }
-
-  input[type='file'] {
-    display: none;
-  }
-
-  .vaadin-rich-text-editor-container {
-    display: flex;
-    flex-direction: column;
-    min-height: inherit;
-    max-height: inherit;
-    flex: auto;
+  :host(:focus-within) {
+    outline: none;
   }
 
   [part='content'] {
-    box-sizing: border-box;
-    position: relative;
-    flex: auto;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
     background-color: var(--lumo-base-color);
   }
 
   [part='toolbar'] {
-    display: flex;
-    flex-wrap: wrap;
-    flex-shrink: 0;
     background-color: var(--lumo-contrast-5pct);
     padding: calc(var(--lumo-space-s) - 1px) var(--lumo-space-xs);
+    gap: 0;
   }
 
   [part~='toolbar-button'] {
@@ -65,7 +42,6 @@
     text-transform: none;
     background: transparent;
     border: none;
-    position: relative;
     width: var(--lumo-size-m);
     height: var(--lumo-size-m);
     border-radius: var(--lumo-border-radius-m);
@@ -77,24 +53,12 @@
       color 100ms;
   }
 
-  [part~='toolbar-button']:hover {
+  [part~='toolbar-button']:not([part~='toolbar-button-pressed']):hover {
     outline: none;
     background-color: var(--lumo-contrast-5pct);
     color: var(--lumo-contrast-80pct);
   }
 
-  @media (forced-colors: active) {
-    [part~='toolbar-button']:focus,
-    [part~='toolbar-button']:hover {
-      outline: 1px solid !important;
-    }
-
-    [part~='toolbar-button'][on] {
-      outline: 2px solid;
-      outline-offset: -1px;
-    }
-  }
-
   [part~='toolbar-button']::before {
     position: absolute;
     top: 50%;
@@ -102,10 +66,13 @@
     transform: translate(-50%, -50%);
     font-family: 'lumo-icons', var(--lumo-font-family);
     font-size: var(--lumo-icon-size-m);
+    mask-image: none;
+    background: transparent;
+    height: auto;
+    width: auto;
   }
 
   [part~='toolbar-group'] {
-    display: flex;
     margin: 0 0.5em;
     margin: 0 calc(var(--lumo-space-l) / 2 - 1px);
   }
@@ -196,15 +163,20 @@
     font-size: 1em;
   }
 
+  [part~='toolbar-button-color']::after,
+  [part~='toolbar-button-background']::after {
+    width: auto;
+    height: auto;
+    mask-image: none;
+    transform: none;
+  }
+
   [part~='toolbar-button-color']::after {
-    content: '';
-    position: absolute;
     bottom: 4px;
     left: 25%;
     right: 25%;
     width: 50%;
     height: 4px;
-    background-color: var(--_color-value, currentColor);
   }
 
   [part~='toolbar-button-background']::before {
@@ -226,17 +198,6 @@
     );
   }
 
-  :host([readonly]) [part='toolbar'] {
-    display: none;
-  }
-
-  :host([disabled]) {
-    pointer-events: none;
-    opacity: 0.5;
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
   :host([disabled]) [part~='toolbar-button'] {
     background-color: transparent;
   }
@@ -253,12 +214,12 @@
     }
   }
 
-  [part~='toolbar-button'][on] {
+  [part~='toolbar-button-pressed'] {
     background-color: var(--vaadin-selection-color, var(--lumo-primary-color));
     color: var(--lumo-primary-contrast-color);
   }
 
-  [part~='toolbar-button']:active {
+  [part~='toolbar-button']:not([part~='toolbar-button-pressed']):active {
     background-color: var(--lumo-contrast-10pct);
     color: var(--lumo-contrast-90pct);
   }
@@ -301,6 +262,14 @@
     content: var(--lumo-icons-unordered-list);
   }
 
+  [part~='toolbar-button-outdent']::before {
+    content: var(--lumo-icons-outdent);
+  }
+
+  [part~='toolbar-button-indent']::before {
+    content: var(--lumo-icons-indent);
+  }
+
   [part~='toolbar-button-align-left']::before {
     content: var(--lumo-icons-align-left);
   }
@@ -326,12 +295,6 @@
     font-size: var(--lumo-font-size-l);
   }
 
-  /* TODO unsupported selector */
-  [part='content'] > .ql-editor {
-    padding: 0 var(--lumo-space-m);
-    line-height: inherit;
-  }
-
   /* Theme variants */
 
   /* No border */
@@ -370,89 +333,29 @@
     margin: 0 calc(var(--lumo-space-m) / 2 - 1px);
   }
 
-  /*
-    Quill core styles.
-    CSS selectors removed: margin & padding reset, check list, indentation, video, colors, ordered & unordered list, h1-6, anchor
-  */
-  .ql-clipboard {
-    left: -100000px;
-    height: 1px;
-    overflow-y: hidden;
-    position: absolute;
-    top: 50%;
-  }
-
-  .ql-clipboard p {
-    margin: 0;
-    padding: 0;
-  }
-
   .ql-editor {
-    box-sizing: border-box;
-    line-height: 1.42;
-    height: 100%;
-    outline: none;
-    overflow-y: auto;
-    padding: 0.75em 1em;
-    -moz-tab-size: 4;
-    tab-size: 4;
-    text-align: left;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    flex: 1;
-  }
-
-  .ql-editor > * {
-    cursor: text;
-  }
-
-  .ql-align-left {
-    text-align: left;
-  }
-
-  .ql-direction-rtl {
-    direction: rtl;
-    text-align: inherit;
-  }
-
-  .ql-align-center {
-    text-align: center;
+    color: inherit;
+    padding: var(--lumo-space-s) var(--lumo-space-m);
   }
 
-  .ql-align-justify {
-    text-align: justify;
-  }
-
-  .ql-align-right {
-    text-align: right;
+  .ql-code-block-container {
+    background-color: var(--lumo-contrast-10pct);
+    border-radius: var(--lumo-border-radius-m);
+    margin-block: 0.3125em;
+    padding: 0.3125em 0.625em;
   }
-  /* quill core end */
 
   blockquote {
     padding-left: 1em;
-  }
-
-  code,
-  pre {
-    background-color: #f0f0f0;
-  }
-
-  pre {
-    white-space: pre-wrap;
-    margin-bottom: 0.3125em;
-    margin-top: 0.3125em;
-    padding: 0.3125em 0.625em;
+    margin-inline: 40px;
   }
 
   code {
+    background-color: var(--lumo-contrast-10pct);
     font-size: 85%;
     padding: 0.125em 0.25em;
   }
 
-  img {
-    max-width: 100%;
-  }
-
   :where(h1, h2, h3, h4, h5, h6) {
     margin-top: 1.25em;
   }
@@ -470,11 +373,6 @@
   }
 
   /* RTL specific styles */
-  :host([dir='rtl']) .ql-editor {
-    direction: rtl;
-    text-align: right;
-  }
-
   :host([dir='rtl']) [part~='toolbar-button-redo']::before {
     content: var(--lumo-icons-undo);
   }

package/src/components/scroller.css

@@ -5,36 +5,17 @@
  */
 @media lumo_components_scroller {
   :host {
-    outline: none;
     --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
   }
 
   :host([focus-ring]) {
+    outline: none;
     box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
 
-  /* Show dividers when content overflows */
-
-  :host([theme~='overflow-indicators'])::before,
-  :host([theme~='overflow-indicators'])::after {
-    content: '';
-    display: none;
-    position: sticky;
-    inset: 0;
-    z-index: 9999;
-    height: 1px;
-    margin-bottom: -1px;
+  :host([theme*='overflow-indicator'])::before,
+  :host([theme*='overflow-indicator'])::after {
     background: var(--lumo-contrast-10pct);
   }
-
-  :host([theme~='overflow-indicators'])::after {
-    margin-bottom: 0;
-    margin-top: -1px;
-  }
-
-  :host([theme~='overflow-indicators'][overflow~='top'])::before,
-  :host([theme~='overflow-indicators'][overflow~='bottom'])::after {
-    display: block;
-  }
 }

package/src/components/select.css

@@ -44,12 +44,12 @@
     opacity: 0;
   }
 
-  [part='toggle-button']::before {
+  [part~='toggle-button']::before {
     content: var(--lumo-icons-dropdown);
   }
 
   /* Highlight the toggle button when hovering over the entire component */
-  :host(:hover:not([readonly]):not([disabled])) [part='toggle-button'] {
+  :host(:hover:not([readonly]):not([disabled])) [part~='toggle-button'] {
     color: var(--lumo-contrast-80pct);
   }
 
@@ -57,4 +57,17 @@
     --_lumo-selected-item-height: var(--lumo-size-s);
     --_lumo-selected-item-padding: 0;
   }
+
+  .sr-only {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
+  }
 }

package/src/components/side-nav-item.css

@@ -167,4 +167,17 @@
     color: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
     border-radius: var(--lumo-border-radius-m);
   }
+
+  .sr-only {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
+  }
 }