@vaadin/dashboard 25.0.0-alpha2 → 25.0.0-alpha21

package/src/styles/vaadin-dashboard-widget-section-base-styles.js

@@ -0,0 +1,294 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import '@vaadin/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+
+export const dashboardWidgetAndSectionStyles = css`
+  :host {
+    box-sizing: border-box;
+    --_widget-background: var(--vaadin-dashboard-widget-background, var(--vaadin-background-color));
+    --_widget-border-radius: var(--vaadin-dashboard-widget-border-radius, var(--vaadin-radius-m));
+    --_widget-border-width: var(--vaadin-dashboard-widget-border-width, 1px);
+    --_widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--vaadin-border-color-secondary));
+    --_widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent);
+    --_widget-editable-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+    --_widget-selected-shadow: 0 3px 12px -1px rgba(0, 0, 0, 0.3);
+    --_drop-target-background: var(--vaadin-dashboard-drop-target-background, var(--vaadin-background-container));
+    --_drop-target-border-color: var(--vaadin-dashboard-drop-target-border-color, var(--vaadin-border-color-secondary));
+    --_focus-ring-color: var(--vaadin-focus-ring-color);
+    --_focus-ring-width: var(--vaadin-focus-ring-width);
+  }
+
+  :host([focused]) {
+    z-index: 1;
+    outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
+    outline-offset: calc(var(--_widget-border-width) * -1);
+  }
+
+  :host([dragging]) {
+    box-shadow: none;
+    background: var(--_drop-target-background);
+    border-color: var(--_drop-target-border-color);
+  }
+
+  :host([dragging]) * {
+    visibility: hidden;
+  }
+
+  :host(:not([editable])) [part~='move-button'],
+  :host(:not([editable])) [part~='remove-button'],
+  :host(:not([editable])) #focus-button,
+  :host(:not([editable])) #focus-button-wrapper,
+  :host(:not([editable])) .mode-controls {
+    display: none;
+  }
+
+  #focustrap {
+    display: contents;
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: space-between;
+    gap: var(--vaadin-dashboard-header-gap, var(--vaadin-gap-s));
+  }
+
+  [part='title'] {
+    flex: 1;
+    color: var(--vaadin-dashboard-widget-title-color, var(--vaadin-text-color));
+    font-size: var(--vaadin-dashboard-widget-title-font-size, 1em);
+    font-weight: var(--vaadin-dashboard-widget-title-font-weight, 500);
+    line-height: var(--vaadin-dashboard-widget-title-line-height, inherit);
+    white-space: var(--vaadin-dashboard-widget-title-wrap, wrap);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    align-self: safe center;
+  }
+
+  vaadin-dashboard-button {
+    z-index: 1;
+  }
+
+  vaadin-dashboard-button .icon::before {
+    display: block;
+    content: '';
+    height: var(--vaadin-icon-size, 1lh);
+    width: var(--vaadin-icon-size, 1lh);
+    background: currentColor;
+    mask: var(--icon) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
+  }
+
+  #focus-button-wrapper,
+  #focus-button {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+  }
+
+  #focus-button {
+    pointer-events: none;
+    padding: 0;
+    border: none;
+  }
+
+  .mode-controls {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+  }
+
+  .mode-controls[hidden] {
+    display: none;
+  }
+
+  /* Drag handle */
+  [part~='move-button'] {
+    cursor: move;
+    --icon: var(--_vaadin-icon-drag);
+  }
+
+  /* Remove button */
+  [part~='remove-button'] {
+    cursor: pointer;
+    --icon: var(--_vaadin-icon-cross);
+  }
+
+  /* Move-mode buttons */
+  [part~='move-backward-button'],
+  [part~='move-forward-button'],
+  [part~='move-apply-button'] {
+    position: absolute;
+    top: 50%;
+  }
+
+  [part~='move-backward-button'] {
+    inset-inline-start: 0;
+    transform: translateY(-50%);
+    --icon: var(--_vaadin-icon-chevron-down);
+  }
+
+  [part~='move-forward-button'] {
+    inset-inline-end: 0;
+    transform: translateY(-50%);
+    --icon: var(--_vaadin-icon-chevron-down);
+  }
+
+  [part~='move-apply-button'] {
+    left: 50%;
+    transform: translate(-50%, -50%);
+    --icon: var(--_vaadin-icon-checkmark);
+  }
+
+  :host([first-child]) [part~='move-backward-button'],
+  :host([last-child]) [part~='move-forward-button'] {
+    display: none;
+  }
+
+  :host(:not([dir='rtl'])) [part~='move-backward-button'],
+  :host([dir='rtl']) [part~='move-forward-button'] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  :host(:not([dir='rtl'])) [part~='move-forward-button'],
+  :host([dir='rtl']) [part~='move-backward-button'] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  :host(:not([dir='rtl'])) [part~='move-backward-button'] .icon,
+  :host([dir='rtl']) [part~='move-forward-button'] .icon {
+    rotate: 90deg;
+  }
+
+  :host(:not([dir='rtl'])) [part~='move-forward-button'] .icon,
+  :host([dir='rtl']) [part~='move-backward-button'] .icon {
+    rotate: -90deg;
+  }
+
+  /* Resize-mode buttons */
+  [part~='resize-shrink-width-button'],
+  [part~='resize-shrink-height-button'],
+  [part~='resize-grow-width-button'],
+  [part~='resize-grow-height-button'],
+  [part~='resize-apply-button'] {
+    position: absolute;
+  }
+
+  [part~='resize-shrink-width-button'] {
+    inset-inline-end: 0;
+    top: 50%;
+  }
+
+  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button'] {
+    transform: translateY(-50%) translateX(-100%);
+  }
+
+  :host([dir='rtl']) [part~='resize-shrink-width-button'] {
+    transform: translateY(-50%) translateX(100%);
+  }
+
+  .mode-controls:has([part~='resize-grow-width-button'][hidden]) [part~='resize-shrink-width-button'] {
+    transform: translateY(-50%);
+  }
+
+  [part~='resize-grow-width-button'] {
+    inset-inline-start: 100%;
+    top: 50%;
+  }
+
+  :host(:not([dir='rtl'])) [part~='resize-grow-width-button'] {
+    transform: translateY(-50%) translateX(-100%);
+  }
+
+  :host([dir='rtl']) [part~='resize-grow-width-button'] {
+    transform: translateY(-50%) translateX(100%);
+  }
+
+  [part~='resize-shrink-height-button'] {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%) translateY(-100%);
+  }
+
+  [part~='resize-grow-height-button'] {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-100%);
+  }
+
+  [part~='resize-grow-height-button'],
+  [part~='resize-grow-width-button'] {
+    --icon: var(--_vaadin-icon-plus);
+  }
+
+  [part~='resize-shrink-height-button'],
+  [part~='resize-shrink-width-button'] {
+    --icon: var(--_vaadin-icon-minus);
+  }
+
+  [part~='resize-apply-button'] {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    --icon: var(--_vaadin-icon-checkmark);
+  }
+
+  [part~='resize-shrink-width-button'] + [part~='resize-grow-width-button'] {
+    margin-left: 1px;
+  }
+
+  [part~='resize-grow-height-button'],
+  [part~='resize-shrink-height-button'] {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  [part~='resize-shrink-height-button']:not([hidden]) + [part~='resize-grow-height-button'] {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  [part~='resize-shrink-height-button'] + [part~='resize-grow-height-button'] {
+    margin-top: 1px;
+  }
+
+  :host(:not([dir='rtl'])) [part~='resize-grow-width-button'],
+  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button'] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  :host([dir='rtl']) [part~='resize-grow-width-button'],
+  :host([dir='rtl']) [part~='resize-shrink-width-button'] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button']:not([hidden]) + [part~='resize-grow-width-button'] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  :host([dir='rtl']) [part~='resize-shrink-width-button']:not([hidden]) + [part~='resize-grow-width-button'] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  @media (forced-colors: active) {
+    vaadin-dashboard-button .icon::before {
+      background: currentColor;
+      forced-color-adjust: none;
+    }
+  }
+`;

package/src/vaadin-dashboard-button.js

@@ -9,21 +9,22 @@
  * license.
  */
 import { html, LitElement } from 'lit';
-import { buttonStyles } from '@vaadin/button/src/vaadin-button-core-styles.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 { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dashboardButtonStyles } from './styles/vaadin-dashboard-button-base-styles.js';
 
-class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-dashboard-button';
   }
 
   static get styles() {
-    return buttonStyles;
+    return dashboardButtonStyles;
   }
 
   /** @protected */

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

@@ -14,7 +14,6 @@ import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { KeyboardController } from './keyboard-controller.js';
 import { fireMove, fireRemove, fireResize } from './vaadin-dashboard-helpers.js';
-import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-styles.js';
 
 const DEFAULT_I18N = {
   selectWidget: 'Select widget for editing',
@@ -47,10 +46,6 @@ export function getDefaultI18n() {
  */
 export const DashboardItemMixin = (superClass) =>
   class DashboardItemMixinClass extends ResizeMixin(superClass) {
-    static get styles() {
-      return dashboardWidgetAndSectionStyles;
-    }
-
     static get properties() {
       return {
         /** @protected */
@@ -310,11 +305,16 @@ export const DashboardItemMixin = (superClass) =>
       }
     }
 
-    focus() {
+    /**
+     * @param {FocusOptions=} options
+     * @protected
+     * @override
+     */
+    focus(options) {
       if (this.hasAttribute('editable')) {
-        this.$['focus-button'].focus();
+        this.$['focus-button'].focus(options);
       } else {
-        super.focus();
+        super.focus(options);
       }
     }
 

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

@@ -9,7 +9,6 @@
  * license.
  */
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
  * A mixin to enable the dashboard layout functionality
@@ -19,83 +18,6 @@ import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
  */
 export const DashboardLayoutMixin = (superClass) =>
   class DashboardLayoutMixinClass extends ResizeMixin(superClass) {
-    static get styles() {
-      return css`
-        :host {
-          display: block;
-          overflow: auto;
-          box-sizing: border-box;
-          width: 100%;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        :host([dense-layout]) #grid {
-          grid-auto-flow: dense;
-        }
-
-        #grid {
-          box-sizing: border-box;
-
-          /* Padding around dashboard edges */
-          --_default-padding: 1rem;
-          --_padding: max(0px, var(--vaadin-dashboard-padding, var(--_default-padding)));
-          padding: var(--_padding);
-
-          /* Gap between widgets */
-          --_default-gap: 1rem;
-          --_gap: max(0px, var(--vaadin-dashboard-gap, var(--_default-gap)));
-          gap: var(--_gap);
-
-          /* Default min and max column widths */
-          --_default-col-min-width: 25rem;
-          --_default-col-max-width: 1fr;
-
-          /* Effective min and max column widths */
-          --_col-min-width: var(--vaadin-dashboard-col-min-width, var(--_default-col-min-width));
-          --_col-max-width: var(--vaadin-dashboard-col-max-width, var(--_default-col-max-width));
-
-          /* Effective max column count */
-          --_col-max-count: var(--vaadin-dashboard-col-max-count, var(--_col-count));
-
-          /* Effective column count */
-          --_effective-col-count: min(var(--_col-count), var(--_col-max-count));
-
-          /* Default row min height */
-          --_default-row-min-height: 12rem;
-          /* Effective row min height */
-          --_row-min-height: var(--vaadin-dashboard-row-min-height, var(--_default-row-min-height));
-          /* Effective row height */
-          --_row-height: minmax(var(--_row-min-height, auto), auto);
-
-          display: grid;
-          overflow: hidden;
-          min-width: calc(var(--_col-min-width) + var(--_padding) * 2);
-
-          grid-template-columns: repeat(
-            var(--_effective-col-count, auto-fill),
-            minmax(var(--_col-min-width), var(--_col-max-width))
-          );
-
-          grid-auto-rows: var(--_row-height);
-        }
-
-        ::slotted(*) {
-          /* The grid-column value applied to children */
-          --_item-column: span
-            min(var(--vaadin-dashboard-widget-colspan, 1), var(--_effective-col-count, var(--_col-count)));
-
-          grid-column: var(--_item-column);
-
-          /* The grid-row value applied to children */
-          --_item-row: span var(--vaadin-dashboard-widget-rowspan, 1);
-          grid-row: var(--_item-row);
-        }
-      `;
-    }
-
     static get properties() {
       return {
         /**

package/src/vaadin-dashboard-layout.js

@@ -12,7 +12,9 @@ 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 { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dashboardLayoutStyles } from './styles/vaadin-dashboard-layout-base-styles.js';
 import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
 
 /**
@@ -55,7 +57,9 @@ import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class DashboardLayout extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DashboardLayout extends DashboardLayoutMixin(
+  ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dashboard-layout';
   }
@@ -64,6 +68,16 @@ class DashboardLayout extends DashboardLayoutMixin(ElementMixin(ThemableMixin(Po
     return 'vaadin-dashboard';
   }
 
+  static get styles() {
+    return dashboardLayoutStyles;
+  }
+
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`<div id="grid"><slot></slot></div>`;

package/src/vaadin-dashboard-section.js

@@ -12,10 +12,11 @@ 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 { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { css, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dashboardSectionStyles } from './styles/vaadin-dashboard-section-base-styles.js';
 import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
 import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
-import { hasWidgetWrappers } from './vaadin-dashboard-styles.js';
 
 /**
  * A section component for use with the Dashboard component
@@ -69,51 +70,21 @@ import { hasWidgetWrappers } from './vaadin-dashboard-styles.js';
  * @mixes ThemableMixin
  * @mixes DashboardItemMixin
  */
-class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DashboardSection extends DashboardItemMixin(
+  ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dashboard-section';
   }
 
   static get styles() {
-    return [
-      css`
-        :host {
-          display: grid;
-          position: relative;
-          grid-template-columns: subgrid;
-          --_section-column: 1 / calc(var(--_effective-col-count) + 1);
-          grid-column: var(--_section-column) !important;
-          gap: var(--_gap, 1rem);
-          /* Dashboard section header height */
-          --_section-header-height: minmax(0, auto);
-          grid-template-rows: var(--_section-header-height) repeat(auto-fill, var(--_row-height));
-          grid-auto-rows: var(--_row-height);
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        ::slotted(*) {
-          --_item-column: span
-            min(var(--vaadin-dashboard-widget-colspan, 1), var(--_effective-col-count, var(--_col-count)));
-
-          grid-column: var(--_item-column);
-          --_item-row: span var(--vaadin-dashboard-widget-rowspan, 1);
-          grid-row: var(--_item-row);
-        }
-
-        header {
-          grid-column: var(--_section-column);
-        }
+    return dashboardSectionStyles;
+  }
 
-        :host::before {
-          z-index: 2 !important;
-        }
-      `,
-      hasWidgetWrappers,
-      super.styles,
-    ];
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
   }
 
   static get properties() {
@@ -125,7 +96,7 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
        * `i18n` object with a custom one.
        *
        * The object has the following structure and default values:
-       * ```
+       * ```js
        * {
        *   selectSection: 'Select section for editing',
        *   remove: 'Remove',

package/src/vaadin-dashboard-widget.js

@@ -12,7 +12,9 @@ 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 { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { css, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dashboardWidgetStyles } from './styles/vaadin-dashboard-widget-base-styles.js';
 import { findAncestorInstance, SYNCHRONIZED_ATTRIBUTES, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
 import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
 import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
@@ -102,56 +104,21 @@ import { DashboardSection } from './vaadin-dashboard-section.js';
  * @mixes ThemableMixin
  * @mixes DashboardItemMixin
  */
-class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DashboardWidget extends DashboardItemMixin(
+  ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dashboard-widget';
   }
 
   static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          grid-column: var(--_item-column);
-          grid-row: var(--_item-row);
-          position: relative;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        :host(:not([editable])) [part~='resize-button'] {
-          display: none;
-        }
-
-        [part~='content'] {
-          flex: 1;
-          overflow: hidden;
-        }
-
-        [part~='resize-button'] {
-          position: absolute;
-          bottom: 0;
-          inset-inline-end: 0;
-          z-index: 1;
-          overflow: hidden;
-        }
+    return dashboardWidgetStyles;
+  }
 
-        :host([resizing])::after {
-          content: '';
-          z-index: 2;
-          position: absolute;
-          top: -1px;
-          width: var(--_widget-resizer-width, 0);
-          height: var(--_widget-resizer-height, 0);
-          background: rgba(0, 0, 0, 0.1);
-          border-radius: inherit;
-        }
-      `,
-      super.styles,
-    ];
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
   }
 
   static get properties() {
@@ -163,7 +130,7 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
        * `i18n` object with a custom one.
        *
        * The object has the following structure and default values:
-       * ```
+       * ```js
        * {
        *   selectWidget: 'Select widget for editing',
        *   remove: 'Remove',

package/src/vaadin-dashboard.d.ts

@@ -259,7 +259,7 @@ declare class Dashboard<TItem extends DashboardItem = DashboardItem> extends Das
    * just the individual properties you want to change.
    *
    * The object has the following structure and default values:
-   * ```
+   * ```js
    * {
    *   selectSection: 'Select section for editing',
    *   selectWidget: 'Select widget for editing',