@vaadin/crud 24.8.4 → 25.0.0-alpha10

package/README.md

@@ -28,29 +28,6 @@ Once installed, import the component in your application:
 import '@vaadin/crud';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/crud/vaadin-crud.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/crud/theme/material/vaadin-crud.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/crud/theme/lumo/vaadin-crud.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/crud/src/vaadin-crud.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/crud",
-  "version": "24.8.4",
+  "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",
@@ -31,30 +33,27 @@
     "Vaadin",
     "vaadin-crud",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.8.4",
-    "@vaadin/button": "~24.8.4",
-    "@vaadin/component-base": "~24.8.4",
-    "@vaadin/confirm-dialog": "~24.8.4",
-    "@vaadin/dialog": "~24.8.4",
-    "@vaadin/form-layout": "~24.8.4",
-    "@vaadin/grid": "~24.8.4",
-    "@vaadin/overlay": "~24.8.4",
-    "@vaadin/text-field": "~24.8.4",
-    "@vaadin/vaadin-lumo-styles": "~24.8.4",
-    "@vaadin/vaadin-material-styles": "~24.8.4",
-    "@vaadin/vaadin-themable-mixin": "~24.8.4",
+    "@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": "~24.8.4",
-    "@vaadin/test-runner-commands": "~24.8.4",
-    "@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",
@@ -62,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "849e54e967563080a685965e2dced02060b3ab23"
+  "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);
     }