@vaadin/dashboard 25.0.0-alpha3 → 25.0.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dashboard",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -37,16 +37,16 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha3",
-    "@vaadin/button": "25.0.0-alpha3",
-    "@vaadin/component-base": "25.0.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha3",
+    "@vaadin/a11y-base": "25.0.0-alpha5",
+    "@vaadin/button": "25.0.0-alpha5",
+    "@vaadin/component-base": "25.0.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha5",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha3",
-    "@vaadin/test-runner-commands": "25.0.0-alpha3",
+    "@vaadin/chai-plugins": "25.0.0-alpha5",
+    "@vaadin/test-runner-commands": "25.0.0-alpha5",
     "@vaadin/testing-helpers": "^2.0.0"
   },
   "cvdlName": "vaadin-dashboard",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8367dd20a47f53ca5589ad349a8e286ec2673055"
+  "gitHead": "7dc87bb2a3cae81ed53259fa10b58f990d50c6fd"
 }

package/src/styles/vaadin-dashboard-core-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import type { CSSResult } from 'lit';
+
+export const dashboardStyles: CSSResult;

package/src/styles/vaadin-dashboard-core-styles.js

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { css } from 'lit';
+import { dashboardLayoutStyles } from './vaadin-dashboard-layout-core-styles.js';
+
+const dashboard = css`
+  #grid[item-resizing] {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  ::slotted(vaadin-dashboard-widget-wrapper) {
+    display: contents;
+  }
+`;
+
+export const dashboardStyles = [dashboardLayoutStyles, dashboard];

package/src/styles/vaadin-dashboard-layout-core-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import type { CSSResult } from 'lit';
+
+export const dashboardLayoutStyles: CSSResult;

package/src/styles/vaadin-dashboard-layout-core-styles.js

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { css } from 'lit';
+
+export const dashboardLayoutStyles = css`
+  :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: 1rem;
+    --_padding: max(0px, var(--vaadin-dashboard-padding, var(--_default-padding)));
+    padding: var(--_padding);
+
+    /* Gap between widgets */
+    --_default-gap: 1rem;
+    --_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);
+  }
+`;

package/src/styles/vaadin-dashboard-section-core-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import type { CSSResult } from 'lit';
+
+export const dashboardSectionStyles: CSSResult;

package/src/styles/vaadin-dashboard-section-core-styles.js

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { css } from 'lit';
+import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-widget-section-core-styles.js';
+
+const sectionStyles = css`
+  :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);
+  }
+
+  :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);
+  }
+
+  header {
+    grid-column: var(--_section-column);
+  }
+
+  :host::before {
+    z-index: 2 !important;
+  }
+
+  ::slotted(vaadin-dashboard-widget-wrapper) {
+    display: contents;
+  }
+`;
+
+export const dashboardSectionStyles = [sectionStyles, dashboardWidgetAndSectionStyles];

package/src/styles/vaadin-dashboard-widget-core-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import type { CSSResult } from 'lit';
+
+export const dashboardWidgetStyles: CSSResult;

package/src/styles/vaadin-dashboard-widget-core-styles.js

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { css } from 'lit';
+import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-widget-section-core-styles.js';
+
+const widgetStyles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    grid-column: var(--_item-column);
+    grid-row: var(--_item-row);
+    position: relative;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host(:not([editable])) [part~='resize-button'] {
+    display: none;
+  }
+
+  [part~='content'] {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  [part~='resize-button'] {
+    position: absolute;
+    bottom: 0;
+    inset-inline-end: 0;
+    z-index: 1;
+    overflow: hidden;
+  }
+
+  :host([resizing])::after {
+    content: '';
+    z-index: 2;
+    position: absolute;
+    top: -1px;
+    width: var(--_widget-resizer-width, 0);
+    height: var(--_widget-resizer-height, 0);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: inherit;
+  }
+`;
+
+export const dashboardWidgetStyles = [widgetStyles, dashboardWidgetAndSectionStyles];

package/src/{vaadin-dashboard-styles.js → styles/vaadin-dashboard-widget-section-core-styles.js}

@@ -8,13 +8,7 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-export const hasWidgetWrappers = css`
-  ::slotted(vaadin-dashboard-widget-wrapper) {
-    display: contents;
-  }
-`;
+import { css } from 'lit';
 
 export const dashboardWidgetAndSectionStyles = css`
   :host {

package/src/vaadin-dashboard-button.js

@@ -9,15 +9,16 @@
  * license.
  */
 import { html, LitElement } from 'lit';
-import { buttonStyles } from '@vaadin/button/src/vaadin-button-core-styles.js';
+import { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-core-styles.js';
 import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-dashboard-button';
   }

package/src/vaadin-dashboard-item-mixin.js

@@ -14,7 +14,6 @@ import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { KeyboardController } from './keyboard-controller.js';
 import { fireMove, fireRemove, fireResize } from './vaadin-dashboard-helpers.js';
-import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-styles.js';
 
 const DEFAULT_I18N = {
   selectWidget: 'Select widget for editing',
@@ -47,10 +46,6 @@ export function getDefaultI18n() {
  */
 export const DashboardItemMixin = (superClass) =>
   class DashboardItemMixinClass extends ResizeMixin(superClass) {
-    static get styles() {
-      return dashboardWidgetAndSectionStyles;
-    }
-
     static get properties() {
       return {
         /** @protected */

package/src/vaadin-dashboard-layout-mixin.js

@@ -9,7 +9,6 @@
  * license.
  */
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
  * A mixin to enable the dashboard layout functionality
@@ -19,83 +18,6 @@ import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
  */
 export const DashboardLayoutMixin = (superClass) =>
   class DashboardLayoutMixinClass extends ResizeMixin(superClass) {
-    static get styles() {
-      return css`
-        :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: 1rem;
-          --_padding: max(0px, var(--vaadin-dashboard-padding, var(--_default-padding)));
-          padding: var(--_padding);
-
-          /* Gap between widgets */
-          --_default-gap: 1rem;
-          --_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);
-        }
-      `;
-    }
-
     static get properties() {
       return {
         /**

package/src/vaadin-dashboard-layout.js

@@ -12,7 +12,9 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dashboardLayoutStyles } from './styles/vaadin-dashboard-layout-core-styles.js';
 import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
 
 /**
@@ -55,7 +57,9 @@ import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class DashboardLayout extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DashboardLayout extends DashboardLayoutMixin(
+  ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dashboard-layout';
   }
@@ -64,6 +68,10 @@ class DashboardLayout extends DashboardLayoutMixin(ElementMixin(ThemableMixin(Po
     return 'vaadin-dashboard';
   }
 
+  static get styles() {
+    return dashboardLayoutStyles;
+  }
+
   /** @protected */
   render() {
     return html`<div id="grid"><slot></slot></div>`;

package/src/vaadin-dashboard-section.js

@@ -12,10 +12,11 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { css, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dashboardSectionStyles } from './styles/vaadin-dashboard-section-core-styles.js';
 import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
 import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
-import { hasWidgetWrappers } from './vaadin-dashboard-styles.js';
 
 /**
  * A section component for use with the Dashboard component
@@ -69,51 +70,15 @@ import { hasWidgetWrappers } from './vaadin-dashboard-styles.js';
  * @mixes ThemableMixin
  * @mixes DashboardItemMixin
  */
-class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DashboardSection extends DashboardItemMixin(
+  ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dashboard-section';
   }
 
   static get styles() {
-    return [
-      css`
-        :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);
-        }
-
-        :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);
-        }
-
-        header {
-          grid-column: var(--_section-column);
-        }
-
-        :host::before {
-          z-index: 2 !important;
-        }
-      `,
-      hasWidgetWrappers,
-      super.styles,
-    ];
+    return dashboardSectionStyles;
   }
 
   static get properties() {

package/src/vaadin-dashboard-widget.js

@@ -12,7 +12,9 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { css, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dashboardWidgetStyles } from './styles/vaadin-dashboard-widget-core-styles.js';
 import { findAncestorInstance, SYNCHRONIZED_ATTRIBUTES, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
 import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
 import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
@@ -102,56 +104,15 @@ import { DashboardSection } from './vaadin-dashboard-section.js';
  * @mixes ThemableMixin
  * @mixes DashboardItemMixin
  */
-class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DashboardWidget extends DashboardItemMixin(
+  ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dashboard-widget';
   }
 
   static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          grid-column: var(--_item-column);
-          grid-row: var(--_item-row);
-          position: relative;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        :host(:not([editable])) [part~='resize-button'] {
-          display: none;
-        }
-
-        [part~='content'] {
-          flex: 1;
-          overflow: hidden;
-        }
-
-        [part~='resize-button'] {
-          position: absolute;
-          bottom: 0;
-          inset-inline-end: 0;
-          z-index: 1;
-          overflow: hidden;
-        }
-
-        :host([resizing])::after {
-          content: '';
-          z-index: 2;
-          position: absolute;
-          top: -1px;
-          width: var(--_widget-resizer-width, 0);
-          height: var(--_widget-resizer-height, 0);
-          background: rgba(0, 0, 0, 0.1);
-          border-radius: inherit;
-        }
-      `,
-      super.styles,
-    ];
+    return dashboardWidgetStyles;
   }
 
   static get properties() {

package/src/vaadin-dashboard.js

@@ -15,7 +15,9 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { css, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dashboardStyles } from './styles/vaadin-dashboard-core-styles.js';
 import {
   getElementItem,
   getItemsArrayOfItem,
@@ -26,7 +28,6 @@ import {
 import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
 import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
 import { DashboardSection } from './vaadin-dashboard-section.js';
-import { hasWidgetWrappers } from './vaadin-dashboard-styles.js';
 import { WidgetReorderController } from './widget-reorder-controller.js';
 import { WidgetResizeController } from './widget-resize-controller.js';
 
@@ -105,7 +106,7 @@ import { WidgetResizeController } from './widget-resize-controller.js';
  * @mixes ThemableMixin
  */
 class Dashboard extends DashboardLayoutMixin(
-  I18nMixin(getDefaultI18n(), ElementMixin(ThemableMixin(PolylitMixin(LitElement)))),
+  I18nMixin(getDefaultI18n(), ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))),
 ) {
   static get is() {
     return 'vaadin-dashboard';
@@ -116,16 +117,7 @@ class Dashboard extends DashboardLayoutMixin(
   }
 
   static get styles() {
-    return [
-      super.styles,
-      css`
-        #grid[item-resizing] {
-          -webkit-user-select: none;
-          user-select: none;
-        }
-      `,
-      hasWidgetWrappers,
-    ];
+    return dashboardStyles;
   }
 
   static get properties() {

package/theme/lumo/vaadin-dashboard-widget-styles.js

@@ -18,8 +18,8 @@ const dashboardWidgetAndSection = css`
     --_widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--lumo-contrast-20pct));
     --_widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent);
     --_widget-editable-shadow: var(--lumo-box-shadow-s);
-    --_widget-selected-shadow: 0 2px 4px -1px var(--lumo-primary-color-10pct),
-      0 3px 12px -1px var(--lumo-primary-color-50pct);
+    --_widget-selected-shadow:
+      0 2px 4px -1px var(--lumo-primary-color-10pct), 0 3px 12px -1px var(--lumo-primary-color-50pct);
     --_drop-target-background-color: var(
       --vaadin-dashboard-drop-target-background-color,
       var(--lumo-primary-color-10pct)
@@ -37,11 +37,6 @@ const dashboardWidgetAndSection = css`
     filter: var(--_widget-filter);
   }
 
-  :host([selected]) {
-    opacity: 1;
-    z-index: 1;
-  }
-
   :host([focused]) {
     z-index: 1;
   }
@@ -86,6 +81,8 @@ const dashboardWidgetAndSection = css`
     --_icon-color: var(--lumo-primary-text-color);
   }
   :host([selected]) {
+    opacity: 1;
+    z-index: 1;
     --_icon-color: var(--lumo-primary-text-color);
   }
   :host(:is([move-mode], [resize-mode])) {
@@ -257,6 +254,13 @@ const dashboardWidget = css`
     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'] {
@@ -295,17 +299,6 @@ const dashboardWidget = css`
     --icon: var(--lumo-icons-minus);
   }
 
-  [part~='resize-grow-height-button'],
-  [part~='resize-shrink-height-button'] {
-    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;
-  }
-
   /* Windows High Contrast Mode */
   @media (forced-colors: active) {
     :host {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha5",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -136,7 +136,7 @@
         },
         {
           "name": "vaadin-dashboard",
-          "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n  { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n  { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n  {\n    title: 'Section title',\n    items: [{ title: 'Widget in section title', content: 'Text 3' }]\n  },\n  // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n  const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n  if (!root.contains(widget)) {\n    root.appendChild(widget);\n  }\n  widget.widgetTitle = item.title;\n  widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property                     | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width`  | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard\n`--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|-------------\n`editable`           | Set when the dashboard is editable.\n`dense-layout`       | Set when the dashboard is in dense mode.\n`item-selected`      | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n  { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n  { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n  {\n    title: 'Section title',\n    items: [{ title: 'Widget in section title', content: 'Text 3' }]\n  },\n  // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n  const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n  if (!root.contains(widget)) {\n    root.appendChild(widget);\n  }\n  widget.widgetTitle = item.title;\n  widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property                     | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width`  | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard\n`--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|-------------\n`editable`           | Set when the dashboard is editable.\n`dense-layout`       | Set when the dashboard is in dense mode.\n`item-selected`      | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "dense-layout",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "25.0.0-alpha3",
+  "version": "25.0.0-alpha5",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -58,7 +58,7 @@
         },
         {
           "name": "vaadin-dashboard",
-          "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha3/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n  { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n  { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n  {\n    title: 'Section title',\n    items: [{ title: 'Widget in section title', content: 'Text 3' }]\n  },\n  // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n  const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n  if (!root.contains(widget)) {\n    root.appendChild(widget);\n  }\n  widget.widgetTitle = item.title;\n  widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property                     | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width`  | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard\n`--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|-------------\n`editable`           | Set when the dashboard is editable.\n`dense-layout`       | Set when the dashboard is in dense mode.\n`item-selected`      | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n  { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n  { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n  {\n    title: 'Section title',\n    items: [{ title: 'Widget in section title', content: 'Text 3' }]\n  },\n  // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n  const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n  if (!root.contains(widget)) {\n    root.appendChild(widget);\n  }\n  widget.widgetTitle = item.title;\n  widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property                     | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width`  | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard\n`--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|-------------\n`editable`           | Set when the dashboard is editable.\n`dense-layout`       | Set when the dashboard is in dense mode.\n`item-selected`      | Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {