@vaadin/dashboard 24.6.0-alpha8 → 24.6.0-beta1

package/README.md

@@ -2,6 +2,8 @@
 
 A responsive, grid-based dashboard layout component
 
+> ⚠️ This component is experimental and the API may change. In order to use it, enable the feature flag by setting `window.Vaadin.featureFlags.dashboardComponent = true`.
+
 > ℹ️  A commercial Vaadin [subscription](https://vaadin.com/pricing) is required to use Dashboard in your project.
 
 [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/dashboard)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dashboard",
-  "version": "24.6.0-alpha8",
+  "version": "24.6.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,15 +37,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "24.6.0-alpha8",
-    "@vaadin/component-base": "24.6.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.6.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha8",
+    "@vaadin/button": "24.6.0-beta1",
+    "@vaadin/component-base": "24.6.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.6.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.6.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.6.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-alpha8",
+    "@vaadin/chai-plugins": "24.6.0-beta1",
     "@vaadin/testing-helpers": "^1.0.0"
   },
   "cvdlName": "vaadin-dashboard",
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a11e1510c4caa08775b202714f5fc1198c22132a"
+  "gitHead": "ab28efb0dcf2cd1ef72100e2e8f32232fa49aacc"
 }

package/src/vaadin-dashboard-button.js

@@ -22,6 +22,10 @@ class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixi
     return 'vaadin-dashboard-button';
   }
 
+  static get experimental() {
+    return 'dashboardComponent';
+  }
+
   static get styles() {
     return buttonStyles;
   }

package/src/vaadin-dashboard-helpers.js

@@ -87,6 +87,10 @@ export function fireResize(element, colspanDelta, rowspanDelta) {
       },
     }),
   );
+
+  if ('requestUpdate' in element) {
+    element.requestUpdate();
+  }
 }
 
 /**

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

@@ -198,7 +198,17 @@ export const DashboardItemMixin = (superClass) =>
 
     /** @private */
     __renderResizeControls() {
-      const hasMinRowHeight = getComputedStyle(this).getPropertyValue('--_vaadin-dashboard-row-min-height') !== 'auto';
+      const style = getComputedStyle(this);
+      const hasMinRowHeight = style.getPropertyValue('--_vaadin-dashboard-row-min-height') !== 'auto';
+
+      const effectiveColCount = style.getPropertyValue('--_vaadin-dashboard-col-count');
+      const maxColCount = style.getPropertyValue('--_vaadin-dashboard-col-max-count');
+      const colCount = Math.min(effectiveColCount, maxColCount);
+      const colspan = style.getPropertyValue('--vaadin-dashboard-item-colspan') || 1;
+      const rowspan = style.getPropertyValue('--vaadin-dashboard-item-rowspan') || 1;
+      const canShrinkWidth = colspan > 1;
+      const canShrinkHeight = rowspan > 1;
+      const canGrowWidth = colspan < colCount;
 
       return html`<div
         id="resize-controls"
@@ -221,6 +231,7 @@ export const DashboardItemMixin = (superClass) =>
           aria-label="${this.__i18n.resizeShrinkWidth}"
           title="${this.__i18n.resizeShrinkWidth}"
           @click="${() => fireResize(this, -1, 0)}"
+          .hidden="${!canShrinkWidth}"
           id="resize-shrink-width"
           part="resize-shrink-width-button"
         >
@@ -231,6 +242,7 @@ export const DashboardItemMixin = (superClass) =>
           aria-label="${this.__i18n.resizeGrowWidth}"
           title="${this.__i18n.resizeGrowWidth}"
           @click="${() => fireResize(this, 1, 0)}"
+          .hidden="${!canGrowWidth}"
           id="resize-grow-width"
           part="resize-grow-width-button"
         >
@@ -243,7 +255,7 @@ export const DashboardItemMixin = (superClass) =>
           @click="${() => fireResize(this, 0, -1)}"
           id="resize-shrink-height"
           part="resize-shrink-height-button"
-          .hidden="${!hasMinRowHeight}"
+          .hidden="${!hasMinRowHeight || !canShrinkHeight}"
         >
           <div class="icon"></div>
         </vaadin-dashboard-button>
@@ -316,6 +328,8 @@ export const DashboardItemMixin = (superClass) =>
     __focusApply() {
       if (this.__moveMode) {
         this.$['move-apply'].focus();
+      } else if (this.__resizeMode) {
+        this.$['resize-apply'].focus();
       }
     }
 

package/src/vaadin-dashboard-layout.js

@@ -59,6 +59,14 @@ class DashboardLayout extends DashboardLayoutMixin(ElementMixin(ThemableMixin(Po
     return 'vaadin-dashboard-layout';
   }
 
+  static get experimental() {
+    return 'dashboardComponent';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-dashboard';
+  }
+
   /** @protected */
   render() {
     return html`<div id="grid"><slot></slot></div>`;

package/src/vaadin-dashboard-section.js

@@ -74,6 +74,10 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
     return 'vaadin-dashboard-section';
   }
 
+  static get experimental() {
+    return 'dashboardComponent';
+  }
+
   static get styles() {
     return [
       css`

package/src/vaadin-dashboard-styles.js

@@ -19,19 +19,14 @@ export const hasWidgetWrappers = css`
 export const dashboardWidgetAndSectionStyles = css`
   :host {
     box-sizing: border-box;
-    /* Calculates the offset by which mode buttons that by default overflow the widget edges
-    should be shifted inwards based on a custom --vaadin-dashboard-spacing value */
-    --_mode-button-spacing-offset: calc(
-      max(0px, var(--_vaadin-dashboard-default-spacing) - var(--_vaadin-dashboard-spacing))
-    );
   }
 
   :host([dragging]) * {
     visibility: hidden;
   }
 
-  :host(:not([editable])) #drag-handle,
-  :host(:not([editable])) #remove-button,
+  :host(:not([editable])) [part~='move-button'],
+  :host(:not([editable])) [part~='remove-button'],
   :host(:not([editable])) #focus-button,
   :host(:not([editable])) #focus-button-wrapper,
   :host(:not([editable])) .mode-controls {
@@ -75,67 +70,85 @@ export const dashboardWidgetAndSectionStyles = css`
   }
 
   /* Move-mode buttons */
-  #move-backward,
-  #move-forward,
-  #move-apply {
+  [part~='move-backward-button'],
+  [part~='move-forward-button'],
+  [part~='move-apply-button'] {
     position: absolute;
     top: 50%;
   }
 
-  #move-backward {
+  [part~='move-backward-button'] {
     inset-inline-start: 0;
     transform: translateY(-50%);
   }
 
-  #move-forward {
+  [part~='move-forward-button'] {
     inset-inline-end: 0;
     transform: translateY(-50%);
   }
 
-  #move-apply {
+  [part~='move-apply-button'] {
     left: 50%;
     transform: translate(-50%, -50%);
   }
 
-  :host([first-child]) #move-backward,
-  :host([last-child]) #move-forward {
+  :host([first-child]) [part~='move-backward-button'],
+  :host([last-child]) [part~='move-forward-button'] {
     display: none;
   }
 
   /* Resize-mode buttons */
-  #resize-shrink-width,
-  #resize-shrink-height,
-  #resize-grow-width,
-  #resize-grow-height,
-  #resize-apply {
+  [part~='resize-shrink-width-button'],
+  [part~='resize-shrink-height-button'],
+  [part~='resize-grow-width-button'],
+  [part~='resize-grow-height-button'],
+  [part~='resize-apply-button'] {
     position: absolute;
   }
 
-  #resize-shrink-width {
-    inset-inline-end: calc(0px + var(--_mode-button-spacing-offset));
+  [part~='resize-shrink-width-button'] {
+    inset-inline-end: 0;
     top: 50%;
+  }
+
+  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button'] {
+    transform: translateY(-50%) translateX(-100%);
+  }
+
+  :host([dir='rtl']) [part~='resize-shrink-width-button'] {
+    transform: translateY(-50%) translateX(100%);
+  }
+
+  .mode-controls:has([part~='resize-grow-width-button'][hidden]) [part~='resize-shrink-width-button'] {
     transform: translateY(-50%);
   }
 
-  #resize-grow-width {
-    inset-inline-start: calc(100% - var(--_mode-button-spacing-offset));
+  [part~='resize-grow-width-button'] {
+    inset-inline-start: 100%;
     top: 50%;
-    transform: translateY(-50%);
   }
 
-  #resize-shrink-height {
-    bottom: calc(0px + var(--_mode-button-spacing-offset));
+  :host(:not([dir='rtl'])) [part~='resize-grow-width-button'] {
+    transform: translateY(-50%) translateX(-100%);
+  }
+
+  :host([dir='rtl']) [part~='resize-grow-width-button'] {
+    transform: translateY(-50%) translateX(100%);
+  }
+
+  [part~='resize-shrink-height-button'] {
+    bottom: 0;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateX(-50%) translateY(-100%);
   }
 
-  #resize-grow-height {
-    top: calc(100% - var(--_mode-button-spacing-offset));
+  [part~='resize-grow-height-button'] {
+    top: 100%;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateX(-50%) translateY(-100%);
   }
 
-  #resize-apply {
+  [part~='resize-apply-button'] {
     left: 50%;
     top: 50%;
 

package/src/vaadin-dashboard-widget.js

@@ -99,6 +99,10 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
     return 'vaadin-dashboard-widget';
   }
 
+  static get experimental() {
+    return 'dashboardComponent';
+  }
+
   static get styles() {
     return [
       css`
@@ -114,16 +118,16 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
           display: none !important;
         }
 
-        :host(:not([editable])) #resize-handle {
+        :host(:not([editable])) [part~='resize-button'] {
           display: none;
         }
 
-        #content {
+        [part~='content'] {
           flex: 1;
           overflow: hidden;
         }
 
-        #resize-handle {
+        [part~='resize-button'] {
           position: absolute;
           bottom: 0;
           inset-inline-end: 0;

package/src/vaadin-dashboard.js

@@ -106,6 +106,10 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
     return 'vaadin-dashboard';
   }
 
+  static get experimental() {
+    return 'dashboardComponent';
+  }
+
   static get cvdlName() {
     return 'vaadin-dashboard';
   }
@@ -457,6 +461,23 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
     this.__dispatchCustomEvent('dashboard-item-resize-mode-changed', getElementItem(e.target), e.detail.value);
   }
 
+  /**
+   * @private
+   */
+  __updateColumnCount() {
+    const previousColumnCount = this.$.grid.style.getPropertyValue('--_vaadin-dashboard-col-count');
+    super.__updateColumnCount();
+
+    // Request update for all the widgets if the column count has changed on resize
+    if (previousColumnCount !== this.$.grid.style.getPropertyValue('--_vaadin-dashboard-col-count')) {
+      this.querySelectorAll(WRAPPER_LOCAL_NAME).forEach((wrapper) => {
+        if (wrapper.firstElementChild && 'requestUpdate' in wrapper.firstElementChild) {
+          wrapper.firstElementChild.requestUpdate();
+        }
+      });
+    }
+  }
+
   /**
    * Fired when an item selected state changed
    *

package/src/widget-reorder-controller.js

@@ -11,6 +11,7 @@
 import { getElementItem, getItemsArrayOfItem, itemsEqual, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
 
 const REORDER_EVENT_TIMEOUT = 200;
+const REORDER_MOVE_THRESHOLD = 10;
 
 /**
  * A controller to widget reordering inside a dashboard.
@@ -64,6 +65,29 @@ export class WidgetReorderController {
       return;
     }
 
+    // The location against which we measure the drag distance
+    this.__startX ||= e.clientX;
+    this.__startY ||= e.clientY;
+
+    // Delta values for the current drag event
+    const currentDx = e.clientX - (this.__previousX || e.clientX);
+    const currentDy = e.clientY - (this.__previousY || e.clientY);
+    this.__previousX = e.clientX;
+    this.__previousY = e.clientY;
+
+    if (currentDx && this.__dx && Math.sign(currentDx) !== Math.sign(this.__dx)) {
+      // If the direction of the drag changes, reset the start position
+      this.__startX = e.clientX;
+    }
+    if (currentDy && this.__dy && Math.sign(currentDy) !== Math.sign(this.__dy)) {
+      // If the direction of the drag changes, reset the start position
+      this.__startY = e.clientY;
+    }
+
+    // The delta values for the drag event against the start position
+    this.__dx = e.clientX - this.__startX;
+    this.__dy = e.clientY - this.__startY;
+
     e.preventDefault();
     e.dataTransfer.dropEffect = 'move';
 
@@ -88,7 +112,15 @@ export class WidgetReorderController {
     }
 
     // Check if the dragged element is dragged enough over the target element
-    if (!this.__reordering && this.__isDraggedOver(draggedElement, targetElement, e.clientX, e.clientY)) {
+    if (
+      !this.__reordering &&
+      this.__isDraggedOver(draggedElement, targetElement, {
+        x: e.clientX,
+        y: e.clientY,
+        dx: this.__dx,
+        dy: this.__dy,
+      })
+    ) {
       // Prevent reordering multiple times in quick succession
       this.__reordering = true;
       setTimeout(() => {
@@ -109,6 +141,13 @@ export class WidgetReorderController {
       return;
     }
 
+    this.__previousX = null;
+    this.__previousY = null;
+    this.__startX = null;
+    this.__startY = null;
+    this.__dx = null;
+    this.__dy = null;
+
     // If the originally dragged element is restored to the DOM (as a direct child of the host),
     // to make sure "dragend" event gets dispatched, remove it to avoid duplicates
     if (this.__draggedElement.parentElement === this.host) {
@@ -169,21 +208,21 @@ export class WidgetReorderController {
    * of the drag event.
    * @private
    */
-  __isDraggedOver(draggedElement, targetElement, x, y) {
+  __isDraggedOver(draggedElement, targetElement, { x, y, dx, dy }) {
     const draggedPos = draggedElement.getBoundingClientRect();
     const targetPos = targetElement.getBoundingClientRect();
     if (draggedPos.top >= targetPos.bottom) {
       // target is on a row above the dragged widget
-      return y < targetPos.top + targetPos.height / 2;
+      return y < targetPos.bottom && dy < -REORDER_MOVE_THRESHOLD;
     } else if (draggedPos.bottom <= targetPos.top) {
       // target is on a row below the dragged widget
-      return y > targetPos.top + targetPos.height / 2;
+      return y > targetPos.top && dy > REORDER_MOVE_THRESHOLD;
     } else if (draggedPos.left >= targetPos.right) {
       // target is on a column to the left of the dragged widget
-      return x < targetPos.left + targetPos.width / 2;
+      return x < targetPos.right && dx < -REORDER_MOVE_THRESHOLD;
     } else if (draggedPos.right <= targetPos.left) {
       // target is on a column to the right of the dragged widget
-      return x > targetPos.left + targetPos.width / 2;
+      return x > targetPos.left && dx > REORDER_MOVE_THRESHOLD;
     }
   }
 

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

@@ -2,7 +2,7 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 
 export const dashboardLayoutStyles = css`
   #grid {
-    --_vaadin-dashboard-default-spacing: var(--lumo-space-xl);
+    --_vaadin-dashboard-default-spacing: var(--lumo-space-l);
   }
 `;
 

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

@@ -79,13 +79,13 @@ const dashboardWidgetAndSection = css`
   }
 
   /* Drag handle styling */
-  #drag-handle {
+  [part~='move-button'] {
     cursor: move;
-    --icon: var(--lumo-icons-menu);
+    --icon: var(--lumo-icons-drag-handle);
   }
 
   /* Remove button styling */
-  #remove-button {
+  [part~='remove-button'] {
     cursor: pointer;
     --icon: var(--lumo-icons-cross);
   }
@@ -101,7 +101,7 @@ const dashboardWidgetAndSection = css`
   }
 
   /* Content styling */
-  #content {
+  [part~='content'] {
     min-height: var(--lumo-size-m);
     padding: var(--lumo-space-s);
   }
@@ -113,30 +113,30 @@ const dashboardWidgetAndSection = css`
 
   /* Move mode styling */
 
-  #move-backward {
+  [part~='move-backward-button'] {
     inset-inline-start: calc(0px - var(--_focus-ring-spacing-offset));
   }
 
-  #move-forward {
+  [part~='move-forward-button'] {
     inset-inline-end: calc(0px - var(--_focus-ring-spacing-offset));
     transform: translateY(-50%);
   }
 
-  :host(:not([dir='rtl'])) #move-backward,
-  :host([dir='rtl']) #move-forward {
+  :host(:not([dir='rtl'])) [part~='move-backward-button'],
+  :host([dir='rtl']) [part~='move-forward-button'] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     --icon: var(--lumo-icons-angle-left);
   }
 
-  :host(:not([dir='rtl'])) #move-forward,
-  :host([dir='rtl']) #move-backward {
+  :host(:not([dir='rtl'])) [part~='move-forward-button'],
+  :host([dir='rtl']) [part~='move-backward-button'] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     --icon: var(--lumo-icons-angle-right);
   }
 
-  #move-apply {
+  [part~='move-apply-button'] {
     --icon: var(--lumo-icons-checkmark);
     font-size: var(--lumo-icon-size-m);
   }
@@ -157,8 +157,8 @@ const dashboardWidget = css`
     opacity: 1;
   }
 
-  :host([resize-mode]) #content,
-  :host([move-mode]) #content {
+  :host([resize-mode]) [part~='content'] ::slotted(*),
+  :host([move-mode]) [part~='content'] ::slotted(*) {
     opacity: 0.3;
     filter: blur(10px);
   }
@@ -169,69 +169,82 @@ const dashboardWidget = css`
   }
 
   /* Resize handle styling */
-  #resize-handle {
+  [part~='resize-button'] {
     position: absolute;
     bottom: var(--lumo-space-s);
     inset-inline-end: var(--lumo-space-s);
     cursor: se-resize;
-    --icon: var(--lumo-icons-chevron-down);
+    --icon: var(--lumo-icons-resize-handle);
   }
 
-  :host([dir='rtl']) #resize-handle {
+  :host([dir='rtl']) [part~='resize-button'] {
     cursor: sw-resize;
   }
 
-  #resize-handle .icon::before {
-    transform: rotate(-45deg);
-  }
-
-  :host([dir='rtl']) #resize-handle .icon::before {
-    transform: rotate(45deg);
+  :host([dir='rtl']) [part~='resize-button'] .icon::before {
+    transform: scaleX(-1);
   }
 
   /* Resize mode styling */
-  #resize-apply {
+  [part~='resize-apply-button'] {
     --icon: var(--lumo-icons-checkmark);
     font-size: var(--lumo-icon-size-m);
   }
 
-  #resize-grow-width,
-  #resize-shrink-width {
+  [part~='resize-grow-width-button'],
+  [part~='resize-shrink-width-button'] {
     padding-right: 0;
     padding-left: 0;
     min-width: var(--lumo-size-s);
   }
 
-  #resize-grow-height,
-  #resize-shrink-height {
+  [part~='resize-grow-height-button'],
+  [part~='resize-shrink-height-button'] {
     height: var(--lumo-size-s);
     margin: 0;
   }
 
-  :host(:not([dir='rtl'])) #resize-shrink-width,
-  :host([dir='rtl']) #resize-grow-width {
+  :host(:not([dir='rtl'])) [part~='resize-grow-width-button'],
+  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button'] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    --icon: var(--lumo-icons-angle-left);
   }
 
-  :host(:not([dir='rtl'])) #resize-grow-width,
-  :host([dir='rtl']) #resize-shrink-width {
+  :host([dir='rtl']) [part~='resize-grow-width-button'],
+  :host([dir='rtl']) [part~='resize-shrink-width-button'] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    --icon: var(--lumo-icons-angle-right);
   }
 
-  #resize-grow-height {
-    border-top-right-radius: 0;
+  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button']:not([hidden]) + [part~='resize-grow-width-button'] {
     border-top-left-radius: 0;
-    --icon: var(--lumo-icons-angle-down);
+    border-bottom-left-radius: 0;
   }
 
-  #resize-shrink-height {
+  :host([dir='rtl']) [part~='resize-shrink-width-button']:not([hidden]) + [part~='resize-grow-width-button'] {
+    border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+  }
+
+  [part~='resize-grow-height-button'],
+  [part~='resize-grow-width-button'] {
+    --icon: var(--lumo-icons-plus);
+  }
+
+  [part~='resize-shrink-height-button'],
+  [part~='resize-shrink-width-button'] {
+    --icon: var(--lumo-icons-minus);
+  }
+
+  [part~='resize-grow-height-button'],
+  [part~='resize-shrink-height-button'] {
     border-bottom-left-radius: 0;
-    --icon: var(--lumo-icons-angle-up);
+    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;
   }
 `;
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "24.6.0-alpha8",
+  "version": "24.6.0-beta1",
   "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/24.6.0-alpha8/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.6.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-spacing`        | spacing between child elements and space around its 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/24.6.0-beta1/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.6.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-col-max-count`  | maximum column count of the dashboard\n`--vaadin-dashboard-spacing`        | spacing between child elements and space around its 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": "24.6.0-alpha8",
+  "version": "24.6.0-beta1",
   "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/24.6.0-alpha8/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.6.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-spacing`        | spacing between child elements and space around its 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/24.6.0-beta1/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.6.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-col-max-count`  | maximum column count of the dashboard\n`--vaadin-dashboard-spacing`        | spacing between child elements and space around its 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": [
             {