@vaadin/dashboard 25.0.0-alpha4 → 25.0.0-alpha6

package/package.json

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

package/src/styles/vaadin-dashboard-button-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 dashboardButtonStyles: CSSResult;

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

@@ -0,0 +1,20 @@
+/**
+ * @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 { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-core-styles.js';
+
+const dashboardButton = css`
+  :host {
+    min-width: 1rem;
+  }
+`;
+
+export const dashboardButtonStyles = [buttonStyles, dashboardButton];

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

@@ -9,7 +9,7 @@
  * license.
  */
 import { css } from 'lit';
-import { dashboardLayoutStyles } from './vaadin-dashboard-layout-styles.js';
+import { dashboardLayoutStyles } from './vaadin-dashboard-layout-core-styles.js';
 
 const dashboard = css`
   #grid[item-resizing] {

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

@@ -9,7 +9,7 @@
  * license.
  */
 import { css } from 'lit';
-import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-widget-section-styles.js';
+import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-widget-section-core-styles.js';
 
 const sectionStyles = css`
   :host {

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

@@ -9,7 +9,7 @@
  * license.
  */
 import { css } from 'lit';
-import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-widget-section-styles.js';
+import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-widget-section-core-styles.js';
 
 const widgetStyles = css`
   :host {
@@ -31,6 +31,7 @@ const widgetStyles = css`
   [part~='content'] {
     flex: 1;
     overflow: hidden;
+    min-height: 1rem;
   }
 
   [part~='resize-button'] {

package/src/vaadin-dashboard-button.js

@@ -9,21 +9,22 @@
  * license.
  */
 import { html, LitElement } from 'lit';
-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 { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dashboardButtonStyles } from './styles/vaadin-dashboard-button-core-styles.js';
 
-class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-dashboard-button';
   }
 
   static get styles() {
-    return buttonStyles;
+    return dashboardButtonStyles;
   }
 
   /** @protected */

package/src/vaadin-dashboard-layout.js

@@ -12,8 +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 { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { dashboardLayoutStyles } from './styles/vaadin-dashboard-layout-styles.js';
+import { dashboardLayoutStyles } from './styles/vaadin-dashboard-layout-core-styles.js';
 import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
 
 /**
@@ -56,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(LumoInjectionMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dashboard-layout';
   }

package/src/vaadin-dashboard-section.js

@@ -12,8 +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 { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { dashboardSectionStyles } from './styles/vaadin-dashboard-section-styles.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';
 
@@ -69,7 +70,9 @@ import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
  * @mixes ThemableMixin
  * @mixes DashboardItemMixin
  */
-class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DashboardSection extends DashboardItemMixin(
+  ElementMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dashboard-section';
   }

package/src/vaadin-dashboard-widget.js

@@ -12,8 +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 { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { dashboardWidgetStyles } from './styles/vaadin-dashboard-widget-styles.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';
@@ -103,7 +104,9 @@ 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(LumoInjectionMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dashboard-widget';
   }

package/src/vaadin-dashboard.js

@@ -15,8 +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 { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { dashboardStyles } from './styles/vaadin-dashboard-styles.js';
+import { dashboardStyles } from './styles/vaadin-dashboard-core-styles.js';
 import {
   getElementItem,
   getItemsArrayOfItem,
@@ -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(LumoInjectionMixin(PolylitMixin(LitElement))))),
 ) {
   static get is() {
     return 'vaadin-dashboard';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "25.0.0-alpha4",
+  "version": "25.0.0-alpha6",
   "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-alpha4/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha4/#/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-alpha6/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha6/#/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-alpha4",
+  "version": "25.0.0-alpha6",
   "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-alpha4/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha4/#/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-alpha6/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha6/#/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": [
             {