From 50b71c0c118669400f3a867cf0310104a4eac797 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Tue, 1 Oct 2024 16:18:55 +0300
Subject: [PATCH 01/14] feat: dashboard lumo styles

---
 dev/dashboard-layout.html                     |   7 -
 dev/dashboard.html                            |   6 -
 .../src/vaadin-dashboard-item-mixin.js        | 118 +++++---
 .../src/vaadin-dashboard-section.d.ts         |  23 +-
 .../dashboard/src/vaadin-dashboard-section.js |  33 ++-
 .../dashboard/src/vaadin-dashboard-styles.js  | 101 ++-----
 .../src/vaadin-dashboard-widget.d.ts          |  26 +-
 .../dashboard/src/vaadin-dashboard-widget.js  |  49 ++--
 packages/dashboard/src/vaadin-dashboard.d.ts  |   4 +-
 packages/dashboard/src/vaadin-dashboard.js    |   6 +-
 .../src/widget-reorder-controller.js          |   6 +
 .../dashboard/src/widget-resize-controller.js |  10 +-
 .../dashboard/test/dashboard-keyboard.test.ts |   2 +
 .../dashboard/test/dashboard-layout.test.ts   |   6 +-
 .../test/dashboard-widget-reordering.test.ts  |  17 ++
 .../test/dashboard-widget-resizing.test.ts    |  18 ++
 .../lumo/vaadin-dashboard-layout-styles.js    |   6 +-
 .../lumo/vaadin-dashboard-section-styles.js   |  22 ++
 .../theme/lumo/vaadin-dashboard-styles.js     |  14 +-
 .../lumo/vaadin-dashboard-widget-styles.js    | 258 ++++++++++++++++++
 .../theme/lumo/vaadin-dashboard-widget.js     |   1 +
 .../dashboard/theme/lumo/vaadin-dashboard.js  |   1 +
 22 files changed, 564 insertions(+), 170 deletions(-)

diff --git a/dev/dashboard-layout.html b/dev/dashboard-layout.html
index 2be5f8cc81..28d2d7d335 100644
--- a/dev/dashboard-layout.html
+++ b/dev/dashboard-layout.html
@@ -14,13 +14,6 @@
     </script>
 
     <style>
-      vaadin-dashboard-widget {
-        background-color: #f5f5f5;
-        border: 1px solid #e0e0e0;
-        border-radius: 4px;
-        padding: 10px;
-      }
-
       vaadin-dashboard-layout {
         --vaadin-dashboard-col-min-width: 300px;
         --vaadin-dashboard-col-max-width: 500px;
diff --git a/dev/dashboard.html b/dev/dashboard.html
index d1ea1cb129..1e8f9fee3e 100644
--- a/dev/dashboard.html
+++ b/dev/dashboard.html
@@ -8,12 +8,6 @@
     <script type="module" src="./common.js"></script>
 
     <style>
-      vaadin-dashboard-widget {
-        background-color: #f5f5f5;
-        border-radius: 4px;
-        padding: 10px;
-      }
-
       vaadin-dashboard {
         --vaadin-dashboard-col-min-width: 300px;
         --vaadin-dashboard-col-max-width: 500px;
diff --git a/packages/dashboard/src/vaadin-dashboard-item-mixin.js b/packages/dashboard/src/vaadin-dashboard-item-mixin.js
index ec4bdbf5e6..6ee5602d9a 100644
--- a/packages/dashboard/src/vaadin-dashboard-item-mixin.js
+++ b/packages/dashboard/src/vaadin-dashboard-item-mixin.js
@@ -92,27 +92,34 @@ export const DashboardItemMixin = (superClass) =>
 
     /** @private */
     __renderDragHandle() {
-      // To make the button draggable on Firefox, using a workaround from https://stackoverflow.com/a/55019027/3409629
-      return html`<label draggable="true" class="drag-handle" id="drag-handle-wrapper">
-        <button
-          id="drag-handle"
-          aria-label="${this.__i18n.move}"
-          title="${this.__i18n.move}"
-          tabindex="${this.__selected ? 0 : -1}"
-          @click="${() => this.__enterMoveMode()}"
-        ></button>
-      </label>`;
+      return html`<vaadin-button
+        id="drag-handle"
+        draggable="true"
+        class="drag-handle"
+        part="move-button"
+        theme="icon tertiary"
+        aria-label="${this.__i18n.move}"
+        title="${this.__i18n.move}"
+        tabindex="${this.__selected ? 0 : -1}"
+        @click="${() => this.__enterMoveMode()}"
+      >
+        <div class="icon"></div>
+      </vaadin-button>`;
     }
 
     /** @private */
     __renderRemoveButton() {
-      return html`<button
+      return html`<vaadin-button
         aria-label="${this.__i18n.remove}"
         title="${this.__i18n.remove}"
         id="remove-button"
+        part="remove-button"
+        theme="icon tertiary"
         tabindex="${this.__selected ? 0 : -1}"
         @click="${() => fireRemove(this)}"
-      ></button>`;
+      >
+        <div class="icon"></div>
+      </vaadin-button>`;
     }
 
     /** @private */
@@ -133,14 +140,18 @@ export const DashboardItemMixin = (superClass) =>
 
     /** @private */
     __renderResizeHandle() {
-      return html`<button
+      return html`<vaadin-button
         aria-label="${this.__i18n.resize}"
         title="${this.__i18n.resize}"
         id="resize-handle"
+        part="resize-button"
         class="resize-handle"
+        theme="icon tertiary"
         tabindex="${this.__selected ? 0 : -1}"
         @click="${() => this.__enterResizeMode()}"
-      ></button>`;
+      >
+        <div class="icon"></div>
+      </vaadin-button>`;
     }
 
     /** @private */
@@ -151,24 +162,36 @@ export const DashboardItemMixin = (superClass) =>
         .hidden="${!this.__moveMode}"
         @pointerdown="${(e) => e.preventDefault()}"
       >
-        <button
+        <vaadin-button
+          theme="primary icon"
           aria-label="${this.__i18n.moveBackward}"
           title="${this.__i18n.moveBackward}"
           @click="${() => fireMove(this, -1)}"
           id="move-backward"
-        ></button>
-        <button
+          part="move-backward-button"
+        >
+          <div class="icon"></div>
+        </vaadin-button>
+        <vaadin-button
+          theme="primary icon large"
           aria-label="${this.__i18n.moveApply}"
           title="${this.__i18n.moveApply}"
           @click="${() => this.__exitMode(true)}"
           id="move-apply"
-        ></button>
-        <button
+          part="move-apply-button"
+        >
+          <div class="icon"></div>
+        </vaadin-button>
+        <vaadin-button
+          theme="primary icon"
           aria-label="${this.__i18n.moveForward}"
           title="${this.__i18n.moveForward}"
           @click="${() => fireMove(this, 1)}"
           id="move-forward"
-        ></button>
+          part="move-forward-button"
+        >
+          <div class="icon"></div>
+        </vaadin-button>
       </div>`;
     }
 
@@ -182,38 +205,58 @@ export const DashboardItemMixin = (superClass) =>
         .hidden="${!this.__resizeMode}"
         @pointerdown="${(e) => e.preventDefault()}"
       >
-        <button
+        <vaadin-button
+          theme="primary icon large"
           aria-label="${this.__i18n.resizeApply}"
           title="${this.__i18n.resizeApply}"
           @click="${() => this.__exitMode(true)}"
           id="resize-apply"
-        ></button>
-        <button
+          part="resize-apply-button"
+        >
+          <div class="icon"></div>
+        </vaadin-button>
+        <vaadin-button
+          theme="primary icon"
           aria-label="${this.__i18n.resizeShrinkWidth}"
           title="${this.__i18n.resizeShrinkWidth}"
           @click="${() => fireResize(this, -1, 0)}"
           id="resize-shrink-width"
-        ></button>
-        <button
+          part="resize-shrink-width-button"
+        >
+          <div class="icon"></div>
+        </vaadin-button>
+        <vaadin-button
+          theme="primary icon"
           aria-label="${this.__i18n.resizeGrowWidth}"
           title="${this.__i18n.resizeGrowWidth}"
           @click="${() => fireResize(this, 1, 0)}"
           id="resize-grow-width"
-        ></button>
-        <button
+          part="resize-grow-width-button"
+        >
+          <div class="icon"></div>
+        </vaadin-button>
+        <vaadin-button
+          theme="primary icon"
           aria-label="${this.__i18n.resizeShrinkHeight}"
           title="${this.__i18n.resizeShrinkHeight}"
           @click="${() => fireResize(this, 0, -1)}"
           id="resize-shrink-height"
+          part="resize-shrink-height-button"
           .hidden="${!hasMinRowHeight}"
-        ></button>
-        <button
+        >
+          <div class="icon"></div>
+        </vaadin-button>
+        <vaadin-button
+          theme="primary icon"
           aria-label="${this.__i18n.resizeGrowHeight}"
           title="${this.__i18n.resizeGrowHeight}"
           @click="${() => fireResize(this, 0, 1)}"
           id="resize-grow-height"
+          part="resize-grow-height-button"
           .hidden="${!hasMinRowHeight}"
-        ></button>
+        >
+          <div class="icon"></div>
+        </vaadin-button>
       </div>`;
     }
 
@@ -231,7 +274,10 @@ export const DashboardItemMixin = (superClass) =>
     }
 
     /** @private */
-    __selectedChanged(selected) {
+    __selectedChanged(selected, oldSelected) {
+      if (!!selected === !!oldSelected) {
+        return;
+      }
       this.dispatchEvent(new CustomEvent('item-selected-changed', { bubbles: true, detail: { value: selected } }));
       if (selected) {
         this.__focusTrapController.trapFocus(this.$.focustrap);
@@ -291,12 +337,18 @@ export const DashboardItemMixin = (superClass) =>
     }
 
     /** @private */
-    __moveModeChanged(moveMode) {
+    __moveModeChanged(moveMode, oldMoveMode) {
+      if (!!moveMode === !!oldMoveMode) {
+        return;
+      }
       this.dispatchEvent(new CustomEvent('item-move-mode-changed', { bubbles: true, detail: { value: moveMode } }));
     }
 
     /** @private */
-    __resizeModeChanged(resizeMode) {
+    __resizeModeChanged(resizeMode, oldResizeMode) {
+      if (!!resizeMode === !!oldResizeMode) {
+        return;
+      }
       this.dispatchEvent(new CustomEvent('item-resize-mode-changed', { bubbles: true, detail: { value: resizeMode } }));
     }
   };
diff --git a/packages/dashboard/src/vaadin-dashboard-section.d.ts b/packages/dashboard/src/vaadin-dashboard-section.d.ts
index 638ce46811..bdaf2c11c7 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.d.ts
+++ b/packages/dashboard/src/vaadin-dashboard-section.d.ts
@@ -10,6 +10,7 @@
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
 import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
 
 /**
@@ -42,17 +43,31 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
  *
  * ### Styling
  *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name              | Description
+ * -----------------------|-------------
+ * `header`               | The header of the section
+ * `move-button`          | The move button
+ * `remove-button`        | The remove button
+ * `move-backward-button` | The move backward button when in move mode
+ * `move-forward-button`  | The move forward button when in move mode
+ * `move-apply-button`    | The apply button when in move mode
+ *
  * The following state attributes are available for styling:
  *
  * Attribute      | Description
  * ---------------|-------------
- * `selected`     | Set when the item is selected.
- * `focused`      | Set when the item is focused.
- * `move-mode`    | Set when the item is being moved.
+ * `selected`     | Set when the element is selected.
+ * `focused`      | Set when the element is focused.
+ * `move-mode`    | Set when the element is being moved.
+ * `editable`     | Set when the element is editable.
+ * `first-child`  | Set when the element is the first child of the parent.
+ * `last-child`   | Set when the element is the last child of the parent.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
-declare class DashboardSection extends DashboardItemMixin(ControllerMixin(ElementMixin(HTMLElement))) {
+declare class DashboardSection extends DashboardItemMixin(ControllerMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
   /**
    * The title of the section
    *
diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
index 502647bc14..78814dda32 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.js
+++ b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -13,7 +13,7 @@ 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 { css, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { TitleController } from './title-controller.js';
 import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
 import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
@@ -49,23 +49,40 @@ import { hasWidgetWrappers } from './vaadin-dashboard-styles.js';
  *
  * ### Styling
  *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name              | Description
+ * -----------------------|-------------
+ * `header`               | The header of the section
+ * `move-button`          | The move button
+ * `remove-button`        | The remove button
+ * `move-backward-button` | The move backward button when in move mode
+ * `move-forward-button`  | The move forward button when in move mode
+ * `move-apply-button`    | The apply button when in move mode
+ *
  * The following state attributes are available for styling:
  *
  * Attribute      | Description
  * ---------------|-------------
- * `selected`     | Set when the item is selected.
- * `focused`      | Set when the item is focused.
- * `move-mode`    | Set when the item is being moved.
+ * `selected`     | Set when the element is selected.
+ * `focused`      | Set when the element is focused.
+ * `move-mode`    | Set when the element is being moved.
+ * `editable`     | Set when the element is editable.
+ * `first-child`  | Set when the element is the first child of the parent.
+ * `last-child`   | Set when the element is the last child of the parent.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
+ * @mixes ThemableMixin
  * @mixes ControllerMixin
  * @mixes DashboardItemMixin
  */
-class DashboardSection extends DashboardItemMixin(ControllerMixin(ElementMixin(PolylitMixin(LitElement)))) {
+class DashboardSection extends DashboardItemMixin(
+  ControllerMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dashboard-section';
   }
@@ -93,10 +110,6 @@ class DashboardSection extends DashboardItemMixin(ControllerMixin(ElementMixin(P
           display: none !important;
         }
 
-        :host([highlight]) {
-          background-color: #f5f5f5;
-        }
-
         ::slotted(*) {
           --_vaadin-dashboard-title-level: 3;
           --_vaadin-dashboard-item-column: span
@@ -179,7 +192,7 @@ class DashboardSection extends DashboardItemMixin(ControllerMixin(ElementMixin(P
       ${this.__renderFocusButton('selectSection')} ${this.__renderMoveControls()}
 
       <div id="focustrap">
-        <header>
+        <header part="header">
           ${this.__renderDragHandle()}
           <slot name="title" id="title" @slotchange="${this.__onTitleSlotChange}"></slot>
           ${this.__renderRemoveButton()}
diff --git a/packages/dashboard/src/vaadin-dashboard-styles.js b/packages/dashboard/src/vaadin-dashboard-styles.js
index 7282e75edd..363fa0ecc1 100644
--- a/packages/dashboard/src/vaadin-dashboard-styles.js
+++ b/packages/dashboard/src/vaadin-dashboard-styles.js
@@ -9,18 +9,9 @@ export const hasWidgetWrappers = css`
 export const dashboardWidgetAndSectionStyles = css`
   :host {
     box-sizing: border-box;
-  }
-
-  :host([focused]) {
-    border: 1px solid blue;
-  }
-
-  :host([selected]) {
-    border: 4px solid red;
-  }
-
-  :host([dragging]) {
-    border: 3px dashed black;
+    --_mode-button-spacing-offset: calc(
+      max(0px, var(--_vaadin-dashboard-default-spacing) - var(--_vaadin-dashboard-spacing))
+    );
   }
 
   :host([dragging]) * {
@@ -29,7 +20,8 @@ export const dashboardWidgetAndSectionStyles = css`
 
   :host(:not([editable])) #drag-handle,
   :host(:not([editable])) #remove-button,
-  :host(:not([editable])) #focus-button {
+  :host(:not([editable])) #focus-button,
+  :host(:not([editable])) #focus-button-wrapper {
     display: none;
   }
 
@@ -39,8 +31,10 @@ export const dashboardWidgetAndSectionStyles = css`
 
   header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+  }
+
+  vaadin-button {
+    z-index: 1;
   }
 
   #focus-button-wrapper,
@@ -56,80 +50,37 @@ export const dashboardWidgetAndSectionStyles = css`
     border: none;
   }
 
-  #drag-handle-wrapper {
-    z-index: 1;
-    cursor: grab;
-  }
-
-  #drag-handle {
-    font-size: 30px;
-    z-index: 1;
-    pointer-events: none;
-  }
-
-  #drag-handle::before {
-    content: '☰';
-  }
-
-  #remove-button {
-    font-size: 30px;
-    cursor: pointer;
-    z-index: 1;
-  }
-
-  #remove-button::before {
-    content: '×';
-  }
-
   .mode-controls {
     position: absolute;
     inset: 0;
-    background-color: rgba(255, 255, 255, 0.5);
     z-index: 2;
   }
 
-  button:focus {
-    outline: 1px solid blue;
+  .mode-controls[hidden] {
+    display: none;
   }
 
   /* Move-mode buttons */
   #move-backward,
   #move-forward,
   #move-apply {
-    font-size: 30px;
-    cursor: pointer;
     position: absolute;
     top: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  #move-backward::before,
-  #move-forward::before,
-  #move-apply::before {
-    content: var(--content);
   }
 
   #move-backward {
     inset-inline-start: 0;
-    --content: '<';
-  }
-
-  :host([dir='rtl']) #move-backward {
-    transform: translate(50%, -50%);
+    transform: translateY(-50%);
   }
 
   #move-forward {
     inset-inline-end: 0;
-    --content: '>';
-  }
-
-  :host(:not([dir='rtl'])) #move-forward {
-    transform: translate(50%, -50%);
+    transform: translateY(-50%);
   }
 
   #move-apply {
     left: 50%;
-    --content: '✔';
+    transform: translate(-50%, -50%);
   }
 
   :host([first-child]) #move-backward,
@@ -143,51 +94,37 @@ export const dashboardWidgetAndSectionStyles = css`
   #resize-grow-width,
   #resize-grow-height,
   #resize-apply {
-    font-size: 30px;
-    cursor: pointer;
     position: absolute;
   }
 
-  #resize-shrink-width::before,
-  #resize-shrink-height::before,
-  #resize-grow-width::before,
-  #resize-grow-height::before,
-  #resize-apply::before {
-    content: var(--content);
-  }
-
   #resize-shrink-width {
-    inset-inline-end: 0;
+    inset-inline-end: calc(0px + var(--_mode-button-spacing-offset));
     top: 50%;
     transform: translateY(-50%);
-    --content: '-';
   }
 
   #resize-grow-width {
-    inset-inline-start: 100%;
+    inset-inline-start: calc(100% - var(--_mode-button-spacing-offset));
     top: 50%;
     transform: translateY(-50%);
-    --content: '+';
   }
 
   #resize-shrink-height {
-    bottom: 0;
+    bottom: calc(0px + var(--_mode-button-spacing-offset));
     left: 50%;
     transform: translateX(-50%);
-    --content: '-';
   }
 
   #resize-grow-height {
-    top: 100%;
+    top: calc(100% - var(--_mode-button-spacing-offset));
     left: 50%;
     transform: translateX(-50%);
-    --content: '+';
   }
 
   #resize-apply {
     left: 50%;
     top: 50%;
-    --content: '✔';
+
     transform: translate(-50%, -50%);
   }
 `;
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.d.ts b/packages/dashboard/src/vaadin-dashboard-widget.d.ts
index 7b5904dc04..3f12c4c1fb 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.d.ts
+++ b/packages/dashboard/src/vaadin-dashboard-widget.d.ts
@@ -10,6 +10,7 @@
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
 import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
 
 /**
@@ -43,6 +44,24 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
  *
  * ### Styling
  *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name                     | Description
+ * ------------------------------|-------------
+ * `header`                      | The header of the widget
+ * `content`                     | The content of the widget
+ * `move-button`                 | The move button
+ * `remove-button`               | The remove button
+ * `resize-button`               | The resize button
+ * `move-backward-button`        | The move backward button when in move mode
+ * `move-forward-button`         | The move forward button when in move mode
+ * `move-apply-button`           | The apply button when in move mode
+ * `resize-shrink-width-button`  | The shrink width button when in resize mode
+ * `resize-grow-width-button`    | The grow width button when in resize mode
+ * `resize-shrink-height-button` | The shrink height button when in resize mode
+ * `resize-grow-height-button`   | The grow height button when in resize mode
+ * `resize-apply-button`         | The apply button when in resize mode
+ *
  * The following custom properties are available:
  *
  * Custom Property                   | Description
@@ -58,10 +77,15 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
  * `focused`      | Set when the element is focused.
  * `move-mode`    | Set when the element is being moved.
  * `resize-mode`  | Set when the element is being resized.
+ * `resizing`     | Set when the element is being resized.
+ * `dragging`     | Set when the element is being dragged.
+ * `editable`     | Set when the element is editable.
+ * `first-child`  | Set when the element is the first child of the parent.
+ * `last-child`   | Set when the element is the last child of the parent.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
-declare class DashboardWidget extends DashboardItemMixin(ControllerMixin(ElementMixin(HTMLElement))) {
+declare class DashboardWidget extends DashboardItemMixin(ControllerMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
   /**
    * The title of the widget
    *
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
index d114609c49..595000703d 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.js
+++ b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -8,12 +8,13 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
+import '@vaadin/button/src/vaadin-button.js';
 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 { css, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { TitleController } from './title-controller.js';
 import { SYNCHRONIZED_ATTRIBUTES, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
 import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
@@ -50,6 +51,24 @@ import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
  *
  * ### Styling
  *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name                     | Description
+ * ------------------------------|-------------
+ * `header`                      | The header of the widget
+ * `content`                     | The content of the widget
+ * `move-button`                 | The move button
+ * `remove-button`               | The remove button
+ * `resize-button`               | The resize button
+ * `move-backward-button`        | The move backward button when in move mode
+ * `move-forward-button`         | The move forward button when in move mode
+ * `move-apply-button`           | The apply button when in move mode
+ * `resize-shrink-width-button`  | The shrink width button when in resize mode
+ * `resize-grow-width-button`    | The grow width button when in resize mode
+ * `resize-shrink-height-button` | The shrink height button when in resize mode
+ * `resize-grow-height-button`   | The grow height button when in resize mode
+ * `resize-apply-button`         | The apply button when in resize mode
+ *
  * The following custom properties are available:
  *
  * Custom Property                   | Description
@@ -65,16 +84,24 @@ import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
  * `focused`      | Set when the element is focused.
  * `move-mode`    | Set when the element is being moved.
  * `resize-mode`  | Set when the element is being resized.
+ * `resizing`     | Set when the element is being resized.
+ * `dragging`     | Set when the element is being dragged.
+ * `editable`     | Set when the element is editable.
+ * `first-child`  | Set when the element is the first child of the parent.
+ * `last-child`   | Set when the element is the last child of the parent.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
+ * @mixes ThemableMixin
  * @mixes ControllerMixin
  * @mixes DashboardItemMixin
  */
-class DashboardWidget extends DashboardItemMixin(ControllerMixin(ElementMixin(PolylitMixin(LitElement)))) {
+class DashboardWidget extends DashboardItemMixin(
+  ControllerMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dashboard-widget';
   }
@@ -100,29 +127,17 @@ class DashboardWidget extends DashboardItemMixin(ControllerMixin(ElementMixin(Po
 
         #content {
           flex: 1;
-          min-height: 100px;
         }
 
         #resize-handle {
           position: absolute;
           bottom: 0;
           inset-inline-end: 0;
-          font-size: 30px;
-          cursor: grab;
-          line-height: 1;
           z-index: 1;
           overflow: hidden;
         }
 
-        #resize-handle::before {
-          content: '\\2921';
-        }
-
-        :host([dir='rtl']) #resize-handle::before {
-          content: '\\2922';
-        }
-
-        :host::after {
+        :host([resizing])::after {
           content: '';
           z-index: 2;
           position: absolute;
@@ -193,7 +208,7 @@ class DashboardWidget extends DashboardItemMixin(ControllerMixin(ElementMixin(Po
       ${this.__renderFocusButton('selectWidget')} ${this.__renderMoveControls()} ${this.__renderResizeControls()}
 
       <div id="focustrap">
-        <header>
+        <header part="header">
           ${this.__renderDragHandle()}
           <slot name="title" id="title" @slotchange="${this.__onTitleSlotChange}"></slot>
           <slot name="header-content"></slot>
@@ -203,7 +218,7 @@ class DashboardWidget extends DashboardItemMixin(ControllerMixin(ElementMixin(Po
         ${this.__renderResizeHandle()}
       </div>
 
-      <div id="content">
+      <div id="content" part="content">
         <slot></slot>
       </div>
     `;
diff --git a/packages/dashboard/src/vaadin-dashboard.d.ts b/packages/dashboard/src/vaadin-dashboard.d.ts
index 872ef662e5..ee19b42b47 100644
--- a/packages/dashboard/src/vaadin-dashboard.d.ts
+++ b/packages/dashboard/src/vaadin-dashboard.d.ts
@@ -11,6 +11,7 @@
 import './vaadin-dashboard-widget.js';
 import './vaadin-dashboard-section.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
 import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
 
 export interface DashboardItem {
@@ -203,6 +204,7 @@ export interface DashboardI18n {
  * ---------------|-------------
  * `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.
  *
@@ -214,7 +216,7 @@ export interface DashboardI18n {
  * @fires {CustomEvent} dashboard-item-resize-mode-changed - Fired when an item resize mode changed
  */
 declare class Dashboard<TItem extends DashboardItem = DashboardItem> extends DashboardLayoutMixin(
-  ElementMixin(HTMLElement),
+  ElementMixin(ThemableMixin(HTMLElement)),
 ) {
   /**
    * An array containing the items of the dashboard
diff --git a/packages/dashboard/src/vaadin-dashboard.js b/packages/dashboard/src/vaadin-dashboard.js
index da2c696642..4ddfd17165 100644
--- a/packages/dashboard/src/vaadin-dashboard.js
+++ b/packages/dashboard/src/vaadin-dashboard.js
@@ -85,6 +85,7 @@ import { WidgetResizeController } from './widget-resize-controller.js';
  * ---------------|-------------
  * `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.
  *
@@ -114,7 +115,7 @@ class Dashboard extends ControllerMixin(DashboardLayoutMixin(ElementMixin(Themab
     return [
       super.styles,
       css`
-        #grid[resizing] {
+        #grid[item-resizing] {
           -webkit-user-select: none;
           user-select: none;
         }
@@ -298,7 +299,6 @@ class Dashboard extends ControllerMixin(DashboardLayoutMixin(ElementMixin(Themab
           section.sectionTitle = item.title;
         }
 
-        section.toggleAttribute('highlight', !!this.__widgetReorderController.draggedItem);
         SYNCHRONIZED_ATTRIBUTES.forEach((attr) => section.toggleAttribute(attr, !!wrapper[attr]));
         section.__i18n = this.i18n;
 
@@ -408,6 +408,7 @@ class Dashboard extends ControllerMixin(DashboardLayoutMixin(ElementMixin(Themab
     const items = getItemsArrayOfItem(item, this.items);
     items.splice(items.indexOf(item), 1);
     this.items = [...this.items];
+    this.toggleAttribute('item-selected', false);
     this.dispatchEvent(
       new CustomEvent('dashboard-item-removed', { cancelable: true, detail: { item, items: this.items } }),
     );
@@ -432,6 +433,7 @@ class Dashboard extends ControllerMixin(DashboardLayoutMixin(ElementMixin(Themab
   __itemSelectedChanged(e) {
     e.stopImmediatePropagation();
     this.__dispatchCustomEvent('dashboard-item-selected-changed', getElementItem(e.target), e.detail.value);
+    this.toggleAttribute('item-selected', e.detail.value);
   }
 
   /** @private */
diff --git a/packages/dashboard/src/widget-reorder-controller.js b/packages/dashboard/src/widget-reorder-controller.js
index 6c17123151..7955b958b7 100644
--- a/packages/dashboard/src/widget-reorder-controller.js
+++ b/packages/dashboard/src/widget-reorder-controller.js
@@ -31,6 +31,12 @@ export class WidgetReorderController {
     }
 
     this.__draggedElement = e.target;
+
+    // Avoid having the selection/focus outline styles in the drag image
+    this.__draggedElement.__exitMode();
+    this.__draggedElement.__focused = false;
+    this.__draggedElement.__selected = false;
+
     this.draggedItem = getElementItem(this.__draggedElement);
 
     // Set the drag image to the dragged element
diff --git a/packages/dashboard/src/widget-resize-controller.js b/packages/dashboard/src/widget-resize-controller.js
index af30993c16..d71c62e1e9 100644
--- a/packages/dashboard/src/widget-resize-controller.js
+++ b/packages/dashboard/src/widget-resize-controller.js
@@ -37,7 +37,7 @@ export class WidgetResizeController {
       return;
     }
 
-    this.host.$.grid.toggleAttribute('resizing', true);
+    this.host.$.grid.toggleAttribute('item-resizing', true);
     this.resizedItem = getElementItem(e.target);
 
     this.__resizeStartWidth = e.target.offsetWidth;
@@ -109,8 +109,11 @@ export class WidgetResizeController {
     const itemWrapper = this.__getItemWrapper(this.resizedItem);
     itemWrapper.style.removeProperty('--_vaadin-dashboard-widget-resizer-width');
     itemWrapper.style.removeProperty('--_vaadin-dashboard-widget-resizer-height');
+    if (itemWrapper.firstElementChild) {
+      itemWrapper.firstElementChild.toggleAttribute('resizing', false);
+    }
 
-    this.host.$.grid.toggleAttribute('resizing', false);
+    this.host.$.grid.toggleAttribute('item-resizing', false);
 
     // Disconnect the observer for the resized element removal
     this.__resizedElementRemoveObserver.disconnect();
@@ -177,6 +180,9 @@ export class WidgetResizeController {
     const itemWrapper = this.__getItemWrapper(this.resizedItem);
     itemWrapper.style.setProperty('--_vaadin-dashboard-widget-resizer-width', `${this.__resizeWidth}px`);
     itemWrapper.style.setProperty('--_vaadin-dashboard-widget-resizer-height', `${this.__resizeHeight}px`);
+    if (itemWrapper.firstElementChild) {
+      itemWrapper.firstElementChild.toggleAttribute('resizing', true);
+    }
   }
 
   /** @private */
diff --git a/packages/dashboard/test/dashboard-keyboard.test.ts b/packages/dashboard/test/dashboard-keyboard.test.ts
index 2489778b44..1ace788aab 100644
--- a/packages/dashboard/test/dashboard-keyboard.test.ts
+++ b/packages/dashboard/test/dashboard-keyboard.test.ts
@@ -79,6 +79,7 @@ describe('dashboard - keyboard interaction', () => {
     await sendKeys({ press: 'Space' });
     expect(widget.hasAttribute('focused')).to.be.true;
     expect(widget.hasAttribute('selected')).to.be.true;
+    expect(dashboard.hasAttribute('item-selected')).to.be.true;
   });
 
   it('should dispatch a selection event', async () => {
@@ -125,6 +126,7 @@ describe('dashboard - keyboard interaction', () => {
       await sendKeys({ press: 'Escape' });
       expect(widget.hasAttribute('selected')).to.be.false;
       expect(widget.hasAttribute('focused')).to.be.true;
+      expect(dashboard.hasAttribute('item-selected')).to.be.false;
     });
 
     it('should dispatch a selection event', async () => {
diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts
index cd0ff89fc0..4422b5908e 100644
--- a/packages/dashboard/test/dashboard-layout.test.ts
+++ b/packages/dashboard/test/dashboard-layout.test.ts
@@ -24,9 +24,11 @@ const [defaultSpacing, defaultMinimumColumnWidth] = (() => {
   const div = document.createElement('div');
   document.body.appendChild(div);
   div.style.width = '1rem';
-  const width = getComputedStyle(div).width;
+  const minColWidth = div.offsetWidth * 25;
+  div.style.width = 'var(--lumo-space-xl)';
+  const spacing = div.offsetWidth;
   div.remove();
-  return [parseFloat(width), parseFloat(width) * 25];
+  return [spacing, minColWidth];
 })();
 
 describe('dashboard layout', () => {
diff --git a/packages/dashboard/test/dashboard-widget-reordering.test.ts b/packages/dashboard/test/dashboard-widget-reordering.test.ts
index eb3ad232ec..2058aa6856 100644
--- a/packages/dashboard/test/dashboard-widget-reordering.test.ts
+++ b/packages/dashboard/test/dashboard-widget-reordering.test.ts
@@ -524,6 +524,23 @@ describe('dashboard - widget reordering', () => {
       }).to.not.throw();
     });
 
+    it('should exit mode, selection and focus state when mouse-dragging', async () => {
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      (getDraggable(widget) as HTMLElement).click();
+      await nextFrame();
+      expect(widget.hasAttribute('selected')).to.be.true;
+      expect(widget.hasAttribute('focused')).to.be.true;
+      expect(widget.hasAttribute('move-mode')).to.be.true;
+
+      fireDragStart(widget);
+      await new Promise((resolve: any) => {
+        queueMicrotask(resolve);
+      });
+      expect(widget.hasAttribute('selected')).to.be.false;
+      expect(widget.hasAttribute('focused')).to.be.false;
+      expect(widget.hasAttribute('move-mode')).to.be.false;
+    });
+
     describe('sections', () => {
       beforeEach(async () => {
         dashboard.items = [{ id: 0 }, { id: 1 }, { items: [{ id: 2 }, { id: 3 }] }];
diff --git a/packages/dashboard/test/dashboard-widget-resizing.test.ts b/packages/dashboard/test/dashboard-widget-resizing.test.ts
index 583394c591..d601fb988e 100644
--- a/packages/dashboard/test/dashboard-widget-resizing.test.ts
+++ b/packages/dashboard/test/dashboard-widget-resizing.test.ts
@@ -481,6 +481,24 @@ describe('dashboard - widget resizing', () => {
       expect((dashboard.items[0] as TestDashboardItem).rowspan).to.be.undefined;
     });
 
+    it('should have resizing attributes on the widget', async () => {
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      fireResizeStart(widget);
+      await nextFrame();
+
+      expect(widget.hasAttribute('resizing')).to.be.true;
+    });
+
+    it('should remove resizing attributes from the widget', async () => {
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      fireResizeStart(widget);
+      await nextFrame();
+      fireResizeEnd(dashboard);
+      await nextFrame();
+
+      expect(widget.hasAttribute('resizing')).to.be.false;
+    });
+
     // Make sure the original resized element is restored in the host.
     // Otherwise, "track" event would stop working.
     describe('ensure track event', () => {
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-layout-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-layout-styles.js
index e810a25c6c..33cb032dfd 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-layout-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-layout-styles.js
@@ -1,6 +1,10 @@
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-export const dashboardLayoutStyles = css``;
+export const dashboardLayoutStyles = css`
+  #grid {
+    --_vaadin-dashboard-default-spacing: var(--lumo-space-xl);
+  }
+`;
 
 registerStyles('vaadin-dashboard-layout', [dashboardLayoutStyles], {
   moduleId: 'lumo-dashboard-layout',
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js
index e69de29bb2..c80314be2b 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js
@@ -0,0 +1,22 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dashboardWidgetAndSection } from './vaadin-dashboard-widget-styles.js';
+
+const section = css`
+  :host {
+    --_focus-ring-spacing-max-offset: calc(var(--_vaadin-dashboard-spacing) / 2);
+  }
+
+  :host([move-mode]) ::slotted(*) {
+    --_vaadin-dashboard-widget-opacity: 0.3;
+    --_vaadin-dashboard-widget-filter: blur(10px);
+  }
+`;
+
+registerStyles('vaadin-dashboard-section', [dashboardWidgetAndSection, section], {
+  moduleId: 'lumo-dashboard-section',
+});
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js
index 6701a4c3d1..eaf23e86ee 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js
@@ -1,6 +1,16 @@
-import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { dashboardLayoutStyles } from './vaadin-dashboard-layout-styles.js';
 
-registerStyles('vaadin-dashboard', [dashboardLayoutStyles], {
+const dashboard = css`
+  :host {
+    --_vaadin-dashboard-widget-opacity: 1;
+  }
+
+  :host([item-selected]) {
+    --_vaadin-dashboard-widget-opacity: 0.7;
+  }
+`;
+
+registerStyles('vaadin-dashboard', [dashboardLayoutStyles, dashboard], {
   moduleId: 'lumo-dashboard',
 });
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
index e69de29bb2..56c80a4ef1 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
@@ -0,0 +1,258 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+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 { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const dashboardWidgetAndSection = css`
+  :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);
+    --_focus-ring-spacing-max-offset: 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([focused])::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);
+    outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
+  }
+
+  :host([selected])::before {
+    box-shadow:
+      0 2px 4px -1px var(--lumo-primary-color-10pct),
+      0 3px 12px -1px var(--lumo-primary-color-50pct);
+  }
+
+  /* Buttons styling */
+  vaadin-button {
+    font-family: 'lumo-icons';
+    font-size: var(--lumo-icon-size-s);
+  }
+
+  .icon::before {
+    display: block;
+  }
+
+  :host(:not([selected])) *:not(.mode-controls) vaadin-button,
+  :host([move-mode]) *:not(.mode-controls) vaadin-button,
+  :host([resize-mode]) *:not(.mode-controls) vaadin-button {
+    color: var(--lumo-disabled-text-color);
+  }
+
+  /* Header styling */
+  header {
+    display: flex;
+    align-items: center;
+    padding-block: var(--lumo-space-s);
+    padding-inline: var(--lumo-space-m);
+    height: var(--lumo-size-m);
+    gap: var(--lumo-space-s);
+  }
+
+  :host([editable]) header {
+    padding-inline: var(--lumo-space-xs);
+  }
+
+  /* Drag handle styling */
+  #drag-handle {
+    cursor: move;
+  }
+
+  #drag-handle .icon::before {
+    content: var(--lumo-icons-menu);
+  }
+
+  /* Remove button styling */
+  #remove-button {
+    cursor: pointer;
+  }
+
+  #remove-button .icon::before {
+    content: var(--lumo-icons-cross);
+  }
+
+  /* Title slot styling */
+  slot[name='title']::slotted(*) {
+    flex: 1;
+    font-size: var(--lumo-font-size-m) !important;
+    font-weight: 500;
+    color: var(--lumo-header-text-color) !important;
+  }
+
+  /* Content styling */
+  #content {
+    min-height: var(--lumo-size-m);
+    padding: var(--lumo-space-s);
+  }
+
+  /* Mode controls styling */
+  .mode-controls vaadin-button[focused] {
+    z-index: 3;
+  }
+
+  /* Move mode styling */
+
+  #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%);
+  }
+
+  #move-backward,
+  :host([dir='rtl']) #move-forward {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  #move-backward .icon::before,
+  :host([dir='rtl']) #move-forward .icon::before {
+    content: var(--lumo-icons-angle-left);
+  }
+
+  #move-forward,
+  :host([dir='rtl']) #move-backward {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  #move-forward .icon::before,
+  :host(:not([dir='rtl'])) #move-forward .icon::before {
+    content: var(--lumo-icons-angle-right);
+  }
+
+  #move-apply .icon::before {
+    content: var(--lumo-icons-checkmark);
+    font-size: var(--lumo-icon-size-m);
+  }
+`;
+
+const dashboardWidget = css`
+  :host {
+    opacity: var(--_vaadin-dashboard-widget-opacity);
+    filter: var(--_vaadin-dashboard-widget-filter);
+    background-color: var(--lumo-base-color);
+    box-shadow: var(--lumo-box-shadow-s);
+  }
+
+  :host([selected]) {
+    opacity: 1;
+  }
+
+  :host([resize-mode]) #content,
+  :host([move-mode]) #content {
+    opacity: 0.3;
+    filter: blur(10px);
+  }
+
+  /* Header styling */
+  header {
+    border-bottom: 1px solid var(--lumo-contrast-10pct);
+  }
+
+  /* Resize handle styling */
+  #resize-handle {
+    position: absolute;
+    bottom: var(--lumo-space-s);
+    inset-inline-end: var(--lumo-space-xs);
+    cursor: se-resize;
+  }
+
+  #resize-handle .icon::before {
+    display: block;
+    content: var(--lumo-icons-chevron-down);
+    transform: rotate(-45deg);
+  }
+
+  :host([dir='rtl']) #resize-handle {
+    cursor: sw-resize;
+  }
+
+  :host([dir='rtl']) #resize-handle .icon::before {
+    transform: rotate(45deg);
+  }
+
+  /* Resize mode styling */
+  #resize-apply .icon::before {
+    content: var(--lumo-icons-checkmark);
+    font-size: var(--lumo-icon-size-m);
+  }
+
+  #resize-grow-width,
+  #resize-shrink-width {
+    padding-right: 0;
+    padding-left: 0;
+    min-width: var(--lumo-size-s);
+  }
+
+  #resize-grow-height,
+  #resize-shrink-height {
+    height: var(--lumo-size-s);
+    margin: 0;
+  }
+
+  #resize-shrink-width,
+  :host([dir='rtl']) #resize-grow-width {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  #resize-shrink-width .icon::before,
+  :host([dir='rtl']) #resize-grow-width .icon::before {
+    content: var(--lumo-icons-angle-left);
+  }
+
+  #resize-grow-width,
+  :host([dir='rtl']) #resize-shrink-width {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  #resize-grow-width .icon::before,
+  :host([dir='rtl']) #resize-shrink-width .icon::before {
+    content: var(--lumo-icons-angle-right);
+  }
+
+  #resize-grow-height {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  #resize-grow-height .icon::before {
+    content: var(--lumo-icons-angle-down);
+  }
+
+  #resize-shrink-height {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  #resize-shrink-height .icon::before {
+    content: var(--lumo-icons-angle-up);
+  }
+`;
+
+registerStyles('vaadin-dashboard-widget', [dashboardWidget, dashboardWidgetAndSection], {
+  moduleId: 'lumo-dashboard-widget',
+});
+
+export { dashboardWidget, dashboardWidgetAndSection };
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js
index f052be6454..5856424fcc 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js
@@ -1,2 +1,3 @@
 import './vaadin-dashboard-widget-styles.js';
+import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
 import '../../src/vaadin-dashboard-widget.js';
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard.js b/packages/dashboard/theme/lumo/vaadin-dashboard.js
index e9c934e420..5424d33544 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard.js
@@ -1,3 +1,4 @@
 import './vaadin-dashboard-widget.js';
+import './vaadin-dashboard-section.js';
 import './vaadin-dashboard-styles.js';
 import '../../src/vaadin-dashboard.js';

From 4628d6269b9cf798f3efbc1899c4d587faf7b962 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 2 Oct 2024 11:34:22 +0300
Subject: [PATCH 02/14] refactor: use --icon property for button icons

---
 .../lumo/vaadin-dashboard-widget-styles.js    | 64 ++++++-------------
 1 file changed, 18 insertions(+), 46 deletions(-)

diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
index 56c80a4ef1..f66210f331 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
@@ -48,6 +48,7 @@ const dashboardWidgetAndSection = css`
 
   .icon::before {
     display: block;
+    content: var(--icon);
   }
 
   :host(:not([selected])) *:not(.mode-controls) vaadin-button,
@@ -73,19 +74,13 @@ const dashboardWidgetAndSection = css`
   /* Drag handle styling */
   #drag-handle {
     cursor: move;
-  }
-
-  #drag-handle .icon::before {
-    content: var(--lumo-icons-menu);
+    --icon: var(--lumo-icons-menu);
   }
 
   /* Remove button styling */
   #remove-button {
     cursor: pointer;
-  }
-
-  #remove-button .icon::before {
-    content: var(--lumo-icons-cross);
+    --icon: var(--lumo-icons-cross);
   }
 
   /* Title slot styling */
@@ -122,26 +117,18 @@ const dashboardWidgetAndSection = css`
   :host([dir='rtl']) #move-forward {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-  }
-
-  #move-backward .icon::before,
-  :host([dir='rtl']) #move-forward .icon::before {
-    content: var(--lumo-icons-angle-left);
+    --icon: var(--lumo-icons-angle-left);
   }
 
   #move-forward,
   :host([dir='rtl']) #move-backward {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    --icon: var(--lumo-icons-angle-right);
   }
 
-  #move-forward .icon::before,
-  :host(:not([dir='rtl'])) #move-forward .icon::before {
-    content: var(--lumo-icons-angle-right);
-  }
-
-  #move-apply .icon::before {
-    content: var(--lumo-icons-checkmark);
+  #move-apply {
+    --icon: var(--lumo-icons-checkmark);
     font-size: var(--lumo-icon-size-m);
   }
 `;
@@ -175,25 +162,24 @@ const dashboardWidget = css`
     bottom: var(--lumo-space-s);
     inset-inline-end: var(--lumo-space-xs);
     cursor: se-resize;
-  }
-
-  #resize-handle .icon::before {
-    display: block;
-    content: var(--lumo-icons-chevron-down);
-    transform: rotate(-45deg);
+    --icon: var(--lumo-icons-chevron-down);
   }
 
   :host([dir='rtl']) #resize-handle {
     cursor: sw-resize;
   }
 
+  #resize-handle .icon::before {
+    transform: rotate(-45deg);
+  }
+
   :host([dir='rtl']) #resize-handle .icon::before {
     transform: rotate(45deg);
   }
 
   /* Resize mode styling */
-  #resize-apply .icon::before {
-    content: var(--lumo-icons-checkmark);
+  #resize-apply {
+    --icon: var(--lumo-icons-checkmark);
     font-size: var(--lumo-icon-size-m);
   }
 
@@ -214,40 +200,26 @@ const dashboardWidget = css`
   :host([dir='rtl']) #resize-grow-width {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-  }
-
-  #resize-shrink-width .icon::before,
-  :host([dir='rtl']) #resize-grow-width .icon::before {
-    content: var(--lumo-icons-angle-left);
+    --icon: var(--lumo-icons-angle-left);
   }
 
   #resize-grow-width,
   :host([dir='rtl']) #resize-shrink-width {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-  }
-
-  #resize-grow-width .icon::before,
-  :host([dir='rtl']) #resize-shrink-width .icon::before {
-    content: var(--lumo-icons-angle-right);
+    --icon: var(--lumo-icons-angle-right);
   }
 
   #resize-grow-height {
     border-top-right-radius: 0;
     border-top-left-radius: 0;
-  }
-
-  #resize-grow-height .icon::before {
-    content: var(--lumo-icons-angle-down);
+    --icon: var(--lumo-icons-angle-down);
   }
 
   #resize-shrink-height {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
-  }
-
-  #resize-shrink-height .icon::before {
-    content: var(--lumo-icons-angle-up);
+    --icon: var(--lumo-icons-angle-up);
   }
 `;
 

From 758542e059b6b29b7ca8e1279f6a05d00f77225f Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 2 Oct 2024 11:37:47 +0300
Subject: [PATCH 03/14] use space s for editable header padding

---
 .../dashboard/theme/lumo/vaadin-dashboard-widget-styles.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
index f66210f331..a0846691d9 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
@@ -61,14 +61,13 @@ const dashboardWidgetAndSection = css`
   header {
     display: flex;
     align-items: center;
-    padding-block: var(--lumo-space-s);
-    padding-inline: var(--lumo-space-m);
+    padding: var(--lumo-space-s) var(--lumo-space-m);
     height: var(--lumo-size-m);
     gap: var(--lumo-space-s);
   }
 
   :host([editable]) header {
-    padding-inline: var(--lumo-space-xs);
+    padding-inline: var(--lumo-space-s);
   }
 
   /* Drag handle styling */
@@ -160,7 +159,7 @@ const dashboardWidget = css`
   #resize-handle {
     position: absolute;
     bottom: var(--lumo-space-s);
-    inset-inline-end: var(--lumo-space-xs);
+    inset-inline-end: var(--lumo-space-s);
     cursor: se-resize;
     --icon: var(--lumo-icons-chevron-down);
   }

From 1dbb20f57575bcae82047ab66de7ae2ff870b0a5 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 2 Oct 2024 12:03:16 +0300
Subject: [PATCH 04/14] fixes and cleanup

---
 packages/dashboard/src/vaadin-dashboard-layout.d.ts             | 2 +-
 packages/dashboard/src/vaadin-dashboard-layout.js               | 2 +-
 packages/dashboard/src/vaadin-dashboard-styles.js               | 1 +
 packages/dashboard/src/vaadin-dashboard-widget.js               | 1 +
 packages/dashboard/src/vaadin-dashboard.d.ts                    | 2 +-
 packages/dashboard/src/vaadin-dashboard.js                      | 2 +-
 packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js | 1 -
 7 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/dashboard/src/vaadin-dashboard-layout.d.ts b/packages/dashboard/src/vaadin-dashboard-layout.d.ts
index 00e122addd..c5f402b778 100644
--- a/packages/dashboard/src/vaadin-dashboard-layout.d.ts
+++ b/packages/dashboard/src/vaadin-dashboard-layout.d.ts
@@ -35,7 +35,7 @@ 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
+ * `--vaadin-dashboard-spacing`        | spacing between child elements and space around its outer edges. Must be in length units (0 is not allowed, 0px is)
  *
  * The following state attributes are available for styling:
  *
diff --git a/packages/dashboard/src/vaadin-dashboard-layout.js b/packages/dashboard/src/vaadin-dashboard-layout.js
index 1e3cb7b594..358a7f3c87 100644
--- a/packages/dashboard/src/vaadin-dashboard-layout.js
+++ b/packages/dashboard/src/vaadin-dashboard-layout.js
@@ -38,7 +38,7 @@ 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
+ * `--vaadin-dashboard-spacing`        | spacing between child elements and space around its outer edges. Must be in length units (0 is not allowed, 0px is)
  *
  * The following state attributes are available for styling:
  *
diff --git a/packages/dashboard/src/vaadin-dashboard-styles.js b/packages/dashboard/src/vaadin-dashboard-styles.js
index 363fa0ecc1..77c310c073 100644
--- a/packages/dashboard/src/vaadin-dashboard-styles.js
+++ b/packages/dashboard/src/vaadin-dashboard-styles.js
@@ -31,6 +31,7 @@ export const dashboardWidgetAndSectionStyles = css`
 
   header {
     display: flex;
+    overflow: hidden;
   }
 
   vaadin-button {
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
index 595000703d..8036b3afeb 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.js
+++ b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -127,6 +127,7 @@ class DashboardWidget extends DashboardItemMixin(
 
         #content {
           flex: 1;
+          overflow: hidden;
         }
 
         #resize-handle {
diff --git a/packages/dashboard/src/vaadin-dashboard.d.ts b/packages/dashboard/src/vaadin-dashboard.d.ts
index ee19b42b47..7ad01da5d1 100644
--- a/packages/dashboard/src/vaadin-dashboard.d.ts
+++ b/packages/dashboard/src/vaadin-dashboard.d.ts
@@ -196,7 +196,7 @@ 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
+ * `--vaadin-dashboard-spacing`        | spacing between child elements and space around its outer edges. Must be in length units (0 is not allowed, 0px is)
  *
  * The following state attributes are available for styling:
  *
diff --git a/packages/dashboard/src/vaadin-dashboard.js b/packages/dashboard/src/vaadin-dashboard.js
index 4ddfd17165..ae866b5d80 100644
--- a/packages/dashboard/src/vaadin-dashboard.js
+++ b/packages/dashboard/src/vaadin-dashboard.js
@@ -77,7 +77,7 @@ 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
+ * `--vaadin-dashboard-spacing`        | spacing between child elements and space around its outer edges. Must be in length units (0 is not allowed, 0px is)
  *
  * The following state attributes are available for styling:
  *
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
index a0846691d9..6c06a34067 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
@@ -62,7 +62,6 @@ const dashboardWidgetAndSection = css`
     display: flex;
     align-items: center;
     padding: var(--lumo-space-s) var(--lumo-space-m);
-    height: var(--lumo-size-m);
     gap: var(--lumo-space-s);
   }
 

From e808f23cc2c7d87d683b293be7b47886ace9911b Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 2 Oct 2024 12:14:20 +0300
Subject: [PATCH 05/14] document calculated css properties

---
 packages/dashboard/src/vaadin-dashboard-styles.js               | 2 ++
 packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/dashboard/src/vaadin-dashboard-styles.js b/packages/dashboard/src/vaadin-dashboard-styles.js
index 77c310c073..8311000203 100644
--- a/packages/dashboard/src/vaadin-dashboard-styles.js
+++ b/packages/dashboard/src/vaadin-dashboard-styles.js
@@ -9,6 +9,8 @@ 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))
     );
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
index 6c06a34067..f936d6ade0 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
@@ -16,6 +16,8 @@ const dashboardWidgetAndSection = css`
     --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
     --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
     --_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)

From 91ebeb459e97730121d6645703a2f1f478686e0c Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 2 Oct 2024 12:33:20 +0300
Subject: [PATCH 06/14] fix rtl issue and linter error

---
 .../theme/lumo/vaadin-dashboard-widget-styles.js       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
index f936d6ade0..d277662871 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
@@ -15,6 +15,8 @@ const dashboardWidgetAndSection = css`
     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 */
@@ -113,14 +115,14 @@ const dashboardWidgetAndSection = css`
     transform: translateY(-50%);
   }
 
-  #move-backward,
+  :host(:not([dir='rtl'])) #move-backward,
   :host([dir='rtl']) #move-forward {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     --icon: var(--lumo-icons-angle-left);
   }
 
-  #move-forward,
+  :host(:not([dir='rtl'])) #move-forward,
   :host([dir='rtl']) #move-backward {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -196,14 +198,14 @@ const dashboardWidget = css`
     margin: 0;
   }
 
-  #resize-shrink-width,
+  :host(:not([dir='rtl'])) #resize-shrink-width,
   :host([dir='rtl']) #resize-grow-width {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     --icon: var(--lumo-icons-angle-left);
   }
 
-  #resize-grow-width,
+  :host(:not([dir='rtl'])) #resize-grow-width,
   :host([dir='rtl']) #resize-shrink-width {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;

From 5393211927fc18f4b1fc36c727528372223362f0 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 2 Oct 2024 12:58:31 +0300
Subject: [PATCH 07/14] test: fix a firefox test failing locally

---
 packages/dashboard/test/dashboard.test.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/test/dashboard.test.ts b/packages/dashboard/test/dashboard.test.ts
index aa080f1db8..6b751cfc2d 100644
--- a/packages/dashboard/test/dashboard.test.ts
+++ b/packages/dashboard/test/dashboard.test.ts
@@ -47,7 +47,8 @@ describe('dashboard', () => {
     await nextFrame();
   });
 
-  it('should render a widget for each item', () => {
+  it('should render a widget for each item', async () => {
+    await nextFrame();
     const widgets = [getElementFromCell(dashboard, 0, 0), getElementFromCell(dashboard, 0, 1)];
     widgets.forEach((widget, index) => {
       expect(widget).to.be.ok;

From f0a5759c0f15277d22ae15e763cf04d71e5b8d36 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 2 Oct 2024 13:00:32 +0300
Subject: [PATCH 08/14] hide selected widget default shadow

---
 .../dashboard/theme/lumo/vaadin-dashboard-widget-styles.js     | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
index d277662871..c24a32c4ed 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
@@ -140,6 +140,9 @@ const dashboardWidget = css`
     opacity: var(--_vaadin-dashboard-widget-opacity);
     filter: var(--_vaadin-dashboard-widget-filter);
     background-color: var(--lumo-base-color);
+  }
+
+  :host(:not([selected])) {
     box-shadow: var(--lumo-box-shadow-s);
   }
 

From 844d4cff8b2d313846111f46d87ff74af062910c Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 2 Oct 2024 16:28:38 +0300
Subject: [PATCH 09/14] set min-height to the header

---
 packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
index c24a32c4ed..1379f12f5d 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
@@ -67,6 +67,8 @@ const dashboardWidgetAndSection = css`
     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;
   }
 
   :host([editable]) header {

From ab4e01b2d56cce6be617bb13c13c0b9526bcc1ff Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 2 Oct 2024 16:13:15 +0300
Subject: [PATCH 10/14] move the title element inside the shadow root

---
 packages/dashboard/src/title-controller.js    | 76 -------------------
 .../dashboard/src/vaadin-dashboard-section.js | 26 +------
 .../dashboard/src/vaadin-dashboard-widget.js  | 31 +++-----
 .../dashboard/test/dashboard-layout.test.ts   |  3 +-
 .../dashboard/test/dashboard-section.test.ts  | 23 +-----
 .../dashboard/test/dashboard-widget.test.ts   | 53 +++----------
 packages/dashboard/test/helpers.ts            |  4 +
 .../lumo/vaadin-dashboard-widget-styles.js    | 10 ++-
 8 files changed, 40 insertions(+), 186 deletions(-)
 delete mode 100644 packages/dashboard/src/title-controller.js

diff --git a/packages/dashboard/src/title-controller.js b/packages/dashboard/src/title-controller.js
deleted file mode 100644
index 7549cc1dd1..0000000000
--- a/packages/dashboard/src/title-controller.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * @license
- * Copyright (c) 2019 - 2024 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
-
-const DEFAULT_TITLE_LEVEL = '2';
-
-/**
- * A controller to manage the widget or section title element.
- */
-export class TitleController extends SlotChildObserveController {
-  constructor(host) {
-    super(host, 'title', null);
-  }
-
-  /**
-   * Set title based on corresponding host property.
-   *
-   * @param {string} title
-   */
-  setTitle(title) {
-    this.title = title;
-
-    const titleLevel =
-      getComputedStyle(this.host).getPropertyValue('--_vaadin-dashboard-title-level') || DEFAULT_TITLE_LEVEL;
-    const newTagName = `h${titleLevel}`;
-    if (this.tagName !== newTagName) {
-      if (this.defaultNode) {
-        this.defaultNode.remove();
-        delete this.defaultNode;
-      }
-      this.tagName = newTagName;
-    }
-
-    // Restore the default title, if needed.
-    const titleNode = this.getSlotChild();
-    if (!titleNode) {
-      this.restoreDefaultNode();
-    }
-
-    // When default title is used, update it.
-    if (this.node === this.defaultNode) {
-      this.updateDefaultNode(this.node);
-    }
-  }
-
-  /**
-   * Override method inherited from `SlotChildObserveController`
-   * to restore and observe the default title element.
-   *
-   * @protected
-   * @override
-   */
-  restoreDefaultNode() {
-    this.attachDefaultNode();
-  }
-
-  /**
-   * Override method inherited from `SlotChildObserveController`
-   * to update the default title element text content.
-   *
-   * @param {Node | undefined} node
-   * @protected
-   * @override
-   */
-  updateDefaultNode(node) {
-    if (node) {
-      node.textContent = this.title;
-    }
-
-    // Notify the host after update.
-    super.updateDefaultNode(node);
-  }
-}
diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
index 78814dda32..11c1a1cfe8 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.js
+++ b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -14,7 +14,6 @@ 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 { TitleController } from './title-controller.js';
 import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
 import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
 import { hasWidgetWrappers } from './vaadin-dashboard-styles.js';
@@ -181,7 +180,6 @@ class DashboardSection extends DashboardItemMixin(
       sectionTitle: {
         type: String,
         value: '',
-        observer: '__onSectionTitleChanged',
       },
     };
   }
@@ -194,7 +192,7 @@ class DashboardSection extends DashboardItemMixin(
       <div id="focustrap">
         <header part="header">
           ${this.__renderDragHandle()}
-          <slot name="title" id="title" @slotchange="${this.__onTitleSlotChange}"></slot>
+          <h2 id="title" part="title">${this.sectionTitle}</h2>
           ${this.__renderRemoveButton()}
         </header>
       </div>
@@ -203,30 +201,10 @@ class DashboardSection extends DashboardItemMixin(
     `;
   }
 
-  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);
+    this.role ??= 'section';
   }
 }
 
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
index 8036b3afeb..6949443756 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.js
+++ b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -15,7 +15,6 @@ 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 { TitleController } from './title-controller.js';
 import { 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';
@@ -200,6 +199,12 @@ class DashboardWidget extends DashboardItemMixin(
         value: '',
         observer: '__onWidgetTitleChanged',
       },
+
+      /* @private */
+      __nestedHeadingLevel: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
@@ -211,7 +216,9 @@ class DashboardWidget extends DashboardItemMixin(
       <div id="focustrap">
         <header part="header">
           ${this.__renderDragHandle()}
-          <slot name="title" id="title" @slotchange="${this.__onTitleSlotChange}"></slot>
+          ${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>`}
           <slot name="header-content"></slot>
           ${this.__renderRemoveButton()}
         </header>
@@ -225,17 +232,6 @@ class DashboardWidget extends DashboardItemMixin(
     `;
   }
 
-  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 */
   connectedCallback() {
     super.connectedCallback();
@@ -259,11 +255,7 @@ class DashboardWidget extends DashboardItemMixin(
   /** @protected */
   ready() {
     super.ready();
-    this.addController(this.__titleController);
-
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'article');
-    }
+    this.role ??= 'article';
   }
 
   /** @private */
@@ -273,7 +265,8 @@ class DashboardWidget extends DashboardItemMixin(
 
   /** @private */
   __updateTitle() {
-    this.__titleController.setTitle(this.widgetTitle);
+    const titleLevel = getComputedStyle(this).getPropertyValue('--_vaadin-dashboard-title-level');
+    this.__nestedHeadingLevel = titleLevel === '3';
   }
 }
 
diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts
index 4422b5908e..d6f632f215 100644
--- a/packages/dashboard/test/dashboard-layout.test.ts
+++ b/packages/dashboard/test/dashboard-layout.test.ts
@@ -10,6 +10,7 @@ import {
   getColumnWidths,
   getRowHeights,
   getScrollingContainer,
+  getTitleElement,
   onceResized,
   setColspan,
   setMaximumColumnCount,
@@ -511,7 +512,7 @@ describe('dashboard layout', () => {
     });
 
     it('should not use minimum row height for section header row', async () => {
-      const title = section.querySelector<HTMLHeadingElement>('[slot="title"]')!;
+      const title = getTitleElement(section);
       title.style.height = '100%';
 
       const titleHeight = title.offsetHeight;
diff --git a/packages/dashboard/test/dashboard-section.test.ts b/packages/dashboard/test/dashboard-section.test.ts
index 851dc36fe2..731b63d00a 100644
--- a/packages/dashboard/test/dashboard-section.test.ts
+++ b/packages/dashboard/test/dashboard-section.test.ts
@@ -8,6 +8,7 @@ import {
   getMoveBackwardButton,
   getMoveForwardButton,
   getRemoveButton,
+  getTitleElement,
 } from './helpers.js';
 
 describe('dashboard section', () => {
@@ -40,28 +41,10 @@ describe('dashboard section', () => {
       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"]');
+      const title = getTitleElement(section);
       expect(title?.textContent).equal('Custom title');
     });
   });
@@ -102,7 +85,7 @@ describe('dashboard section', () => {
       section.sectionTitle = null;
       await nextFrame();
 
-      const title = section.querySelector('[slot="title"]');
+      const title = getTitleElement(section);
       expect(title?.textContent).to.eql('');
     });
   });
diff --git a/packages/dashboard/test/dashboard-widget.test.ts b/packages/dashboard/test/dashboard-widget.test.ts
index d27a7f5504..d1c1a08fc8 100644
--- a/packages/dashboard/test/dashboard-widget.test.ts
+++ b/packages/dashboard/test/dashboard-widget.test.ts
@@ -15,6 +15,7 @@ import {
   getResizeHandle,
   getResizeShrinkHeightButton,
   getResizeShrinkWidthButton,
+  getTitleElement,
 } from './helpers.js';
 
 describe('dashboard widget', () => {
@@ -42,28 +43,10 @@ describe('dashboard widget', () => {
       expect(widget.getAttribute('role')).to.eql('region');
     });
 
-    it('should add title id to aria-labelledby attribute when using property', async () => {
-      widget.widgetTitle = 'Custom title';
-      await nextFrame();
-      const title = widget.querySelector('[slot="title"]');
-      expect(widget.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';
-      widget.appendChild(title);
-
-      await nextFrame();
-      expect(widget.getAttribute('aria-labelledby')).equal(title?.id);
-    });
-
     it('should have text content for the title', async () => {
       widget.widgetTitle = 'Custom title';
       await nextFrame();
-      const title = widget.querySelector('[slot="title"]');
+      const title = getTitleElement(widget);
       expect(title?.textContent).equal('Custom title');
     });
   });
@@ -104,7 +87,7 @@ describe('dashboard widget', () => {
       widget.widgetTitle = null;
       await nextFrame();
 
-      const title = widget.querySelector('[slot="title"]');
+      const title = getTitleElement(widget);
       expect(title?.textContent).to.eql('');
     });
   });
@@ -201,7 +184,7 @@ describe('widget title level', () => {
     const widget = fixtureSync(`<vaadin-dashboard-widget widget-title="foo"></vaadin-dashboard-widget>`);
     await nextFrame();
 
-    const title = widget.querySelector('[slot="title"]');
+    const title = getTitleElement(widget as DashboardWidget);
     expect(title?.localName).to.equal('h2');
   });
 
@@ -209,7 +192,7 @@ describe('widget title level', () => {
     const section = fixtureSync(`<vaadin-dashboard-section section-title="foo"></vaadin-dashboard-section>`);
     await nextFrame();
 
-    const title = section.querySelector('[slot="title"]');
+    const title = getTitleElement(section as DashboardSection);
     expect(title?.localName).to.equal('h2');
   });
 
@@ -221,7 +204,7 @@ describe('widget title level', () => {
     `).querySelector('vaadin-dashboard-widget')!;
     await nextFrame();
 
-    const title = widget.querySelector('[slot="title"]');
+    const title = getTitleElement(widget);
     expect(title?.localName).to.equal('h3');
   });
 
@@ -239,7 +222,7 @@ describe('widget title level', () => {
     wrapper.appendChild(widget);
     await nextFrame();
 
-    const title = widget.querySelector('[slot="title"]');
+    const title = getTitleElement(widget);
     expect(title?.localName).to.equal('h2');
   });
 
@@ -256,7 +239,7 @@ describe('widget title level', () => {
     section.appendChild(widget);
     await nextFrame();
 
-    const title = widget.querySelector('[slot="title"]');
+    const title = getTitleElement(widget);
     expect(title?.localName).to.equal('h3');
   });
 
@@ -272,7 +255,7 @@ describe('widget title level', () => {
     customElements.define('my-custom-section', MyCustomSection);
     await nextFrame();
 
-    const title = widget.querySelector('[slot="title"]');
+    const title = getTitleElement(widget);
     expect(title?.localName).to.equal('h3');
   });
 
@@ -288,7 +271,7 @@ describe('widget title level', () => {
     customElements.define('my-custom-widget', MyCustomWidget);
     await nextFrame();
 
-    const title = widget.querySelector('[slot="title"]');
+    const title = getTitleElement(widget as DashboardWidget);
     expect(title?.localName).to.equal('h3');
   });
 
@@ -308,21 +291,7 @@ describe('widget title level', () => {
     section.appendChild(wrapper);
     await nextFrame();
 
-    const title = widget.querySelector('[slot="title"]');
+    const title = getTitleElement(widget);
     expect(title?.localName).to.equal('h3');
   });
-
-  it('should not replace an explicitly defined widget title element', async () => {
-    const widget = fixtureSync(`
-      <vaadin-dashboard-section>
-        <vaadin-dashboard-widget>
-          <h2 slot="title">foo</h2>
-        </vaadin-dashboard-widget>
-      </vaadin-dashboard-section>
-    `).querySelector('vaadin-dashboard-widget')!;
-    await nextFrame();
-
-    const title = widget.querySelector('[slot="title"]');
-    expect(title?.localName).to.equal('h2');
-  });
 });
diff --git a/packages/dashboard/test/helpers.ts b/packages/dashboard/test/helpers.ts
index 4d0998db2f..0b4374b69d 100644
--- a/packages/dashboard/test/helpers.ts
+++ b/packages/dashboard/test/helpers.ts
@@ -70,6 +70,10 @@ export function getRowHeights(dashboard: HTMLElement): number[] {
   return dashboardRowHeights;
 }
 
+export function getTitleElement(item: DashboardWidget | DashboardSection): HTMLElement {
+  return item.shadowRoot!.querySelector('#title')!;
+}
+
 /**
  * Returns the element at the center of the cell at the given row and column index.
  */
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
index 1379f12f5d..62d9b2135e 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
@@ -87,12 +87,14 @@ const dashboardWidgetAndSection = css`
     --icon: var(--lumo-icons-cross);
   }
 
-  /* Title slot styling */
-  slot[name='title']::slotted(*) {
+  /* Title styling */
+  h2,
+  h3 {
     flex: 1;
-    font-size: var(--lumo-font-size-m) !important;
+    font-size: var(--lumo-font-size-m);
     font-weight: 500;
-    color: var(--lumo-header-text-color) !important;
+    color: var(--lumo-header-text-color);
+    margin: 0;
   }
 
   /* Content styling */

From d582de3c0de35a81b12e1f77fbd7de6b56c842ca Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Thu, 3 Oct 2024 17:16:13 +0300
Subject: [PATCH 11/14] refactor: use vaadin-dashboard-button

---
 packages/dashboard/package.json               |  1 +
 .../dashboard/src/vaadin-dashboard-button.js  | 40 +++++++++++++++++
 .../src/vaadin-dashboard-item-mixin.js        | 45 ++++++++++---------
 .../dashboard/src/vaadin-dashboard-styles.js  |  2 +-
 .../dashboard/src/vaadin-dashboard-widget.js  |  1 -
 .../lumo/vaadin-dashboard-button-styles.js    |  8 ++++
 .../theme/lumo/vaadin-dashboard-button.js     |  1 +
 .../theme/lumo/vaadin-dashboard-section.js    |  1 +
 .../lumo/vaadin-dashboard-widget-styles.js    | 10 ++---
 .../theme/lumo/vaadin-dashboard-widget.js     |  2 +-
 10 files changed, 81 insertions(+), 30 deletions(-)
 create mode 100644 packages/dashboard/src/vaadin-dashboard-button.js
 create mode 100644 packages/dashboard/theme/lumo/vaadin-dashboard-button-styles.js
 create mode 100644 packages/dashboard/theme/lumo/vaadin-dashboard-button.js

diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
index 5ff18d27be..fc58a07cc0 100644
--- a/packages/dashboard/package.json
+++ b/packages/dashboard/package.json
@@ -37,6 +37,7 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
+    "@vaadin/button": "24.5.0-alpha11",
     "@vaadin/component-base": "24.5.0-alpha11",
     "@vaadin/vaadin-lumo-styles": "24.5.0-alpha11",
     "@vaadin/vaadin-material-styles": "24.5.0-alpha11",
diff --git a/packages/dashboard/src/vaadin-dashboard-button.js b/packages/dashboard/src/vaadin-dashboard-button.js
new file mode 100644
index 0000000000..56711fcab3
--- /dev/null
+++ b/packages/dashboard/src/vaadin-dashboard-button.js
@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { buttonStyles, buttonTemplate } from '@vaadin/button/src/vaadin-button-base.js';
+import { ButtonMixin } from '@vaadin/button/src/vaadin-button-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 { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-dashboard-button';
+  }
+
+  static get styles() {
+    return buttonStyles;
+  }
+
+  /** @protected */
+  render() {
+    return buttonTemplate(html);
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+  }
+}
+
+defineCustomElement(DashboardButton);
+
+export { DashboardButton };
diff --git a/packages/dashboard/src/vaadin-dashboard-item-mixin.js b/packages/dashboard/src/vaadin-dashboard-item-mixin.js
index 6ee5602d9a..6c013c6fda 100644
--- a/packages/dashboard/src/vaadin-dashboard-item-mixin.js
+++ b/packages/dashboard/src/vaadin-dashboard-item-mixin.js
@@ -8,6 +8,7 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
+import './vaadin-dashboard-button.js';
 import { html } from 'lit';
 import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
@@ -92,7 +93,7 @@ export const DashboardItemMixin = (superClass) =>
 
     /** @private */
     __renderDragHandle() {
-      return html`<vaadin-button
+      return html`<vaadin-dashboard-button
         id="drag-handle"
         draggable="true"
         class="drag-handle"
@@ -104,12 +105,12 @@ export const DashboardItemMixin = (superClass) =>
         @click="${() => this.__enterMoveMode()}"
       >
         <div class="icon"></div>
-      </vaadin-button>`;
+      </vaadin-dashboard-button>`;
     }
 
     /** @private */
     __renderRemoveButton() {
-      return html`<vaadin-button
+      return html`<vaadin-dashboard-button
         aria-label="${this.__i18n.remove}"
         title="${this.__i18n.remove}"
         id="remove-button"
@@ -119,7 +120,7 @@ export const DashboardItemMixin = (superClass) =>
         @click="${() => fireRemove(this)}"
       >
         <div class="icon"></div>
-      </vaadin-button>`;
+      </vaadin-dashboard-button>`;
     }
 
     /** @private */
@@ -140,7 +141,7 @@ export const DashboardItemMixin = (superClass) =>
 
     /** @private */
     __renderResizeHandle() {
-      return html`<vaadin-button
+      return html`<vaadin-dashboard-button
         aria-label="${this.__i18n.resize}"
         title="${this.__i18n.resize}"
         id="resize-handle"
@@ -151,7 +152,7 @@ export const DashboardItemMixin = (superClass) =>
         @click="${() => this.__enterResizeMode()}"
       >
         <div class="icon"></div>
-      </vaadin-button>`;
+      </vaadin-dashboard-button>`;
     }
 
     /** @private */
@@ -162,7 +163,7 @@ export const DashboardItemMixin = (superClass) =>
         .hidden="${!this.__moveMode}"
         @pointerdown="${(e) => e.preventDefault()}"
       >
-        <vaadin-button
+        <vaadin-dashboard-button
           theme="primary icon"
           aria-label="${this.__i18n.moveBackward}"
           title="${this.__i18n.moveBackward}"
@@ -171,8 +172,8 @@ export const DashboardItemMixin = (superClass) =>
           part="move-backward-button"
         >
           <div class="icon"></div>
-        </vaadin-button>
-        <vaadin-button
+        </vaadin-dashboard-button>
+        <vaadin-dashboard-button
           theme="primary icon large"
           aria-label="${this.__i18n.moveApply}"
           title="${this.__i18n.moveApply}"
@@ -181,8 +182,8 @@ export const DashboardItemMixin = (superClass) =>
           part="move-apply-button"
         >
           <div class="icon"></div>
-        </vaadin-button>
-        <vaadin-button
+        </vaadin-dashboard-button>
+        <vaadin-dashboard-button
           theme="primary icon"
           aria-label="${this.__i18n.moveForward}"
           title="${this.__i18n.moveForward}"
@@ -191,7 +192,7 @@ export const DashboardItemMixin = (superClass) =>
           part="move-forward-button"
         >
           <div class="icon"></div>
-        </vaadin-button>
+        </vaadin-dashboard-button>
       </div>`;
     }
 
@@ -205,7 +206,7 @@ export const DashboardItemMixin = (superClass) =>
         .hidden="${!this.__resizeMode}"
         @pointerdown="${(e) => e.preventDefault()}"
       >
-        <vaadin-button
+        <vaadin-dashboard-button
           theme="primary icon large"
           aria-label="${this.__i18n.resizeApply}"
           title="${this.__i18n.resizeApply}"
@@ -214,8 +215,8 @@ export const DashboardItemMixin = (superClass) =>
           part="resize-apply-button"
         >
           <div class="icon"></div>
-        </vaadin-button>
-        <vaadin-button
+        </vaadin-dashboard-button>
+        <vaadin-dashboard-button
           theme="primary icon"
           aria-label="${this.__i18n.resizeShrinkWidth}"
           title="${this.__i18n.resizeShrinkWidth}"
@@ -224,8 +225,8 @@ export const DashboardItemMixin = (superClass) =>
           part="resize-shrink-width-button"
         >
           <div class="icon"></div>
-        </vaadin-button>
-        <vaadin-button
+        </vaadin-dashboard-button>
+        <vaadin-dashboard-button
           theme="primary icon"
           aria-label="${this.__i18n.resizeGrowWidth}"
           title="${this.__i18n.resizeGrowWidth}"
@@ -234,8 +235,8 @@ export const DashboardItemMixin = (superClass) =>
           part="resize-grow-width-button"
         >
           <div class="icon"></div>
-        </vaadin-button>
-        <vaadin-button
+        </vaadin-dashboard-button>
+        <vaadin-dashboard-button
           theme="primary icon"
           aria-label="${this.__i18n.resizeShrinkHeight}"
           title="${this.__i18n.resizeShrinkHeight}"
@@ -245,8 +246,8 @@ export const DashboardItemMixin = (superClass) =>
           .hidden="${!hasMinRowHeight}"
         >
           <div class="icon"></div>
-        </vaadin-button>
-        <vaadin-button
+        </vaadin-dashboard-button>
+        <vaadin-dashboard-button
           theme="primary icon"
           aria-label="${this.__i18n.resizeGrowHeight}"
           title="${this.__i18n.resizeGrowHeight}"
@@ -256,7 +257,7 @@ export const DashboardItemMixin = (superClass) =>
           .hidden="${!hasMinRowHeight}"
         >
           <div class="icon"></div>
-        </vaadin-button>
+        </vaadin-dashboard-button>
       </div>`;
     }
 
diff --git a/packages/dashboard/src/vaadin-dashboard-styles.js b/packages/dashboard/src/vaadin-dashboard-styles.js
index 8311000203..1b17f38eca 100644
--- a/packages/dashboard/src/vaadin-dashboard-styles.js
+++ b/packages/dashboard/src/vaadin-dashboard-styles.js
@@ -36,7 +36,7 @@ export const dashboardWidgetAndSectionStyles = css`
     overflow: hidden;
   }
 
-  vaadin-button {
+  vaadin-dashboard-button {
     z-index: 1;
   }
 
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
index 6949443756..bf699e6845 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.js
+++ b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -8,7 +8,6 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import '@vaadin/button/src/vaadin-button.js';
 import { html, LitElement } from 'lit';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-button-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-button-styles.js
new file mode 100644
index 0000000000..788c48041a
--- /dev/null
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-button-styles.js
@@ -0,0 +1,8 @@
+import { button } from '@vaadin/button/theme/lumo/vaadin-button-styles.js';
+import { registerStyles } from '@vaadin/vaadin-themable-mixin';
+
+registerStyles('vaadin-dashboard-button', button, {
+  moduleId: 'lumo-dashboard-button',
+});
+
+export { button };
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-button.js b/packages/dashboard/theme/lumo/vaadin-dashboard-button.js
new file mode 100644
index 0000000000..87992478f9
--- /dev/null
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-button.js
@@ -0,0 +1 @@
+import './vaadin-dashboard-button-styles.js';
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-section.js b/packages/dashboard/theme/lumo/vaadin-dashboard-section.js
index a3c4f56572..378ee1ee39 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-section.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-section.js
@@ -1,2 +1,3 @@
 import './vaadin-dashboard-section-styles.js';
+import './vaadin-dashboard-button.js';
 import '../../src/vaadin-dashboard-section.js';
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
index 62d9b2135e..db3a75eaa4 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
@@ -45,7 +45,7 @@ const dashboardWidgetAndSection = css`
   }
 
   /* Buttons styling */
-  vaadin-button {
+  vaadin-dashboard-button {
     font-family: 'lumo-icons';
     font-size: var(--lumo-icon-size-s);
   }
@@ -55,9 +55,9 @@ const dashboardWidgetAndSection = css`
     content: var(--icon);
   }
 
-  :host(:not([selected])) *:not(.mode-controls) vaadin-button,
-  :host([move-mode]) *:not(.mode-controls) vaadin-button,
-  :host([resize-mode]) *:not(.mode-controls) vaadin-button {
+  :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);
   }
 
@@ -104,7 +104,7 @@ const dashboardWidgetAndSection = css`
   }
 
   /* Mode controls styling */
-  .mode-controls vaadin-button[focused] {
+  .mode-controls vaadin-dashboard-button[focused] {
     z-index: 3;
   }
 
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js
index 5856424fcc..6a95c43583 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget.js
@@ -1,3 +1,3 @@
 import './vaadin-dashboard-widget-styles.js';
-import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
+import './vaadin-dashboard-button.js';
 import '../../src/vaadin-dashboard-widget.js';

From f6c70654c15855ff9428d8878e5df65ac700e358 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Thu, 3 Oct 2024 19:56:01 +0300
Subject: [PATCH 12/14] fix firefox dragging issue

---
 packages/dashboard/src/vaadin-dashboard-section.js           | 4 +++-
 packages/dashboard/src/vaadin-dashboard-widget.js            | 4 +++-
 .../dashboard/theme/lumo/vaadin-dashboard-widget-styles.js   | 5 ++++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
index 11c1a1cfe8..25b44d3296 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.js
+++ b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -204,7 +204,9 @@ class DashboardSection extends DashboardItemMixin(
   /** @protected */
   ready() {
     super.ready();
-    this.role ??= 'section';
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'section');
+    }
   }
 }
 
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
index bf699e6845..41804b016c 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.js
+++ b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -254,7 +254,9 @@ class DashboardWidget extends DashboardItemMixin(
   /** @protected */
   ready() {
     super.ready();
-    this.role ??= 'article';
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'article');
+    }
   }
 
   /** @private */
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
index db3a75eaa4..0edb466b16 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
@@ -27,7 +27,7 @@ const dashboardWidgetAndSection = css`
     outline: none;
   }
 
-  :host([focused])::before {
+  :host::before {
     content: '';
     display: block;
     position: absolute;
@@ -35,6 +35,9 @@ const dashboardWidgetAndSection = css`
     border-radius: var(--lumo-border-radius-l);
     pointer-events: none;
     margin: calc(var(--_focus-ring-spacing-offset) * -1);
+  }
+
+  :host([focused])::before {
     outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
   }
 

From 0912b6b99229013980e63492ed102f514d42ffa1 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Fri, 4 Oct 2024 16:54:04 +0300
Subject: [PATCH 13/14] remove traces of title slot

---
 .../src/vaadin-dashboard-section.d.ts         | 11 +-------
 .../dashboard/src/vaadin-dashboard-section.js | 11 +-------
 .../src/vaadin-dashboard-widget.d.ts          |  4 +--
 .../dashboard/src/vaadin-dashboard-widget.js  |  4 +--
 .../dashboard/test/dashboard-section.test.ts  | 28 -------------------
 .../dashboard/test/dashboard-widget.test.ts   | 28 -------------------
 6 files changed, 4 insertions(+), 82 deletions(-)

diff --git a/packages/dashboard/src/vaadin-dashboard-section.d.ts b/packages/dashboard/src/vaadin-dashboard-section.d.ts
index bdaf2c11c7..ebdebe64d6 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.d.ts
+++ b/packages/dashboard/src/vaadin-dashboard-section.d.ts
@@ -23,19 +23,10 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
  * </vaadin-dashboard-section>
  * ```
  *
- * ### Customization
- *
- * You can configure the item by using `slot` names.
- *
- * Slot name | Description
- * ----------|-------------
- * `title`   | A slot for the section title. Overrides the `sectionTitle` property.
- *
  * #### Example
  *
  * ```html
- * <vaadin-dashboard-section>
- *   <span slot="title">Section Title</span>
+ * <vaadin-dashboard-section section-title="Section title">
  *   <vaadin-dashboard-widget widget-title="Widget 1"></vaadin-dashboard-widget>
  *   <vaadin-dashboard-widget widget-title="Widget 2"></vaadin-dashboard-widget>
  * </vaadin-dashboard-section>
diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
index 25b44d3296..608689b0fe 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.js
+++ b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -28,19 +28,10 @@ import { hasWidgetWrappers } from './vaadin-dashboard-styles.js';
  * </vaadin-dashboard-section>
  * ```
  *
- * ### Customization
- *
- * You can configure the item by using `slot` names.
- *
- * Slot name | Description
- * ----------|-------------
- * `title`   | A slot for the section title. Overrides the `sectionTitle` property.
- *
  * #### Example
  *
  * ```html
- * <vaadin-dashboard-section>
- *   <span slot="title">Section Title</span>
+ * <vaadin-dashboard-section section-title="Section title">
  *   <vaadin-dashboard-widget widget-title="Widget 1"></vaadin-dashboard-widget>
  *   <vaadin-dashboard-widget widget-title="Widget 2"></vaadin-dashboard-widget>
  * </vaadin-dashboard-section>
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.d.ts b/packages/dashboard/src/vaadin-dashboard-widget.d.ts
index 3f12c4c1fb..1a433b5195 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.d.ts
+++ b/packages/dashboard/src/vaadin-dashboard-widget.d.ts
@@ -29,15 +29,13 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
  *
  * Slot name        | Description
  * -----------------|-------------
- * `title`          | A slot for the widget title. Overrides the `widgetTitle` property.
  * `header-content` | A slot for the widget header content.
  *
  * #### Example
  *
  * ```html
- * <vaadin-dashboard-widget>
+ * <vaadin-dashboard-widget widget-title="Title">
  *   <span slot="header-content">Header</span>
- *   <span slot="title">Title</span>
  *   <div>Content</div>
  * </vaadin-dashboard-widget>
  * ```
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
index 41804b016c..baf51ca0f2 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.js
+++ b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -34,15 +34,13 @@ import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
  *
  * Slot name        | Description
  * -----------------|-------------
- * `title`          | A slot for the widget title. Overrides the `widgetTitle` property.
  * `header-content` | A slot for the widget header content.
  *
  * #### Example
  *
  * ```html
- * <vaadin-dashboard-widget>
+ * <vaadin-dashboard-widget widget-title="Title">
  *   <span slot="header-content">Header</span>
- *   <span slot="title">Title</span>
  *   <div>Content</div>
  * </vaadin-dashboard-widget>
  * ```
diff --git a/packages/dashboard/test/dashboard-section.test.ts b/packages/dashboard/test/dashboard-section.test.ts
index 731b63d00a..99a22c6bfb 100644
--- a/packages/dashboard/test/dashboard-section.test.ts
+++ b/packages/dashboard/test/dashboard-section.test.ts
@@ -50,34 +50,6 @@ describe('dashboard section', () => {
   });
 
   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();
diff --git a/packages/dashboard/test/dashboard-widget.test.ts b/packages/dashboard/test/dashboard-widget.test.ts
index d1c1a08fc8..f862473454 100644
--- a/packages/dashboard/test/dashboard-widget.test.ts
+++ b/packages/dashboard/test/dashboard-widget.test.ts
@@ -52,34 +52,6 @@ describe('dashboard widget', () => {
   });
 
   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';
-      widget.appendChild(title);
-      await nextFrame();
-
-      widget.widgetTitle = 'New title';
-      await nextFrame();
-
-      const titles = widget.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-widget>
-            <div slot="title">Custom title</div>
-          </vaadin-dashboard-widget>
-        `);
-      }).not.to.throw(Error);
-      await nextFrame();
-    });
-
     it('should empty title element when cleared', async () => {
       widget.widgetTitle = 'New title';
       await nextFrame();

From 46b70e2058a2713b596c7d0282cf080eb767f180 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Fri, 4 Oct 2024 16:55:40 +0300
Subject: [PATCH 14/14] document title part name

---
 packages/dashboard/src/vaadin-dashboard-section.d.ts | 1 +
 packages/dashboard/src/vaadin-dashboard-section.js   | 1 +
 packages/dashboard/src/vaadin-dashboard-widget.d.ts  | 1 +
 packages/dashboard/src/vaadin-dashboard-widget.js    | 1 +
 4 files changed, 4 insertions(+)

diff --git a/packages/dashboard/src/vaadin-dashboard-section.d.ts b/packages/dashboard/src/vaadin-dashboard-section.d.ts
index ebdebe64d6..e579c9ba45 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.d.ts
+++ b/packages/dashboard/src/vaadin-dashboard-section.d.ts
@@ -39,6 +39,7 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
  * Part name              | Description
  * -----------------------|-------------
  * `header`               | The header of the section
+ * `title`                | The title of the section
  * `move-button`          | The move button
  * `remove-button`        | The remove button
  * `move-backward-button` | The move backward button when in move mode
diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
index 608689b0fe..3ab6a25e19 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.js
+++ b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -44,6 +44,7 @@ import { hasWidgetWrappers } from './vaadin-dashboard-styles.js';
  * Part name              | Description
  * -----------------------|-------------
  * `header`               | The header of the section
+ * `title`                | The title of the section
  * `move-button`          | The move button
  * `remove-button`        | The remove button
  * `move-backward-button` | The move backward button when in move mode
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.d.ts b/packages/dashboard/src/vaadin-dashboard-widget.d.ts
index 1a433b5195..d4566122c7 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.d.ts
+++ b/packages/dashboard/src/vaadin-dashboard-widget.d.ts
@@ -47,6 +47,7 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
  * Part name                     | Description
  * ------------------------------|-------------
  * `header`                      | The header of the widget
+ * `title`                       | The title of the widget
  * `content`                     | The content of the widget
  * `move-button`                 | The move button
  * `remove-button`               | The remove button
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
index baf51ca0f2..1f2f9dcc95 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.js
+++ b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -52,6 +52,7 @@ import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
  * Part name                     | Description
  * ------------------------------|-------------
  * `header`                      | The header of the widget
+ * `title`                       | The title of the widget
  * `content`                     | The content of the widget
  * `move-button`                 | The move button
  * `remove-button`               | The remove button