@vaadin/dashboard 24.6.0-alpha9 → 24.6.0-rc1

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-alpha9",
+  "version": "24.6.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,15 +37,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "24.6.0-alpha9",
-    "@vaadin/component-base": "24.6.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.6.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha9",
+    "@vaadin/button": "24.6.0-rc1",
+    "@vaadin/component-base": "24.6.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.6.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.6.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.6.0-rc1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-alpha9",
+    "@vaadin/chai-plugins": "24.6.0-rc1",
     "@vaadin/testing-helpers": "^1.0.0"
   },
   "cvdlName": "vaadin-dashboard",
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e303d77ba20c3089c9998be9a318733d9ec5b53c"
+  "gitHead": "d62ba309e3286777ad3ea7e015d50a2c4976bb42"
 }

package/src/keyboard-controller.js

@@ -18,7 +18,6 @@ export class KeyboardController {
     this.host = host;
 
     host.addEventListener('focusout', (e) => this.__focusout(e));
-    host.addEventListener('focusin', (e) => this.__focusin(e));
     host.addEventListener('keydown', (e) => this.__keydown(e));
   }
 
@@ -36,13 +35,6 @@ export class KeyboardController {
     }
   }
 
-  /** @private */
-  __focusin(e) {
-    if (e.target === this.host) {
-      this.host.__focused = true;
-    }
-  }
-
   /** @private */
   __keydown(e) {
     if (e.metaKey || e.ctrlKey || !this.host.__selected) {

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

@@ -132,8 +132,19 @@ export const DashboardItemMixin = (superClass) =>
           aria-label=${this.__i18n[i18nSelectTitleForEditingProperty]}
           aria-describedby="title"
           aria-pressed="${!!this.__selected}"
+          @focus="${() => {
+            this.__focused = true;
+          }}"
+          @blur="${() => {
+            this.__focused = false;
+          }}"
           @click="${() => {
-            this.__selected = true;
+            const wasSelected = this.__selected;
+            this.__selected = !wasSelected;
+            this.__focused = wasSelected;
+            if (this.__selected) {
+              this.$['drag-handle'].focus();
+            }
           }}"
         ></button>
       </label>`;
@@ -198,7 +209,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 +242,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 +253,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 +266,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 +339,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-mixin.js

@@ -24,6 +24,7 @@ export const DashboardLayoutMixin = (superClass) =>
         :host {
           display: block;
           overflow: hidden;
+          width: 100%;
         }
 
         :host([hidden]) {
@@ -36,12 +37,19 @@ export const DashboardLayoutMixin = (superClass) =>
 
         #grid {
           box-sizing: border-box;
-          --_vaadin-dashboard-default-spacing: 1rem;
-          --_vaadin-dashboard-spacing: max(
+
+          /* Padding around dashboard edges */
+          --_vaadin-dashboard-default-padding: 1rem;
+          --_vaadin-dashboard-padding: max(
             0px,
-            var(--vaadin-dashboard-spacing, var(--_vaadin-dashboard-default-spacing))
+            var(--vaadin-dashboard-padding, var(--_vaadin-dashboard-default-padding))
           );
-          padding: var(--_vaadin-dashboard-spacing);
+          padding: var(--_vaadin-dashboard-padding);
+
+          /* Gap between widgets */
+          --_vaadin-dashboard-default-gap: 1rem;
+          --_vaadin-dashboard-gap: max(0px, var(--vaadin-dashboard-gap, var(--_vaadin-dashboard-default-gap)));
+          gap: var(--_vaadin-dashboard-gap);
 
           /* Default min and max column widths */
           --_vaadin-dashboard-default-col-min-width: 25rem;
@@ -86,8 +94,6 @@ export const DashboardLayoutMixin = (superClass) =>
           );
 
           grid-auto-rows: var(--_vaadin-dashboard-row-height);
-
-          gap: var(--_vaadin-dashboard-spacing);
         }
 
         ::slotted(*) {

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

@@ -35,7 +35,8 @@ import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
  * `--vaadin-dashboard-col-max-width`  | maximum column width of the layout
  * `--vaadin-dashboard-row-min-height` | minimum row height of the layout
  * `--vaadin-dashboard-col-max-count`  | maximum column count of the layout
- * `--vaadin-dashboard-spacing`        | spacing between child elements and space around its outer edges. Must be in length units (0 is not allowed, 0px is)
+ * `--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)
  *
  * The following state attributes are available for styling:
  *

package/src/vaadin-dashboard-layout.js

@@ -38,7 +38,8 @@ import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
  * `--vaadin-dashboard-col-max-width`  | maximum column width of the layout
  * `--vaadin-dashboard-row-min-height` | minimum row height of the layout
  * `--vaadin-dashboard-col-max-count`  | maximum column count of the layout
- * `--vaadin-dashboard-spacing`        | spacing between child elements and space around its outer edges. Must be in length units (0 is not allowed, 0px is)
+ * `--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)
  *
  * The following state attributes are available for styling:
  *

package/src/vaadin-dashboard-section.js

@@ -87,7 +87,7 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
           grid-template-columns: subgrid;
           --_vaadin-dashboard-section-column: 1 / calc(var(--_vaadin-dashboard-effective-col-count) + 1);
           grid-column: var(--_vaadin-dashboard-section-column) !important;
-          gap: var(--_vaadin-dashboard-spacing, 1rem);
+          gap: var(--_vaadin-dashboard-gap, 1rem);
           /* Dashboard section header height */
           --_vaadin-dashboard-section-header-height: minmax(0, auto);
           grid-template-rows: var(--_vaadin-dashboard-section-header-height) repeat(
@@ -179,9 +179,11 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
   /** @protected */
   render() {
     return html`
-      ${this.__renderFocusButton('selectSection')} ${this.__renderMoveControls()}
+      ${this.__renderMoveControls()}
 
       <div id="focustrap">
+        ${this.__renderFocusButton('selectSection')}
+
         <header part="header">
           ${this.__renderDragHandle()}
           <h2 id="title" part="title">${this.sectionTitle}</h2>

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

@@ -118,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;
@@ -139,11 +139,11 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
           content: '';
           z-index: 2;
           position: absolute;
-          inset-inline-start: 0;
-          top: 0;
+          top: -1px;
           width: var(--_vaadin-dashboard-widget-resizer-width, 0);
           height: var(--_vaadin-dashboard-widget-resizer-height, 0);
           background: rgba(0, 0, 0, 0.1);
+          border-radius: inherit;
         }
       `,
       super.styles,
@@ -209,9 +209,11 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
   /** @protected */
   render() {
     return html`
-      ${this.__renderFocusButton('selectWidget')} ${this.__renderMoveControls()} ${this.__renderResizeControls()}
+      ${this.__renderMoveControls()} ${this.__renderResizeControls()}
 
       <div id="focustrap">
+        ${this.__renderFocusButton('selectWidget')}
+
         <header part="header">
           ${this.__renderDragHandle()}
           ${this.__nestedHeadingLevel

package/src/vaadin-dashboard.d.ts

@@ -196,7 +196,8 @@ export interface DashboardI18n {
  * `--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard
  * `--vaadin-dashboard-row-min-height` | minimum row height of the dashboard
  * `--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard
- * `--vaadin-dashboard-spacing`        | spacing between child elements and space around its outer edges. Must be in length units (0 is not allowed, 0px is)
+ * `--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)
  *
  * The following state attributes are available for styling:
  *

package/src/vaadin-dashboard.js

@@ -76,7 +76,8 @@ import { WidgetResizeController } from './widget-resize-controller.js';
  * `--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard
  * `--vaadin-dashboard-row-min-height` | minimum row height of the dashboard
  * `--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard
- * `--vaadin-dashboard-spacing`        | spacing between child elements and space around its outer edges. Must be in length units (0 is not allowed, 0px is)
+ * `--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)
  *
  * The following state attributes are available for styling:
  *
@@ -258,7 +259,7 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
     let wrappers = [...hostElement.children].filter((el) => el.localName === WRAPPER_LOCAL_NAME);
     let previousWrapper = null;
 
-    const focusedWrapper = wrappers.find((wrapper) => wrapper.querySelector('[focused]'));
+    const focusedWrapper = wrappers.find((wrapper) => wrapper.querySelector(':focus'));
     const focusedWrapperWillBeRemoved = focusedWrapper && !this.__isActiveWrapper(focusedWrapper);
     const wrapperClosestToRemovedFocused =
       focusedWrapperWillBeRemoved && this.__getClosestActiveWrapper(focusedWrapper);
@@ -319,7 +320,7 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
         this.__focusWrapperContent(wrapperClosestToRemovedFocused || this.querySelector(WRAPPER_LOCAL_NAME));
       }
 
-      const focusedItem = this.querySelector('[focused]');
+      const focusedItem = this.querySelector(':focus');
       if (focusedItem && this.__outsideViewport(focusedItem)) {
         // If the focused wrapper is not in the viewport, scroll it into view
         focusedItem.scrollIntoView();
@@ -461,6 +462,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-resize-controller.js

@@ -89,10 +89,10 @@ export class WidgetResizeController {
 
     const currentElementHeight = itemWrapper.firstElementChild.offsetHeight;
     const rowMinHeight = Math.min(...gridStyle.gridTemplateRows.split(' ').map((height) => parseFloat(height)));
-    if (this.__resizeHeight > currentElementHeight + gapSize + rowMinHeight / 2) {
+    if (e.detail.ddy > 0 && this.__resizeHeight > currentElementHeight + gapSize + rowMinHeight / 2) {
       // Resized vertically above the half of the next row, increase rowspan
       this.__updateResizedItem(0, 1);
-    } else if (this.__resizeHeight < currentElementHeight - rowMinHeight / 2) {
+    } else if (e.detail.ddy < 0 && this.__resizeHeight < currentElementHeight - rowMinHeight / 2) {
       // Resized vertically below the half of the current row, decrease rowspan
       this.__updateResizedItem(0, -1);
     }

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

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

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

@@ -7,14 +7,78 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 import { dashboardWidgetAndSection } from './vaadin-dashboard-widget-styles.js';
 
 const section = css`
+  /* stylelint-disable rule-empty-line-before */
+
   :host {
-    --_focus-ring-spacing-max-offset: calc(var(--_vaadin-dashboard-spacing) / 2);
+    --_section-outline-offset: calc(min(var(--_vaadin-dashboard-gap), var(--_vaadin-dashboard-padding)) / 3);
+    --_focus-ring-offset: calc((var(--_section-outline-offset) - var(--_focus-ring-width)));
+    border-radius: var(--lumo-border-radius-l);
+  }
+
+  header {
+    margin-bottom: calc(-1 * var(--_section-outline-offset));
+    line-height: var(--lumo-line-height-s);
+    padding-inline: var(--lumo-space-s);
+    min-height: var(--lumo-size-l);
+  }
+
+  [part='title'] {
+    font-size: var(--lumo-font-size-xl);
+    font-weight: 600;
+  }
+
+  /* Section states */
+
+  :host([editable]) {
+    outline: 1px solid var(--lumo-contrast-10pct);
+    outline-offset: calc(var(--_section-outline-offset) - 1px);
+    background: var(--lumo-contrast-5pct);
+    box-shadow: 0 0 0 var(--_section-outline-offset) var(--lumo-contrast-5pct);
+  }
+  :host([editable]) header {
+    padding-inline: var(--lumo-space-xs);
+  }
+
+  :host([focused])::after {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: 0;
+    border-radius: var(--lumo-border-radius-l);
+    z-index: 9;
+    outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
+    outline-offset: var(--_focus-ring-offset);
+  }
+
+  :host([selected]) {
+    background: var(--lumo-primary-color-10pct);
+    box-shadow: 0 0 0 var(--_section-outline-offset) var(--lumo-primary-color-10pct);
+  }
+  :host([selected]:not([focused])) {
+    outline-color: var(--lumo-primary-color-50pct);
   }
 
   :host([move-mode]) ::slotted(*) {
     --_vaadin-dashboard-widget-opacity: 0.3;
     --_vaadin-dashboard-widget-filter: blur(10px);
   }
+
+  :host([dragging]) {
+    background: var(--vaadin-dashboard-drop-target-background-color);
+    outline: var(--vaadin-dashboard-drop-target-border);
+    box-shadow: 0 0 0 var(--_section-outline-offset) var(--vaadin-dashboard-drop-target-background-color);
+  }
+
+  /* Accessible move mode controls */
+
+  [part~='move-backward-button'] {
+    inset-inline-start: calc(-1 * var(--_section-outline-offset));
+  }
+
+  [part~='move-forward-button'] {
+    inset-inline-end: calc(-1 * var(--_section-outline-offset));
+    transform: translateY(-50%);
+  }
 `;
 
 registerStyles('vaadin-dashboard-section', [dashboardWidgetAndSection, section], {

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

@@ -4,234 +4,309 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
+import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+/* Global styles */
+const dashboardWidgetProps = css`
+  html {
+    --vaadin-dashboard-widget-background: var(--lumo-base-color);
+    --vaadin-dashboard-widget-border-radius: var(--lumo-border-radius-l);
+    --vaadin-dashboard-widget-border-width: 1px;
+    --vaadin-dashboard-widget-border-color: var(--lumo-contrast-20pct);
+    --vaadin-dashboard-widget-shadow: 0 0 0 0 transparent;
+    --vaadin-dashboard-widget-editable-shadow: var(--lumo-box-shadow-s);
+    --vaadin-dashboard-widget-selected-shadow: 0 2px 4px -1px var(--lumo-primary-color-10pct),
+      0 3px 12px -1px var(--lumo-primary-color-50pct);
+    --vaadin-dashboard-drop-target-background-color: var(--lumo-primary-color-10pct);
+    --vaadin-dashboard-drop-target-border: 1px dashed var(--lumo-primary-color-50pct);
+  }
+`;
+addGlobalThemeStyles('dashboard-widget-props', dashboardWidgetProps);
+
+/* Styles shared between widgets and sections */
 const dashboardWidgetAndSection = css`
+  /* stylelint-disable rule-empty-line-before */
+  /* stylelint-disable length-zero-no-unit */
+
   :host {
-    border-radius: var(--lumo-border-radius-l);
     color: var(--lumo-body-text-color);
     font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size-m);
     line-height: var(--lumo-line-height-m);
     --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
-    /* default max value for the focus ring spacing offset. calc doesn't support unitless 0. */
-    /* stylelint-disable length-zero-no-unit */
-    --_focus-ring-spacing-max-offset: 0px;
-    /* Calculates the offset by which the focus ring should be shifted inwards based on a custom --vaadin-dashboard-spacing value.
-    Effectively keeps the focus ring visible if --vaadin-dashboard-spacing is set to 0px */
-    --_focus-ring-spacing-offset: min(
-      max(calc(var(--_focus-ring-width) * -1), var(--_vaadin-dashboard-spacing) - var(--_focus-ring-width)),
-      var(--_focus-ring-spacing-max-offset, 0px)
-    );
-    outline: none;
-  }
-
-  :host::before {
-    content: '';
-    display: block;
-    position: absolute;
-    inset: 0;
-    border-radius: var(--lumo-border-radius-l);
-    pointer-events: none;
-    margin: calc(var(--_focus-ring-spacing-offset) * -1);
+    --_icon-color: var(--lumo-contrast-60pct);
+    opacity: var(--_vaadin-dashboard-widget-opacity);
+    filter: var(--_vaadin-dashboard-widget-filter);
   }
 
-  :host([focused])::before {
-    outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
+  :host([selected]) {
+    opacity: 1;
+    z-index: 1;
   }
 
-  :host([selected])::before {
-    box-shadow:
-      0 2px 4px -1px var(--lumo-primary-color-10pct),
-      0 3px 12px -1px var(--lumo-primary-color-50pct);
+  :host([focused]) {
+    z-index: 1;
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: space-between;
+    gap: var(--lumo-space-xs);
+  }
+
+  [part='title'] {
+    flex: 1;
+    color: var(--lumo-header-text-color);
+    margin: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
-  /* Buttons styling */
   vaadin-dashboard-button {
     font-family: 'lumo-icons';
-    font-size: var(--lumo-icon-size-s);
+    font-size: var(--lumo-icon-size-m);
+    margin: 0;
   }
 
-  .icon::before {
+  vaadin-dashboard-button .icon::before {
     display: block;
     content: var(--icon);
   }
 
-  :host(:not([selected])) *:not(.mode-controls) vaadin-dashboard-button,
-  :host([move-mode]) *:not(.mode-controls) vaadin-dashboard-button,
-  :host([resize-mode]) *:not(.mode-controls) vaadin-dashboard-button {
-    color: var(--lumo-disabled-text-color);
+  /* Common styles for non-mode edit buttons */
+  [part='move-button'],
+  [part='resize-button'],
+  [part='remove-button'] {
+    color: var(--_icon-color);
+    padding-inline: 0;
   }
-
-  /* Header styling */
-  header {
-    display: flex;
-    align-items: center;
-    padding: var(--lumo-space-s) var(--lumo-space-m);
-    gap: var(--lumo-space-s);
-    min-height: var(--lumo-size-m);
-    justify-content: space-between;
+  :where([part='move-button'], [part='resize-button'], [part='remove-button']):hover {
+    --_icon-color: var(--lumo-primary-text-color);
   }
-
-  :host([editable]) header {
-    padding-inline: var(--lumo-space-s);
+  :host([selected]) {
+    --_icon-color: var(--lumo-primary-text-color);
+  }
+  :host(:is([move-mode], [resize-mode])) {
+    --_icon-color: var(--lumo-disabled-text-color);
   }
 
-  /* Drag handle styling */
-  #drag-handle {
+  /* Drag handle */
+  [part~='move-button'] {
     cursor: move;
-    --icon: var(--lumo-icons-menu);
+    --icon: var(--lumo-icons-drag-handle);
   }
 
-  /* Remove button styling */
-  #remove-button {
+  /* Remove button */
+  [part~='remove-button'] {
     cursor: pointer;
     --icon: var(--lumo-icons-cross);
   }
 
-  /* Title styling */
-  h2,
-  h3 {
-    flex: 1;
-    font-size: var(--lumo-font-size-m);
-    font-weight: 500;
-    color: var(--lumo-header-text-color);
-    margin: 0;
-  }
-
-  /* Content styling */
-  #content {
-    min-height: var(--lumo-size-m);
-    padding: var(--lumo-space-s);
-  }
-
-  /* Mode controls styling */
+  /* Mode controls */
   .mode-controls vaadin-dashboard-button[focused] {
     z-index: 3;
   }
 
-  /* Move mode styling */
+  /* Move mode */
 
-  #move-backward {
-    inset-inline-start: calc(0px - var(--_focus-ring-spacing-offset));
-  }
-
-  #move-forward {
-    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);
   }
 `;
 
+/* Widget styles */
 const dashboardWidget = css`
   :host {
-    opacity: var(--_vaadin-dashboard-widget-opacity);
-    filter: var(--_vaadin-dashboard-widget-filter);
-    background-color: var(--lumo-base-color);
+    background: var(--vaadin-dashboard-widget-background);
+    border-radius: var(--vaadin-dashboard-widget-border-radius);
+    --_border-shadow: 0 0 0 var(--vaadin-dashboard-widget-border-width) var(--vaadin-dashboard-widget-border-color);
+    --_shadow: var(--vaadin-dashboard-widget-shadow);
+    box-shadow: var(--_shadow), var(--_border-shadow);
   }
 
-  :host(:not([selected])) {
-    box-shadow: var(--lumo-box-shadow-s);
+  /* Widget states */
+
+  :host([editable]) {
+    --_shadow: var(--vaadin-dashboard-widget-editable-shadow);
+  }
+
+  :host([focused]) {
+    --_border-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
 
   :host([selected]) {
-    opacity: 1;
+    --_shadow: var(--vaadin-dashboard-widget-selected-shadow);
+    background: var(--lumo-primary-color-10pct);
   }
 
-  :host([resize-mode]) #content,
-  :host([move-mode]) #content {
-    opacity: 0.3;
-    filter: blur(10px);
+  :host([dragging]) {
+    box-shadow: none;
+    background: var(--vaadin-dashboard-drop-target-background-color);
+    border: var(--vaadin-dashboard-drop-target-border);
   }
 
-  /* Header styling */
+  :host([resizing])::after {
+    background: var(--vaadin-dashboard-drop-target-background-color);
+    border: var(--vaadin-dashboard-drop-target-border);
+  }
+
+  /* Widget parts */
+
   header {
+    min-height: var(--lumo-size-l);
+    padding: 0 var(--lumo-space-m);
     border-bottom: 1px solid var(--lumo-contrast-10pct);
   }
 
-  /* Resize handle styling */
-  #resize-handle {
+  :host([editable]) header {
+    padding-inline: var(--lumo-space-xs);
+  }
+
+  [part='title'] {
+    font-size: var(--lumo-font-size-l);
+    font-weight: 600;
+  }
+
+  #content {
+    min-height: var(--lumo-size-m);
+    padding: var(--lumo-space-s);
+  }
+
+  :host([resize-mode]) #content,
+  :host([move-mode]) #content {
+    opacity: 0.75;
+    filter: blur(10px);
+  }
+
+  /* Resize handle */
+
+  [part~='resize-button'] {
+    --_resize-button-offset: min(var(--_vaadin-dashboard-gap), var(--_vaadin-dashboard-padding), var(--lumo-space-xs));
     position: absolute;
-    bottom: var(--lumo-space-s);
-    inset-inline-end: var(--lumo-space-s);
-    cursor: se-resize;
-    --icon: var(--lumo-icons-chevron-down);
+    bottom: calc(-1 * var(--_resize-button-offset));
+    inset-inline-end: calc(-1 * var(--_resize-button-offset));
+    cursor: nwse-resize;
+    --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']) [part~='resize-button'] .icon::before {
+    transform: scaleX(-1);
   }
 
-  :host([dir='rtl']) #resize-handle .icon::before {
-    transform: rotate(45deg);
-  }
+  /* Accessible resize mode controls */
 
-  /* 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-shrink-width-button'] + [part~='resize-grow-width-button'] {
+    margin-left: 1px;
+  }
+
+  [part~='resize-grow-height-button'],
+  [part~='resize-shrink-height-button'] {
     height: var(--lumo-size-s);
-    margin: 0;
+    padding-right: 0;
+    padding-left: 0;
   }
 
-  :host(:not([dir='rtl'])) #resize-shrink-width,
-  :host([dir='rtl']) #resize-grow-width {
+  [part~='resize-shrink-height-button'] + [part~='resize-grow-height-button'] {
+    margin-top: 1px;
+  }
+
+  :host(:not([dir='rtl'])) [part~='resize-grow-width-button'],
+  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button'] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    --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;
+  }
+
+  /* Windows High Contrast Mode */
+  @media (forced-colors: active) {
+    :host {
+      border: 1px solid;
+    }
+    :host([focused]) {
+      outline: 2px solid;
+      outline-offset: 1px;
+    }
+    :host([selected]) {
+      outline-width: 1px;
+      outline-offset: 0px;
+      outline-color: Highlight;
+    }
+    :host([selected][focused]) {
+      outline-width: 3px;
+      outline-offset: 0px;
+    }
   }
 `;
 

package/web-types.json

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