From 2be720f5c842192f5c35d633c66d91320417af4b Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Thu, 22 Aug 2024 12:46:23 +0300
Subject: [PATCH 1/8] feat: add basic dashboard section structure

---
 dev/dashboard-layout.html                     |  17 +--
 packages/dashboard/src/title-controller.d.ts  |  10 +-
 packages/dashboard/src/title-controller.js    |  24 ++--
 .../src/vaadin-dashboard-section.d.ts         |  30 +++++
 .../dashboard/src/vaadin-dashboard-section.js | 109 ++++++++++++++++++
 .../dashboard/src/vaadin-dashboard-widget.js  |   2 +-
 .../dashboard/test/dashboard-layout.test.ts   | 102 +++++++++++++++-
 .../dashboard/test/dashboard-section.test.ts  | 102 ++++++++++++++++
 packages/dashboard/test/helpers.ts            |  44 +++++--
 .../dashboard/test/typings/dashboard.types.ts |  13 +++
 .../lumo/vaadin-dashboard-section-styles.js   |   0
 .../theme/lumo/vaadin-dashboard-section.js    |   2 +
 .../vaadin-dashboard-section-styles.js        |   0
 .../material/vaadin-dashboard-section.js      |   2 +
 .../dashboard/vaadin-dashboard-section.d.ts   |   1 +
 .../dashboard/vaadin-dashboard-section.js     |   3 +
 16 files changed, 422 insertions(+), 39 deletions(-)
 create mode 100644 packages/dashboard/src/vaadin-dashboard-section.d.ts
 create mode 100644 packages/dashboard/src/vaadin-dashboard-section.js
 create mode 100644 packages/dashboard/test/dashboard-section.test.ts
 create mode 100644 packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js
 create mode 100644 packages/dashboard/theme/lumo/vaadin-dashboard-section.js
 create mode 100644 packages/dashboard/theme/material/vaadin-dashboard-section-styles.js
 create mode 100644 packages/dashboard/theme/material/vaadin-dashboard-section.js
 create mode 100644 packages/dashboard/vaadin-dashboard-section.d.ts
 create mode 100644 packages/dashboard/vaadin-dashboard-section.js

diff --git a/dev/dashboard-layout.html b/dev/dashboard-layout.html
index 34289c167e..c02fbc7f75 100644
--- a/dev/dashboard-layout.html
+++ b/dev/dashboard-layout.html
@@ -10,6 +10,7 @@
     <script type="module">
       import '@vaadin/dashboard/vaadin-dashboard-layout.js';
       import '@vaadin/dashboard/vaadin-dashboard-widget.js';
+      import '@vaadin/dashboard/vaadin-dashboard-section.js';
     </script>
 
     <style>
@@ -56,14 +57,16 @@
         <div class="chart"></div>
       </vaadin-dashboard-widget>
 
-      <vaadin-dashboard-widget widget-title="Sales closed this month">
-        <div class="kpi-number">54 000€</div>
-      </vaadin-dashboard-widget>
+      <vaadin-dashboard-section section-title="Section">
+        <vaadin-dashboard-widget widget-title="Sales closed this month">
+          <div class="kpi-number">54 000€</div>
+        </vaadin-dashboard-widget>
 
-      <vaadin-dashboard-widget widget-title="Just some number">
-        <span slot="header">2014-2024</span>
-        <div class="kpi-number">1234</div>
-      </vaadin-dashboard-widget>
+        <vaadin-dashboard-widget widget-title="Just some number">
+          <span slot="header">2014-2024</span>
+          <div class="kpi-number">1234</div>
+        </vaadin-dashboard-widget>
+      </vaadin-dashboard-section>
 
       <vaadin-dashboard-widget>
         <h2 slot="title">Activity since 2023</h2>
diff --git a/packages/dashboard/src/title-controller.d.ts b/packages/dashboard/src/title-controller.d.ts
index 77f8d27dee..8d7df06f96 100644
--- a/packages/dashboard/src/title-controller.d.ts
+++ b/packages/dashboard/src/title-controller.d.ts
@@ -6,16 +6,16 @@
 import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
 
 /**
- * A controller to manage the widget title element.
+ * A controller to manage the widget or section title element.
  */
 export class TitleController extends SlotChildObserveController {
   /**
-   * String used for the widget title.
+   * String used for the title.
    */
-  protected widgetTitle: string | null | undefined;
+  protected title: string | null | undefined;
 
   /**
-   * Set widget title based on corresponding host property.
+   * Set title based on corresponding host property.
    */
-  setWidgetTitle(widgetTitle: string | null | undefined): void;
+  setTitle(title: string | null | undefined): void;
 }
diff --git a/packages/dashboard/src/title-controller.js b/packages/dashboard/src/title-controller.js
index 99d8bf66d9..5577d23a8f 100644
--- a/packages/dashboard/src/title-controller.js
+++ b/packages/dashboard/src/title-controller.js
@@ -6,7 +6,7 @@
 import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
 
 /**
- * A controller to manage the widget title element.
+ * A controller to manage the widget or section title element.
  */
 export class TitleController extends SlotChildObserveController {
   constructor(host) {
@@ -14,20 +14,20 @@ export class TitleController extends SlotChildObserveController {
   }
 
   /**
-   * Set widget title based on corresponding host property.
+   * Set title based on corresponding host property.
    *
-   * @param {string} widgetTitle
+   * @param {string} title
    */
-  setWidgetTitle(widgetTitle) {
-    this.widgetTitle = widgetTitle;
+  setTitle(title) {
+    this.title = title;
 
-    // Restore the default widgetTitle, if needed.
-    const widgetTitleNode = this.getSlotChild();
-    if (!widgetTitleNode) {
+    // Restore the default title, if needed.
+    const titleNode = this.getSlotChild();
+    if (!titleNode) {
       this.restoreDefaultNode();
     }
 
-    // When default widgetTitle is used, update it.
+    // When default title is used, update it.
     if (this.node === this.defaultNode) {
       this.updateDefaultNode(this.node);
     }
@@ -35,7 +35,7 @@ export class TitleController extends SlotChildObserveController {
 
   /**
    * Override method inherited from `SlotChildObserveController`
-   * to restore and observe the default widget title element.
+   * to restore and observe the default title element.
    *
    * @protected
    * @override
@@ -47,7 +47,7 @@ export class TitleController extends SlotChildObserveController {
 
   /**
    * Override method inherited from `SlotChildObserveController`
-   * to update the default widgetTitle element text content.
+   * to update the default title element text content.
    *
    * @param {Node | undefined} node
    * @protected
@@ -55,7 +55,7 @@ export class TitleController extends SlotChildObserveController {
    */
   updateDefaultNode(node) {
     if (node) {
-      node.textContent = this.widgetTitle;
+      node.textContent = this.title;
     }
 
     // Notify the host after update.
diff --git a/packages/dashboard/src/vaadin-dashboard-section.d.ts b/packages/dashboard/src/vaadin-dashboard-section.d.ts
new file mode 100644
index 0000000000..a471def5bf
--- /dev/null
+++ b/packages/dashboard/src/vaadin-dashboard-section.d.ts
@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+
+/**
+ * A Section component for use with the Dashboard component
+ */
+declare class DashboardSection extends ControllerMixin(ElementMixin(HTMLElement)) {
+  /**
+   * The title of the section
+   */
+  sectionTitle: string | null | undefined;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-dashboard-section': DashboardSection;
+  }
+}
+
+export { DashboardSection };
diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
new file mode 100644
index 0000000000..72562373dc
--- /dev/null
+++ b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -0,0 +1,109 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { html, LitElement } from 'lit';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { TitleController } from './title-controller.js';
+
+/**
+ * A section component for use with the Dashboard component
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ElementMixin
+ * @mixes ControllerMixin
+ */
+class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElement))) {
+  static get is() {
+    return 'vaadin-dashboard-section';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1 !important;
+        gap: var(--vaadin-dashboard-gap, 1rem);
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+
+      header {
+        display: flex;
+        grid-column: 1 / -1;
+        justify-content: space-between;
+        align-items: center;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The title of the section
+       */
+      sectionTitle: {
+        type: String,
+        value: '',
+        observer: '__onsectionTitleChanged',
+      },
+    };
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <header>
+        <slot name="title" @slotchange="${this.__onTitleSlotChange}"></slot>
+        <slot name="header"></slot>
+        <div id="header-actions"></div>
+      </header>
+
+      <slot></slot>
+    `;
+  }
+
+  constructor() {
+    super();
+    this.__titleController = new TitleController(this);
+    this.__titleController.addEventListener('slot-content-changed', (event) => {
+      const { node } = event.target;
+      if (node) {
+        this.setAttribute('aria-labelledby', node.id);
+      }
+    });
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+    this.addController(this.__titleController);
+
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'section');
+    }
+  }
+
+  /** @private */
+  __onsectionTitleChanged(sectionTitle) {
+    this.__titleController.setTitle(sectionTitle);
+  }
+}
+
+defineCustomElement(DashboardSection);
+
+export { DashboardSection };
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
index 0b2aab613f..8fcabbcb0d 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.js
+++ b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -104,7 +104,7 @@ class DashboardWidget extends ControllerMixin(ElementMixin(PolylitMixin(LitEleme
 
   /** @private */
   __onWidgetTitleChanged(widgetTitle) {
-    this.__titleController.setWidgetTitle(widgetTitle);
+    this.__titleController.setTitle(widgetTitle);
   }
 }
 
diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts
index 1f80cae733..adda0513dd 100644
--- a/packages/dashboard/test/dashboard-layout.test.ts
+++ b/packages/dashboard/test/dashboard-layout.test.ts
@@ -1,6 +1,7 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import '../vaadin-dashboard-layout.js';
+import '../vaadin-dashboard-section.js';
 import type { DashboardLayout } from '../vaadin-dashboard-layout.js';
 import {
   getColumnWidths,
@@ -34,7 +35,7 @@ import {
  * ]
  * ```
  */
-function expectLayout(dashboard: DashboardLayout, layout: number[][]) {
+function expectLayout(dashboard: DashboardLayout, layout: Array<Array<number | null>>) {
   expect(getRowHeights(dashboard).length).to.eql(layout.length);
   expect(getColumnWidths(dashboard).length).to.eql(layout[0].length);
 
@@ -42,7 +43,7 @@ function expectLayout(dashboard: DashboardLayout, layout: number[][]) {
     row.forEach((itemId, columnIndex) => {
       const element = getElementFromCell(dashboard, rowIndex, columnIndex);
       if (!element) {
-        expect(itemId).to.be.undefined;
+        expect(itemId).to.be.null;
       } else {
         expect(element.id).to.equal(`item-${itemId}`);
       }
@@ -311,4 +312,101 @@ describe('dashboard layout', () => {
       expect(getColumnWidths(dashboard).length).to.eql(20);
     });
   });
+
+  describe('section', () => {
+    beforeEach(async () => {
+      const section = fixtureSync(`
+        <vaadin-dashboard-section>
+          <div id="item-2">Section item 2</div>
+          <div id="item-3">Section item 3</div>
+        </vaadin-dashboard-section>
+        `);
+      dashboard.appendChild(section);
+      await nextFrame();
+      childElements = [...dashboard.querySelectorAll('div')];
+    });
+
+    it('should span full width of the dashboard layout', () => {
+      /* prettier-ignore */
+      expectLayout(dashboard, [
+        [0, 1],
+        [2, 3],
+      ]);
+    });
+
+    it('should be on its own row', async () => {
+      dashboard.style.width = `${columnWidth * 4}px`;
+      await nextFrame();
+
+      /* prettier-ignore */
+      expectLayout(dashboard, [
+        [0, 1, null, null],
+        [2, 3, null, null],
+      ]);
+    });
+
+    it('following items should end up in the next row', async () => {
+      dashboard.style.width = `${columnWidth * 4}px`;
+      dashboard.appendChild(fixtureSync('<div id="item-4">Item 4</div>'));
+      await nextFrame();
+
+      /* prettier-ignore */
+      expectLayout(dashboard, [
+        [0, 1, null, null],
+        [2, 3, null, null],
+        [4],
+      ]);
+    });
+
+    it('should be capped to currently available columns', async () => {
+      dashboard.style.width = `${columnWidth}px`;
+      await nextFrame();
+
+      /* prettier-ignore */
+      expectLayout(dashboard, [
+        [0],
+        [1],
+        [2],
+        [3],
+      ]);
+    });
+
+    describe('gap', () => {
+      it('should have a default gap', () => {
+        // Clear the gap used in the tests
+        setGap(dashboard, undefined);
+        // Increase the width of the dashboard to fit two items and a gap
+        dashboard.style.width = `${columnWidth * 2 + remValue}px`;
+
+        const { right: item2Right } = childElements[2].getBoundingClientRect();
+        const { left: item3Left } = childElements[3].getBoundingClientRect();
+        // Expect the items to have a gap of 1rem
+        expect(item3Left - item2Right).to.eql(remValue);
+      });
+
+      it('should have a custom gap between items horizontally', () => {
+        const customGap = 10;
+        setGap(dashboard, customGap);
+        // Increase the width of the dashboard to fit two items and a gap
+        dashboard.style.width = `${columnWidth * 2 + customGap}px`;
+
+        const { right: item2Right } = childElements[2].getBoundingClientRect();
+        const { left: item3Left } = childElements[3].getBoundingClientRect();
+        // Expect the items to have a gap of 10px
+        expect(item3Left - item2Right).to.eql(customGap);
+      });
+
+      it('should have a custom gap between items vertically', async () => {
+        const customGap = 10;
+        setGap(dashboard, customGap);
+        dashboard.style.width = `${columnWidth}px`;
+        await nextFrame();
+
+        const { bottom: item2Bottom } = childElements[2].getBoundingClientRect();
+        const { top: item3Top } = childElements[3].getBoundingClientRect();
+        // Expect the items to have a gap of 10px
+        expect(item3Top - item2Bottom).to.eql(customGap);
+      });
+    });
+  });
 });
diff --git a/packages/dashboard/test/dashboard-section.test.ts b/packages/dashboard/test/dashboard-section.test.ts
new file mode 100644
index 0000000000..153fcb65bd
--- /dev/null
+++ b/packages/dashboard/test/dashboard-section.test.ts
@@ -0,0 +1,102 @@
+import { expect } from '@vaadin/chai-plugins';
+import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import '../vaadin-dashboard-section.js';
+import type { DashboardSection } from '../vaadin-dashboard-section.js';
+
+describe('dashboard section', () => {
+  let section: DashboardSection;
+
+  beforeEach(async () => {
+    section = fixtureSync(`
+      <vaadin-dashboard-section>
+        <div id="item-0">Item 0</div>
+        <div id="item-1">Item 1</div>
+      </vaadin-dashboard-section>
+    `);
+    await nextFrame();
+  });
+
+  it('should not display when hidden', () => {
+    expect(section.offsetHeight).to.be.above(0);
+    section.hidden = true;
+    expect(section.offsetHeight).to.eql(0);
+  });
+
+  describe('a11y', () => {
+    it('should have role="section"', () => {
+      expect(section.getAttribute('role')).to.eql('section');
+    });
+
+    it('should not override custom role', async () => {
+      section = fixtureSync(`<vaadin-dashboard-section role="region"></vaadin-dashboard-section>`);
+      await nextFrame();
+      expect(section.getAttribute('role')).to.eql('region');
+    });
+
+    it('should add title id to aria-labelledby attribute when using property', async () => {
+      section.sectionTitle = 'Custom title';
+      await nextFrame();
+      const title = section.querySelector('[slot="title"]');
+      expect(section.getAttribute('aria-labelledby')).equal(title?.id);
+    });
+
+    it('should add title id to aria-labelledby attribute when using slot', async () => {
+      const title = document.createElement('div');
+      title.id = 'custom-title';
+      title.slot = 'title';
+      title.textContent = 'Custom title';
+      section.appendChild(title);
+
+      await nextFrame();
+      expect(section.getAttribute('aria-labelledby')).equal(title?.id);
+    });
+
+    it('should have text content for the title', async () => {
+      section.sectionTitle = 'Custom title';
+      await nextFrame();
+      const title = section.querySelector('[slot="title"]');
+      expect(title?.textContent).equal('Custom title');
+    });
+  });
+
+  describe('title', () => {
+    it('should not override custom title element', async () => {
+      const title = document.createElement('div');
+      title.id = 'custom-title';
+      title.slot = 'title';
+      title.textContent = 'Custom title';
+      section.appendChild(title);
+      await nextFrame();
+
+      section.sectionTitle = 'New title';
+      await nextFrame();
+
+      const titles = section.querySelectorAll('[slot="title"]');
+      expect(titles.length).to.eql(1);
+      expect(titles[0]).to.eql(title);
+      expect(titles[0].textContent).to.eql('Custom title');
+    });
+
+    it('should not throw when initialized with a custom title', async () => {
+      expect(() => {
+        fixtureSync(`
+          <vaadin-dashboard-section>
+            <div slot="title">Custom title</div>
+          </vaadin-dashboard-section>
+        `);
+      }).not.to.throw(Error);
+      await nextFrame();
+    });
+
+    it('should empty title element when cleared', async () => {
+      section.sectionTitle = 'New title';
+      await nextFrame();
+
+      section.sectionTitle = null;
+      await nextFrame();
+
+      const title = section.querySelector('[slot="title"]');
+      expect(title?.textContent).to.eql('');
+    });
+  });
+});
diff --git a/packages/dashboard/test/helpers.ts b/packages/dashboard/test/helpers.ts
index 1b5551719a..0206341623 100644
--- a/packages/dashboard/test/helpers.ts
+++ b/packages/dashboard/test/helpers.ts
@@ -7,30 +7,50 @@ export function getColumnWidths(dashboard: HTMLElement): number[] {
     .map((width) => parseFloat(width));
 }
 
-/**
- * Returns the effective row heights of the dashboard as an array of numbers.
- */
-export function getRowHeights(dashboard: HTMLElement): number[] {
+function _getRowHeights(dashboard: HTMLElement): number[] {
   return getComputedStyle(dashboard)
     .gridTemplateRows.split(' ')
     .map((height) => parseFloat(height));
 }
 
-/**
- * Returns the element at the center of the cell at the given row and column index.
- */
-export function getElementFromCell(dashboard: HTMLElement, rowIndex: number, columnIndex: number): Element | null {
+function _getElementFromCell(dashboard: HTMLElement, rowIndex: number, columnIndex: number, rowHeights: number[]) {
   const { top, left } = dashboard.getBoundingClientRect();
   const columnWidths = getColumnWidths(dashboard);
-  const rowHeights = getRowHeights(dashboard);
-
   const x = left + columnWidths.slice(0, columnIndex).reduce((sum, width) => sum + width, 0);
   const y = top + rowHeights.slice(0, rowIndex).reduce((sum, height) => sum + height, 0);
 
   return document
-    .elementsFromPoint(x + columnWidths[columnIndex] / 2, y + rowHeights[rowIndex] / 2)
+    .elementsFromPoint(x + columnWidths[columnIndex] / 2, y + rowHeights[rowIndex] - 1)
     .reverse()
-    .find((element) => dashboard.contains(element) && element !== dashboard)!;
+    .find(
+      (element) =>
+        dashboard.contains(element) && element !== dashboard && element.localName !== 'vaadin-dashboard-section',
+    )!;
+}
+
+/**
+ * Returns the effective row heights with the row heights of nested sections flattened.
+ */
+export function getRowHeights(dashboard: HTMLElement): number[] {
+  const dashboardRowHeights = _getRowHeights(dashboard);
+  [...dashboardRowHeights].forEach((_height, index) => {
+    const item = _getElementFromCell(dashboard, index, 0, dashboardRowHeights);
+    const parentSection = item?.closest('vaadin-dashboard-section');
+    if (parentSection) {
+      const [headerRowHeight, firstRowHeight, ...remainingRowHeights] = _getRowHeights(parentSection);
+      // Merge the first two row heights of the section since the first one is the section header
+      dashboardRowHeights.splice(index, 1, headerRowHeight + firstRowHeight, ...remainingRowHeights);
+    }
+  });
+  return dashboardRowHeights;
+}
+
+/**
+ * Returns the element at the center of the cell at the given row and column index.
+ */
+export function getElementFromCell(dashboard: HTMLElement, rowIndex: number, columnIndex: number): Element | null {
+  const rowHeights = getRowHeights(dashboard);
+  return _getElementFromCell(dashboard, rowIndex, columnIndex, rowHeights);
 }
 
 /**
diff --git a/packages/dashboard/test/typings/dashboard.types.ts b/packages/dashboard/test/typings/dashboard.types.ts
index 0781bdf9df..a5fbff99fb 100644
--- a/packages/dashboard/test/typings/dashboard.types.ts
+++ b/packages/dashboard/test/typings/dashboard.types.ts
@@ -1,7 +1,9 @@
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
+import { TitleController } from '../../src/title-controller.js';
 import type { DashboardLayoutMixinClass } from '../../src/vaadin-dashboard-layout-mixin.js';
 import type { Dashboard, DashboardItem, DashboardRenderer } from '../../vaadin-dashboard.js';
 import type { DashboardLayout } from '../../vaadin-dashboard-layout.js';
+import type { DashboardSection } from '../../vaadin-dashboard-section.js';
 import type { DashboardWidget } from '../../vaadin-dashboard-widget.js';
 
 const assertType = <TExpected>(actual: TExpected) => actual;
@@ -36,3 +38,14 @@ const widget = document.createElement('vaadin-dashboard-widget');
 assertType<DashboardWidget>(widget);
 
 assertType<string | null | undefined>(widget.widgetTitle);
+
+/* DashboardSection */
+const section = document.createElement('vaadin-dashboard-section');
+assertType<DashboardSection>(section);
+
+assertType<string | null | undefined>(section.sectionTitle);
+
+/* TitleController */
+const titleController = new TitleController(layout, 'title');
+assertType<TitleController>(titleController);
+assertType<(title: string | null | undefined) => void>(titleController.setTitle);
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-section.js b/packages/dashboard/theme/lumo/vaadin-dashboard-section.js
new file mode 100644
index 0000000000..a3c4f56572
--- /dev/null
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-section.js
@@ -0,0 +1,2 @@
+import './vaadin-dashboard-section-styles.js';
+import '../../src/vaadin-dashboard-section.js';
diff --git a/packages/dashboard/theme/material/vaadin-dashboard-section-styles.js b/packages/dashboard/theme/material/vaadin-dashboard-section-styles.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/dashboard/theme/material/vaadin-dashboard-section.js b/packages/dashboard/theme/material/vaadin-dashboard-section.js
new file mode 100644
index 0000000000..a3c4f56572
--- /dev/null
+++ b/packages/dashboard/theme/material/vaadin-dashboard-section.js
@@ -0,0 +1,2 @@
+import './vaadin-dashboard-section-styles.js';
+import '../../src/vaadin-dashboard-section.js';
diff --git a/packages/dashboard/vaadin-dashboard-section.d.ts b/packages/dashboard/vaadin-dashboard-section.d.ts
new file mode 100644
index 0000000000..0318a81545
--- /dev/null
+++ b/packages/dashboard/vaadin-dashboard-section.d.ts
@@ -0,0 +1 @@
+export * from './src/vaadin-dashboard-section.js';
diff --git a/packages/dashboard/vaadin-dashboard-section.js b/packages/dashboard/vaadin-dashboard-section.js
new file mode 100644
index 0000000000..b6f4b9441a
--- /dev/null
+++ b/packages/dashboard/vaadin-dashboard-section.js
@@ -0,0 +1,3 @@
+import './theme/lumo/vaadin-dashboard-section.js';
+
+export * from './src/vaadin-dashboard-section.js';

From b260a6c2b6b07afa297e8cf12de95bad3e417ff9 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Thu, 22 Aug 2024 16:15:35 +0300
Subject: [PATCH 2/8] fix: column span in section

---
 packages/dashboard/src/vaadin-dashboard-section.js | 10 ++++++++++
 packages/dashboard/test/dashboard-layout.test.ts   | 14 +++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
index 72562373dc..ec7a307d76 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.js
+++ b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -42,6 +42,16 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
         display: none !important;
       }
 
+      ::slotted(*) {
+        --_vaadin-dashboard-item-column: span
+          min(
+            var(--vaadin-dashboard-item-colspan, 1),
+            var(--_vaadin-dashboard-effective-col-count, var(--_vaadin-dashboard-col-count))
+          );
+
+        grid-column: var(--_vaadin-dashboard-item-column);
+      }
+
       header {
         display: flex;
         grid-column: 1 / -1;
diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts
index adda0513dd..f28af0bbd6 100644
--- a/packages/dashboard/test/dashboard-layout.test.ts
+++ b/packages/dashboard/test/dashboard-layout.test.ts
@@ -320,7 +320,7 @@ describe('dashboard layout', () => {
           <div id="item-2">Section item 2</div>
           <div id="item-3">Section item 3</div>
         </vaadin-dashboard-section>
-        `);
+      `);
       dashboard.appendChild(section);
       await nextFrame();
       childElements = [...dashboard.querySelectorAll('div')];
@@ -371,6 +371,18 @@ describe('dashboard layout', () => {
       ]);
     });
 
+    it('should span multiple columns inside a section', async () => {
+      dashboard.style.width = `${columnWidth * 3}px`;
+      setColspan(childElements[2], 2);
+      await nextFrame();
+
+      /* prettier-ignore */
+      expectLayout(dashboard, [
+        [0, 1, null],
+        [2, 2, 3],
+      ]);
+    });
+
     describe('gap', () => {
       it('should have a default gap', () => {
         // Clear the gap used in the tests

From 2f7fb850463b9e7317277d5fdd954f3ded2d8a80 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Thu, 22 Aug 2024 15:45:09 +0300
Subject: [PATCH 3/8] refactor: use explicit values for section grid-column

---
 packages/dashboard/src/vaadin-dashboard-layout-mixin.js | 5 ++++-
 packages/dashboard/src/vaadin-dashboard-section.js      | 5 +++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
index 5d3c819b87..dddf5345ea 100644
--- a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
+++ b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
@@ -36,10 +36,13 @@ export const DashboardLayoutMixin = (superClass) =>
             var(--_vaadin-dashboard-default-col-max-width)
           );
 
+          /* Effective max column count */
+          --_vaadin-dashboard-col-max-count: var(--vaadin-dashboard-col-max-count, infinity);
+
           /* Effective column count */
           --_vaadin-dashboard-effective-col-count: min(
             var(--_vaadin-dashboard-col-count),
-            var(--vaadin-dashboard-col-max-count)
+            var(--_vaadin-dashboard-col-max-count)
           );
 
           display: grid;
diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
index ec7a307d76..fc6a2ef223 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.js
+++ b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -34,7 +34,8 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
       :host {
         display: grid;
         grid-template-columns: subgrid;
-        grid-column: 1 / -1 !important;
+        --_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-gap, 1rem);
       }
 
@@ -54,7 +55,7 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
 
       header {
         display: flex;
-        grid-column: 1 / -1;
+        grid-column: var(--_vaadin-dashboard-section-column);
         justify-content: space-between;
         align-items: center;
       }

From 0093fab379f96c968c3140f57c12ec0796c8feb8 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Thu, 22 Aug 2024 16:45:21 +0300
Subject: [PATCH 4/8] test: fix constructor type

---
 packages/dashboard/src/title-controller.d.ts       | 2 ++
 packages/dashboard/test/typings/dashboard.types.ts | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/src/title-controller.d.ts b/packages/dashboard/src/title-controller.d.ts
index 8d7df06f96..d8d29595a2 100644
--- a/packages/dashboard/src/title-controller.d.ts
+++ b/packages/dashboard/src/title-controller.d.ts
@@ -9,6 +9,8 @@ import { SlotChildObserveController } from '@vaadin/component-base/src/slot-chil
  * A controller to manage the widget or section title element.
  */
 export class TitleController extends SlotChildObserveController {
+  constructor(host: HTMLElement);
+
   /**
    * String used for the title.
    */
diff --git a/packages/dashboard/test/typings/dashboard.types.ts b/packages/dashboard/test/typings/dashboard.types.ts
index a5fbff99fb..33037396ef 100644
--- a/packages/dashboard/test/typings/dashboard.types.ts
+++ b/packages/dashboard/test/typings/dashboard.types.ts
@@ -46,6 +46,6 @@ assertType<DashboardSection>(section);
 assertType<string | null | undefined>(section.sectionTitle);
 
 /* TitleController */
-const titleController = new TitleController(layout, 'title');
+const titleController = new TitleController(layout);
 assertType<TitleController>(titleController);
 assertType<(title: string | null | undefined) => void>(titleController.setTitle);

From 5422eb9402d9d16d9cd30881b03551a8ff716ba8 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Thu, 22 Aug 2024 17:06:24 +0300
Subject: [PATCH 5/8] fix: replace infinity with a the computed column count

---
 packages/dashboard/src/vaadin-dashboard-layout-mixin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
index dddf5345ea..453c3b0bfc 100644
--- a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
+++ b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
@@ -37,7 +37,7 @@ export const DashboardLayoutMixin = (superClass) =>
           );
 
           /* Effective max column count */
-          --_vaadin-dashboard-col-max-count: var(--vaadin-dashboard-col-max-count, infinity);
+          --_vaadin-dashboard-col-max-count: var(--vaadin-dashboard-col-max-count, var(--_vaadin-dashboard-col-count));
 
           /* Effective column count */
           --_vaadin-dashboard-effective-col-count: min(

From 9106092e49d01d361891448d6d759af1fd422024 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Fri, 23 Aug 2024 11:22:00 +0300
Subject: [PATCH 6/8] remove section header content slot for now

---
 packages/dashboard/src/vaadin-dashboard-section.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
index fc6a2ef223..67cc7d923d 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.js
+++ b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -80,7 +80,6 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
     return html`
       <header>
         <slot name="title" @slotchange="${this.__onTitleSlotChange}"></slot>
-        <slot name="header"></slot>
         <div id="header-actions"></div>
       </header>
 

From d49f0760d1790344446bb477e97861b51c0ea5ad Mon Sep 17 00:00:00 2001
From: Tomi Virkki <tomivirkki@users.noreply.github.com>
Date: Fri, 23 Aug 2024 11:59:09 +0300
Subject: [PATCH 7/8] Update packages/dashboard/src/vaadin-dashboard-section.js

Co-authored-by: Ugur Saglam <106508695+ugur-vaadin@users.noreply.github.com>
---
 packages/dashboard/src/vaadin-dashboard-section.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
index 67cc7d923d..d61d1f72ff 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.js
+++ b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -70,7 +70,7 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
       sectionTitle: {
         type: String,
         value: '',
-        observer: '__onsectionTitleChanged',
+        observer: '__onSectionTitleChanged',
       },
     };
   }

From 1305ef46aea4f539f74cdb9fb9f6278e230847ae Mon Sep 17 00:00:00 2001
From: Tomi Virkki <tomivirkki@users.noreply.github.com>
Date: Fri, 23 Aug 2024 11:59:13 +0300
Subject: [PATCH 8/8] Update packages/dashboard/src/vaadin-dashboard-section.js

Co-authored-by: Ugur Saglam <106508695+ugur-vaadin@users.noreply.github.com>
---
 packages/dashboard/src/vaadin-dashboard-section.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
index d61d1f72ff..9fdf886541 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.js
+++ b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -109,7 +109,7 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
   }
 
   /** @private */
-  __onsectionTitleChanged(sectionTitle) {
+  __onSectionTitleChanged(sectionTitle) {
     this.__titleController.setTitle(sectionTitle);
   }
 }