@vaadin/dashboard 25.0.0-alpha1 → 25.0.0-alpha10

package/README.md

@@ -2,8 +2,6 @@
 
 A responsive, grid-based dashboard layout component
 
-> ⚠️ This component is experimental and the API may change. In order to use it, enable the feature flag by setting `window.Vaadin.featureFlags.dashboardComponent = true`.
-
 > ℹ️  A commercial Vaadin [subscription](https://vaadin.com/pricing) is required to use Dashboard in your project.
 
 [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/dashboard)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dashboard",
-  "version": "25.0.0-alpha1",
+  "version": "25.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -37,21 +39,22 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "25.0.0-alpha1",
-    "@vaadin/component-base": "25.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
+    "@vaadin/a11y-base": "25.0.0-alpha10",
+    "@vaadin/button": "25.0.0-alpha10",
+    "@vaadin/component-base": "25.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha1",
-    "@vaadin/test-runner-commands": "25.0.0-alpha1",
-    "@vaadin/testing-helpers": "^1.1.0"
+    "@vaadin/chai-plugins": "25.0.0-alpha10",
+    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/testing-helpers": "^2.0.0"
   },
   "cvdlName": "vaadin-dashboard",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
+  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
 }

package/src/styles/vaadin-dashboard-base-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @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 type { CSSResult } from 'lit';
+
+export const dashboardStyles: CSSResult;

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

@@ -0,0 +1,25 @@
+/**
+ * @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 { css } from 'lit';
+import { dashboardLayoutStyles } from './vaadin-dashboard-layout-core-styles.js';
+
+const dashboard = css`
+  #grid[item-resizing] {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  ::slotted(vaadin-dashboard-widget-wrapper) {
+    display: contents;
+  }
+`;
+
+export const dashboardStyles = [dashboardLayoutStyles, dashboard];

package/src/styles/vaadin-dashboard-button-base-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @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 type { CSSResult } from 'lit';
+
+export const dashboardButtonStyles: CSSResult;

package/src/styles/vaadin-dashboard-button-base-styles.js

@@ -0,0 +1,24 @@
+/**
+ * @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 { css } from 'lit';
+import { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-core-styles.js';
+
+const dashboardButton = css`
+  :host {
+    min-width: 1em;
+  }
+
+  :host([theme~='tertiary']) {
+    color: var(--vaadin-dashboard-button-text-color, var(--vaadin-color-subtle));
+  }
+`;
+
+export const dashboardButtonStyles = [buttonStyles, dashboardButton];

package/src/styles/vaadin-dashboard-button-core-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @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 type { CSSResult } from 'lit';
+
+export const dashboardButtonStyles: CSSResult;

package/src/styles/vaadin-dashboard-button-core-styles.js

@@ -0,0 +1,20 @@
+/**
+ * @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 { css } from 'lit';
+import { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-core-styles.js';
+
+const dashboardButton = css`
+  :host {
+    min-width: 1rem;
+  }
+`;
+
+export const dashboardButtonStyles = [buttonStyles, dashboardButton];

package/src/styles/vaadin-dashboard-core-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @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 type { CSSResult } from 'lit';
+
+export const dashboardStyles: CSSResult;

package/src/styles/vaadin-dashboard-core-styles.js

@@ -0,0 +1,25 @@
+/**
+ * @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 { css } from 'lit';
+import { dashboardLayoutStyles } from './vaadin-dashboard-layout-core-styles.js';
+
+const dashboard = css`
+  #grid[item-resizing] {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  ::slotted(vaadin-dashboard-widget-wrapper) {
+    display: contents;
+  }
+`;
+
+export const dashboardStyles = [dashboardLayoutStyles, dashboard];

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

@@ -0,0 +1,13 @@
+/**
+ * @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 type { CSSResult } from 'lit';
+
+export const dashboardLayoutStyles: CSSResult;

package/src/styles/vaadin-dashboard-layout-base-styles.js

@@ -0,0 +1,85 @@
+/**
+ * @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 { css } from 'lit';
+
+export const dashboardLayoutStyles = 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: 1em;
+    --_padding: max(0px, var(--vaadin-dashboard-padding, var(--_default-padding)));
+    padding: var(--_padding);
+
+    /* Gap between widgets */
+    --_default-gap: 0.5em;
+    --_gap: max(0px, var(--vaadin-dashboard-gap, var(--_default-gap)));
+    gap: var(--_gap);
+
+    /* Default min and max column widths */
+    --_default-col-min-width: 25em;
+    --_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: 12em;
+    /* 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);
+  }
+`;

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

@@ -0,0 +1,13 @@
+/**
+ * @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 type { CSSResult } from 'lit';
+
+export const dashboardLayoutStyles: CSSResult;

package/src/styles/vaadin-dashboard-layout-core-styles.js

@@ -0,0 +1,85 @@
+/**
+ * @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 { css } from 'lit';
+
+export const dashboardLayoutStyles = 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);
+  }
+`;

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

@@ -0,0 +1,13 @@
+/**
+ * @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 type { CSSResult } from 'lit';
+
+export const dashboardSectionStyles: CSSResult;

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

@@ -0,0 +1,64 @@
+/**
+ * @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/style-props.js';
+import { css } from 'lit';
+import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-widget-section-core-styles.js';
+
+const sectionStyles = 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);
+    /* Dashboard section header height */
+    grid-template-rows: minmax(0, auto) repeat(auto-fill, var(--_row-height));
+    grid-auto-rows: var(--_row-height);
+    border: var(--_widget-border-width) solid var(--_widget-border-color);
+    border-radius: var(--vaadin-dashboard-section-border-radius, var(--vaadin-radius-l));
+    padding: calc(var(--_gap) - var(--_widget-border-width));
+    margin-inline: calc(var(--_gap) * -1);
+    margin-block: var(--_gap);
+  }
+
+  :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);
+  }
+
+  :host::before {
+    z-index: 2 !important;
+  }
+
+  ::slotted(vaadin-dashboard-widget-wrapper) {
+    display: contents;
+  }
+
+  /* Section states */
+
+  :host(:not([editable])) {
+    --_widget-border-width: 0px;
+  }
+`;
+
+export const dashboardSectionStyles = [sectionStyles, dashboardWidgetAndSectionStyles];

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

@@ -0,0 +1,13 @@
+/**
+ * @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 type { CSSResult } from 'lit';
+
+export const dashboardSectionStyles: CSSResult;

package/src/styles/vaadin-dashboard-section-core-styles.js

@@ -0,0 +1,53 @@
+/**
+ * @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 { css } from 'lit';
+import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-widget-section-core-styles.js';
+
+const sectionStyles = 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);
+  }
+
+  :host::before {
+    z-index: 2 !important;
+  }
+
+  ::slotted(vaadin-dashboard-widget-wrapper) {
+    display: contents;
+  }
+`;
+
+export const dashboardSectionStyles = [sectionStyles, dashboardWidgetAndSectionStyles];

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

@@ -0,0 +1,13 @@
+/**
+ * @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 type { CSSResult } from 'lit';
+
+export const dashboardWidgetStyles: CSSResult;

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

@@ -0,0 +1,109 @@
+/**
+ * @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/style-props.js';
+import { css } from 'lit';
+import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-widget-section-core-styles.js';
+
+const widgetStyles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    grid-column: var(--_item-column);
+    grid-row: var(--_item-row);
+    position: relative;
+    background: var(--_widget-background);
+    border-radius: var(--_widget-border-radius);
+    box-shadow: var(--_widget-shadow);
+    border-color: var(--_widget-border-color);
+  }
+
+  :host::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-color: inherit;
+    border-width: var(--_widget-border-width);
+    border-style: solid;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host(:not([editable])) [part~='resize-button'] {
+    display: none;
+  }
+
+  [part~='content'] {
+    flex: 1;
+    overflow: hidden;
+    min-height: 1em;
+  }
+
+  [part~='resize-button'] {
+    position: absolute;
+    bottom: 0;
+    inset-inline-end: 0;
+    z-index: 1;
+    overflow: hidden;
+    cursor: nwse-resize;
+    --icon: var(--_vaadin-icon-resize);
+  }
+
+  :host([dir='rtl']) [part~='resize-button'] {
+    cursor: sw-resize;
+  }
+
+  :host([dir='rtl']) [part~='resize-button'] .icon::before {
+    transform: scaleX(-1);
+  }
+
+  /* Widget states */
+
+  :host([editable]) {
+    --vaadin-dashboard-widget-shadow: var(--_widget-editable-shadow);
+  }
+
+  :host([selected]) {
+    --vaadin-dashboard-widget-shadow: var(--_widget-selected-shadow);
+  }
+
+  :host([resizing])::after {
+    content: '';
+    z-index: 2;
+    position: absolute;
+    top: 0;
+    width: var(--_widget-resizer-width, 0);
+    height: var(--_widget-resizer-height, 0);
+    background: color-mix(in srgb, currentColor 5%, var(--_widget-background) 70%);
+    border-color: color-mix(in srgb, currentColor 10%, transparent);
+    border-width: var(--_widget-border-width);
+    border-style: solid;
+    border-radius: inherit;
+  }
+
+  /* Widget parts */
+  header {
+    padding: var(--vaadin-dashboard-widget-header-padding, var(--vaadin-padding-container));
+  }
+
+  :host([editable]) header {
+    padding: var(--vaadin-dashboard-widget-header-padding, var(--vaadin-padding));
+  }
+
+  header:has([part~='title'][hidden]) {
+    padding: 0;
+  }
+`;
+
+export const dashboardWidgetStyles = [widgetStyles, dashboardWidgetAndSectionStyles];