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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "25.0.0-alpha16",
+  "version": "25.0.0-alpha17",
   "publishConfig": {
     "access": "public"
   },
@@ -42,9 +42,9 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "25.0.0-alpha16",
-    "@vaadin/icon": "25.0.0-alpha16",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha16"
+    "@vaadin/component-base": "25.0.0-alpha17",
+    "@vaadin/icon": "25.0.0-alpha17",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha17"
   },
   "devDependencies": {
     "gulp": "^5.0.1",
@@ -54,5 +54,5 @@
     "imagemin": "^9.0.0",
     "imagemin-svgo": "^10.0.1"
   },
-  "gitHead": "4b316158a4a4f702f032bc9940fc82f0faa840f4"
+  "gitHead": "8264c71309907be99368b09414f0f8d7f591e0b9"
 }

package/src/components/dashboard-layout.css

@@ -4,76 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_dashboard-layout {
-  :host {
-    display: block;
-    overflow: auto;
-    box-sizing: border-box;
-    width: 100%;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  :host([dense-layout]) #grid {
-    grid-auto-flow: dense;
-  }
-
   #grid {
-    box-sizing: border-box;
-
-    /* Padding around dashboard edges */
     --_default-padding: var(--lumo-space-m);
-    --_padding: max(0px, var(--vaadin-dashboard-padding, var(--_default-padding)));
-    padding: var(--_padding);
-
-    /* Gap between widgets */
     --_default-gap: var(--lumo-space-m);
-    --_gap: max(0px, var(--vaadin-dashboard-gap, var(--_default-gap)));
-    gap: var(--_gap);
-
-    /* Default min and max column widths */
-    --_default-col-min-width: 25rem;
-    --_default-col-max-width: 1fr;
-
-    /* Effective min and max column widths */
-    --_col-min-width: var(--vaadin-dashboard-col-min-width, var(--_default-col-min-width));
-    --_col-max-width: var(--vaadin-dashboard-col-max-width, var(--_default-col-max-width));
-
-    /* Effective max column count */
-    --_col-max-count: var(--vaadin-dashboard-col-max-count, var(--_col-count));
-
-    /* Effective column count */
-    --_effective-col-count: min(var(--_col-count), var(--_col-max-count));
-
-    /* Default row min height */
     --_default-row-min-height: 12rem;
-    /* Effective row min height */
-    --_row-min-height: var(--vaadin-dashboard-row-min-height, var(--_default-row-min-height));
-    /* Effective row height */
-    --_row-height: minmax(var(--_row-min-height, auto), auto);
-
-    display: grid;
-    overflow: hidden;
-    min-width: calc(var(--_col-min-width) + var(--_padding) * 2);
-
-    grid-template-columns: repeat(
-      var(--_effective-col-count, auto-fill),
-      minmax(var(--_col-min-width), var(--_col-max-width))
-    );
-
-    grid-auto-rows: var(--_row-height);
-  }
-
-  ::slotted(*) {
-    /* The grid-column value applied to children */
-    --_item-column: span min(var(--vaadin-dashboard-widget-colspan, 1), var(--_effective-col-count, var(--_col-count)));
-
-    grid-column: var(--_item-column);
-
-    /* The grid-row value applied to children */
-    --_item-row: span var(--vaadin-dashboard-widget-rowspan, 1);
-    grid-row: var(--_item-row);
   }
 
   :host([theme~='shaded-background']) {

package/src/components/dashboard-section.css

@@ -5,35 +5,16 @@
  */
 @media lumo_components_dashboard-section {
   :host {
-    display: grid;
-    position: relative;
-    grid-template-columns: subgrid;
-    --_section-column: 1 / calc(var(--_effective-col-count) + 1);
-    grid-column: var(--_section-column) !important;
     gap: var(--_gap, 1rem);
-    /* Dashboard section header height */
-    --_section-header-height: minmax(0, auto);
-    grid-template-rows: var(--_section-header-height) repeat(auto-fill, var(--_row-height));
-    grid-auto-rows: var(--_row-height);
     --_section-outline-offset: calc(min(var(--_gap), var(--_padding)) / 3);
     --_focus-ring-offset: calc((var(--_section-outline-offset) - var(--_focus-ring-width)));
     border-radius: var(--lumo-border-radius-l);
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  ::slotted(*) {
-    --_item-column: span min(var(--vaadin-dashboard-widget-colspan, 1), var(--_effective-col-count, var(--_col-count)));
-
-    grid-column: var(--_item-column);
-    --_item-row: span var(--vaadin-dashboard-widget-rowspan, 1);
-    grid-row: var(--_item-row);
+    border: none;
+    margin: 0;
+    padding: 0;
   }
 
   header {
-    grid-column: var(--_section-column);
     margin-bottom: calc(-1 * var(--_section-outline-offset));
     line-height: var(--lumo-line-height-s);
     padding-inline: var(--lumo-space-s);
@@ -41,14 +22,6 @@
     align-items: center;
   }
 
-  :host::before {
-    z-index: 2 !important;
-  }
-
-  ::slotted(vaadin-dashboard-widget-wrapper) {
-    display: contents;
-  }
-
   [part='title'] {
     font-size: var(--lumo-font-size-xl);
     font-weight: 600;
@@ -108,6 +81,5 @@
 
   [part~='move-forward-button'] {
     inset-inline-end: calc(-1 * var(--_section-outline-offset));
-    transform: translateY(-50%);
   }
 }

package/src/components/dashboard-widget.css

@@ -4,43 +4,15 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_dashboard-widget {
-  :host {
-    display: flex;
-    flex-direction: column;
-    grid-column: var(--_item-column);
-    grid-row: var(--_item-row);
-    background: var(--_widget-background);
-    border-radius: var(--_widget-border-radius);
-    box-shadow: var(--_widget-shadow);
-    position: relative;
-  }
-
   :host::before {
-    content: '';
-    position: absolute;
     inset: calc(-1 * var(--_widget-border-width));
     border: var(--_widget-border-width) solid var(--_widget-border-color);
     border-radius: calc(var(--_widget-border-radius) + var(--_widget-border-width));
-    pointer-events: none;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  :host(:not([editable])) [part~='resize-button'] {
-    display: none;
-  }
-
-  [part~='content'] {
-    flex: 1;
-    overflow: hidden;
   }
 
   /* Widget states */
 
   :host([editable]) {
-    --vaadin-dashboard-widget-shadow: var(--_widget-editable-shadow);
     --_widget-border-color: var(--lumo-contrast-20pct);
     --_widget-border-width: 1px;
   }
@@ -51,7 +23,6 @@
   }
 
   :host([selected]) {
-    --vaadin-dashboard-widget-shadow: var(--_widget-selected-shadow);
     background: var(--lumo-primary-color-10pct);
   }
 
@@ -62,13 +33,7 @@
   }
 
   :host([resizing])::after {
-    content: '';
-    z-index: 2;
-    position: absolute;
     top: -1px;
-    width: var(--_widget-resizer-width, 0);
-    height: var(--_widget-resizer-height, 0);
-    border-radius: inherit;
     background: var(--_drop-target-background-color);
     border: var(--_drop-target-border);
   }
@@ -81,7 +46,7 @@
   }
 
   :host([editable]) header {
-    padding-inline: var(--lumo-space-xs);
+    padding: var(--lumo-space-xs);
   }
 
   [part='title'] {
@@ -113,25 +78,12 @@
   /* Resize handle */
 
   [part~='resize-button'] {
-    z-index: 1;
-    overflow: hidden;
     --_resize-button-offset: min(var(--_gap), var(--_padding), var(--lumo-space-xs));
-    position: absolute;
     bottom: calc(-1 * var(--_resize-button-offset));
     inset-inline-end: calc(-1 * var(--_resize-button-offset));
-    cursor: nwse-resize;
-    touch-action: none;
     --icon: var(--lumo-icons-resize-handle);
   }
 
-  :host([dir='rtl']) [part~='resize-button'] {
-    cursor: sw-resize;
-  }
-
-  :host([dir='rtl']) [part~='resize-button'] .icon::before {
-    transform: scaleX(-1);
-  }
-
   /* Accessible resize mode controls */
 
   [part~='resize-apply-button'] {
@@ -146,48 +98,11 @@
     min-width: var(--lumo-size-s);
   }
 
-  [part~='resize-shrink-width-button'] + [part~='resize-grow-width-button'] {
-    margin-left: 1px;
-  }
-
   [part~='resize-grow-height-button'],
   [part~='resize-shrink-height-button'] {
     height: var(--lumo-size-s);
     padding-right: 0;
     padding-left: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  [part~='resize-shrink-height-button']:not([hidden]) + [part~='resize-grow-height-button'] {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  [part~='resize-shrink-height-button'] + [part~='resize-grow-height-button'] {
-    margin-top: 1px;
-  }
-
-  :host(:not([dir='rtl'])) [part~='resize-grow-width-button'],
-  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button'] {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :host([dir='rtl']) [part~='resize-grow-width-button'],
-  :host([dir='rtl']) [part~='resize-shrink-width-button'] {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button']:not([hidden]) + [part~='resize-grow-width-button'] {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  :host([dir='rtl']) [part~='resize-shrink-width-button']:not([hidden]) + [part~='resize-grow-width-button'] {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
   }
 
   [part~='resize-grow-height-button'],

package/src/components/dashboard.css

@@ -4,15 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_dashboard {
-  #grid[item-resizing] {
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
-  ::slotted(vaadin-dashboard-widget-wrapper) {
-    display: contents;
-  }
-
   :host {
     --_widget-opacity: 1;
   }

package/src/components/date-picker-overlay-content.css

@@ -5,15 +5,6 @@
  */
 @media lumo_components_date-picker-overlay-content {
   :host {
-    display: grid;
-    grid-template-areas:
-      'header header'
-      'months years'
-      'toolbar years';
-    grid-template-columns: minmax(0, 1fr) 0;
-    height: 100%;
-    outline: none;
-    position: relative;
     /* Background for the year scroller, placed here as we are using a mask image on the actual years part */
     background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
     background-size: 57px 100%;
@@ -26,18 +17,6 @@
     background-position: top left;
   }
 
-  :host([desktop]) {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-
-  :host([fullscreen][years-visible]) {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-
   ::slotted([slot='months']) {
     /* Month calendar height:
           header height + margin-bottom
@@ -55,17 +34,15 @@
       );
     --vaadin-infinite-scroller-buffer-offset: 10%;
     mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
-    position: relative;
   }
 
   ::slotted([slot='years']) {
     /* TODO get rid of fixed magic number */
     --vaadin-infinite-scroller-buffer-width: 57px;
     width: 57px;
-    height: auto;
-    top: 0;
-    bottom: 0;
     font-size: var(--lumo-font-size-s);
+    border: none;
+    background: transparent;
     box-shadow: inset 2px 0 4px 0 var(--lumo-shade-5pct);
     mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
     cursor: var(--lumo-clickable-cursor);
@@ -79,11 +56,6 @@
     --_lumo-date-picker-year-opacity: 1;
   }
 
-  :host([desktop]) ::slotted([slot='years']),
-  :host([years-visible]) ::slotted([slot='years']) {
-    visibility: visible;
-  }
-
   /* Year scroller position indicator */
   ::slotted([slot='years'])::before {
     border: none;
@@ -91,21 +63,17 @@
     height: 1em;
     background-color: var(--lumo-base-color);
     background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
-    transform: translate(-75%, -50%) rotate(45deg);
     border-top-right-radius: var(--lumo-border-radius-s);
     box-shadow: 2px -2px 6px 0 var(--lumo-shade-5pct);
-    z-index: 1;
+    translate: -75% -50%;
   }
 
   :host([dir='rtl']) ::slotted([slot='years'])::before {
-    right: 0;
-    transform: translate(75%, -50%) rotate(45deg);
+    border-bottom-left-radius: var(--lumo-border-radius-s);
+    translate: 75% -50%;
   }
 
   [part='toolbar'] {
-    display: flex;
-    grid-area: toolbar;
-    justify-content: space-between;
     padding: var(--lumo-space-s);
     border-bottom-left-radius: var(--lumo-border-radius-l);
   }
@@ -113,9 +81,9 @@
   /* Narrow viewport mode (fullscreen) */
 
   :host([fullscreen]) [part='toolbar'] {
-    grid-area: header;
     margin-inline-end: 57px;
     background-color: var(--lumo-base-color);
+    border: none;
   }
 
   [part='toolbar'] ::slotted(vaadin-button) {
@@ -125,8 +93,6 @@
   /* Very narrow screen (year scroller initially hidden) */
 
   [part='years-toggle-button'] {
-    display: flex;
-    align-items: center;
     height: var(--lumo-size-m);
     padding: 0 0.5em;
     border-radius: var(--lumo-border-radius-m);

package/src/components/message.css

@@ -5,14 +5,12 @@
  */
 @media lumo_components_message {
   :host {
-    display: flex;
-    flex-direction: row;
-    outline: none;
     color: var(--lumo-body-text-color);
     font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size-m);
     line-height: var(--lumo-line-height-m);
     padding: var(--lumo-space-s) var(--lumo-space-m);
+    gap: 0;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     -webkit-text-size-adjust: 100%;
@@ -20,34 +18,25 @@
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
   }
 
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  [part='content'] {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
+  :host(:is(:focus-visible, [focus-ring])) {
+    outline: none;
   }
 
   [part='header'] {
-    align-items: baseline;
-    display: flex;
-    flex-flow: row wrap;
     min-height: calc(var(--lumo-font-size-m) * var(--lumo-line-height-m));
   }
 
   [part='name'] {
-    font-weight: 500;
-    margin-right: var(--lumo-space-s);
+    color: inherit;
+    margin-inline-end: var(--lumo-space-s);
   }
 
   [part='name']:empty {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   [part='message'] {
-    white-space: pre-wrap;
+    color: inherit;
   }
 
   [part='time'] {
@@ -58,25 +47,11 @@
   ::slotted([slot='avatar']) {
     --vaadin-avatar-outline-width: 0;
     --vaadin-avatar-size: var(--lumo-size-m);
-    flex-shrink: 0;
     margin-top: calc(var(--lumo-space-s));
     margin-inline-end: calc(var(--lumo-space-m));
   }
 
-  ::slotted(vaadin-markdown) {
-    white-space: normal;
-  }
-
   :host([focus-ring]) {
     box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
-
-  :host([dir='rtl']) [part='name'] {
-    margin-left: var(--lumo-space-s);
-    margin-right: 0;
-  }
-
-  :host([dir='rtl']) [part='name']:empty {
-    margin-left: 0;
-  }
 }

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