@vaadin/card 25.0.0-alpha9 → 25.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/card",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -36,20 +33,21 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "25.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
+    "@vaadin/component-base": "25.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha9",
-    "@vaadin/test-runner-commands": "25.0.0-alpha9",
+    "@vaadin/avatar": "25.0.0-beta1",
+    "@vaadin/chai-plugins": "25.0.0-beta1",
+    "@vaadin/test-runner-commands": "25.0.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
+  "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
 }

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

@@ -3,19 +3,19 @@
  * Copyright (c) 2024 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const cardStyles = css`
   :host {
     --_content: 0;
     --_footer: 0;
-    --_gap: var(--vaadin-card-gap, var(--vaadin-gap-container-block) var(--vaadin-gap-container-inline));
+    --_gap: var(--vaadin-card-gap, var(--vaadin-gap-m));
     --_header: max(var(--_header-prefix), var(--_title), var(--_subtitle), var(--_header-suffix));
     --_header-prefix: 0;
     --_header-suffix: 0;
     --_media: 0;
-    --_padding: var(--vaadin-card-padding, var(--vaadin-padding));
+    --_padding: var(--vaadin-card-padding, var(--vaadin-padding-m));
     --_subtitle: 0;
     --_title: 0;
     background: var(--vaadin-card-background, var(--vaadin-background-container));
@@ -31,7 +31,8 @@ export const cardStyles = css`
 
   /* Could be an inset outline on the host as well, but let's reserve that for a potential focus outline */
   :host::before {
-    border: var(--vaadin-card-border-width, 0) solid var(--vaadin-card-border-color, var(--vaadin-border-color));
+    border: var(--vaadin-card-border-width, 0) solid
+      var(--vaadin-card-border-color, var(--vaadin-border-color-secondary));
     border-radius: inherit;
     content: '';
     inset: 0;
@@ -133,7 +134,7 @@ export const cardStyles = css`
   }
 
   ::slotted([slot='title']) {
-    color: var(--vaadin-card-title-color, var(--vaadin-color)) !important;
+    color: var(--vaadin-card-title-color, var(--vaadin-text-color)) !important;
     font-size: var(--vaadin-card-title-font-size, inherit) !important;
     font-weight: var(--vaadin-card-title-font-weight, 500) !important;
     line-height: var(--vaadin-card-title-line-height, inherit) !important;
@@ -141,7 +142,7 @@ export const cardStyles = css`
   }
 
   ::slotted([slot='subtitle']) {
-    color: var(--vaadin-card-subtitle-color, var(--vaadin-color-subtle)) !important;
+    color: var(--vaadin-card-subtitle-color, var(--vaadin-text-color-secondary)) !important;
     font-size: var(--vaadin-card-subtitle-font-size, inherit) !important;
     font-weight: var(--vaadin-card-subtitle-font-weight, 400) !important;
     line-height: var(--vaadin-card-subtitle-line-height, inherit) !important;

package/src/vaadin-card.js

@@ -10,7 +10,7 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { cardStyles } from './styles/vaadin-card-core-styles.js';
+import { cardStyles } from './styles/vaadin-card-base-styles.js';
 
 /**
  * `<vaadin-card>` is a versatile container for grouping related content and actions.

package/vaadin-card.js

@@ -1,3 +1,3 @@
-import './theme/lumo/vaadin-card.js';
+import './src/vaadin-card.js';
 
 export * from './src/vaadin-card.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/card",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "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": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {

package/src/styles/vaadin-card-core-styles.d.ts

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2024 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { CSSResult } from 'lit';
-
-export const cardStyles: CSSResult;

package/src/styles/vaadin-card-core-styles.js

@@ -1,228 +0,0 @@
-/**
- * @license
- * Copyright (c) 2024 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from 'lit';
-
-export const cardStyles = css`
-  :host {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    padding: var(--_padding);
-    gap: var(--_gap);
-    --_padding: var(--vaadin-card-padding, 1em);
-    --_gap: var(--vaadin-card-gap, 1em);
-    --_media: 0;
-    --_title: 0;
-    --_subtitle: 0;
-    --_header: max(var(--_header-prefix), var(--_title), var(--_subtitle), var(--_header-suffix));
-    --_header-prefix: 0;
-    --_header-suffix: 0;
-    --_content: 0;
-    --_footer: 0;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  :host(:not([theme~='horizontal'])) {
-    justify-content: space-between;
-  }
-
-  :host([_m]) {
-    --_media: 1;
-  }
-
-  :host([_t]) {
-    --_title: 1;
-  }
-
-  :host([_st]) {
-    --_subtitle: 1;
-  }
-
-  :host([_h]) {
-    --_header: 1;
-    --_title: 0;
-    --_subtitle: 0;
-  }
-
-  :host([_hp]) {
-    --_header-prefix: 1;
-  }
-
-  :host([_hs]) {
-    --_header-suffix: 1;
-  }
-
-  :host([_c]) {
-    --_content: 1;
-  }
-
-  :host([_f]) {
-    --_footer: 1;
-  }
-
-  [part='media'],
-  [part='header'],
-  [part='content'],
-  [part='footer'] {
-    display: none;
-  }
-
-  :host([_m]) [part='media'],
-  :host([_c]) [part='content'] {
-    display: block;
-  }
-
-  :host([_f]) [part='footer'] {
-    display: flex;
-    gap: var(--_gap);
-  }
-
-  :host(:is([_h], [_t], [_st], [_hp], [_hs])) [part='header'] {
-    display: grid;
-    align-items: center;
-    gap: var(--_gap);
-    row-gap: 0;
-  }
-
-  :host([_hs]) [part='header'] {
-    grid-template-columns: 1fr auto;
-  }
-
-  :host([_hp]) [part='header'] {
-    grid-template-columns: repeat(var(--_header-prefix), auto) 1fr;
-  }
-
-  slot {
-    border-radius: inherit;
-  }
-
-  ::slotted([slot='header-prefix']) {
-    grid-column: 1;
-    grid-row: 1 / span calc(var(--_title) + var(--_subtitle));
-  }
-
-  ::slotted([slot='header']),
-  ::slotted([slot='title']) {
-    grid-column: calc(1 + var(--_header-prefix));
-    grid-row: 1;
-  }
-
-  ::slotted([slot='subtitle']) {
-    grid-column: calc(1 + var(--_header-prefix));
-    grid-row: calc(1 + var(--_title));
-  }
-
-  ::slotted([slot='header-suffix']) {
-    grid-column: calc(2 + var(--_header-prefix));
-    grid-row: 1 / span calc(var(--_title) + var(--_subtitle));
-  }
-
-  /* Horizontal */
-  :host([theme~='horizontal']) {
-    display: grid;
-    grid-template-columns: repeat(var(--_media), minmax(auto, max-content)) 1fr;
-    align-items: start;
-  }
-
-  :host([theme~='horizontal'][_f]) {
-    grid-template-rows: 1fr auto;
-  }
-
-  :host([theme~='horizontal'][_c]) {
-    grid-template-rows: repeat(var(--_header), auto) 1fr;
-  }
-
-  [part='media'] {
-    grid-column: 1;
-    grid-row: 1 / span calc(var(--_header) + var(--_content) + var(--_footer));
-    align-self: stretch;
-    border-radius: inherit;
-  }
-
-  [part='header'] {
-    margin-bottom: auto;
-    grid-column: calc(1 + var(--_media));
-    grid-row: 1;
-  }
-
-  [part='content'] {
-    grid-column: calc(1 + var(--_media));
-    grid-row: calc(1 + var(--_header));
-    flex: auto;
-    min-height: 0;
-  }
-
-  [part='footer'] {
-    grid-column: calc(1 + var(--_media));
-    grid-row: calc(1 + var(--_header) + var(--_content));
-    border-radius: inherit;
-  }
-
-  :host([theme~='horizontal']) [part='footer'] {
-    align-self: end;
-  }
-
-  :host(:not([theme~='horizontal'])) ::slotted([slot='media']:is(img, video, svg)) {
-    max-width: 100%;
-  }
-
-  ::slotted([slot='media']) {
-    vertical-align: middle;
-  }
-
-  :host(:is([theme~='cover-media'], [theme~='stretch-media']))
-    ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
-    width: 100%;
-    height: auto;
-    aspect-ratio: var(--vaadin-card-media-aspect-ratio, 16/9);
-    object-fit: cover;
-    /* Fixes an issue where an icon overflows the card boundaries on Firefox: https://github.com/vaadin/web-components/issues/8641 */
-    overflow: hidden;
-  }
-
-  :host([theme~='horizontal']:is([theme~='cover-media'], [theme~='stretch-media'])) {
-    grid-template-columns: repeat(var(--_media), minmax(auto, 0.5fr)) 1fr;
-  }
-
-  :host([theme~='horizontal']:is([theme~='cover-media'], [theme~='stretch-media']))
-    ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
-    height: 100%;
-    aspect-ratio: auto;
-  }
-
-  :host([theme~='cover-media']) ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
-    margin-top: calc(var(--_padding) * -1);
-    margin-inline: calc(var(--_padding) * -1);
-    width: calc(100% + var(--_padding) * 2);
-    max-width: none;
-    border-radius: inherit;
-    border-end-end-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  :host([theme~='horizontal'][theme~='cover-media']) ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
-    margin-inline-end: 0;
-    width: calc(100% + var(--_padding));
-    height: calc(100% + var(--_padding) * 2);
-    border-radius: inherit;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  /* Scroller in content */
-  [part='content'] ::slotted(vaadin-scroller) {
-    margin-inline: calc(var(--_padding) * -1);
-    padding-inline: var(--_padding);
-  }
-
-  [part='content'] ::slotted(vaadin-scroller)::before,
-  [part='content'] ::slotted(vaadin-scroller)::after {
-    margin-inline: calc(var(--_padding) * -1);
-  }
-`;

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

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

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

@@ -1,82 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import { addGlobalThemeStyles, css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-
-const cardProps = css`
-  html {
-    --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;
-  }
-`;
-
-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-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: 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: var(--lumo-base-color);
-  }
-
-  :host([theme~='elevated']) {
-    --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']: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)) {
-    border-radius: var(--lumo-border-radius-m);
-  }
-
-  :host([theme~='elevated'][theme~='cover-media']) ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
-    margin-top: calc((var(--_padding) + var(--vaadin-card-border-width)) * -1);
-    margin-inline: calc((var(--_padding) + var(--vaadin-card-border-width)) * -1);
-    width: calc(100% + (var(--_padding) + var(--vaadin-card-border-width)) * 2);
-  }
-
-  ::slotted([slot='title']) {
-    font-size: var(--lumo-font-size-l);
-    line-height: var(--lumo-line-height-xs);
-    font-weight: 600;
-    color: var(--lumo-header-text-color);
-  }
-
-  ::slotted([slot='subtitle']) {
-    font-size: var(--lumo-font-size-m);
-    line-height: var(--lumo-line-height-xs);
-    color: var(--lumo-secondary-text-color);
-  }
-`;
-
-registerStyles('vaadin-card', card, { moduleId: 'lumo-card' });
-
-export { card };

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

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

package/theme/lumo/vaadin-card.js

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