@vaadin/crud 25.0.0-alpha2 → 25.0.0-alpha20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha20",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -35,29 +34,29 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha2",
-    "@vaadin/button": "25.0.0-alpha2",
-    "@vaadin/component-base": "25.0.0-alpha2",
-    "@vaadin/confirm-dialog": "25.0.0-alpha2",
-    "@vaadin/dialog": "25.0.0-alpha2",
-    "@vaadin/form-layout": "25.0.0-alpha2",
-    "@vaadin/grid": "25.0.0-alpha2",
-    "@vaadin/overlay": "25.0.0-alpha2",
-    "@vaadin/text-field": "25.0.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
+    "@vaadin/a11y-base": "25.0.0-alpha20",
+    "@vaadin/button": "25.0.0-alpha20",
+    "@vaadin/component-base": "25.0.0-alpha20",
+    "@vaadin/confirm-dialog": "25.0.0-alpha20",
+    "@vaadin/dialog": "25.0.0-alpha20",
+    "@vaadin/form-layout": "25.0.0-alpha20",
+    "@vaadin/grid": "25.0.0-alpha20",
+    "@vaadin/overlay": "25.0.0-alpha20",
+    "@vaadin/text-field": "25.0.0-alpha20",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha20",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha2",
-    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/chai-plugins": "25.0.0-alpha20",
+    "@vaadin/test-runner-commands": "25.0.0-alpha20",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha20",
+    "sinon": "^21.0.0"
   },
   "cvdlName": "vaadin-crud",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
+  "gitHead": "c948aae591a30b432f3784000d4677674cae56e0"
 }

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,165 @@
+/**
+ * @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 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-secondary));
+    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-secondary));
+  }
+
+  :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-secondary));
+  }
+
+  :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-secondary));
+    display: flex;
+    flex-shrink: 0;
+    justify-content: flex-end;
+    padding: var(--vaadin-crud-toolbar-padding, var(--vaadin-padding-m));
+  }
+
+  :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-text-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-m));
+  }
+
+  ::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-m));
+  }
+
+  [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-secondary));
+    display: flex;
+    flex: none;
+    gap: var(--vaadin-crud-footer-gap, var(--vaadin-gap-s));
+    padding: var(--vaadin-crud-footer-padding, var(--vaadin-padding-m));
+  }
+
+  ::slotted([slot='delete-button']) {
+    margin-inline-start: auto;
+  }
+`;

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,50 @@
+/**
+ * @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';
+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-text-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-l));
+  }
+
+  ::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-l));
+    padding-top: 0;
+  }
+
+  ::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-secondary));
+  }
+`;
+
+export const crudDialogOverlayStyles = [...dialogOverlayStyles, 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/styles/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-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/styles/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/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

@@ -12,15 +12,13 @@ import { css, html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 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-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
@@ -32,22 +30,34 @@ 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 dialog as focus trap root
+   * @protected
+   * @override
+   */
+  get _focusTrapRoot() {
+    // Do not use `owner` since that points to `vaadin-crud`
+    return this.getRootNode().host;
   }
 
   /** @protected */
   render() {
     return html`
       <div part="backdrop" id="backdrop" ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay" tabindex="0">
+      <div part="overlay" id="overlay">
         <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>
@@ -80,28 +90,40 @@ defineCustomElement(CrudDialogOverlay);
  * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
  * @private
  */
-class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) {
+class CrudDialog extends DialogBaseMixin(ThemePropertyMixin(PolylitMixin(LitElement))) {
   static get is() {
     return 'vaadin-crud-dialog';
   }
 
   static get styles() {
     return css`
-      :host {
-        display: none;
+      :host([opened]),
+      :host([opening]),
+      :host([closing]) {
+        display: block !important;
+        position: absolute;
+      }
+
+      :host,
+      :host([hidden]) {
+        display: none !important;
+      }
+
+      :host(:focus-visible) ::part(overlay) {
+        outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
       }
     `;
   }
 
   static get properties() {
     return {
-      ariaLabel: {
-        type: String,
-      },
-
       fullscreen: {
         type: Boolean,
       },
+
+      crudElement: {
+        type: Object,
+      },
     };
   }
 
@@ -110,20 +132,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);

package/src/vaadin-crud-edit.js

@@ -8,9 +8,10 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { css, html } from 'lit';
+import { html } from 'lit';
 import { Button } from '@vaadin/button/src/vaadin-button.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { crudEditStyles } from './styles/vaadin-crud-edit-base-styles.js';
 
 /**
  * `<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides
@@ -21,8 +22,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
  * a `<vaadin-crud>` to enable editing.
  *
  * @customElement
- * @extends HTMLElement
- * @mixes ThemableMixin
+ * @extends Button
  */
 class CrudEdit extends Button {
   static get is() {
@@ -30,14 +30,7 @@ class CrudEdit extends Button {
   }
 
   static get styles() {
-    return [
-      super.styles,
-      css`
-        :host {
-          display: block;
-        }
-      `,
-    ];
+    return [super.styles, crudEditStyles];
   }
 
   /** @protected */

package/src/vaadin-crud-grid.js

@@ -15,6 +15,7 @@ import '@vaadin/grid/src/vaadin-grid-sorter.js';
 import './vaadin-crud-edit-column.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { Grid } from '@vaadin/grid/src/vaadin-grid.js';
+import { crudGridStyles } from './styles/vaadin-crud-grid-base-styles.js';
 import { CrudGridMixin } from './vaadin-crud-grid-mixin.js';
 
 /**
@@ -28,6 +29,10 @@ class CrudGrid extends CrudGridMixin(Grid) {
   static get is() {
     return 'vaadin-crud-grid';
   }
+
+  static get styles() {
+    return crudGridStyles;
+  }
 }
 
 defineCustomElement(CrudGrid);

package/src/vaadin-crud-mixin.d.ts

@@ -232,7 +232,7 @@ export declare class CrudMixinClass<Item> {
    *
    * The object has the following JSON structure and default values:
    *
-   * ```
+   * ```js
    * {
    *   newItem: 'New item',
    *   editItem: 'Edit item',