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

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

package/src/components/upload-file.css

@@ -5,37 +5,14 @@
  */
 @media lumo_components_upload-file {
   :host {
-    display: block;
     padding: var(--lumo-space-s) 0;
-    outline: none;
+    gap: 0 var(--lumo-space-xs);
     --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
   }
 
-  [hidden] {
-    display: none;
-  }
-
-  [part='row'] {
-    list-style-type: none;
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-  }
-
-  button {
-    background: transparent;
-    padding: 0;
-    border: none;
-    box-shadow: none;
-  }
-
-  :host([complete]) ::slotted([slot='progress']),
-  :host([error]) ::slotted([slot='progress']) {
-    display: none !important;
-  }
-
-  :host([focus-ring]) [part='row'] {
+  :host(:focus-visible) {
+    outline: none;
     border-radius: var(--lumo-border-radius-s);
     box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
@@ -46,57 +23,47 @@
     font-size: var(--lumo-font-size-s);
   }
 
-  [part='info'] {
-    display: flex;
-    align-items: baseline;
-    flex: auto;
-  }
-
-  [part='meta'] {
-    width: 0.001px;
-    flex: 1 1 auto;
-  }
-
   [part='name'] {
+    color: var(--lumo-body-text-color);
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   [part='commands'] {
-    display: flex;
-    align-items: baseline;
-    flex: none;
+    align-self: start;
   }
 
   [part$='icon'] {
-    margin-right: var(--lumo-space-xs);
     font-size: var(--lumo-icon-size-m);
     font-family: 'lumo-icons';
     line-height: 1;
-  }
-
-  /* When both icons are hidden, let us keep space for one */
-  [part='done-icon'][hidden] + [part='warning-icon'][hidden] {
-    display: block !important;
-    visibility: hidden;
+    align-self: start;
   }
 
   [part$='button'] {
-    flex: none;
-    margin-left: var(--lumo-space-xs);
+    border: none;
+    box-shadow: none;
+    outline: none;
+    padding: 0;
+    border-radius: var(--lumo-border-radius-s);
     cursor: var(--lumo-clickable-cursor);
   }
 
   [part$='button']:focus {
-    outline: none;
-    border-radius: var(--lumo-border-radius-s);
     box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
 
+  /* Vertically align icons / buttons with the first line of text */
+  [part$='icon'],
+  [part$='button'] {
+    margin-top: calc((1em * var(--lumo-line-height-m) - var(--lumo-icon-size-m)) / 2);
+  }
+
   [part$='icon']::before,
   [part$='button']::before {
-    vertical-align: -0.25em;
+    background: transparent;
+    mask-image: none;
+    width: auto;
+    height: auto;
   }
 
   [part='done-icon']::before {
@@ -126,8 +93,6 @@
   }
 
   ::slotted([slot='progress']) {
-    width: auto;
-    margin-left: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
-    margin-right: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
+    margin-inline-end: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
   }
 }