@vaadin/card 24.8.0-alpha9 → 25.0.0-alpha2

package/README.md

@@ -2,8 +2,6 @@
 
 A visual content container.
 
-> ⚠️ This component is experimental and the API may change. In order to use it, enable the feature flag by setting `window.Vaadin.featureFlags.cardComponent = true`.
-
 [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/card)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/card)](https://www.npmjs.com/package/@vaadin/card)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/card",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -34,21 +34,20 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "24.8.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
+    "@vaadin/component-base": "25.0.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha2",
+    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
 }

package/src/vaadin-card.js

@@ -307,10 +307,6 @@ class Card extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
     };
   }
 
-  static get experimental() {
-    return true;
-  }
-
   /** @protected */
   ready() {
     super.ready();

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-alpha9",
+  "version": "25.0.0-alpha2",
   "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-alpha9",
+  "version": "25.0.0-alpha2",
   "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';