@vaadin/vaadin-lumo-styles 25.0.0-alpha16 → 25.0.0-alpha18

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 !important;
-  }
-
-  [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/rich-text-editor.css

@@ -5,13 +5,13 @@
  */
 @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;
@@ -19,46 +19,20 @@
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
     --_item-indent: var(--lumo-space-m);
     --_marker-indent: var(--lumo-space-xs);
-    --_list-indent: calc(var(--_item-indent) + var(--_marker-indent));
-  }
-
-  :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'] {
@@ -68,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);
@@ -86,18 +59,6 @@
     color: var(--lumo-contrast-80pct);
   }
 
-  @media (forced-colors: active) {
-    [part~='toolbar-button']:focus,
-    [part~='toolbar-button']:hover {
-      outline: 1px solid !important;
-    }
-
-    [part~='toolbar-button-pressed'] {
-      outline: 2px solid;
-      outline-offset: -1px;
-    }
-  }
-
   [part~='toolbar-button']::before {
     position: absolute;
     top: 50%;
@@ -105,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);
   }
@@ -199,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 {
@@ -229,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;
   }
@@ -337,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 */
@@ -381,297 +333,21 @@
     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;
-    tab-size: calc(var(--_item-indent) * 2);
-    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;
-  }
-
-  .ql-align-justify {
-    text-align: justify;
-  }
-
-  .ql-align-right {
-    text-align: right;
+    color: inherit;
+    padding: 0 var(--lumo-space-m);
   }
 
   .ql-code-block-container {
-    font-family: monospace;
     background-color: var(--lumo-contrast-10pct);
     border-radius: var(--lumo-border-radius-m);
-    white-space: pre-wrap;
-    margin-bottom: 0.3125em;
-    margin-top: 0.3125em;
+    margin-block: 0.3125em;
     padding: 0.3125em 0.625em;
   }
 
-  /* lists */
-  .ql-editor ol {
-    padding-inline-start: var(--_list-indent);
-  }
-
-  .ql-editor li {
-    list-style-type: none;
-    position: relative;
-    padding-inline-start: var(--_item-indent);
-  }
-
-  .ql-editor li > .ql-ui::before {
-    display: inline-block;
-    width: var(--vaadin-padding-l);
-    margin-inline: calc(var(--_item-indent) * -1) var(--_marker-indent);
-    text-align: end;
-    white-space: nowrap;
-  }
-
-  .ql-editor li[data-list='bullet'] > .ql-ui::before {
-    content: '\2022';
-    font-size: 1.5rem;
-    line-height: 1rem;
-    align-self: baseline;
-    vertical-align: text-top;
-  }
-
-  .ql-editor p,
-  .ql-editor h1,
-  .ql-editor h2,
-  .ql-editor h3,
-  .ql-editor h4,
-  .ql-editor h5,
-  .ql-editor h6 {
-    counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
-  }
-
-  /* 0 */
-  .ql-editor li[data-list='ordered'] {
-    counter-increment: list-0;
-  }
-
-  .ql-editor li[data-list='ordered'] > .ql-ui::before {
-    content: counter(list-0, decimal) '. ';
-  }
-
-  /* 1 */
-  .ql-editor li[data-list='ordered'].ql-indent-1 {
-    counter-increment: list-1;
-  }
-
-  .ql-editor li[data-list='ordered'].ql-indent-1 > .ql-ui::before {
-    content: counter(list-1, lower-alpha) '. ';
-  }
-
-  .ql-editor li[data-list].ql-indent-1 {
-    counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
-  }
-
-  /* 2 */
-  .ql-editor li[data-list='ordered'].ql-indent-2 {
-    counter-increment: list-2;
-  }
-
-  .ql-editor li[data-list='ordered'].ql-indent-2 > .ql-ui::before {
-    content: counter(list-2, lower-roman) '. ';
-  }
-
-  .ql-editor li[data-list].ql-indent-2 {
-    counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
-  }
-
-  /* 3 */
-  .ql-editor li[data-list='ordered'].ql-indent-3 {
-    counter-increment: list-3;
-  }
-
-  .ql-editor li[data-list='ordered'].ql-indent-3 > .ql-ui::before {
-    content: counter(list-3, decimal) '. ';
-  }
-
-  .ql-editor li[data-list].ql-indent-3 {
-    counter-set: list-4 list-5 list-6 list-7 list-8 list-9;
-  }
-
-  /* 4 */
-  .ql-editor li[data-list='ordered'].ql-indent-4 {
-    counter-increment: list-4;
-  }
-
-  .ql-editor li[data-list='ordered'].ql-indent-4 > .ql-ui::before {
-    content: counter(list-4, lower-alpha) '. ';
-  }
-
-  .ql-editor li[data-list].ql-indent-4 {
-    counter-set: list-5 list-6 list-7 list-8 list-9;
-  }
-
-  /* 5 */
-  .ql-editor li[data-list='ordered'].ql-indent-5 {
-    counter-increment: list-5;
-  }
-
-  .ql-editor li[data-list='ordered'].ql-indent-5 > .ql-ui::before {
-    content: counter(list-5, lower-roman) '. ';
-  }
-
-  .ql-editor li[data-list].ql-indent-5 {
-    counter-set: list-6 list-7 list-8 list-9;
-  }
-
-  /* 6 */
-  .ql-editor li[data-list='ordered'].ql-indent-6 {
-    counter-increment: list-6;
-  }
-
-  .ql-editor li[data-list='ordered'].ql-indent-6 > .ql-ui::before {
-    content: counter(list-6, decimal) '. ';
-  }
-
-  .ql-editor li[data-list].ql-indent-6 {
-    counter-set: list-7 list-8 list-9;
-  }
-
-  /* 7 */
-  .ql-editor li[data-list='ordered'].ql-indent-7 {
-    counter-increment: list-7;
-  }
-
-  .ql-editor li[data-list='ordered'].ql-indent-7 > .ql-ui::before {
-    content: counter(list-7, lower-alpha) '. ';
-  }
-
-  .ql-editor li[data-list].ql-indent-7 {
-    counter-set: list-8 list-9;
-  }
-
-  /* 8 */
-  .ql-editor li[data-list='ordered'].ql-indent-8 {
-    counter-increment: list-8;
-  }
-
-  .ql-editor li[data-list='ordered'].ql-indent-8 > .ql-ui::before {
-    content: counter(list-8, lower-roman) '. ';
-  }
-
-  .ql-editor li[data-list].ql-indent-8 {
-    counter-set: list-9;
-  }
-
-  /* indent 1 */
-  .ql-editor .ql-indent-1 {
-    padding-inline-start: calc(var(--_item-indent) * 2);
-  }
-
-  .ql-editor li.ql-indent-1 {
-    padding-inline-start: calc(var(--_list-indent) + var(--_item-indent) * 2);
-  }
-
-  /* indent 2 */
-  .ql-editor .ql-indent-2 {
-    padding-inline-start: calc(var(--_item-indent) * 4);
-  }
-
-  .ql-editor li.ql-indent-2 {
-    padding-inline-start: calc(var(--_list-indent) * 2 + var(--_item-indent) * 3);
-  }
-
-  /* indent 3 */
-  .ql-editor .ql-indent-3 {
-    padding-inline-start: calc(var(--_item-indent) * 6);
-  }
-
-  .ql-editor li.ql-indent-3 {
-    padding-inline-start: calc(var(--_list-indent) * 3 + var(--_item-indent) * 4);
-  }
-
-  /* indent 4 */
-  .ql-editor .ql-indent-4 {
-    padding-inline-start: calc(var(--_item-indent) * 8);
-  }
-
-  .ql-editor li.ql-indent-4 {
-    padding-inline-start: calc(var(--_list-indent) * 4 + var(--_item-indent) * 5);
-  }
-
-  /* indent 5 */
-  .ql-editor .ql-indent-5 {
-    padding-inline-start: calc(var(--_item-indent) * 10);
-  }
-
-  .ql-editor li.ql-indent-5 {
-    padding-inline-start: calc(var(--_list-indent) * 5 + var(--_item-indent) * 6);
-  }
-
-  /* indent 6 */
-  .ql-editor .ql-indent-6 {
-    padding-inline-start: calc(var(--_item-indent) * 12);
-  }
-
-  .ql-editor li.ql-indent-6 {
-    padding-inline-start: calc(var(--_list-indent) * 6 + var(--_item-indent) * 7);
-  }
-
-  /* indent 7 */
-  .ql-editor .ql-indent-7 {
-    padding-inline-start: calc(var(--_item-indent) * 14);
-  }
-
-  .ql-editor li.ql-indent-7 {
-    padding-inline-start: calc(var(--_list-indent) * 7 + var(--_item-indent) * 8);
-  }
-
-  /* indent 8 */
-  .ql-editor .ql-indent-8 {
-    padding-inline-start: calc(var(--_item-indent) * 16);
-  }
-
-  .ql-editor li.ql-indent-8 {
-    padding-inline-start: calc(var(--_list-indent) * 8 + var(--_item-indent) * 9);
-  }
-  /* quill core end */
-
   blockquote {
     padding-left: 1em;
+    margin-inline: 40px;
   }
 
   code {
@@ -680,10 +356,6 @@
     padding: 0.125em 0.25em;
   }
 
-  img {
-    max-width: 100%;
-  }
-
   :where(h1, h2, h3, h4, h5, h6) {
     margin-top: 1.25em;
   }
@@ -701,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;
     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

@@ -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;
+  }
 }