@vaadin/card 24.8.0-alpha8 → 25.0.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/card",
-  "version": "24.8.0-alpha8",
+  "version": "25.0.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -34,15 +34,14 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "24.8.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha8",
+    "@vaadin/component-base": "25.0.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha8",
-    "@vaadin/test-runner-commands": "24.8.0-alpha8",
+    "@vaadin/chai-plugins": "25.0.0-alpha1",
+    "@vaadin/test-runner-commands": "25.0.0-alpha1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -50,5 +49,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "d914bb8f669d7e3d1981feb8eac05688ab9870b4"
+  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
 }

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

@@ -6,12 +6,13 @@ import { addGlobalThemeStyles, css, registerStyles } from '@vaadin/vaadin-themab
 
 const cardProps = css`
   html {
-    --vaadin-card-background: var(--lumo-shade-5pct);
+    --vaadin-card-background: var(--lumo-contrast-5pct);
     --vaadin-card-border-radius: var(--lumo-border-radius-l);
     --vaadin-card-border-width: 0;
     --vaadin-card-border-color: var(--lumo-contrast-20pct);
     --vaadin-card-padding: var(--lumo-space-m);
     --vaadin-card-gap: var(--lumo-space-m);
+    --vaadin-card-shadow: none;
   }
 `;
 
@@ -21,7 +22,7 @@ const card = css`
   :host {
     background: var(--vaadin-card-background);
     border-radius: var(--vaadin-card-border-radius);
-    box-shadow: var(--vaadin-card-box-shadow);
+    box-shadow: var(--vaadin-card-shadow);
     position: relative;
   }
 
@@ -29,28 +30,27 @@ const card = css`
   :host::before {
     content: '';
     position: absolute;
-    inset: 0;
-    pointer-events: none;
-    border-radius: inherit;
+    inset: var(--_card-border-inset, 0);
+    border-radius: var(--_card-border-pseudo-radius, inherit);
     border: var(--vaadin-card-border, var(--vaadin-card-border-width) solid var(--vaadin-card-border-color));
+    pointer-events: none;
   }
 
   :host([theme~='outlined']) {
     --vaadin-card-border-width: 1px;
-    --vaadin-card-background: transparent;
+    --vaadin-card-background: var(--lumo-base-color);
   }
 
   :host([theme~='elevated']) {
-    --vaadin-card-background: var(--lumo-tint-10pct);
-    --vaadin-card-box-shadow: var(--lumo-box-shadow-xs);
-    /* TODO I would like to update --lumo-box-shadow-xs to this (30pct instead of 50pct): */
-    --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-30pct);
+    --vaadin-card-background: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct)) var(--lumo-base-color);
+    --vaadin-card-shadow: var(--lumo-box-shadow-xs);
+    --vaadin-card-border-width: 1px;
+    --_card-border-inset: calc(-1 * var(--vaadin-card-border-width));
+    --_card-border-pseudo-radius: calc(var(--vaadin-card-border-radius) + var(--vaadin-card-border-width));
   }
 
-  :host([theme~='elevated'][theme~='outlined']) {
-    box-shadow:
-      inset 0 -1px 0 0 var(--lumo-shade-10pct),
-      var(--vaadin-card-box-shadow);
+  :host([theme~='elevated']:not([theme~='outlined'])) {
+    --vaadin-card-border-color: var(--lumo-contrast-10pct);
   }
 
   :host(:where([theme~='stretch-media'])) ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/card",
-  "version": "24.8.0-alpha8",
+  "version": "25.0.0-alpha1",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/card",
-  "version": "24.8.0-alpha8",
+  "version": "25.0.0-alpha1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {

package/theme/material/vaadin-card-styles.d.ts

@@ -1,5 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/shadow.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-declare const card: import("lit").CSSResult;
-export { card };

package/theme/material/vaadin-card-styles.js

@@ -1,63 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/shadow.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import { addGlobalThemeStyles, css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-
-const cardProps = css`
-  html {
-    --vaadin-card-background: var(--material-secondary-background-color);
-    --vaadin-card-border-radius: 8px;
-    --vaadin-card-border-width: 0;
-    --vaadin-card-border-color: var(--material-divider-color);
-    --vaadin-card-padding: 16px;
-    --vaadin-card-gap: 16px;
-  }
-`;
-
-addGlobalThemeStyles('card-props', cardProps);
-
-const card = css`
-  :host {
-    background: var(--vaadin-card-background);
-    border-radius: var(--vaadin-card-border-radius);
-    box-shadow: var(--vaadin-card-box-shadow);
-    position: relative;
-  }
-
-  /* Could be an inset outline on the host as well, but rounded outlines only work since Safari 16.4 */
-  :host::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    border-radius: inherit;
-    border: var(--vaadin-card-border, var(--vaadin-card-border-width) solid var(--vaadin-card-border-color));
-  }
-
-  :host([theme~='outlined']) {
-    --vaadin-card-border-width: 1px;
-    --vaadin-card-background: transparent;
-  }
-
-  :host([theme~='elevated']) {
-    --vaadin-card-background: var(--material-background-color);
-    --vaadin-card-box-shadow: var(--material-shadow-elevation-2dp);
-  }
-
-  :host(:where([theme~='stretch-media'])) ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
-    border-radius: 4px;
-  }
-
-  ::slotted([slot='title']) {
-    font-size: var(--material-h6-font-size);
-    font-weight: 700;
-  }
-
-  ::slotted([slot='subtitle']) {
-    color: var(--material-secondary-text-color);
-  }
-`;
-
-registerStyles('vaadin-card', card, { moduleId: 'material-card' });
-
-export { card };

package/theme/material/vaadin-card.d.ts

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

package/theme/material/vaadin-card.js

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