@vaadin/dashboard 25.2.0-alpha8 → 25.2.0-beta1

package/custom-elements.json

@@ -343,26 +343,6 @@
           "description": "Shared functionality between widgets and sections",
           "name": "DashboardItemMixin",
           "members": [],
-          "events": [
-            {
-              "name": "item-move-mode-changed",
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
-            {
-              "name": "item-resize-mode-changed",
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
-            {
-              "name": "item-selected-changed",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
           "attributes": [],
           "mixins": [
             {
@@ -426,14 +406,6 @@
               "attribute": "root-heading-level"
             }
           ],
-          "events": [
-            {
-              "name": "dashboard-root-heading-level-changed",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
           "attributes": [
             {
               "name": "dense-layout",
@@ -482,7 +454,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A responsive, grid-based dashboard layout component\n\n```html\n<vaadin-dashboard-layout>\n  <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-section section-title=\"Section\">\n    <vaadin-dashboard-widget widget-title=\"Widget in Section\"></vaadin-dashboard-widget>\n  </vaadin-dashboard-section>\n</vaadin-dashboard-layout>\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 layout\n`--vaadin-dashboard-col-max-width`  | maximum column width of the layout\n`--vaadin-dashboard-row-min-height` | minimum row height of the layout\n`--vaadin-dashboard-col-max-count`  | maximum column count of the layout\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`dense-layout` | Set when the dashboard is in dense mode.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "A responsive, grid-based dashboard layout component\n\n```html\n<vaadin-dashboard-layout>\n  <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-section section-title=\"Section\">\n    <vaadin-dashboard-widget widget-title=\"Widget in Section\"></vaadin-dashboard-widget>\n  </vaadin-dashboard-section>\n</vaadin-dashboard-layout>\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 layout\n`--vaadin-dashboard-col-max-width`  | maximum column width of the layout\n`--vaadin-dashboard-row-min-height` | minimum row height of the layout\n`--vaadin-dashboard-row-height`     | fixed row height of the layout. Must be in length units. Overrides `--vaadin-dashboard-row-min-height` and prevents rows from growing to fit content\n`--vaadin-dashboard-col-max-count`  | maximum column count of the layout\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`dense-layout` | Set when the dashboard is in dense mode.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "DashboardLayout",
           "members": [
             {
@@ -568,18 +540,7 @@
               }
             }
           ],
-          "events": [
-            {
-              "name": "dashboard-root-heading-level-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "DashboardLayoutMixin",
-                "module": "src/vaadin-dashboard-layout-mixin.js"
-              }
-            }
-          ]
+          "events": []
         }
       ],
       "exports": [
@@ -651,38 +612,7 @@
           },
           "tagName": "vaadin-dashboard-section",
           "customElement": true,
-          "events": [
-            {
-              "name": "item-move-mode-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "DashboardItemMixin",
-                "module": "src/vaadin-dashboard-item-mixin.js"
-              }
-            },
-            {
-              "name": "item-resize-mode-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "DashboardItemMixin",
-                "module": "src/vaadin-dashboard-item-mixin.js"
-              }
-            },
-            {
-              "name": "item-selected-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "DashboardItemMixin",
-                "module": "src/vaadin-dashboard-item-mixin.js"
-              }
-            }
-          ]
+          "events": []
         }
       ],
       "exports": [
@@ -754,38 +684,7 @@
           },
           "tagName": "vaadin-dashboard-widget",
           "customElement": true,
-          "events": [
-            {
-              "name": "item-move-mode-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "DashboardItemMixin",
-                "module": "src/vaadin-dashboard-item-mixin.js"
-              }
-            },
-            {
-              "name": "item-resize-mode-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "DashboardItemMixin",
-                "module": "src/vaadin-dashboard-item-mixin.js"
-              }
-            },
-            {
-              "name": "item-selected-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "DashboardItemMixin",
-                "module": "src/vaadin-dashboard-item-mixin.js"
-              }
-            }
-          ]
+          "events": []
         }
       ],
       "exports": [
@@ -805,7 +704,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](#/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\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`](#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](#/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\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-row-height`     | fixed row height of the dashboard. Must be in length units. Overrides `--vaadin-dashboard-row-min-height` and prevents rows from growing to fit content\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.",
           "name": "Dashboard",
           "members": [
             {
@@ -930,16 +829,6 @@
               },
               "description": "Fired when an item selected state changed",
               "name": "dashboard-item-selected-changed"
-            },
-            {
-              "name": "dashboard-root-heading-level-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "DashboardLayoutMixin",
-                "module": "src/vaadin-dashboard-layout-mixin.js"
-              }
             }
           ],
           "attributes": [
@@ -1004,11 +893,27 @@
             {
               "name": "I18nMixin",
               "package": "@vaadin/component-base/src/i18n-mixin.js"
+            },
+            {
+              "name": "ElementMixin",
+              "package": "@vaadin/component-base/src/element-mixin.js"
+            },
+            {
+              "name": "ThemableMixin",
+              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            },
+            {
+              "name": "LumoInjectionMixin",
+              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
             }
           ],
           "superclass": {
-            "name": "DEFAULT_I18N",
-            "module": "src/vaadin-dashboard.js"
+            "name": "LitElement",
+            "package": "lit"
           },
           "tagName": "vaadin-dashboard",
           "customElement": true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dashboard",
-  "version": "25.2.0-alpha8",
+  "version": "25.2.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,18 +37,18 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.2.0-alpha8",
-    "@vaadin/button": "25.2.0-alpha8",
-    "@vaadin/component-base": "25.2.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha8",
+    "@vaadin/a11y-base": "25.2.0-beta1",
+    "@vaadin/button": "25.2.0-beta1",
+    "@vaadin/component-base": "25.2.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha8",
-    "@vaadin/chai-plugins": "25.2.0-alpha8",
-    "@vaadin/test-runner-commands": "25.2.0-alpha8",
+    "@vaadin/aura": "25.2.0-beta1",
+    "@vaadin/chai-plugins": "25.2.0-beta1",
+    "@vaadin/test-runner-commands": "25.2.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-beta1",
     "sinon": "^21.0.2"
   },
   "cvdlName": "vaadin-dashboard",
@@ -57,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "2b82e20cdfc605b1187e9a24ae42869e1500ab68"
+  "gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163"
 }

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

@@ -10,4 +10,6 @@
  */
 import type { CSSResult } from 'lit';
 
+export const widgetFixedHeightDeclarations: CSSResult;
+
 export const dashboardLayoutStyles: CSSResult;

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

@@ -9,7 +9,30 @@
  * license.
  */
 import '@vaadin/component-base/src/styles/style-props.js';
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+
+/**
+ * Declarations that pin the host or slotted element to the fixed
+ * `--vaadin-dashboard-row-height` (scaled by `--vaadin-dashboard-widget-rowspan` and the
+ * inter-row `--_gap`). Imported by the widget host and the section's slotted rule
+ * because the calc must live on each capped element so `var(--vaadin-dashboard-widget-rowspan)`
+ * resolves against that element's own context.
+ *
+ * The cap is `!important` so an inline `min-height`/`max-height` on a widget can't widen
+ * the cell beyond the row height. When `--vaadin-dashboard-row-height` is unset the calc
+ * is invalid, the property becomes invalid at computed value time and falls back to its
+ * initial value (`auto` for `min-height`, `none` for `max-height`) — these initial values
+ * are still applied with `!important`, so an inline `min-height`/`max-height` on a widget
+ * is a no-op even when no fixed row height is configured. See the variable's docs.
+ */
+export const widgetFixedHeightDeclarations = unsafeCSS`
+    --_widget-fixed-height: calc(
+      var(--vaadin-dashboard-widget-rowspan, 1) * var(--vaadin-dashboard-row-height) +
+        (var(--vaadin-dashboard-widget-rowspan, 1) - 1) * var(--_gap)
+    );
+    min-height: var(--_widget-fixed-height) !important;
+    max-height: var(--_widget-fixed-height) !important;
+`;
 
 export const dashboardLayoutStyles = css`
   :host {
@@ -56,8 +79,9 @@ export const dashboardLayoutStyles = css`
 
     /* Default row min height */
     --_default-row-min-height: 12em;
-    /* Effective row min height */
-    --_row-min-height: var(--vaadin-dashboard-row-min-height, var(--_default-row-min-height));
+    /* Effective row min height. A fixed row height takes precedence so the parent track also collapses to it. */
+    /* prettier-ignore */
+    --_row-min-height: var(--vaadin-dashboard-row-height, var(--vaadin-dashboard-row-min-height, var(--_default-row-min-height)));
     /* Effective row height */
     --_row-height: minmax(var(--_row-min-height, auto), auto);
 
@@ -83,4 +107,9 @@ export const dashboardLayoutStyles = css`
     --_item-row: span var(--vaadin-dashboard-widget-rowspan, 1);
     grid-row: var(--_item-row);
   }
+
+  /* Pin slotted children to the fixed row height when one is set. Sections are excluded so they can grow to wrap multiple sub-rows. */
+  ::slotted(:not(vaadin-dashboard-section)) {
+    ${widgetFixedHeightDeclarations};
+  }
 `;

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

@@ -10,6 +10,7 @@
  */
 import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
+import { widgetFixedHeightDeclarations } from './vaadin-dashboard-layout-base-styles.js';
 import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-widget-section-base-styles.js';
 
 const sectionStyles = css`
@@ -42,12 +43,13 @@ const sectionStyles = css`
     grid-row: var(--_item-row);
   }
 
-  header {
-    grid-column: var(--_section-column);
+  /* Mirror the layout's cap so non-widget children inside a section also stay pinned to the fixed row height. Sections nested inside a section are excluded so they can still grow. */
+  ::slotted(:not(vaadin-dashboard-section)) {
+    ${widgetFixedHeightDeclarations};
   }
 
-  :host::before {
-    z-index: 2 !important;
+  header {
+    grid-column: var(--_section-column);
   }
 
   ::slotted(vaadin-dashboard-widget-wrapper) {

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

@@ -10,6 +10,7 @@
  */
 import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
+import { widgetFixedHeightDeclarations } from './vaadin-dashboard-layout-base-styles.js';
 import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-widget-section-base-styles.js';
 
 const widgetStyles = css`
@@ -22,19 +23,10 @@ const widgetStyles = css`
     background: var(--_widget-background);
     border-radius: var(--_widget-border-radius);
     box-shadow: var(--_widget-shadow);
-    border-color: var(--_widget-border-color);
-  }
+    border: var(--_widget-border-width) solid var(--_widget-border-color);
 
-  :host::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-color: inherit;
-    border-width: var(--_widget-border-width);
-    border-style: solid;
-    border-radius: inherit;
-    pointer-events: none;
-    z-index: 1;
+    /* Pin to the fixed row height when one is set. The widget host's own definition is needed so widgets nested inside sections in vaadin-dashboard-layout (where the layout-level cap doesn't reach) still get capped. */
+    ${widgetFixedHeightDeclarations};
   }
 
   :host([hidden]) {

package/src/styles/vaadin-dashboard-widget-section-base-styles.js

@@ -21,8 +21,11 @@ export const dashboardWidgetAndSectionStyles = css`
     --_widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent);
     --_widget-editable-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
     --_widget-selected-shadow: 0 3px 12px -1px rgba(0, 0, 0, 0.3);
-    --_drop-target-background: var(--vaadin-dashboard-drop-target-background, var(--vaadin-background-container));
-    --_drop-target-border-color: var(--vaadin-dashboard-drop-target-border-color, var(--vaadin-border-color-secondary));
+    --_drop-target-background-color: var(
+      --vaadin-dashboard-drop-target-background-color,
+      var(--vaadin-background-container)
+    );
+    --_drop-target-border: var(--vaadin-dashboard-drop-target-border, 1px dashed var(--vaadin-border-color-secondary));
     --_focus-ring-color: var(--vaadin-focus-ring-color);
     --_focus-ring-width: var(--vaadin-focus-ring-width);
   }
@@ -34,9 +37,9 @@ export const dashboardWidgetAndSectionStyles = css`
   }
 
   :host([dragging]) {
-    box-shadow: none;
-    background: var(--_drop-target-background);
-    border-color: var(--_drop-target-border-color);
+    box-shadow: none !important;
+    background: var(--_drop-target-background-color) !important;
+    border: var(--_drop-target-border) !important;
   }
 
   :host([dragging]) * {

package/src/vaadin-dashboard-button.js

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -23,9 +22,6 @@ import { dashboardButtonStyles } from './styles/vaadin-dashboard-button-base-sty
  *
  * @customElement vaadin-dashboard-button
  * @extends HTMLElement
- * @mixes ButtonMixin
- * @mixes ElementMixin
- * @mixes ThemableMixin
  * @protected
  */
 class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {

package/src/vaadin-dashboard-helpers.js

@@ -52,7 +52,7 @@ export function getItemsArrayOfItem(item, items) {
  */
 export function getElementItem(element) {
   const wrapper = element.closest(WRAPPER_LOCAL_NAME);
-  return wrapper && wrapper.__item;
+  return wrapper?.__item;
 }
 
 /**

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

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -40,9 +39,6 @@ export function getDefaultI18n() {
 
 /**
  * Shared functionality between widgets and sections
- *
- * @polymerMixin
- * @mixes ResizeMixin
  */
 export const DashboardItemMixin = (superClass) =>
   class DashboardItemMixinClass extends ResizeMixin(superClass) {
@@ -316,6 +312,7 @@ export const DashboardItemMixin = (superClass) =>
       if (!!selected === !!oldSelected) {
         return;
       }
+      /** @internal to not document it in CEM */
       this.dispatchEvent(new CustomEvent('item-selected-changed', { bubbles: true, detail: { value: selected } }));
       if (selected) {
         this.__focusTrapController.trapFocus(this.$.focustrap);
@@ -386,6 +383,7 @@ export const DashboardItemMixin = (superClass) =>
       if (!!moveMode === !!oldMoveMode) {
         return;
       }
+      /** @internal to not document it in CEM */
       this.dispatchEvent(new CustomEvent('item-move-mode-changed', { bubbles: true, detail: { value: moveMode } }));
     }
 
@@ -394,6 +392,7 @@ export const DashboardItemMixin = (superClass) =>
       if (!!resizeMode === !!oldResizeMode) {
         return;
       }
+      /** @internal to not document it in CEM */
       this.dispatchEvent(new CustomEvent('item-resize-mode-changed', { bubbles: true, detail: { value: resizeMode } }));
     }
 

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

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -12,9 +11,6 @@ import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
 /**
  * A mixin to enable the dashboard layout functionality
- *
- * @polymerMixin
- * @mixes ResizeMixin
  */
 export const DashboardLayoutMixin = (superClass) =>
   class DashboardLayoutMixinClass extends ResizeMixin(superClass) {
@@ -92,6 +88,7 @@ export const DashboardLayoutMixin = (superClass) =>
 
     /** @private */
     __rootHeadingLevelChanged(rootHeadingLevel) {
+      /** @internal to not document it in CEM */
       this.dispatchEvent(
         new CustomEvent('dashboard-root-heading-level-changed', { detail: { value: rootHeadingLevel } }),
       );

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

@@ -34,6 +34,7 @@ import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
  * `--vaadin-dashboard-col-min-width`  | minimum column width of the layout
  * `--vaadin-dashboard-col-max-width`  | maximum column width of the layout
  * `--vaadin-dashboard-row-min-height` | minimum row height of the layout
+ * `--vaadin-dashboard-row-height`     | fixed row height of the layout. Must be in length units. Overrides `--vaadin-dashboard-row-min-height` and prevents rows from growing to fit content
  * `--vaadin-dashboard-col-max-count`  | maximum column count of the layout
  * `--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)
  * `--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)

package/src/vaadin-dashboard-layout.js

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -39,6 +38,7 @@ import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
  * `--vaadin-dashboard-col-min-width`  | minimum column width of the layout
  * `--vaadin-dashboard-col-max-width`  | maximum column width of the layout
  * `--vaadin-dashboard-row-min-height` | minimum row height of the layout
+ * `--vaadin-dashboard-row-height`     | fixed row height of the layout. Must be in length units. Overrides `--vaadin-dashboard-row-min-height` and prevents rows from growing to fit content
  * `--vaadin-dashboard-col-max-count`  | maximum column count of the layout
  * `--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)
  * `--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)
@@ -53,9 +53,6 @@ import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
  *
  * @customElement vaadin-dashboard-layout
  * @extends HTMLElement
- * @mixes DashboardLayoutMixin
- * @mixes ElementMixin
- * @mixes ThemableMixin
  */
 class DashboardLayout extends DashboardLayoutMixin(
   ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),

package/src/vaadin-dashboard-section.js

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -67,9 +66,6 @@ import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
  *
  * @customElement vaadin-dashboard-section
  * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ThemableMixin
- * @mixes DashboardItemMixin
  */
 class DashboardSection extends DashboardItemMixin(
   ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),

package/src/vaadin-dashboard-widget.js

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -101,9 +100,6 @@ import { DashboardSection } from './vaadin-dashboard-section.js';
  *
  * @customElement vaadin-dashboard-widget
  * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ThemableMixin
- * @mixes DashboardItemMixin
  */
 class DashboardWidget extends DashboardItemMixin(
   ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),

package/src/vaadin-dashboard.d.ts

@@ -211,6 +211,7 @@ export interface DashboardI18n {
  * `--vaadin-dashboard-col-min-width`  | minimum column width of the dashboard
  * `--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard
  * `--vaadin-dashboard-row-min-height` | minimum row height of the dashboard
+ * `--vaadin-dashboard-row-height`     | fixed row height of the dashboard. Must be in length units. Overrides `--vaadin-dashboard-row-min-height` and prevents rows from growing to fit content
  * `--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard
  * `--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)
  * `--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)
@@ -234,7 +235,7 @@ export interface DashboardI18n {
  * @fires {CustomEvent} dashboard-item-resize-mode-changed - Fired when an item resize mode changed
  */
 declare class Dashboard<TItem extends DashboardItem = DashboardItem> extends DashboardLayoutMixin(
-  I18nMixin({} as DashboardI18n, ElementMixin(ThemableMixin(HTMLElement))),
+  I18nMixin<typeof HTMLElement, DashboardI18n>(ElementMixin(ThemableMixin(HTMLElement))),
 ) {
   /**
    * An array containing the items of the dashboard

package/src/vaadin-dashboard.js

@@ -4,7 +4,6 @@
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
- *
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
@@ -79,6 +78,7 @@ const DEFAULT_I18N = getDefaultI18n();
  * `--vaadin-dashboard-col-min-width`  | minimum column width of the dashboard
  * `--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard
  * `--vaadin-dashboard-row-min-height` | minimum row height of the dashboard
+ * `--vaadin-dashboard-row-height`     | fixed row height of the dashboard. Must be in length units. Overrides `--vaadin-dashboard-row-min-height` and prevents rows from growing to fit content
  * `--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard
  * `--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)
  * `--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)
@@ -103,13 +103,9 @@ const DEFAULT_I18N = getDefaultI18n();
  *
  * @customElement vaadin-dashboard
  * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes DashboardLayoutMixin
- * @mixes I18nMixin
- * @mixes ThemableMixin
  */
 class Dashboard extends DashboardLayoutMixin(
-  I18nMixin(DEFAULT_I18N, ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
+  I18nMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
 ) {
   static get is() {
     return 'vaadin-dashboard';
@@ -173,6 +169,10 @@ class Dashboard extends DashboardLayoutMixin(
     return ['__itemsOrRendererChanged(items, renderer, editable, __effectiveI18n)'];
   }
 
+  static get defaultI18n() {
+    return DEFAULT_I18N;
+  }
+
   /**
    * The object used to localize this component. To change the default
    * localization, replace this with an object that provides all properties, or
@@ -266,6 +266,7 @@ class Dashboard extends DashboardLayoutMixin(
     let wrappers = [...hostElement.children].filter((el) => el.localName === WRAPPER_LOCAL_NAME);
 
     const focusedWrapper = wrappers.find((wrapper) => wrapper.querySelector(':focus'));
+    const focusedElement = focusedWrapper?.querySelector(':focus');
     const focusedWrapperWillBeRemoved = focusedWrapper && !this.__isActiveWrapper(focusedWrapper);
     const wrapperClosestToRemovedFocused =
       focusedWrapperWillBeRemoved && this.__getClosestActiveWrapper(focusedWrapper);
@@ -313,6 +314,10 @@ class Dashboard extends DashboardLayoutMixin(
       if (focusedWrapperWillBeRemoved) {
         // The wrapper containing the focused element was removed. Try to focus the element in the closest wrapper.
         this.__focusWrapperContent(wrapperClosestToRemovedFocused || this.querySelector(WRAPPER_LOCAL_NAME));
+      } else if (focusedElement && !focusedElement.matches(':focus')) {
+        // Firefox loses focus from a slotted element when the <slot> it was projected through is
+        // removed during the shadow re-render, even after re-projection through a different slot.
+        focusedElement.focus();
       }
 
       const focusedItem = this.querySelector(':focus');
@@ -347,7 +352,7 @@ class Dashboard extends DashboardLayoutMixin(
 
   /** @private */
   __focusWrapperContent(wrapper) {
-    if (wrapper && wrapper.firstElementChild) {
+    if (wrapper?.firstElementChild) {
       wrapper.firstElementChild.focus();
     }
   }
@@ -501,48 +506,6 @@ class Dashboard extends DashboardLayoutMixin(
       });
     }
   }
-
-  /**
-   * Fired when an item selected state changed
-   *
-   * @event dashboard-item-selected-changed
-   */
-
-  /**
-   * Fired when an item move mode changed
-   *
-   * @event dashboard-item-move-mode-changed
-   */
-
-  /**
-   * Fired when an item resize mode changed
-   *
-   * @event dashboard-item-resize-mode-changed
-   */
-
-  /**
-   * Fired when an item was moved
-   *
-   * @event dashboard-item-moved
-   */
-
-  /**
-   * Fired when an item was resized
-   *
-   * @event dashboard-item-resized
-   */
-
-  /**
-   * Fired before an item is removed
-   *
-   * @event dashboard-item-before-remove
-   */
-
-  /**
-   * Fired when an item was removed
-   *
-   * @event dashboard-item-removed
-   */
 }
 
 defineCustomElement(Dashboard);

package/web-types.json

@@ -1,23 +1,21 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "25.2.0-alpha8",
+  "version": "25.2.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-dashboard-layout",
-          "description": "A responsive, grid-based dashboard layout component\n\n```html\n<vaadin-dashboard-layout>\n  <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-section section-title=\"Section\">\n    <vaadin-dashboard-widget widget-title=\"Widget in Section\"></vaadin-dashboard-widget>\n  </vaadin-dashboard-section>\n</vaadin-dashboard-layout>\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 layout\n`--vaadin-dashboard-col-max-width`  | maximum column width of the layout\n`--vaadin-dashboard-row-min-height` | minimum row height of the layout\n`--vaadin-dashboard-col-max-count`  | maximum column count of the layout\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`dense-layout` | Set when the dashboard is in dense mode.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "A responsive, grid-based dashboard layout component\n\n```html\n<vaadin-dashboard-layout>\n  <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-section section-title=\"Section\">\n    <vaadin-dashboard-widget widget-title=\"Widget in Section\"></vaadin-dashboard-widget>\n  </vaadin-dashboard-section>\n</vaadin-dashboard-layout>\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 layout\n`--vaadin-dashboard-col-max-width`  | maximum column width of the layout\n`--vaadin-dashboard-row-min-height` | minimum row height of the layout\n`--vaadin-dashboard-row-height`     | fixed row height of the layout. Must be in length units. Overrides `--vaadin-dashboard-row-min-height` and prevents rows from growing to fit content\n`--vaadin-dashboard-col-max-count`  | maximum column count of the layout\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`dense-layout` | Set when the dashboard is in dense mode.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "dense-layout",
               "description": "Whether the dashboard layout is dense.",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -26,9 +24,7 @@
               "description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
               "value": {
                 "type": [
-                  "number",
-                  "null",
-                  "undefined"
+                  "number"
                 ]
               }
             },
@@ -51,9 +47,7 @@
                 "description": "Whether the dashboard layout is dense.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -62,9 +56,7 @@
                 "description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
                 "value": {
                   "type": [
-                    "number",
-                    "null",
-                    "undefined"
+                    "number"
                   ]
                 }
               }
@@ -81,9 +73,7 @@
               "description": "The title of the section",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             },
@@ -106,9 +96,7 @@
                 "description": "The title of the section",
                 "value": {
                   "type": [
-                    "string",
-                    "null",
-                    "undefined"
+                    "string"
                   ]
                 }
               }
@@ -136,9 +124,7 @@
               "description": "The title of the widget.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             }
@@ -150,9 +136,7 @@
                 "description": "The title of the widget.",
                 "value": {
                   "type": [
-                    "string",
-                    "null",
-                    "undefined"
+                    "string"
                   ]
                 }
               }
@@ -162,16 +146,14 @@
         },
         {
           "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.2.0-alpha8/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha8/#/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.2.0-beta1/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-beta1/#/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-row-height`     | fixed row height of the dashboard. Must be in length units. Overrides `--vaadin-dashboard-row-min-height` and prevents rows from growing to fit content\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",
               "description": "Whether the dashboard layout is dense.",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -180,20 +162,7 @@
               "description": "Whether the dashboard is editable.",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
-            {
-              "name": "i18n",
-              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
-              "value": {
-                "type": [
-                  "Object",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -202,9 +171,7 @@
               "description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
               "value": {
                 "type": [
-                  "number",
-                  "null",
-                  "undefined"
+                  "number"
                 ]
               }
             },
@@ -227,9 +194,7 @@
                 "description": "Whether the dashboard layout is dense.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -238,9 +203,7 @@
                 "description": "Whether the dashboard is editable.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -249,7 +212,7 @@
                 "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```js\n{\n  selectSection: 'Select section for editing',\n  selectWidget: 'Select widget for editing',\n  remove: 'Remove',\n  resize: 'Resize',\n  resizeApply: 'Apply',\n  resizeShrinkWidth: 'Shrink width',\n  resizeGrowWidth: 'Grow width',\n  resizeShrinkHeight: 'Shrink height',\n  resizeGrowHeight: 'Grow height',\n  move: 'Move',\n  moveApply: 'Apply',\n  moveForward: 'Move Forward',\n  moveBackward: 'Move Backward',\n}\n```",
                 "value": {
                   "type": [
-                    "?"
+                    "Object"
                   ]
                 }
               },
@@ -258,7 +221,7 @@
                 "description": "An array containing the items of the dashboard",
                 "value": {
                   "type": [
-                    "Array.<DashboardItem>",
+                    "Array<DashboardItem>",
                     "null",
                     "undefined"
                   ]
@@ -280,9 +243,7 @@
                 "description": "Root heading level for sections and widgets. Defaults to 2.\n\nIf changed to e.g. 1:\n- sections will have the attribute `aria-level` with value 1\n- non-nested widgets will have the attribute `aria-level` with value 1\n- nested widgets will have the attribute `aria-level` with value 2",
                 "value": {
                   "type": [
-                    "number",
-                    "null",
-                    "undefined"
+                    "number"
                   ]
                 }
               }
@@ -290,7 +251,7 @@
             "events": [
               {
                 "name": "dashboard-item-before-remove",
-                "description": "Fired before an item is removed"
+                "description": "Fired before an item is removed. Calling preventDefault() on the event will cancel the removal."
               },
               {
                 "name": "dashboard-item-move-mode-changed",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "25.2.0-alpha8",
+  "version": "25.2.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-dashboard-layout",
-          "description": "A responsive, grid-based dashboard layout component\n\n```html\n<vaadin-dashboard-layout>\n  <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-section section-title=\"Section\">\n    <vaadin-dashboard-widget widget-title=\"Widget in Section\"></vaadin-dashboard-widget>\n  </vaadin-dashboard-section>\n</vaadin-dashboard-layout>\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 layout\n`--vaadin-dashboard-col-max-width`  | maximum column width of the layout\n`--vaadin-dashboard-row-min-height` | minimum row height of the layout\n`--vaadin-dashboard-col-max-count`  | maximum column count of the layout\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`dense-layout` | Set when the dashboard is in dense mode.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "A responsive, grid-based dashboard layout component\n\n```html\n<vaadin-dashboard-layout>\n  <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-section section-title=\"Section\">\n    <vaadin-dashboard-widget widget-title=\"Widget in Section\"></vaadin-dashboard-widget>\n  </vaadin-dashboard-section>\n</vaadin-dashboard-layout>\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 layout\n`--vaadin-dashboard-col-max-width`  | maximum column width of the layout\n`--vaadin-dashboard-row-min-height` | minimum row height of the layout\n`--vaadin-dashboard-row-height`     | fixed row height of the layout. Must be in length units. Overrides `--vaadin-dashboard-row-min-height` and prevents rows from growing to fit content\n`--vaadin-dashboard-col-max-count`  | maximum column count of the layout\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`dense-layout` | Set when the dashboard is in dense mode.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -65,7 +65,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.2.0-alpha8/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha8/#/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.2.0-beta1/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-beta1/#/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-row-height`     | fixed row height of the dashboard. Must be in length units. Overrides `--vaadin-dashboard-row-min-height` and prevents rows from growing to fit content\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": [
             {
@@ -112,7 +112,7 @@
             },
             {
               "name": "@dashboard-item-before-remove",
-              "description": "Fired before an item is removed",
+              "description": "Fired before an item is removed. Calling preventDefault() on the event will cancel the removal.",
               "value": {
                 "kind": "expression"
               }