@vaadin/dashboard 24.7.0-alpha1 → 24.7.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dashboard",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -37,21 +37,22 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "24.7.0-alpha1",
-    "@vaadin/component-base": "24.7.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha1",
+    "@vaadin/button": "24.7.0-alpha10",
+    "@vaadin/component-base": "24.7.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha1",
-    "@vaadin/testing-helpers": "^1.0.0"
+    "@vaadin/chai-plugins": "24.7.0-alpha10",
+    "@vaadin/test-runner-commands": "24.7.0-alpha10",
+    "@vaadin/testing-helpers": "^1.1.0"
   },
   "cvdlName": "vaadin-dashboard",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "04be941c9a7b659871c97f31b9cc3ffd7528087b"
+  "gitHead": "c0f8933df2a6a40648d3fb9cfbae6bbf86a8aa90"
 }

package/src/keyboard-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-button.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-helpers.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-item-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-layout.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-section.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -151,15 +151,7 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
       __i18n: {
         type: Object,
         value: () => {
-          const i18n = getDefaultI18n();
-          return {
-            selectSection: i18n.selectSection,
-            remove: i18n.remove,
-            move: i18n.move,
-            moveApply: i18n.moveApply,
-            moveForward: i18n.moveForward,
-            moveBackward: i18n.moveBackward,
-          };
+          return getDefaultI18n();
         },
       },
 
@@ -173,6 +165,12 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
         type: String,
         value: '',
       },
+
+      /** @private */
+      __childCount: {
+        type: Number,
+        value: 0,
+      },
     };
   }
 
@@ -191,7 +189,10 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
         </header>
       </div>
 
+      <!-- Default slot is used by <vaadin-dashboard-layout> -->
       <slot></slot>
+      <!-- Named slots are used by <vaadin-dashboard> -->
+      ${[...Array(this.__childCount)].map((_, index) => html`<slot name="slot-${index}"></slot>`)}
     `;
   }
 

package/src/vaadin-dashboard-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/vaadin-dashboard-widget.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -180,9 +180,7 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
       __i18n: {
         type: Object,
         value: () => {
-          const i18n = getDefaultI18n();
-          delete i18n.selectSection;
-          return i18n;
+          return getDefaultI18n();
         },
       },
 

package/src/vaadin-dashboard.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -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 type { I18nMixin, PartialI18n } from '@vaadin/component-base/src/i18n-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
 import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
 
@@ -68,7 +69,7 @@ export type DashboardRenderer<TItem extends DashboardItem> = (
  * Fired when an item was moved
  */
 export type DashboardItemMovedEvent<TItem extends DashboardItem> = CustomEvent<{
-  item: TItem;
+  item: TItem | DashboardSectionItem<TItem>;
 
   items: Array<TItem | DashboardSectionItem<TItem>>;
 
@@ -97,7 +98,7 @@ export type DashboardItemRemovedEvent<TItem extends DashboardItem> = CustomEvent
  * Fired when an item selected state changed
  */
 export type DashboardItemSelectedChangedEvent<TItem extends DashboardItem> = CustomEvent<{
-  item: TItem;
+  item: TItem | DashboardSectionItem<TItem>;
   value: boolean;
 }>;
 
@@ -105,7 +106,7 @@ export type DashboardItemSelectedChangedEvent<TItem extends DashboardItem> = Cus
  * Fired when an item move mode changed
  */
 export type DashboardItemMoveModeChangedEvent<TItem extends DashboardItem> = CustomEvent<{
-  item: TItem;
+  item: TItem | DashboardSectionItem<TItem>;
   value: boolean;
 }>;
 
@@ -133,7 +134,7 @@ export interface DashboardCustomEventMap<TItem extends DashboardItem> {
 
 export type DashboardEventMap<TItem extends DashboardItem> = DashboardCustomEventMap<TItem> & HTMLElementEventMap;
 
-export interface DashboardI18n {
+export type DashboardI18n = PartialI18n<{
   selectWidget: string;
   selectSection: string;
   remove: string;
@@ -147,7 +148,7 @@ export interface DashboardI18n {
   moveApply: string;
   moveForward: string;
   moveBackward: string;
-}
+}>;
 
 /**
  * A responsive, grid-based dashboard layout component
@@ -217,7 +218,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(ThemableMixin(HTMLElement)),
+  I18nMixin({} as DashboardI18n, ElementMixin(ThemableMixin(HTMLElement))),
 ) {
   /**
    * An array containing the items of the dashboard
@@ -243,10 +244,9 @@ declare class Dashboard<TItem extends DashboardItem = DashboardItem> extends Das
   editable: boolean;
 
   /**
-   * The object used to localize this component.
-   *
-   * To change the default localization, replace the entire
-   * `i18n` object with a custom one.
+   * The object used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
    *
    * The object has the following structure and default values:
    * ```

package/src/vaadin-dashboard.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *
@@ -13,6 +13,7 @@ import './vaadin-dashboard-section.js';
 import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { I18nMixin } from '@vaadin/component-base/src/i18n-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 {
@@ -100,9 +101,12 @@ import { WidgetResizeController } from './widget-resize-controller.js';
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes DashboardLayoutMixin
+ * @mixes I18nMixin
  * @mixes ThemableMixin
  */
-class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class Dashboard extends DashboardLayoutMixin(
+  I18nMixin(getDefaultI18n(), ElementMixin(ThemableMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dashboard';
   }
@@ -162,44 +166,49 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
         type: Boolean,
       },
 
-      /**
-       * The object used to localize this component.
-       *
-       * To change the default localization, replace the entire
-       * `i18n` object with a custom one.
-       *
-       * The object has the following structure and default values:
-       * ```
-       * {
-       *   selectSection: 'Select section for editing',
-       *   selectWidget: 'Select widget for editing',
-       *   remove: 'Remove',
-       *   resize: 'Resize',
-       *   resizeApply: 'Apply',
-       *   resizeShrinkWidth: 'Shrink width',
-       *   resizeGrowWidth: 'Grow width',
-       *   resizeShrinkHeight: 'Shrink height',
-       *   resizeGrowHeight: 'Grow height',
-       *   move: 'Move',
-       *   moveApply: 'Apply',
-       *   moveForward: 'Move Forward',
-       *   moveBackward: 'Move Backward',
-       * }
-       * ```
-       */
-      i18n: {
-        type: Object,
-        value: () => {
-          return {
-            ...getDefaultI18n(),
-          };
-        },
+      /** @private */
+      __childCount: {
+        type: Number,
+        value: 0,
       },
     };
   }
 
   static get observers() {
-    return ['__itemsOrRendererChanged(items, renderer, editable, i18n)'];
+    return ['__itemsOrRendererChanged(items, renderer, editable, __effectiveI18n)'];
+  }
+
+  /**
+   * The object used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
+   *
+   * The object has the following structure and default values:
+   * ```
+   * {
+   *   selectSection: 'Select section for editing',
+   *   selectWidget: 'Select widget for editing',
+   *   remove: 'Remove',
+   *   resize: 'Resize',
+   *   resizeApply: 'Apply',
+   *   resizeShrinkWidth: 'Shrink width',
+   *   resizeGrowWidth: 'Grow width',
+   *   resizeShrinkHeight: 'Shrink height',
+   *   resizeGrowHeight: 'Grow height',
+   *   move: 'Move',
+   *   moveApply: 'Apply',
+   *   moveForward: 'Move Forward',
+   *   moveBackward: 'Move Backward',
+   * }
+   * ```
+   * @return {!DashboardI18n}
+   */
+  get i18n() {
+    return super.i18n;
+  }
+
+  set i18n(value) {
+    super.i18n = value;
   }
 
   constructor() {
@@ -221,11 +230,14 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
 
   /** @protected */
   render() {
-    return html`<div id="grid"><slot></slot></div>`;
+    return html`<div id="grid">
+      ${[...Array(this.__childCount)].map((_, index) => html`<slot name="slot-${index}"></slot>`)}
+    </div>`;
   }
 
   /** @private */
   __itemsOrRendererChanged(items, renderer) {
+    this.__childCount = items ? items.length : 0;
     this.__renderItemWrappers(items || []);
 
     this.querySelectorAll(WRAPPER_LOCAL_NAME).forEach((wrapper) => {
@@ -248,7 +260,7 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
         SYNCHRONIZED_ATTRIBUTES.forEach((attr) => {
           wrapper.firstElementChild.toggleAttribute(attr, !!wrapper[attr]);
         });
-        wrapper.firstElementChild.__i18n = this.i18n;
+        wrapper.firstElementChild.__i18n = this.__effectiveI18n;
       }
     });
   }
@@ -257,38 +269,25 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
   __renderItemWrappers(items, hostElement = this) {
     // Get all the wrappers in the host element
     let wrappers = [...hostElement.children].filter((el) => el.localName === WRAPPER_LOCAL_NAME);
-    let previousWrapper = null;
 
     const focusedWrapper = wrappers.find((wrapper) => wrapper.querySelector(':focus'));
     const focusedWrapperWillBeRemoved = focusedWrapper && !this.__isActiveWrapper(focusedWrapper);
     const wrapperClosestToRemovedFocused =
       focusedWrapperWillBeRemoved && this.__getClosestActiveWrapper(focusedWrapper);
 
-    items.forEach((item) => {
+    items.forEach((item, index) => {
       // Find the wrapper for the item or create a new one
       const wrapper = wrappers.find((el) => itemsEqual(getElementItem(el), item)) || this.__createWrapper(item);
       wrappers = wrappers.filter((el) => el !== wrapper);
+      if (!wrapper.isConnected) {
+        hostElement.appendChild(wrapper);
+      }
 
       // Update the wrapper style
       this.__updateWrapper(wrapper, item);
 
-      if (wrapper !== focusedWrapper) {
-        if (previousWrapper) {
-          // Append the wrapper after the previous one if it's not already there
-          if (wrapper.previousElementSibling !== previousWrapper) {
-            previousWrapper.after(wrapper);
-          }
-        } else if (hostElement.firstChild) {
-          // Insert the wrapper as the first child of the host element if it's not already there
-          if (wrapper !== hostElement.firstChild) {
-            hostElement.insertBefore(wrapper, hostElement.firstChild);
-          }
-        } else {
-          // Append the wrapper to the empty host element
-          hostElement.appendChild(wrapper);
-        }
-      }
-      previousWrapper = wrapper;
+      // Update the wrapper slot
+      wrapper.slot = `slot-${index}`;
 
       // Render section if the item has subitems
       if (item.items) {
@@ -304,9 +303,10 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
         }
 
         SYNCHRONIZED_ATTRIBUTES.forEach((attr) => section.toggleAttribute(attr, !!wrapper[attr]));
-        section.__i18n = this.i18n;
+        section.__i18n = this.__effectiveI18n;
 
         // Render the subitems
+        section.__childCount = item.items.length;
         this.__renderItemWrappers(item.items, section);
       }
     });
@@ -368,12 +368,26 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
     return getItemsArrayOfItem(getElementItem(wrapper), this.items);
   }
 
+  /**
+   * Parses the slot name to get the index of the item in the dashboard
+   * For example, slot name "slot-12" will return 12
+   * @private
+   */
+  __parseSlotIndex(slotName) {
+    return parseInt(slotName.split('-')[1]);
+  }
+
   /** @private */
   __getClosestActiveWrapper(wrapper) {
     if (!wrapper || this.__isActiveWrapper(wrapper)) {
       return wrapper;
     }
 
+    // Sibling wrappers sorted by their slot name
+    const siblingWrappers = [...wrapper.parentElement.children].sort((a, b) => {
+      return this.__parseSlotIndex(a.slot) - this.__parseSlotIndex(b.slot);
+    });
+
     // Starting from the given wrapper element, iterates through the siblings in the given direction
     // to find the closest wrapper that represents an item in the dashboard's items array
     const findSiblingWrapper = (wrapper, dir) => {
@@ -381,7 +395,8 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
         if (this.__isActiveWrapper(wrapper)) {
           return wrapper;
         }
-        wrapper = dir === 1 ? wrapper.nextElementSibling : wrapper.previousElementSibling;
+        const currentIndex = siblingWrappers.indexOf(wrapper);
+        wrapper = dir === 1 ? siblingWrappers[currentIndex + 1] : siblingWrappers[currentIndex - 1];
       }
     };
 
@@ -412,7 +427,7 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
     wrapper.dragging = this.__widgetReorderController.draggedItem === item;
     wrapper['first-child'] = item === getItemsArrayOfItem(item, this.items)[0];
     wrapper['last-child'] = item === getItemsArrayOfItem(item, this.items).slice(-1)[0];
-    wrapper.i18n = this.i18n;
+    wrapper.i18n = this.__effectiveI18n;
   }
 
   /** @private */

package/src/widget-reorder-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

package/src/widget-resize-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2000 - 2024 Vaadin Ltd.
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
  *
  * This program is available under Vaadin Commercial License and Service Terms.
  *

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

@@ -64,9 +64,9 @@ const section = css`
   }
 
   :host([dragging]) {
-    background: var(--vaadin-dashboard-drop-target-background-color);
-    outline: var(--vaadin-dashboard-drop-target-border);
-    box-shadow: 0 0 0 var(--_section-outline-offset) var(--vaadin-dashboard-drop-target-background-color);
+    background: var(--_vaadin-dashboard-drop-target-background-color);
+    outline: var(--_vaadin-dashboard-drop-target-border);
+    box-shadow: 0 0 0 var(--_section-outline-offset) var(--_vaadin-dashboard-drop-target-background-color);
   }
 
   /* Accessible move mode controls */

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

@@ -4,32 +4,37 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-/* Global styles */
-const dashboardWidgetProps = css`
-  html {
-    --vaadin-dashboard-widget-background: var(--lumo-base-color);
-    --vaadin-dashboard-widget-border-radius: var(--lumo-border-radius-l);
-    --vaadin-dashboard-widget-border-width: 1px;
-    --vaadin-dashboard-widget-border-color: var(--lumo-contrast-20pct);
-    --vaadin-dashboard-widget-shadow: 0 0 0 0 transparent;
-    --vaadin-dashboard-widget-editable-shadow: var(--lumo-box-shadow-s);
-    --vaadin-dashboard-widget-selected-shadow: 0 2px 4px -1px var(--lumo-primary-color-10pct),
-      0 3px 12px -1px var(--lumo-primary-color-50pct);
-    --vaadin-dashboard-drop-target-background-color: var(--lumo-primary-color-10pct);
-    --vaadin-dashboard-drop-target-border: 1px dashed var(--lumo-primary-color-50pct);
-  }
-`;
-addGlobalThemeStyles('dashboard-widget-props', dashboardWidgetProps);
-
 /* Styles shared between widgets and sections */
 const dashboardWidgetAndSection = css`
   /* stylelint-disable rule-empty-line-before */
   /* stylelint-disable length-zero-no-unit */
 
   :host {
+    --_vaadin-dashboard-widget-background: var(--vaadin-dashboard-widget-background, var(--lumo-base-color));
+    --_vaadin-dashboard-widget-border-radius: var(--vaadin-dashboard-widget-border-radius, var(--lumo-border-radius-l));
+    --_vaadin-dashboard-widget-border-width: var(--vaadin-dashboard-widget-border-width, 1px);
+    --_vaadin-dashboard-widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--lumo-contrast-20pct));
+    --_vaadin-dashboard-widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent);
+    --_vaadin-dashboard-widget-editable-shadow: var(
+      --vaadin-dashboard-widget-editable-shadow,
+      var(--lumo-box-shadow-s)
+    );
+    --_vaadin-dashboard-widget-selected-shadow: var(
+      --vaadin-dashboard-widget-selected-shadow,
+      0 2px 4px -1px var(--lumo-primary-color-10pct),
+      0 3px 12px -1px var(--lumo-primary-color-50pct)
+    );
+    --_vaadin-dashboard-drop-target-background-color: var(
+      --vaadin-dashboard-drop-target-background-color,
+      var(--lumo-primary-color-10pct)
+    );
+    --_vaadin-dashboard-drop-target-border: var(
+      --vaadin-dashboard-drop-target-border,
+      1px dashed var(--lumo-primary-color-50pct)
+    );
+
     color: var(--lumo-body-text-color);
     font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size-m);
@@ -137,17 +142,17 @@ const dashboardWidgetAndSection = css`
 /* Widget styles */
 const dashboardWidget = css`
   :host {
-    background: var(--vaadin-dashboard-widget-background);
-    border-radius: var(--vaadin-dashboard-widget-border-radius);
-    --_border-shadow: 0 0 0 var(--vaadin-dashboard-widget-border-width) var(--vaadin-dashboard-widget-border-color);
-    --_shadow: var(--vaadin-dashboard-widget-shadow);
+    background: var(--_vaadin-dashboard-widget-background);
+    border-radius: var(--_vaadin-dashboard-widget-border-radius);
+    --_border-shadow: 0 0 0 var(--_vaadin-dashboard-widget-border-width) var(--_vaadin-dashboard-widget-border-color);
+    --_shadow: var(--_vaadin-dashboard-widget-shadow);
     box-shadow: var(--_shadow), var(--_border-shadow);
   }
 
   /* Widget states */
 
   :host([editable]) {
-    --_shadow: var(--vaadin-dashboard-widget-editable-shadow);
+    --_shadow: var(--_vaadin-dashboard-widget-editable-shadow);
   }
 
   :host([focused]) {
@@ -155,19 +160,19 @@ const dashboardWidget = css`
   }
 
   :host([selected]) {
-    --_shadow: var(--vaadin-dashboard-widget-selected-shadow);
+    --_shadow: var(--_vaadin-dashboard-widget-selected-shadow);
     background: var(--lumo-primary-color-10pct);
   }
 
   :host([dragging]) {
     box-shadow: none;
-    background: var(--vaadin-dashboard-drop-target-background-color);
-    border: var(--vaadin-dashboard-drop-target-border);
+    background: var(--_vaadin-dashboard-drop-target-background-color);
+    border: var(--_vaadin-dashboard-drop-target-border);
   }
 
   :host([resizing])::after {
-    background: var(--vaadin-dashboard-drop-target-background-color);
-    border: var(--vaadin-dashboard-drop-target-border);
+    background: var(--_vaadin-dashboard-drop-target-background-color);
+    border: var(--_vaadin-dashboard-drop-target-border);
   }
 
   /* Widget parts */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -136,7 +136,7 @@
         },
         {
           "name": "vaadin-dashboard",
-          "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n  { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n  { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n  {\n    title: 'Section title',\n    items: [{ title: 'Widget in section title', content: 'Text 3' }]\n  },\n  // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n  const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n  if (!root.contains(widget)) {\n    root.appendChild(widget);\n  }\n  widget.widgetTitle = item.title;\n  widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property                     | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width`  | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard\n`--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`editable`     | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected`| Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n  { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n  { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n  {\n    title: 'Section title',\n    items: [{ title: 'Widget in section title', content: 'Text 3' }]\n  },\n  // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n  const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n  if (!root.contains(widget)) {\n    root.appendChild(widget);\n  }\n  widget.widgetTitle = item.title;\n  widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property                     | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width`  | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard\n`--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`editable`     | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected`| Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "dense-layout",
@@ -181,6 +181,15 @@
                   ]
                 }
               },
+              {
+                "name": "i18n",
+                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```\n{\n  selectSection: 'Select section for editing',\n  selectWidget: 'Select widget for editing',\n  remove: 'Remove',\n  resize: 'Resize',\n  resizeApply: 'Apply',\n  resizeShrinkWidth: 'Shrink width',\n  resizeGrowWidth: 'Grow width',\n  resizeShrinkHeight: 'Shrink height',\n  resizeGrowHeight: 'Grow height',\n  move: 'Move',\n  moveApply: 'Apply',\n  moveForward: 'Move Forward',\n  moveBackward: 'Move Backward',\n}\n```",
+                "value": {
+                  "type": [
+                    "DashboardI18n"
+                  ]
+                }
+              },
               {
                 "name": "items",
                 "description": "An array containing the items of the dashboard",
@@ -213,17 +222,6 @@
                     "undefined"
                   ]
                 }
-              },
-              {
-                "name": "i18n",
-                "description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n  selectSection: 'Select section for editing',\n  selectWidget: 'Select widget for editing',\n  remove: 'Remove',\n  resize: 'Resize',\n  resizeApply: 'Apply',\n  resizeShrinkWidth: 'Shrink width',\n  resizeGrowWidth: 'Grow width',\n  resizeShrinkHeight: 'Shrink height',\n  resizeGrowHeight: 'Grow height',\n  move: 'Move',\n  moveApply: 'Apply',\n  moveForward: 'Move Forward',\n  moveBackward: 'Move Backward',\n}\n```",
-                "value": {
-                  "type": [
-                    "Object",
-                    "null",
-                    "undefined"
-                  ]
-                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dashboard",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -58,7 +58,7 @@
         },
         {
           "name": "vaadin-dashboard",
-          "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n  { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n  { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n  {\n    title: 'Section title',\n    items: [{ title: 'Widget in section title', content: 'Text 3' }]\n  },\n  // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n  const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n  if (!root.contains(widget)) {\n    root.appendChild(widget);\n  }\n  widget.widgetTitle = item.title;\n  widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property                     | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width`  | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard\n`--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`editable`     | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected`| Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha10/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n  { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n  { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n  {\n    title: 'Section title',\n    items: [{ title: 'Widget in section title', content: 'Text 3' }]\n  },\n  // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n  const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n  if (!root.contains(widget)) {\n    root.appendChild(widget);\n  }\n  widget.widgetTitle = item.title;\n  widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property                     | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width`  | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard\n`--vaadin-dashboard-gap`            | gap between child elements. Must be in length units (0 is not allowed, 0px is)\n`--vaadin-dashboard-padding`        | space around the dashboard's outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`editable`     | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected`| Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -76,22 +76,22 @@
               }
             },
             {
-              "name": ".items",
-              "description": "An array containing the items of the dashboard",
+              "name": ".i18n",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```\n{\n  selectSection: 'Select section for editing',\n  selectWidget: 'Select widget for editing',\n  remove: 'Remove',\n  resize: 'Resize',\n  resizeApply: 'Apply',\n  resizeShrinkWidth: 'Shrink width',\n  resizeGrowWidth: 'Grow width',\n  resizeShrinkHeight: 'Shrink height',\n  resizeGrowHeight: 'Grow height',\n  move: 'Move',\n  moveApply: 'Apply',\n  moveForward: 'Move Forward',\n  moveBackward: 'Move Backward',\n}\n```",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".renderer",
-              "description": "Custom function for rendering a widget for each dashboard item.\nPlacing something else than a widget in the wrapper is not supported.\nReceives three arguments:\n\n- `root` The container for the widget.\n- `dashboard` The reference to the `<vaadin-dashboard>` element.\n- `model` The object with the properties related with the rendered\n  item, contains:\n  - `model.item` The item.",
+              "name": ".items",
+              "description": "An array containing the items of the dashboard",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".i18n",
-              "description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n  selectSection: 'Select section for editing',\n  selectWidget: 'Select widget for editing',\n  remove: 'Remove',\n  resize: 'Resize',\n  resizeApply: 'Apply',\n  resizeShrinkWidth: 'Shrink width',\n  resizeGrowWidth: 'Grow width',\n  resizeShrinkHeight: 'Shrink height',\n  resizeGrowHeight: 'Grow height',\n  move: 'Move',\n  moveApply: 'Apply',\n  moveForward: 'Move Forward',\n  moveBackward: 'Move Backward',\n}\n```",
+              "name": ".renderer",
+              "description": "Custom function for rendering a widget for each dashboard item.\nPlacing something else than a widget in the wrapper is not supported.\nReceives three arguments:\n\n- `root` The container for the widget.\n- `dashboard` The reference to the `<vaadin-dashboard>` element.\n- `model` The object with the properties related with the rendered\n  item, contains:\n  - `model.item` The item.",
               "value": {
                 "kind": "expression"
               }