@vaadin/dashboard 24.8.0-alpha1 → 24.8.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dashboard",
-  "version": "24.8.0-alpha1",
+  "version": "24.8.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -37,16 +37,16 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "24.8.0-alpha1",
-    "@vaadin/component-base": "24.8.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha1",
+    "@vaadin/button": "24.8.0-alpha11",
+    "@vaadin/component-base": "24.8.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.8.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha11",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha1",
-    "@vaadin/test-runner-commands": "24.8.0-alpha1",
+    "@vaadin/chai-plugins": "24.8.0-alpha11",
+    "@vaadin/test-runner-commands": "24.8.0-alpha11",
     "@vaadin/testing-helpers": "^1.1.0"
   },
   "cvdlName": "vaadin-dashboard",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "dfec8767c5d1c343ae689c93429c3364f4182f76"
+  "gitHead": "be9c2d59f4b63ae58e85ccb3dfb78d5af2d2ac8a"
 }

package/src/vaadin-dashboard-helpers.js

@@ -101,3 +101,31 @@ export function fireResize(element, colspanDelta, rowspanDelta) {
 export function fireRemove(element) {
   element.dispatchEvent(new CustomEvent('item-remove', { bubbles: true }));
 }
+
+/**
+ * Walks up the DOM tree starting from `node`, returning the first ancestor which is an instance of the given `baseClass`.
+ *
+ * @param {Node} node - starting node
+ * @param {Function} baseClass - constructor, e.g. `Dashboard`
+ * @returns {HTMLElement | null}
+ */
+export function findAncestorInstance(node, baseClass) {
+  while (node) {
+    if (node instanceof baseClass) {
+      return node;
+    }
+    if (node instanceof ShadowRoot) {
+      node = node.host;
+    } else {
+      const rootNode = node.getRootNode();
+      if (rootNode instanceof ShadowRoot) {
+        node = rootNode.host;
+      } else if (node.parentNode) {
+        node = node.parentNode;
+      } else {
+        node = null;
+      }
+    }
+  }
+  return null;
+}

package/src/vaadin-dashboard-section.js

@@ -102,7 +102,6 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
         }
 
         ::slotted(*) {
-          --_vaadin-dashboard-title-level: 3;
           --_vaadin-dashboard-item-column: span
             min(
               var(--vaadin-dashboard-item-colspan, 1),
@@ -166,6 +165,11 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
         value: '',
       },
 
+      /* @private */
+      __rootHeadingLevel: {
+        type: Number,
+      },
+
       /** @private */
       __childCount: {
         type: Number,
@@ -184,7 +188,9 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
 
         <header part="header">
           ${this.__renderDragHandle()}
-          <h2 id="title" part="title">${this.sectionTitle}</h2>
+          <div id="title" role="heading" aria-level=${this.__rootHeadingLevel || 2} part="title"
+            >${this.sectionTitle}</div
+          >
           ${this.__renderRemoveButton()}
         </header>
       </div>

package/src/vaadin-dashboard-widget.js

@@ -13,9 +13,10 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { css, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { SYNCHRONIZED_ATTRIBUTES, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
+import { findAncestorInstance, SYNCHRONIZED_ATTRIBUTES, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
 import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
 import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
+import { DashboardSection } from './vaadin-dashboard-section.js';
 
 /**
  * A Widget component for use with the Dashboard component
@@ -193,11 +194,15 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
       widgetTitle: {
         type: String,
         value: '',
-        observer: '__onWidgetTitleChanged',
       },
 
       /* @private */
-      __nestedHeadingLevel: {
+      __rootHeadingLevel: {
+        type: Number,
+      },
+
+      /* @private */
+      __isNestedWidget: {
         type: Boolean,
         value: false,
       },
@@ -213,10 +218,7 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
         ${this.__renderFocusButton('selectWidget')}
 
         <header part="header">
-          ${this.__renderDragHandle()}
-          ${this.__nestedHeadingLevel
-            ? html`<h3 id="title" part="title" .hidden=${!this.widgetTitle}>${this.widgetTitle}</h3>`
-            : html`<h2 id="title" part="title" .hidden=${!this.widgetTitle}>${this.widgetTitle}</h2>`}
+          ${this.__renderDragHandle()} ${this.__renderWidgetTitle()}
           <slot name="header-content"></slot>
           ${this.__renderRemoveButton()}
         </header>
@@ -240,13 +242,15 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
         this.toggleAttribute(attr, !!wrapper[attr]);
       });
       this.__i18n = wrapper.i18n;
+      this.__rootHeadingLevel = wrapper.__rootHeadingLevel;
     }
 
+    this.__updateNestedState();
     const undefinedAncestor = this.closest('*:not(:defined)');
     if (undefinedAncestor) {
-      customElements.whenDefined(undefinedAncestor.localName).then(() => queueMicrotask(() => this.__updateTitle()));
-    } else {
-      this.__updateTitle();
+      customElements.whenDefined(undefinedAncestor.localName).then(() => {
+        queueMicrotask(() => this.__updateNestedState());
+      });
     }
   }
 
@@ -259,14 +263,29 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
   }
 
   /** @private */
-  __onWidgetTitleChanged() {
-    this.__updateTitle();
+  __renderWidgetTitle() {
+    let effectiveHeadingLevel = this.__rootHeadingLevel;
+    // Default to 2 if not defined
+    if (effectiveHeadingLevel == null) {
+      effectiveHeadingLevel = 2;
+    }
+    // Increase level by 1 for widgets in sections
+    if (this.__isNestedWidget) {
+      effectiveHeadingLevel += 1;
+    }
+    return html`<div
+      id="title"
+      part="title"
+      role="heading"
+      aria-level=${effectiveHeadingLevel}
+      .hidden=${!this.widgetTitle}
+      >${this.widgetTitle}</div
+    >`;
   }
 
   /** @private */
-  __updateTitle() {
-    const titleLevel = getComputedStyle(this).getPropertyValue('--_vaadin-dashboard-title-level');
-    this.__nestedHeadingLevel = titleLevel === '3';
+  __updateNestedState() {
+    this.__isNestedWidget = !!findAncestorInstance(this, DashboardSection);
   }
 }
 

package/src/vaadin-dashboard.d.ts

@@ -11,7 +11,7 @@
 import './vaadin-dashboard-widget.js';
 import './vaadin-dashboard-section.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import type { I18nMixin, PartialI18n } from '@vaadin/component-base/src/i18n-mixin.js';
+import type { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
 import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
 
@@ -134,21 +134,21 @@ export interface DashboardCustomEventMap<TItem extends DashboardItem> {
 
 export type DashboardEventMap<TItem extends DashboardItem> = DashboardCustomEventMap<TItem> & HTMLElementEventMap;
 
-export type DashboardI18n = PartialI18n<{
-  selectWidget: string;
-  selectSection: string;
-  remove: string;
-  resize: string;
-  resizeApply: string;
-  resizeShrinkWidth: string;
-  resizeGrowWidth: string;
-  resizeShrinkHeight: string;
-  resizeGrowHeight: string;
-  move: string;
-  moveApply: string;
-  moveForward: string;
-  moveBackward: string;
-}>;
+export interface DashboardI18n {
+  selectWidget?: string;
+  selectSection?: string;
+  remove?: string;
+  resize?: string;
+  resizeApply?: string;
+  resizeShrinkWidth?: string;
+  resizeGrowWidth?: string;
+  resizeShrinkHeight?: string;
+  resizeGrowHeight?: string;
+  move?: string;
+  moveApply?: string;
+  moveForward?: string;
+  moveBackward?: string;
+}
 
 /**
  * A responsive, grid-based dashboard layout component
@@ -202,11 +202,11 @@ export type DashboardI18n = PartialI18n<{
  *
  * The following state attributes are available for styling:
  *
- * Attribute      | Description
- * ---------------|-------------
- * `editable`     | Set when the dashboard is editable.
- * `dense-layout` | Set when the dashboard is in dense mode.
- * `item-selected`| Set when an item is selected.
+ * Attribute            | Description
+ * ---------------------|-------------
+ * `editable`           | Set when the dashboard is editable.
+ * `dense-layout`       | Set when the dashboard is in dense mode.
+ * `item-selected`      | Set when an item is selected.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
@@ -243,6 +243,16 @@ declare class Dashboard<TItem extends DashboardItem = DashboardItem> extends Das
    */
   editable: boolean;
 
+  /**
+   * Root heading level for sections and widgets. Defaults to 2.
+   *
+   * If changed to e.g. 1:
+   * - sections will have the attribute `aria-level` with value 1
+   * - non-nested widgets will have the attribute `aria-level` with value 1
+   * - nested widgets will have the attribute `aria-level` with value 2
+   */
+  rootHeadingLevel: number | null | undefined;
+
   /**
    * The object used to localize this component. To change the default
    * localization, replace this with an object that provides all properties, or

package/src/vaadin-dashboard.js

@@ -82,11 +82,11 @@ import { WidgetResizeController } from './widget-resize-controller.js';
  *
  * The following state attributes are available for styling:
  *
- * Attribute      | Description
- * ---------------|-------------
- * `editable`     | Set when the dashboard is editable.
- * `dense-layout` | Set when the dashboard is in dense mode.
- * `item-selected`| Set when an item is selected.
+ * Attribute            | Description
+ * ---------------------|-------------
+ * `editable`           | Set when the dashboard is editable.
+ * `dense-layout`       | Set when the dashboard is in dense mode.
+ * `item-selected`      | Set when an item is selected.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
@@ -166,6 +166,20 @@ class Dashboard extends DashboardLayoutMixin(
         type: Boolean,
       },
 
+      /**
+       * Root heading level for sections and widgets. Defaults to 2.
+       *
+       * If changed to e.g. 1:
+       * - sections will have the attribute `aria-level` with value 1
+       * - non-nested widgets will have the attribute `aria-level` with value 1
+       * - nested widgets will have the attribute `aria-level` with value 2
+       */
+      rootHeadingLevel: {
+        type: Number,
+        value: 2,
+        sync: true,
+      },
+
       /** @private */
       __childCount: {
         type: Number,
@@ -175,7 +189,7 @@ class Dashboard extends DashboardLayoutMixin(
   }
 
   static get observers() {
-    return ['__itemsOrRendererChanged(items, renderer, editable, __effectiveI18n)'];
+    return ['__itemsOrRendererChanged(items, renderer, editable, __effectiveI18n, rootHeadingLevel)'];
   }
 
   /**
@@ -261,6 +275,7 @@ class Dashboard extends DashboardLayoutMixin(
           wrapper.firstElementChild.toggleAttribute(attr, !!wrapper[attr]);
         });
         wrapper.firstElementChild.__i18n = this.__effectiveI18n;
+        wrapper.firstElementChild.__rootHeadingLevel = this.rootHeadingLevel;
       }
     });
   }
@@ -304,6 +319,7 @@ class Dashboard extends DashboardLayoutMixin(
 
         SYNCHRONIZED_ATTRIBUTES.forEach((attr) => section.toggleAttribute(attr, !!wrapper[attr]));
         section.__i18n = this.__effectiveI18n;
+        section.__rootHeadingLevel = this.rootHeadingLevel;
 
         // Render the subitems
         section.__childCount = item.items.length;
@@ -428,6 +444,7 @@ class Dashboard extends DashboardLayoutMixin(
     wrapper['first-child'] = item === getItemsArrayOfItem(item, this.items)[0];
     wrapper['last-child'] = item === getItemsArrayOfItem(item, this.items).slice(-1)[0];
     wrapper.i18n = this.__effectiveI18n;
+    wrapper.__rootHeadingLevel = this.rootHeadingLevel;
   }
 
   /** @private */

package/theme/lumo/vaadin-dashboard.d.ts

@@ -1,4 +1,4 @@
-import './vaadin-dashboard-widget.js';
 import './vaadin-dashboard-section.js';
+import './vaadin-dashboard-widget.js';
 import './vaadin-dashboard-styles.js';
 import '../../src/vaadin-dashboard.js';

package/theme/lumo/vaadin-dashboard.js

@@ -1,4 +1,4 @@
-import './vaadin-dashboard-widget.js';
 import './vaadin-dashboard-section.js';
+import './vaadin-dashboard-widget.js';
 import './vaadin-dashboard-styles.js';
 import '../../src/vaadin-dashboard.js';

package/theme/material/vaadin-dashboard.d.ts

@@ -1,3 +1,3 @@
-import './vaadin-dashboard-widget.js';
 import './vaadin-dashboard-section.js';
+import './vaadin-dashboard-widget.js';
 import '../../src/vaadin-dashboard.js';

package/theme/material/vaadin-dashboard.js

@@ -1,3 +1,3 @@
-import './vaadin-dashboard-widget.js';
 import './vaadin-dashboard-section.js';
+import './vaadin-dashboard-widget.js';
 import '../../src/vaadin-dashboard.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "24.8.0-alpha1",
+  "version": "24.8.0-alpha11",
   "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.8.0-alpha1/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha1/#/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/24.8.0-alpha11/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/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",
@@ -147,6 +147,15 @@
                 ]
               }
             },
+            {
+              "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"
+                ]
+              }
+            },
             {
               "name": "editable",
               "description": "Whether the dashboard is editable.",
@@ -158,6 +167,17 @@
                 ]
               }
             },
+            {
+              "name": "root-heading-level",
+              "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"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -222,6 +242,17 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "name": "rootHeadingLevel",
+                "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"
+                  ]
+                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "24.8.0-alpha1",
+  "version": "24.8.0-alpha11",
   "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.8.0-alpha1/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha1/#/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/24.8.0-alpha11/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/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": [
             {
@@ -96,6 +96,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".rootHeadingLevel",
+              "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": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@dashboard-item-move-mode-changed",
               "description": "Fired when an item move mode changed",