@vaadin/crud 25.0.0-alpha1 → 25.0.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "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",
@@ -35,23 +37,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha1",
-    "@vaadin/button": "25.0.0-alpha1",
-    "@vaadin/component-base": "25.0.0-alpha1",
-    "@vaadin/confirm-dialog": "25.0.0-alpha1",
-    "@vaadin/dialog": "25.0.0-alpha1",
-    "@vaadin/form-layout": "25.0.0-alpha1",
-    "@vaadin/grid": "25.0.0-alpha1",
-    "@vaadin/overlay": "25.0.0-alpha1",
-    "@vaadin/text-field": "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/confirm-dialog": "25.0.0-alpha10",
+    "@vaadin/dialog": "25.0.0-alpha10",
+    "@vaadin/form-layout": "25.0.0-alpha10",
+    "@vaadin/grid": "25.0.0-alpha10",
+    "@vaadin/overlay": "25.0.0-alpha10",
+    "@vaadin/text-field": "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",
     "sinon": "^18.0.0"
   },
   "cvdlName": "vaadin-crud",
@@ -59,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
+  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
 }

package/src/{vaadin-crud-styles.d.ts → styles/vaadin-crud-base-styles.d.ts}

@@ -11,5 +11,3 @@
 import type { CSSResult } from 'lit';
 
 export const crudStyles: CSSResult;
-
-export const crudDialogOverlayStyles: CSSResult;

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

@@ -0,0 +1,162 @@
+/**
+ * @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';
+
+export const crudStyles = css`
+  :host {
+    --vaadin-grid-border-width: 0px;
+    --vaadin-grid-border-radius: var(--vaadin-crud-border-radius, var(--vaadin-radius-l));
+    --vaadin-crud-editor-max-height: 40%;
+    --vaadin-crud-editor-max-width: 40%;
+    border: var(--vaadin-crud-border-width, 1px) solid var(--vaadin-crud-border-color, var(--vaadin-border-color));
+    border-radius: var(--vaadin-crud-border-radius, var(--vaadin-radius-l));
+    height: 400px;
+    width: 100%;
+    background: var(--vaadin-crud-background, var(--vaadin-background-color));
+  }
+
+  :host,
+  #main {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  #main {
+    flex: 1 1 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  ::slotted(vaadin-crud-grid) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host([hidden]),
+  [hidden] {
+    display: none !important;
+  }
+
+  #container {
+    display: flex;
+    height: 100%;
+  }
+
+  :host([editor-position='bottom']) #container {
+    flex-direction: column;
+  }
+
+  :host([editor-position='aside'][editor-opened]) #main {
+    border-inline-end: var(--vaadin-crud-border-width, 1px) solid
+      var(--vaadin-crud-border-color, var(--vaadin-border-color));
+  }
+
+  :host([editor-position='aside'][editor-opened]) ::slotted(vaadin-crud-grid) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host([editor-position='aside'][editor-opened]) :is(#container, [part='editor']) {
+    border-start-end-radius: inherit;
+    border-end-end-radius: inherit;
+  }
+
+  :host([editor-position='bottom'][editor-opened]) #main {
+    border-bottom: var(--vaadin-crud-border-width, 1px) solid
+      var(--vaadin-crud-border-color, var(--vaadin-border-color));
+  }
+
+  :host([editor-position='bottom'][editor-opened]) :is(#container, [part='editor']) {
+    border-end-start-radius: inherit;
+    border-end-end-radius: inherit;
+  }
+
+  [part='toolbar'] {
+    align-items: baseline;
+    background: var(--vaadin-crud-toolbar-background, transparent);
+    border-top: var(--vaadin-crud-border-width, 1px) solid var(--vaadin-crud-border-color, var(--vaadin-border-color));
+    display: flex;
+    flex-shrink: 0;
+    justify-content: flex-end;
+    padding: var(--vaadin-crud-toolbar-padding, var(--vaadin-padding));
+  }
+
+  :host([no-toolbar]) [part='toolbar'] {
+    display: none;
+  }
+
+  [part='editor'] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    z-index: 1;
+  }
+
+  [part='editor']:focus-visible {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+  }
+
+  :host(:not([editor-position=''])[editor-opened]:not([fullscreen])) [part='editor'] {
+    flex: 1 0 100%;
+  }
+
+  :host([editor-position='bottom'][editor-opened]:not([fullscreen])) [part='editor'] {
+    max-height: var(--vaadin-crud-editor-max-height);
+  }
+
+  :host([editor-position='aside'][editor-opened]:not([fullscreen])) [part='editor'] {
+    max-width: var(--vaadin-crud-editor-max-width);
+    min-width: 300px;
+  }
+
+  [part='scroller'] {
+    display: flex;
+    flex: auto;
+    flex-direction: column;
+    overflow: auto;
+  }
+
+  [part='header'] {
+    color: var(--vaadin-crud-header-color, var(--vaadin-color));
+    font-size: var(--vaadin-crud-header-font-size, 1em);
+    font-weight: var(--vaadin-crud-header-font-weight, 600);
+    line-height: var(--vaadin-crud-header-line-height, inherit);
+    padding: var(--vaadin-crud-header-padding, var(--vaadin-padding));
+  }
+
+  ::slotted([slot='header']) {
+    color: inherit !important;
+    display: contents;
+    font: inherit !important;
+    overflow-wrap: anywhere;
+  }
+
+  ::slotted([slot='form']) {
+    padding: var(--vaadin-crud-form-padding, var(--vaadin-padding));
+  }
+
+  [part='footer'] {
+    background: var(--vaadin-crud-footer-background, transparent);
+    border-top: var(--vaadin-crud-border-width, 1px) solid var(--vaadin-crud-border-color, var(--vaadin-border-color));
+    display: flex;
+    flex: none;
+    gap: var(--vaadin-crud-footer-gap, var(--vaadin-gap-container-inline));
+    padding: var(--vaadin-crud-footer-padding, var(--vaadin-padding));
+  }
+
+  ::slotted([slot='delete-button']) {
+    margin-inline-start: auto;
+  }
+`;

package/src/styles/vaadin-crud-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 crudStyles: CSSResult;

package/src/{vaadin-crud-styles.js → styles/vaadin-crud-core-styles.js}

@@ -8,7 +8,7 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from 'lit';
 
 export const crudStyles = css`
   :host {
@@ -91,35 +91,3 @@ export const crudStyles = css`
     flex-direction: row-reverse;
   }
 `;
-
-export const crudDialogOverlayStyles = css`
-  [part='overlay'] {
-    max-width: 54em;
-    min-width: 20em;
-  }
-
-  [part='footer'] {
-    justify-content: flex-start;
-    flex-direction: row-reverse;
-  }
-
-  /* Make buttons clickable */
-  [part='footer'] ::slotted(:not([disabled])) {
-    pointer-events: all;
-  }
-
-  :host([fullscreen]) {
-    inset: 0;
-    padding: 0;
-  }
-
-  :host([fullscreen]) [part='overlay'] {
-    height: 100vh;
-    width: 100vw;
-    border-radius: 0 !important;
-  }
-
-  :host([fullscreen]) [part='content'] {
-    flex: 1;
-  }
-`;

package/src/styles/vaadin-crud-dialog-overlay-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 declare const crudDialogOverlayStyles: CSSResult;

package/src/styles/vaadin-crud-dialog-overlay-base-styles.js

@@ -0,0 +1,48 @@
+/**
+ * @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 { dialogOverlayStyles } from '@vaadin/dialog/src/styles/vaadin-dialog-overlay-base-styles.js';
+
+const crudDialogOverlay = css`
+  [part='header'] {
+    color: var(--vaadin-crud-dialog-header-color, var(--vaadin-color));
+    font-size: var(--vaadin-crud-dialog-header-font-size, 1em);
+    font-weight: var(--vaadin-crud-dialog-header-font-weight, 600);
+    line-height: var(--vaadin-crud-dialog-header-line-height, inherit);
+    padding: var(--vaadin-crud-header-padding, var(--vaadin-padding));
+  }
+
+  ::slotted([slot='header']) {
+    color: inherit !important;
+    display: contents;
+    font: inherit !important;
+    overflow-wrap: anywhere;
+  }
+
+  :host(:is(*, #id)) [part='content'] {
+    overflow: auto;
+    overscroll-behavior: contain;
+    padding: var(--vaadin-crud-form-padding, var(--vaadin-padding));
+  }
+
+  ::slotted([slot='form']) {
+    --vaadin-crud-form-padding: 0;
+  }
+
+  [part='footer'] {
+    justify-content: normal;
+    background: var(--vaadin-crud-footer-background, transparent);
+    border-top: var(--vaadin-crud-border-width, 1px) solid var(--vaadin-crud-border-color, var(--vaadin-border-color));
+  }
+`;
+
+export const crudDialogOverlayStyles = [...dialogOverlayStyles, crudDialogOverlay];

package/src/styles/vaadin-crud-dialog-overlay-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 declare const crudDialogOverlayStyles: CSSResult;

package/src/styles/vaadin-crud-dialog-overlay-core-styles.js

@@ -0,0 +1,54 @@
+/**
+ * @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 { dialogOverlayBase } from '@vaadin/dialog/src/styles/vaadin-dialog-overlay-core-styles.js';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
+
+const crudDialogOverlay = css`
+  [part='overlay'] {
+    max-width: 54em;
+    min-width: 20em;
+    display: flex;
+  }
+
+  .resizer-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  [part='footer'] {
+    justify-content: flex-start;
+    flex-direction: row-reverse;
+  }
+
+  /* Make buttons clickable */
+  [part='footer'] ::slotted(:not([disabled])) {
+    pointer-events: all;
+  }
+
+  :host([fullscreen]) {
+    inset: 0;
+    padding: 0;
+  }
+
+  :host([fullscreen]) [part='overlay'] {
+    height: 100vh;
+    width: 100vw;
+    border-radius: 0 !important;
+  }
+
+  :host([fullscreen]) [part='content'] {
+    flex: 1;
+  }
+`;
+
+export const crudDialogOverlayStyles = [overlayStyles, dialogOverlayBase, crudDialogOverlay];

package/src/styles/vaadin-crud-edit-base-styles.js

@@ -0,0 +1,28 @@
+/**
+ * @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';
+
+export const crudEditStyles = css`
+  [part='icon'] {
+    background: currentColor;
+    display: block;
+    height: var(--vaadin-icon-size, 1lh);
+    mask-image: var(--_vaadin-icon-edit);
+    width: var(--vaadin-icon-size, 1lh);
+  }
+
+  @media (forced-colors: active) {
+    [part='icon'] {
+      background: CanvasText;
+    }
+  }
+`;

package/src/styles/vaadin-crud-edit-core-styles.js

@@ -0,0 +1,17 @@
+/**
+ * @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 crudEditStyles = css`
+  :host {
+    display: block;
+  }
+`;

package/src/styles/vaadin-crud-grid-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 crudGridStyles: CSSResult;

package/src/styles/vaadin-crud-grid-base-styles.js

@@ -0,0 +1,21 @@
+/**
+ * @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 { gridStyles } from '@vaadin/grid/src/styles/vaadin-grid-base-styles.js';
+
+const crudGrid = css`
+  #scroller {
+    border-radius: inherit;
+  }
+`;
+
+export const crudGridStyles = [gridStyles, crudGrid];

package/src/styles/vaadin-crud-grid-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 crudGridStyles: CSSResult;

package/src/styles/vaadin-crud-grid-core-styles.js

@@ -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 { gridStyles } from '@vaadin/grid/src/styles/vaadin-grid-core-styles.js';
+
+export const crudGridStyles = [gridStyles];

package/src/vaadin-crud-controllers.js

@@ -42,7 +42,7 @@ export class ButtonSlotController extends SlotController {
     }
 
     // Respect default theme attribute set by the Flow counterpart
-    if (node === this.defaultNode && !node.hasAttribute('theme')) {
+    if (node === this.defaultNode && this.theme && !node.hasAttribute('theme')) {
       node.setAttribute('theme', this.theme);
     }
 

package/src/vaadin-crud-dialog.js

@@ -15,12 +15,11 @@ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
-import { dialogOverlay, resizableOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import { crudDialogOverlayStyles } from './vaadin-crud-styles.js';
+import { crudDialogOverlayStyles } from './styles/vaadin-crud-dialog-overlay-core-styles.js';
 
 /**
  * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
@@ -32,13 +31,22 @@ import { crudDialogOverlayStyles } from './vaadin-crud-styles.js';
  * @mixes ThemableMixin
  * @private
  */
-class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-crud-dialog-overlay';
   }
 
   static get styles() {
-    return [overlayStyles, dialogOverlay, resizableOverlay, crudDialogOverlayStyles];
+    return crudDialogOverlayStyles;
+  }
+
+  /**
+   * Override method from OverlayFocusMixin to use the owner (CRUD element) as modal root
+   * @protected
+   * @override
+   */
+  get _modalRoot() {
+    return this.owner;
   }
 
   /** @protected */
@@ -47,7 +55,9 @@ class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin
       <div part="backdrop" id="backdrop" ?hidden="${!this.withBackdrop}"></div>
       <div part="overlay" id="overlay" tabindex="0">
         <section id="resizerContainer" class="resizer-container">
-          <header part="header"><slot name="header"></slot></header>
+          <header part="header">
+            <slot name="header"></slot>
+          </header>
           <div part="content" id="content">
             <slot name="form"></slot>
           </div>
@@ -87,21 +97,28 @@ class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(Po
 
   static get styles() {
     return css`
-      :host {
-        display: none;
+      :host([opened]),
+      :host([opening]),
+      :host([closing]) {
+        display: contents !important;
+      }
+
+      :host,
+      :host([hidden]) {
+        display: none !important;
       }
     `;
   }
 
   static get properties() {
     return {
-      ariaLabel: {
-        type: String,
-      },
-
       fullscreen: {
         type: Boolean,
       },
+
+      crudElement: {
+        type: Object,
+      },
     };
   }
 
@@ -110,20 +127,33 @@ class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(Po
     return html`
       <vaadin-crud-dialog-overlay
         id="overlay"
+        .owner="${this.crudElement}"
         .opened="${this.opened}"
-        aria-label="${ifDefined(this.ariaLabel)}"
         @opened-changed="${this._onOverlayOpened}"
         @mousedown="${this._bringOverlayToFront}"
         @touchstart="${this._bringOverlayToFront}"
+        @vaadin-overlay-outside-click="${this.__cancel}"
+        @vaadin-overlay-escape-press="${this.__cancel}"
         theme="${ifDefined(this._theme)}"
         .modeless="${this.modeless}"
         .withBackdrop="${!this.modeless}"
         ?fullscreen="${this.fullscreen}"
-        role="dialog"
         focus-trap
-      ></vaadin-crud-dialog-overlay>
+        exportparts="backdrop, overlay, header, content, footer"
+      >
+        <slot name="header" slot="header"></slot>
+        <slot name="form" slot="form"></slot>
+        <slot name="save-button" slot="save-button"></slot>
+        <slot name="cancel-button" slot="cancel-button"></slot>
+        <slot name="delete-button" slot="delete-button"></slot>
+      </vaadin-crud-dialog-overlay>
     `;
   }
+
+  /** @private **/
+  __cancel() {
+    this.dispatchEvent(new CustomEvent('cancel'));
+  }
 }
 
 defineCustomElement(CrudDialog);