@vaadin/dashboard 25.0.0-alpha9 → 25.0.0-beta1

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

@@ -1,85 +0,0 @@
-/**
- * @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-core-styles.d.ts

@@ -1,13 +0,0 @@
-/**
- * @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

@@ -1,53 +0,0 @@
-/**
- * @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-core-styles.d.ts

@@ -1,13 +0,0 @@
-/**
- * @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-core-styles.js

@@ -1,57 +0,0 @@
-/**
- * @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 widgetStyles = 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;
-    min-height: 1rem;
-  }
-
-  [part~='resize-button'] {
-    position: absolute;
-    bottom: 0;
-    inset-inline-end: 0;
-    z-index: 1;
-    overflow: hidden;
-  }
-
-  :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;
-  }
-`;
-
-export const dashboardWidgetStyles = [widgetStyles, dashboardWidgetAndSectionStyles];

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

@@ -1,151 +0,0 @@
-/**
- * @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 dashboardWidgetAndSectionStyles = css`
-  :host {
-    box-sizing: border-box;
-  }
-
-  :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;
-    overflow: hidden;
-  }
-
-  vaadin-dashboard-button {
-    z-index: 1;
-  }
-
-  #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;
-  }
-
-  /* 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%);
-  }
-
-  [part~='move-forward-button'] {
-    inset-inline-end: 0;
-    transform: translateY(-50%);
-  }
-
-  [part~='move-apply-button'] {
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  :host([first-child]) [part~='move-backward-button'],
-  :host([last-child]) [part~='move-forward-button'] {
-    display: none;
-  }
-
-  /* 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-apply-button'] {
-    left: 50%;
-    top: 50%;
-
-    transform: translate(-50%, -50%);
-  }
-`;

package/theme/lumo/vaadin-dashboard-button-styles.d.ts

@@ -1,2 +0,0 @@
-import { button } from '@vaadin/button/theme/lumo/vaadin-button-styles.js';
-export { button };

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

@@ -1,8 +0,0 @@
-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 };

package/theme/lumo/vaadin-dashboard-button.d.ts

@@ -1 +0,0 @@
-import './vaadin-dashboard-button-styles.js';

package/theme/lumo/vaadin-dashboard-button.js

@@ -1 +0,0 @@
-import './vaadin-dashboard-button-styles.js';

package/theme/lumo/vaadin-dashboard-layout-styles.d.ts

@@ -1 +0,0 @@
-export declare const dashboardLayoutStyles: import("lit").CSSResult;

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

@@ -1,28 +0,0 @@
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-export const dashboardLayoutStyles = css`
-  :host([theme~='shaded-background']) {
-    background: var(--lumo-shade-5pct);
-  }
-
-  :host([theme~='elevated-widgets']) {
-    --vaadin-dashboard-widget-shadow: var(--lumo-box-shadow-xs);
-    --vaadin-dashboard-widget-border-color: var(--lumo-contrast-10pct);
-    --vaadin-dashboard-widget-background: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct))
-      var(--lumo-base-color);
-  }
-
-  :host([theme~='flat-widgets']) {
-    --vaadin-dashboard-widget-background: var(--lumo-contrast-5pct);
-    --vaadin-dashboard-widget-border-color: transparent;
-  }
-
-  #grid {
-    --_default-gap: var(--lumo-space-m);
-    --_default-padding: var(--lumo-space-m);
-  }
-`;
-
-registerStyles('vaadin-dashboard-layout', [dashboardLayoutStyles], {
-  moduleId: 'lumo-dashboard-layout',
-});

package/theme/lumo/vaadin-dashboard-layout.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-dashboard-layout-styles.js';
-import '../../src/vaadin-dashboard-layout.js';

package/theme/lumo/vaadin-dashboard-layout.js

@@ -1,2 +0,0 @@
-import './vaadin-dashboard-layout-styles.js';
-import '../../src/vaadin-dashboard-layout.js';

package/theme/lumo/vaadin-dashboard-section-styles.d.ts

@@ -1,5 +0,0 @@
-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';

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

@@ -1,83 +0,0 @@
-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`
-  /* stylelint-disable rule-empty-line-before */
-
-  :host {
-    --_section-outline-offset: calc(min(var(--_gap), var(--_padding)) / 3);
-    --_focus-ring-offset: calc((var(--_section-outline-offset) - var(--_focus-ring-width)));
-    border-radius: var(--lumo-border-radius-l);
-  }
-
-  header {
-    margin-bottom: calc(-1 * var(--_section-outline-offset));
-    line-height: var(--lumo-line-height-s);
-    padding-inline: var(--lumo-space-s);
-    min-height: var(--lumo-size-l);
-    align-items: center;
-  }
-
-  [part='title'] {
-    font-size: var(--lumo-font-size-xl);
-    font-weight: 600;
-    white-space: nowrap;
-    line-height: var(--lumo-line-height-m);
-  }
-
-  /* Section states */
-
-  :host([editable]) {
-    outline: 1px solid var(--lumo-contrast-10pct);
-    outline-offset: calc(var(--_section-outline-offset) - 1px);
-    background: var(--lumo-contrast-5pct);
-    box-shadow: 0 0 0 var(--_section-outline-offset) var(--lumo-contrast-5pct);
-  }
-  :host([editable]) header {
-    padding-inline: var(--lumo-space-xs);
-  }
-
-  :host([focused])::after {
-    content: '';
-    display: block;
-    position: absolute;
-    inset: 0;
-    border-radius: var(--lumo-border-radius-l);
-    z-index: 9;
-    outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
-    outline-offset: var(--_focus-ring-offset);
-  }
-
-  :host([selected]) {
-    background: var(--lumo-primary-color-10pct);
-    box-shadow: 0 0 0 var(--_section-outline-offset) var(--lumo-primary-color-10pct);
-  }
-  :host([selected]:not([focused])) {
-    outline-color: var(--lumo-primary-color-50pct);
-  }
-
-  :host([move-mode]) ::slotted(*) {
-    --_widget-opacity: 0.3;
-    --_widget-filter: blur(10px);
-  }
-
-  /* Accessible move mode controls */
-
-  [part~='move-backward-button'] {
-    inset-inline-start: calc(-1 * var(--_section-outline-offset));
-  }
-
-  [part~='move-forward-button'] {
-    inset-inline-end: calc(-1 * var(--_section-outline-offset));
-    transform: translateY(-50%);
-  }
-`;
-
-registerStyles('vaadin-dashboard-section', [dashboardWidgetAndSection, section], {
-  moduleId: 'lumo-dashboard-section',
-});

package/theme/lumo/vaadin-dashboard-section.d.ts

@@ -1,3 +0,0 @@
-import './vaadin-dashboard-section-styles.js';
-import './vaadin-dashboard-button.js';
-import '../../src/vaadin-dashboard-section.js';

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

@@ -1,3 +0,0 @@
-import './vaadin-dashboard-section-styles.js';
-import './vaadin-dashboard-button.js';
-import '../../src/vaadin-dashboard-section.js';

package/theme/lumo/vaadin-dashboard-styles.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,16 +0,0 @@
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { dashboardLayoutStyles } from './vaadin-dashboard-layout-styles.js';
-
-const dashboard = css`
-  :host {
-    --_widget-opacity: 1;
-  }
-
-  :host([item-selected]) {
-    --_widget-opacity: 0.7;
-  }
-`;
-
-registerStyles('vaadin-dashboard', [dashboardLayoutStyles, dashboard], {
-  moduleId: 'lumo-dashboard',
-});

package/theme/lumo/vaadin-dashboard-widget-styles.d.ts

@@ -1,9 +0,0 @@
-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';
-declare const dashboardWidgetAndSection: import("lit").CSSResult;
-declare const dashboardWidget: import("lit").CSSResult;
-export { dashboardWidget, dashboardWidgetAndSection };