Cell 1
- Cell 2
- Cell 3
- Cell 4
- Cell 5
- Cell 6
- Cell 7
- Cell 8
- Cell 9
- Cell 10
-
- This is a button
-
- Sibling
-
- `);
- await visualDiff(wrapper, 'flex-shrink');
- });
- });
-
- ['outlined', 'contained', 'text'].forEach((variant) => {
- describe(variant, () => {
- it(variant, async () => {
- element.setAttribute('theme', `${variant}`);
- await visualDiff(div, `theme-${variant}`);
- });
-
- it(`${variant} disabled`, async () => {
- element.setAttribute('theme', `${variant}`);
- element.disabled = true;
- await visualDiff(div, `theme-${variant}-disabled`);
- });
-
- it(`${variant} hover`, async () => {
- element.setAttribute('theme', `${variant}`);
- await new Promise((resolve) => {
- element.addEventListener('transitionend', resolve, { once: true });
- sendMouseToElement({ type: 'move', element });
- });
- await visualDiff(div, `theme-${variant}-hover`);
- });
- });
- });
-
- describe('icon', () => {
- let icon;
-
- beforeEach(() => {
- icon = document.createElement('vaadin-icon');
- icon.setAttribute('icon', 'lumo:plus');
- });
-
- it('prefix', async () => {
- icon.setAttribute('slot', 'prefix');
- element.appendChild(icon);
- await visualDiff(div, 'icon-prefix');
- });
-
- it('suffix', async () => {
- icon.setAttribute('slot', 'suffix');
- element.appendChild(icon);
- await visualDiff(div, 'icon-suffix');
- });
-
- it('icon only', async () => {
- element.textContent = '';
- icon.setAttribute('slot', 'prefix');
- element.appendChild(icon);
- await visualDiff(div, 'icon-only');
- });
- });
-
- describe('modified line-height', () => {
- it('should keep label center-aligned when increasing line-height on container', async () => {
- element.setAttribute('theme', 'outlined');
- div.style['line-height'] = 4;
- await visualDiff(div, 'modified-line-height-label-center-aligned');
- });
- });
-});
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/basic.png b/packages/button/test/visual/material/screenshots/button/baseline/basic.png
deleted file mode 100644
index b9e5adf0661..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/basic.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/disabled.png b/packages/button/test/visual/material/screenshots/button/baseline/disabled.png
deleted file mode 100644
index 1f3aa062509..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/disabled.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/flex-shrink.png b/packages/button/test/visual/material/screenshots/button/baseline/flex-shrink.png
deleted file mode 100644
index 2a548ddbe9c..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/flex-shrink.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/focus-ring.png b/packages/button/test/visual/material/screenshots/button/baseline/focus-ring.png
deleted file mode 100644
index c63dc144b5d..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/focus-ring.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/icon-only.png b/packages/button/test/visual/material/screenshots/button/baseline/icon-only.png
deleted file mode 100644
index 5121067e543..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/icon-only.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/icon-prefix.png b/packages/button/test/visual/material/screenshots/button/baseline/icon-prefix.png
deleted file mode 100644
index a94e4aa4f4a..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/icon-prefix.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/icon-suffix.png b/packages/button/test/visual/material/screenshots/button/baseline/icon-suffix.png
deleted file mode 100644
index f1ae961d7e6..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/icon-suffix.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/modified-line-height-label-center-aligned.png b/packages/button/test/visual/material/screenshots/button/baseline/modified-line-height-label-center-aligned.png
deleted file mode 100644
index 8988e8cd3df..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/modified-line-height-label-center-aligned.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/theme-contained-disabled.png b/packages/button/test/visual/material/screenshots/button/baseline/theme-contained-disabled.png
deleted file mode 100644
index 1bebdd40350..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/theme-contained-disabled.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/theme-contained-hover.png b/packages/button/test/visual/material/screenshots/button/baseline/theme-contained-hover.png
deleted file mode 100644
index 2d3a4004095..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/theme-contained-hover.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/theme-contained.png b/packages/button/test/visual/material/screenshots/button/baseline/theme-contained.png
deleted file mode 100644
index fed8184b651..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/theme-contained.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/theme-outlined-disabled.png b/packages/button/test/visual/material/screenshots/button/baseline/theme-outlined-disabled.png
deleted file mode 100644
index 7f2c67c7314..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/theme-outlined-disabled.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/theme-outlined-hover.png b/packages/button/test/visual/material/screenshots/button/baseline/theme-outlined-hover.png
deleted file mode 100644
index 70cc7df9a08..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/theme-outlined-hover.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/theme-outlined.png b/packages/button/test/visual/material/screenshots/button/baseline/theme-outlined.png
deleted file mode 100644
index 2a9520915ff..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/theme-outlined.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/theme-text-disabled.png b/packages/button/test/visual/material/screenshots/button/baseline/theme-text-disabled.png
deleted file mode 100644
index 1f3aa062509..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/theme-text-disabled.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/theme-text-hover.png b/packages/button/test/visual/material/screenshots/button/baseline/theme-text-hover.png
deleted file mode 100644
index c63dc144b5d..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/theme-text-hover.png and /dev/null differ
diff --git a/packages/button/test/visual/material/screenshots/button/baseline/theme-text.png b/packages/button/test/visual/material/screenshots/button/baseline/theme-text.png
deleted file mode 100644
index b9e5adf0661..00000000000
Binary files a/packages/button/test/visual/material/screenshots/button/baseline/theme-text.png and /dev/null differ
diff --git a/packages/button/theme/material/vaadin-button-styles.js b/packages/button/theme/material/vaadin-button-styles.js
deleted file mode 100644
index a461353885a..00000000000
--- a/packages/button/theme/material/vaadin-button-styles.js
+++ /dev/null
@@ -1,169 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/shadow.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const button = css`
- :host {
- padding: 8px;
- min-width: 64px;
- box-sizing: border-box;
- display: inline-flex;
- align-items: baseline;
- justify-content: center;
- border-radius: 4px;
- color: var(--material-primary-text-color);
- font-family: var(--material-font-family);
- text-transform: uppercase;
- font-size: var(--material-button-font-size);
- line-height: 20px;
- font-weight: 500;
- letter-spacing: 0.05em;
- white-space: nowrap;
- overflow: hidden;
- transition: box-shadow 0.2s;
- -webkit-tap-highlight-color: transparent;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- flex-shrink: 0;
- }
-
- :host::before,
- :host::after {
- content: '';
- pointer-events: none;
- position: absolute;
- border-radius: inherit;
- opacity: 0;
- background-color: currentColor;
- }
-
- :host::before {
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- transition: opacity 0.5s;
- }
-
- :host::after {
- border-radius: 50%;
- width: 320px;
- height: 320px;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- transition: all 0.9s;
- }
-
- [part='label'] ::slotted(*) {
- vertical-align: middle;
- }
-
- :host(:hover:not([disabled]))::before,
- :host([focus-ring])::before {
- opacity: 0.08;
- transition-duration: 0.2s;
- }
-
- :host([active])::before {
- opacity: 0.16;
- transition: opacity 0.4s;
- }
-
- :host([active])::after {
- transform: translate(-50%, -50%) scale(0.0000001); /* animation works weirdly with scale(0) */
- opacity: 0.1;
- transition: 0s;
- }
-
- :host(:hover:not([active]):not([disabled]))::after {
- transform: translate(-50%, -50%) scale(1);
- opacity: 0;
- }
-
- :host([disabled]) {
- color: var(--material-disabled-text-color);
- }
-
- /* Contained and outline variants */
- :host([theme~='contained']),
- :host([theme~='outlined']) {
- padding: 8px 16px;
- }
-
- :host([theme~='outlined']) {
- box-shadow: inset 0 0 0 1px var(--_material-button-outline-color, rgba(0, 0, 0, 0.2));
- }
-
- :host([theme~='contained']:not([disabled])) {
- background-color: var(--material-primary-color);
- color: var(--material-primary-contrast-color);
- box-shadow: var(--material-shadow-elevation-2dp);
- }
-
- :host([theme~='contained'][disabled]) {
- background-color: var(--material-secondary-background-color);
- }
-
- :host([theme~='contained']:not([disabled]):hover) {
- box-shadow: var(--material-shadow-elevation-4dp);
- }
-
- :host([theme~='contained'][active]) {
- box-shadow: var(--material-shadow-elevation-8dp);
- }
-
- /* Icon alignment */
-
- [part] ::slotted(vaadin-icon) {
- display: block;
- width: 18px;
- height: 18px;
- }
-
- [part='prefix'] ::slotted(vaadin-icon) {
- margin-right: 8px;
- margin-left: -4px;
- }
-
- [part='suffix'] ::slotted(vaadin-icon) {
- margin-left: 8px;
- margin-right: -4px;
- }
-
- /* RTL specific styles */
-
- :host([dir='rtl'])::before {
- left: auto;
- right: 0;
- }
-
- :host([dir='rtl'])::after {
- left: auto;
- right: 50%;
- transform: translate(50%, -50%);
- }
-
- :host([active][dir='rtl'])::after {
- transform: translate(50%, -50%) scale(0.0000001);
- }
-
- :host(:hover:not([active]):not([disabled])[dir='rtl'])::after {
- transform: translate(50%, -50%) scale(1);
- }
-
- :host([dir='rtl']) [part='prefix'] ::slotted(vaadin-icon) {
- margin-right: -4px;
- margin-left: 8px;
- }
-
- :host([dir='rtl']) [part='suffix'] ::slotted(vaadin-icon) {
- margin-left: -4px;
- margin-right: 8px;
- }
-`;
-
-registerStyles('vaadin-button', button, { moduleId: 'material-button' });
-
-export { button };
diff --git a/packages/button/theme/material/vaadin-button.js b/packages/button/theme/material/vaadin-button.js
deleted file mode 100644
index 2fc97517cb6..00000000000
--- a/packages/button/theme/material/vaadin-button.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import './vaadin-button-styles.js';
-import '../../src/vaadin-button.js';
diff --git a/packages/button/theme/material/vaadin-lit-button.js b/packages/button/theme/material/vaadin-lit-button.js
deleted file mode 100644
index 87549d0f5cc..00000000000
--- a/packages/button/theme/material/vaadin-lit-button.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import './vaadin-button-styles.js';
-import '../../src/vaadin-lit-button.js';
diff --git a/packages/card/package.json b/packages/card/package.json
index 2423f5f41d9..6467feaa46b 100644
--- a/packages/card/package.json
+++ b/packages/card/package.json
@@ -36,7 +36,6 @@
"dependencies": {
"@vaadin/component-base": "25.0.0-alpha0",
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha0",
- "@vaadin/vaadin-material-styles": "25.0.0-alpha0",
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha0",
"lit": "^3.0.0"
},
diff --git a/packages/card/test/visual/material/card.test.js b/packages/card/test/visual/material/card.test.js
deleted file mode 100644
index 50eeb112c7d..00000000000
--- a/packages/card/test/visual/material/card.test.js
+++ /dev/null
@@ -1,214 +0,0 @@
-import { fixtureSync } from '@vaadin/testing-helpers';
-import { visualDiff } from '@web/test-runner-visual-regression';
-import '../../../theme/material/vaadin-card.js';
-import '@vaadin/button/theme/material/vaadin-button.js';
-import '@vaadin/vaadin-material-styles/color-global.js';
-import '@vaadin/vaadin-material-styles/typography-global.js';
-import '@vaadin/icon';
-import '@vaadin/icons';
-import '@vaadin/avatar/theme/material/vaadin-avatar.js';
-
-window.Vaadin ||= {};
-window.Vaadin.featureFlags ||= {};
-window.Vaadin.featureFlags.cardComponent = true;
-
-const content = 'Content
';
-const title = 'Title
';
-const subTitle = 'Subtitle
';
-const header = 'Header
';
-const avatar = 'Suffix
';
-const button = '
';
-
-const complexCard = `Content lorem ipsum dolor sit amet.
- ${button}
-Content lorem ipsum dolor sit amet.
- ${button}
-Prefix
');
- await visualDiff(div, 'slot-header-prefix');
- });
-
- it('header-suffix', async () => {
- element = cardFixture(suffix);
- await visualDiff(div, 'slot-header-suffix');
- });
-
- it('footer', async () => {
- element = cardFixture('Footer
');
- await visualDiff(div, 'slot-footer');
- });
-
- it('media', async () => {
- element = cardFixture(image);
- await new Promise((resolve) => {
- element.querySelector('img').onload = async () => {
- await visualDiff(div, 'slot-media');
- resolve();
- };
- });
- });
-
- it('multiple', async () => {
- element = fixtureSync(complexCard, div);
- await new Promise((resolve) => {
- element.querySelector('img').onload = async () => {
- await visualDiff(div, 'slot-multiple');
- resolve();
- };
- });
- });
- });
-
- describe('theme', () => {
- it('outlined', async () => {
- element = cardFixture(content);
- element.setAttribute('theme', 'outlined');
- await visualDiff(div, 'theme-outlined');
- });
-
- it('elevated', async () => {
- element = cardFixture(content);
- div.style.setProperty('background', 'var(--material-secondary-background-color)');
- element.setAttribute('theme', 'elevated');
- await visualDiff(div, 'theme-elevated');
- });
-
- it('outlined-elevated', async () => {
- element = cardFixture(content);
- div.style.setProperty('background', 'var(--material-secondary-background-color)');
- element.setAttribute('theme', 'outlined elevated');
- await visualDiff(div, 'theme-outlined-elevated');
- });
-
- it('stretch-media', async () => {
- element = fixtureSync(complexCard, div);
- element.setAttribute('theme', 'stretch-media');
- element.style.setProperty('width', '300px');
- await new Promise((resolve) => {
- element.querySelector('img').onload = async () => {
- await visualDiff(div, 'theme-media-stretch');
- resolve();
- };
- });
- });
-
- it('cover-media-image', async () => {
- element = fixtureSync(complexCard, div);
- element.setAttribute('theme', 'cover-media');
- element.style.setProperty('width', '300px');
- await new Promise((resolve) => {
- element.querySelector('img').onload = async () => {
- await visualDiff(div, 'theme-media-cover-image');
- resolve();
- };
- });
- });
-
- it('cover-media-icon', async () => {
- element = fixtureSync(complexCardWithIcon, div);
- element.setAttribute('theme', 'cover-media');
- element.style.setProperty('width', '300px');
- await visualDiff(div, 'theme-media-cover-icon');
- });
-
- it('horizontal', async () => {
- element = fixtureSync(complexCard, div);
- element.setAttribute('theme', 'horizontal');
- element.style.setProperty('width', '400px');
- await new Promise((resolve) => {
- element.querySelector('img').onload = async () => {
- await visualDiff(div, 'theme-horizontal');
- resolve();
- };
- });
- });
-
- it('horizontal-cover-media', async () => {
- element = fixtureSync(complexCard, div);
- element.setAttribute('theme', 'horizontal cover-media');
- element.style.setProperty('width', '400px');
- await new Promise((resolve) => {
- element.querySelector('img').onload = async () => {
- await visualDiff(div, 'theme-horizontal-media-cover');
- resolve();
- };
- });
- });
-
- it('horizontal-stretch-media', async () => {
- element = fixtureSync(complexCard, div);
- element.setAttribute('theme', 'horizontal stretch-media');
- element.style.setProperty('width', '400px');
- await new Promise((resolve) => {
- element.querySelector('img').onload = async () => {
- await visualDiff(div, 'theme-horizontal-media-stretch');
- resolve();
- };
- });
- });
- });
-});
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/slot-content.png b/packages/card/test/visual/material/screenshots/card/baseline/slot-content.png
deleted file mode 100644
index a0f9018b9f5..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/slot-content.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/slot-footer.png b/packages/card/test/visual/material/screenshots/card/baseline/slot-footer.png
deleted file mode 100644
index 569bc152942..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/slot-footer.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/slot-header-prefix.png b/packages/card/test/visual/material/screenshots/card/baseline/slot-header-prefix.png
deleted file mode 100644
index 1adfbba2c2b..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/slot-header-prefix.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/slot-header-suffix.png b/packages/card/test/visual/material/screenshots/card/baseline/slot-header-suffix.png
deleted file mode 100644
index 4052b4e15f3..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/slot-header-suffix.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/slot-header.png b/packages/card/test/visual/material/screenshots/card/baseline/slot-header.png
deleted file mode 100644
index 963e8fa69a2..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/slot-header.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/slot-media.png b/packages/card/test/visual/material/screenshots/card/baseline/slot-media.png
deleted file mode 100644
index 4f47f20df30..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/slot-media.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/slot-multiple.png b/packages/card/test/visual/material/screenshots/card/baseline/slot-multiple.png
deleted file mode 100644
index 5c673290ca3..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/slot-multiple.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/slot-subtitle.png b/packages/card/test/visual/material/screenshots/card/baseline/slot-subtitle.png
deleted file mode 100644
index c62f871ec52..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/slot-subtitle.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/slot-title-subtitle-header.png b/packages/card/test/visual/material/screenshots/card/baseline/slot-title-subtitle-header.png
deleted file mode 100644
index 52e3ceedc25..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/slot-title-subtitle-header.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/slot-title-subtitle.png b/packages/card/test/visual/material/screenshots/card/baseline/slot-title-subtitle.png
deleted file mode 100644
index 5f60b911b73..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/slot-title-subtitle.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/slot-title.png b/packages/card/test/visual/material/screenshots/card/baseline/slot-title.png
deleted file mode 100644
index 348588e0d19..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/slot-title.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/string-title.png b/packages/card/test/visual/material/screenshots/card/baseline/string-title.png
deleted file mode 100644
index b263088713c..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/string-title.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/theme-elevated.png b/packages/card/test/visual/material/screenshots/card/baseline/theme-elevated.png
deleted file mode 100644
index 4a5651cac30..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/theme-elevated.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/theme-horizontal-media-cover.png b/packages/card/test/visual/material/screenshots/card/baseline/theme-horizontal-media-cover.png
deleted file mode 100644
index f071bf4143d..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/theme-horizontal-media-cover.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/theme-horizontal-media-stretch.png b/packages/card/test/visual/material/screenshots/card/baseline/theme-horizontal-media-stretch.png
deleted file mode 100644
index 9110a75ce96..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/theme-horizontal-media-stretch.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/theme-horizontal.png b/packages/card/test/visual/material/screenshots/card/baseline/theme-horizontal.png
deleted file mode 100644
index 60262c0e803..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/theme-horizontal.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/theme-media-cover-icon.png b/packages/card/test/visual/material/screenshots/card/baseline/theme-media-cover-icon.png
deleted file mode 100644
index 32a9bc31908..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/theme-media-cover-icon.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/theme-media-cover-image.png b/packages/card/test/visual/material/screenshots/card/baseline/theme-media-cover-image.png
deleted file mode 100644
index 6171b85e818..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/theme-media-cover-image.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/theme-media-stretch.png b/packages/card/test/visual/material/screenshots/card/baseline/theme-media-stretch.png
deleted file mode 100644
index 89ae9288472..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/theme-media-stretch.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/theme-outlined-elevated.png b/packages/card/test/visual/material/screenshots/card/baseline/theme-outlined-elevated.png
deleted file mode 100644
index dafd32065eb..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/theme-outlined-elevated.png and /dev/null differ
diff --git a/packages/card/test/visual/material/screenshots/card/baseline/theme-outlined.png b/packages/card/test/visual/material/screenshots/card/baseline/theme-outlined.png
deleted file mode 100644
index 18c1bead02c..00000000000
Binary files a/packages/card/test/visual/material/screenshots/card/baseline/theme-outlined.png and /dev/null differ
diff --git a/packages/card/theme/material/vaadin-card-styles.js b/packages/card/theme/material/vaadin-card-styles.js
deleted file mode 100644
index b036a5a055e..00000000000
--- a/packages/card/theme/material/vaadin-card-styles.js
+++ /dev/null
@@ -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 };
diff --git a/packages/card/theme/material/vaadin-card.js b/packages/card/theme/material/vaadin-card.js
deleted file mode 100644
index e3164eb32ba..00000000000
--- a/packages/card/theme/material/vaadin-card.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import './vaadin-card-styles.js';
-import '../../src/vaadin-card.js';
diff --git a/packages/charts/package.json b/packages/charts/package.json
index 3744c1cec40..c6de01efb9a 100644
--- a/packages/charts/package.json
+++ b/packages/charts/package.json
@@ -39,7 +39,6 @@
"@polymer/polymer": "^3.0.0",
"@vaadin/component-base": "25.0.0-alpha0",
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha0",
- "@vaadin/vaadin-material-styles": "25.0.0-alpha0",
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha0",
"highcharts": "9.2.2",
"lit": "^3.0.0"
diff --git a/packages/charts/test/visual/material/chart.test.js b/packages/charts/test/visual/material/chart.test.js
deleted file mode 100644
index 6ca04cf51cb..00000000000
--- a/packages/charts/test/visual/material/chart.test.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
-import { visualDiff } from '@web/test-runner-visual-regression';
-import '../../../theme/material/vaadin-chart.js';
-
-describe('chart', () => {
- let element;
-
- describe('empty', () => {
- beforeEach(() => {
- element = fixtureSync('Target
- Target
- Target
-
-
-
-
- `);
- });
-
- it('error message alignment', async () => {
- await visualDiff(wrapper, 'alignment-error-message');
- });
- });
-
- describe('label', () => {
- beforeEach(() => {
- wrapper = fixtureSync(`
-
-
-
-
- `);
- });
-
- it('label alignment', async () => {
- await visualDiff(wrapper, 'alignment-label');
- });
- });
-
- describe('label + error message', () => {
- beforeEach(() => {
- wrapper = fixtureSync(`
-
-
-
-
- `);
- });
-
- it('label + error message alignment', async () => {
- await visualDiff(wrapper, 'alignment-label-error-message');
- });
- });
-
- describe('label + helper text', () => {
- beforeEach(() => {
- wrapper = fixtureSync(`
-
-
-
-
- `);
- });
-
- it('label + helper text alignment', async () => {
- await visualDiff(wrapper, 'alignment-label-helper-text');
- });
- });
- });
-
- describe('form-layout', () => {
- let layout;
-
- describe('label + error message', () => {
- beforeEach(() => {
- layout = fixtureSync(`
- - - - -
- Example: 1900-01-01 -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `);
- element = div.querySelector('vaadin-form-layout');
- });
-
- it('CSS properties', async () => {
- await visualDiff(element, 'css-properties');
- });
- });
-
- describe('responsiveSteps', () => {
- beforeEach(() => {
- element = fixtureSync(`
- Item 1
- Item 2
- Start
- Start
- Middle
- End
- Start
- Start
- Middle
- Middle
- End
- End
- Start
- End
- -
Master content
- Detail content
-
-
-
- `);
- target = div.firstElementChild;
- element.target = target;
- await nextRender();
- });
-
- [
- 'top-start',
- 'top',
- 'top-end',
- 'bottom-start',
- 'bottom',
- 'bottom-end',
- 'start-top',
- 'start',
- 'start-bottom',
- 'end-top',
- 'end',
- 'end-bottom',
- ].forEach((position) => {
- it(position, async () => {
- element.position = position;
- await nextUpdate(element);
- target.click();
- await nextRender();
- await visualDiff(div, position);
- });
-
- it(`${position} pointer arrow`, async () => {
- element.setAttribute('theme', 'arrow');
- element.position = position;
- await nextUpdate(element);
- target.click();
- await nextRender();
- await visualDiff(div, `${position}-arrow`);
- });
- });
-
- it('no-padding', async () => {
- element.setAttribute('theme', 'no-padding');
- target.click();
- await nextRender();
- await visualDiff(div, 'no-padding');
- });
-});
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-arrow.png
deleted file mode 100644
index c601c01cbf3..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-arrow.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-end-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-end-arrow.png
deleted file mode 100644
index 4a982cca221..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-end-arrow.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-end.png b/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-end.png
deleted file mode 100644
index b37c69c3363..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-end.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-start-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-start-arrow.png
deleted file mode 100644
index bd430171bca..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-start-arrow.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-start.png b/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-start.png
deleted file mode 100644
index 54f7aac85a3..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-start.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom.png b/packages/popover/test/visual/material/screenshots/popover/baseline/bottom.png
deleted file mode 100644
index 30aeeab7669..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/end-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/end-arrow.png
deleted file mode 100644
index dd5b8c6b431..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/end-arrow.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/end-bottom-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/end-bottom-arrow.png
deleted file mode 100644
index e79333af22c..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/end-bottom-arrow.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/end-bottom.png b/packages/popover/test/visual/material/screenshots/popover/baseline/end-bottom.png
deleted file mode 100644
index f95fc13357c..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/end-bottom.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/end-top-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/end-top-arrow.png
deleted file mode 100644
index b8464d41db1..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/end-top-arrow.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/end-top.png b/packages/popover/test/visual/material/screenshots/popover/baseline/end-top.png
deleted file mode 100644
index 2fb335e484e..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/end-top.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/end.png b/packages/popover/test/visual/material/screenshots/popover/baseline/end.png
deleted file mode 100644
index 18499675af5..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/end.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/no-padding.png b/packages/popover/test/visual/material/screenshots/popover/baseline/no-padding.png
deleted file mode 100644
index 5f6341e496a..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/no-padding.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/start-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/start-arrow.png
deleted file mode 100644
index ede60098721..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/start-arrow.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/start-bottom-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/start-bottom-arrow.png
deleted file mode 100644
index 485d24b7521..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/start-bottom-arrow.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/start-bottom.png b/packages/popover/test/visual/material/screenshots/popover/baseline/start-bottom.png
deleted file mode 100644
index 646f47eb03d..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/start-bottom.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/start-top-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/start-top-arrow.png
deleted file mode 100644
index 42d3c4c12f7..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/start-top-arrow.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/start-top.png b/packages/popover/test/visual/material/screenshots/popover/baseline/start-top.png
deleted file mode 100644
index 494ba3b6460..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/start-top.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/start.png b/packages/popover/test/visual/material/screenshots/popover/baseline/start.png
deleted file mode 100644
index 7af2b69e1a9..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/start.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/top-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/top-arrow.png
deleted file mode 100644
index d7fac6ad6f6..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/top-arrow.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/top-end-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/top-end-arrow.png
deleted file mode 100644
index d3892ee291f..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/top-end-arrow.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/top-end.png b/packages/popover/test/visual/material/screenshots/popover/baseline/top-end.png
deleted file mode 100644
index ccedd428241..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/top-end.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/top-start-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/top-start-arrow.png
deleted file mode 100644
index fe3a47002c9..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/top-start-arrow.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/top-start.png b/packages/popover/test/visual/material/screenshots/popover/baseline/top-start.png
deleted file mode 100644
index c1db3baa16a..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/top-start.png and /dev/null differ
diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/top.png b/packages/popover/test/visual/material/screenshots/popover/baseline/top.png
deleted file mode 100644
index fe7cfdc7068..00000000000
Binary files a/packages/popover/test/visual/material/screenshots/popover/baseline/top.png and /dev/null differ
diff --git a/packages/popover/theme/material/vaadin-popover-styles.js b/packages/popover/theme/material/vaadin-popover-styles.js
deleted file mode 100644
index 4bfe97f2e53..00000000000
--- a/packages/popover/theme/material/vaadin-popover-styles.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const popoverOverlay = css`
- :host {
- --vaadin-popover-offset-top: var(--_vaadin-popover-default-offset);
- --vaadin-popover-offset-bottom: var(--_vaadin-popover-default-offset);
- --vaadin-popover-offset-start: var(--_vaadin-popover-default-offset);
- --vaadin-popover-offset-end: var(--_vaadin-popover-default-offset);
- --vaadin-popover-arrow-size: 0.5rem;
- --_vaadin-popover-default-offset: 0.25rem;
- }
-
- [part='overlay'] {
- outline: none;
- }
-
- [part='content'] {
- padding: 0.25rem 0.5rem;
- }
-
- :host([theme~='no-padding']) [part='content'] {
- padding: 0;
- }
-
- :host([theme~='arrow']) {
- --_vaadin-popover-default-offset: calc(0.25rem + var(--vaadin-popover-arrow-size) / 1.25);
- }
-
- /* top / bottom position */
- :host([theme~='arrow'][position^='top']) [part='arrow'],
- :host([theme~='arrow'][position^='bottom']) [part='arrow'] {
- border-left: var(--vaadin-popover-arrow-size) solid transparent;
- border-right: var(--vaadin-popover-arrow-size) solid transparent;
- }
-
- :host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
- :host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
- bottom: calc(var(--vaadin-popover-arrow-size) * -1);
- border-top: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
- filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.14));
- }
-
- :host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'],
- :host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] {
- top: calc(var(--vaadin-popover-arrow-size) * -1);
- border-bottom: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
- filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, 0.14));
- }
-
- :host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'],
- :host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] {
- transform: translateX(-50%);
- inset-inline-start: 1.5rem;
- }
-
- :host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'],
- :host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] {
- transform: translateX(50%);
- inset-inline-end: 1.5rem;
- }
-
- :host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
- :host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] {
- transform: translateX(-50%);
- inset-inline-start: 50%;
- }
-
- /* start / end position */
- :host([theme~='arrow'][position^='start']) [part='arrow'],
- :host([theme~='arrow'][position^='end']) [part='arrow'] {
- border-top: var(--vaadin-popover-arrow-size) solid transparent;
- border-bottom: var(--vaadin-popover-arrow-size) solid transparent;
- }
-
- :host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'],
- :host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] {
- inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1);
- border-right: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
- filter: drop-shadow(-2px 0 1px rgba(0, 0, 0, 0.14));
- }
-
- :host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'],
- :host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] {
- inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1);
- border-left: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
- filter: drop-shadow(2px 0 1px rgba(0, 0, 0, 0.14));
- }
-
- :host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'],
- :host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] {
- top: 0.5rem;
- }
-
- :host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'],
- :host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] {
- top: 50%;
- transform: translateY(-50%);
- }
-
- :host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'],
- :host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
- bottom: 0.5rem;
- }
-`;
-
-registerStyles('vaadin-popover-overlay', [overlay, popoverOverlay], { moduleId: 'material-popover-overlay' });
diff --git a/packages/popover/theme/material/vaadin-popover.js b/packages/popover/theme/material/vaadin-popover.js
deleted file mode 100644
index 2226530cf6e..00000000000
--- a/packages/popover/theme/material/vaadin-popover.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import './vaadin-popover-styles.js';
-import '../../src/vaadin-popover.js';
diff --git a/packages/progress-bar/package.json b/packages/progress-bar/package.json
index 3fa4ec50fd4..b53452fa25f 100644
--- a/packages/progress-bar/package.json
+++ b/packages/progress-bar/package.json
@@ -40,7 +40,6 @@
"@polymer/polymer": "^3.0.0",
"@vaadin/component-base": "25.0.0-alpha0",
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha0",
- "@vaadin/vaadin-material-styles": "25.0.0-alpha0",
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha0",
"lit": "^3.0.0"
},
diff --git a/packages/progress-bar/test/visual/material/progress-bar.test.js b/packages/progress-bar/test/visual/material/progress-bar.test.js
deleted file mode 100644
index 792f5a719c7..00000000000
--- a/packages/progress-bar/test/visual/material/progress-bar.test.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
-import { visualDiff } from '@web/test-runner-visual-regression';
-import '../../../theme/material/vaadin-progress-bar.js';
-
-describe('progress-bar', () => {
- let div, element;
-
- beforeEach(() => {
- div = document.createElement('div');
- div.style.display = 'inline-block';
- div.style.width = '200px';
- element = fixtureSync('Prefix
- Suffix
-
-
- Odio quis mi. Aliquam massa pede, pharetra quis, tincidunt quis, fringilla at, mauris. Vestibulum a massa.
- Vestibulum luctus odio ut quam. Maecenas congue convallis diam. Cras urna arcu, vestibulum vitae, blandit ut,
- laoreet id, risus. Ut condimentum, arcu sit amet placerat blandit, augue nibh pretium nunc, in tempus sem dolor
- non leo. Etiam fringilla mauris a odio. Nunc lorem diam, interdum eget, lacinia in, scelerisque sit amet, purus.
- Nam ornare. Donec placerat dui ut orci. Phasellus quis lacus at nisl elementum cursus. Cras bibendum egestas
- nulla. Phasellus pulvinar ullamcorper odio. Etiam ipsum. Proin tincidunt. Aliquam aliquet.
-
- Panel 2
- Panel 3
-
-
-
- `);
- target = div.firstElementChild;
- element.target = target;
- });
-
- [
- 'top-start',
- 'top',
- 'top-end',
- 'bottom-start',
- 'bottom',
- 'bottom-end',
- 'start-top',
- 'start',
- 'start-bottom',
- 'end-top',
- 'end',
- 'end-bottom',
- ].forEach((position) => {
- it(position, async () => {
- element.position = position;
- fire(target, 'mouseenter');
- await visualDiff(div, position);
- });
- });
-
- describe('dark', () => {
- before(() => {
- const style = document.createElement('style');
- style.innerHTML = `${colorDark.toString().replace(':host', 'html')}`;
- document.head.appendChild(style);
- document.documentElement.setAttribute('theme', 'dark');
- });
-
- after(() => {
- document.documentElement.removeAttribute('theme');
- });
-
- it('theme-dark', async () => {
- fire(target, 'mouseenter');
- await visualDiff(div, 'theme-dark');
- });
- });
-
- it('max-width', async () => {
- element.text = 'This is a tooltip with a long text (more than 40 chars), it should wrap in 2 lines for readability';
- fire(target, 'mouseenter');
- await visualDiff(div, 'max-width');
- });
-
- it('white-space-pre', async () => {
- element.text = 'Line 1\n\nLine 2';
- fire(target, 'mouseenter');
- await visualDiff(div, 'white-space-pre');
- });
-});
diff --git a/packages/tooltip/theme/material/vaadin-lit-tooltip.js b/packages/tooltip/theme/material/vaadin-lit-tooltip.js
deleted file mode 100644
index 99f41fa8e44..00000000000
--- a/packages/tooltip/theme/material/vaadin-lit-tooltip.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import './vaadin-tooltip-styles.js';
-import '../../src/vaadin-lit-tooltip.js';
diff --git a/packages/tooltip/theme/material/vaadin-tooltip-styles.js b/packages/tooltip/theme/material/vaadin-tooltip-styles.js
deleted file mode 100644
index bb2c7ef28a4..00000000000
--- a/packages/tooltip/theme/material/vaadin-tooltip-styles.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const tooltipOverlay = css`
- :host {
- --vaadin-tooltip-offset-top: 0.25rem;
- --vaadin-tooltip-offset-bottom: 0.25rem;
- --vaadin-tooltip-offset-start: 0.25rem;
- --vaadin-tooltip-offset-end: 0.25rem;
- }
-
- [part='overlay'] {
- background-color: rgba(97, 97, 97, 0.92);
- color: #fff;
- font-size: 0.6875rem;
- }
-
- [part='content'] {
- padding: 0.25rem 0.5rem;
- }
-`;
-
-registerStyles('vaadin-tooltip-overlay', [overlay, tooltipOverlay], { moduleId: 'material-tooltip-overlay' });
diff --git a/packages/tooltip/theme/material/vaadin-tooltip.js b/packages/tooltip/theme/material/vaadin-tooltip.js
deleted file mode 100644
index c72470fc2ca..00000000000
--- a/packages/tooltip/theme/material/vaadin-tooltip.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import './vaadin-tooltip-styles.js';
-import '../../src/vaadin-tooltip.js';
diff --git a/packages/upload/package.json b/packages/upload/package.json
index 6316e47845e..5fe01336038 100644
--- a/packages/upload/package.json
+++ b/packages/upload/package.json
@@ -42,7 +42,6 @@
"@vaadin/component-base": "25.0.0-alpha0",
"@vaadin/progress-bar": "25.0.0-alpha0",
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha0",
- "@vaadin/vaadin-material-styles": "25.0.0-alpha0",
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha0",
"lit": "^3.0.0"
},
diff --git a/packages/upload/test/visual/material/screenshots/upload/baseline/focus-clear.png b/packages/upload/test/visual/material/screenshots/upload/baseline/focus-clear.png
deleted file mode 100644
index 78f0953ea91..00000000000
Binary files a/packages/upload/test/visual/material/screenshots/upload/baseline/focus-clear.png and /dev/null differ
diff --git a/packages/upload/test/visual/material/screenshots/upload/baseline/focus-file.png b/packages/upload/test/visual/material/screenshots/upload/baseline/focus-file.png
deleted file mode 100644
index 1f51f0363d4..00000000000
Binary files a/packages/upload/test/visual/material/screenshots/upload/baseline/focus-file.png and /dev/null differ
diff --git a/packages/upload/test/visual/material/screenshots/upload/baseline/focus-retry.png b/packages/upload/test/visual/material/screenshots/upload/baseline/focus-retry.png
deleted file mode 100644
index 3b254e94ad9..00000000000
Binary files a/packages/upload/test/visual/material/screenshots/upload/baseline/focus-retry.png and /dev/null differ
diff --git a/packages/upload/test/visual/material/screenshots/upload/baseline/focus-start.png b/packages/upload/test/visual/material/screenshots/upload/baseline/focus-start.png
deleted file mode 100644
index f08f4e5f66a..00000000000
Binary files a/packages/upload/test/visual/material/screenshots/upload/baseline/focus-start.png and /dev/null differ
diff --git a/packages/upload/test/visual/material/screenshots/upload/baseline/ltr-basic.png b/packages/upload/test/visual/material/screenshots/upload/baseline/ltr-basic.png
deleted file mode 100644
index 33828ccd2dc..00000000000
Binary files a/packages/upload/test/visual/material/screenshots/upload/baseline/ltr-basic.png and /dev/null differ
diff --git a/packages/upload/test/visual/material/screenshots/upload/baseline/ltr-files.png b/packages/upload/test/visual/material/screenshots/upload/baseline/ltr-files.png
deleted file mode 100644
index 5e3345c9f26..00000000000
Binary files a/packages/upload/test/visual/material/screenshots/upload/baseline/ltr-files.png and /dev/null differ
diff --git a/packages/upload/test/visual/material/screenshots/upload/baseline/ltr-nodrop.png b/packages/upload/test/visual/material/screenshots/upload/baseline/ltr-nodrop.png
deleted file mode 100644
index 0d64d8543c8..00000000000
Binary files a/packages/upload/test/visual/material/screenshots/upload/baseline/ltr-nodrop.png and /dev/null differ
diff --git a/packages/upload/test/visual/material/screenshots/upload/baseline/rtl-basic.png b/packages/upload/test/visual/material/screenshots/upload/baseline/rtl-basic.png
deleted file mode 100644
index 47354655893..00000000000
Binary files a/packages/upload/test/visual/material/screenshots/upload/baseline/rtl-basic.png and /dev/null differ
diff --git a/packages/upload/test/visual/material/screenshots/upload/baseline/rtl-files.png b/packages/upload/test/visual/material/screenshots/upload/baseline/rtl-files.png
deleted file mode 100644
index c5dbe4fda3d..00000000000
Binary files a/packages/upload/test/visual/material/screenshots/upload/baseline/rtl-files.png and /dev/null differ
diff --git a/packages/upload/test/visual/material/screenshots/upload/baseline/rtl-nodrop.png b/packages/upload/test/visual/material/screenshots/upload/baseline/rtl-nodrop.png
deleted file mode 100644
index 8b307afc354..00000000000
Binary files a/packages/upload/test/visual/material/screenshots/upload/baseline/rtl-nodrop.png and /dev/null differ
diff --git a/packages/upload/test/visual/material/screenshots/upload/baseline/state-disabled.png b/packages/upload/test/visual/material/screenshots/upload/baseline/state-disabled.png
deleted file mode 100644
index 8a3a68be5ce..00000000000
Binary files a/packages/upload/test/visual/material/screenshots/upload/baseline/state-disabled.png and /dev/null differ
diff --git a/packages/upload/test/visual/material/screenshots/upload/baseline/state-max-files-reached.png b/packages/upload/test/visual/material/screenshots/upload/baseline/state-max-files-reached.png
deleted file mode 100644
index a52d4366206..00000000000
Binary files a/packages/upload/test/visual/material/screenshots/upload/baseline/state-max-files-reached.png and /dev/null differ
diff --git a/packages/upload/test/visual/material/screenshots/upload/baseline/width.png b/packages/upload/test/visual/material/screenshots/upload/baseline/width.png
deleted file mode 100644
index 6659f78d540..00000000000
Binary files a/packages/upload/test/visual/material/screenshots/upload/baseline/width.png and /dev/null differ
diff --git a/packages/upload/test/visual/material/upload.test.js b/packages/upload/test/visual/material/upload.test.js
deleted file mode 100644
index 9294a75d4ea..00000000000
--- a/packages/upload/test/visual/material/upload.test.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import { sendKeys } from '@vaadin/test-runner-commands';
-import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
-import { visualDiff } from '@web/test-runner-visual-regression';
-import '../../../theme/material/vaadin-upload.js';
-
-describe('upload', () => {
- let div, element;
-
- beforeEach(() => {
- div = document.createElement('div');
- div.style.padding = '10px';
- });
-
- ['ltr', 'rtl'].forEach((dir) => {
- describe(dir, () => {
- before(() => {
- document.documentElement.setAttribute('dir', dir);
- });
-
- beforeEach(() => {
- element = fixtureSync('
-
- ${icons.map((icon) => ``).join('\n')}
-
- `);
- await nextFrame();
- });
-
- it('basic', async () => {
- await visualDiff(wrapper, 'font-icons');
- });
-});
diff --git a/packages/vaadin-material-styles/test/visual/screenshots/baseline/font-icons.png b/packages/vaadin-material-styles/test/visual/screenshots/baseline/font-icons.png
deleted file mode 100644
index 7265567564f..00000000000
Binary files a/packages/vaadin-material-styles/test/visual/screenshots/baseline/font-icons.png and /dev/null differ
diff --git a/packages/vaadin-material-styles/typography-global.js b/packages/vaadin-material-styles/typography-global.js
deleted file mode 100644
index c81a39be2db..00000000000
--- a/packages/vaadin-material-styles/typography-global.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { addMaterialGlobalStyles } from './global.js';
-import { typography } from './typography.js';
-
-addMaterialGlobalStyles('typography', typography);
diff --git a/packages/vaadin-material-styles/typography.d.ts b/packages/vaadin-material-styles/typography.d.ts
deleted file mode 100644
index e75f735d762..00000000000
--- a/packages/vaadin-material-styles/typography.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { CSSResult } from 'lit';
-
-export const font: CSSResult;
-
-export const inputs: CSSResult;
-
-export const typography: CSSResult;
diff --git a/packages/vaadin-material-styles/typography.js b/packages/vaadin-material-styles/typography.js
deleted file mode 100644
index fafd3ccb3cd..00000000000
--- a/packages/vaadin-material-styles/typography.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './version.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { addMaterialGlobalStyles } from './global.js';
-
-const font = css`
- :host {
- /* Font family */
- --material-font-family: 'Roboto', sans-serif;
-
- /* Font sizes */
- --material-h1-font-size: 6rem;
- --material-h2-font-size: 3.75rem;
- --material-h3-font-size: 3rem;
- --material-h4-font-size: 2.125rem;
- --material-h5-font-size: 1.5rem;
- --material-h6-font-size: 1.25rem;
- --material-body-font-size: 1rem;
- --material-small-font-size: 0.875rem;
- --material-button-font-size: 0.875rem;
- --material-caption-font-size: 0.75rem;
-
- /* Icon size */
- --material-icon-font-size: 20px;
- }
-`;
-
-const typography = css`
- body,
- :host {
- font-family: var(--material-font-family);
- font-size: var(--material-body-font-size);
- line-height: 1.4;
- -webkit-text-size-adjust: 100%;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- color: inherit;
- line-height: 1.1;
- margin-top: 1.5em;
- }
-
- h1 {
- font-size: var(--material-h3-font-size);
- font-weight: 300;
- letter-spacing: -0.015em;
- margin-bottom: 1em;
- text-indent: -0.07em;
- }
-
- h2 {
- font-size: var(--material-h4-font-size);
- font-weight: 300;
- letter-spacing: -0.01em;
- margin-bottom: 0.75em;
- text-indent: -0.07em;
- }
-
- h3 {
- font-size: var(--material-h5-font-size);
- font-weight: 400;
- margin-bottom: 0.75em;
- text-indent: -0.05em;
- }
-
- h4 {
- font-size: var(--material-h6-font-size);
- font-weight: 400;
- letter-spacing: 0.01em;
- margin-bottom: 0.75em;
- text-indent: -0.05em;
- }
-
- h5 {
- font-size: var(--material-body-font-size);
- font-weight: 500;
- margin-bottom: 0.5em;
- text-indent: -0.025em;
- }
-
- h6 {
- font-size: var(--material-small-font-size);
- font-weight: 500;
- letter-spacing: 0.01em;
- margin-bottom: 0.25em;
- text-indent: -0.025em;
- }
-
- a,
- b,
- strong {
- font-weight: 500;
- }
-`;
-
-registerStyles('', typography, { moduleId: 'material-typography' });
-
-addMaterialGlobalStyles('font', font);
-
-export { font, typography };
-
-/* Import Roboto from Google Fonts */
-if (!window.polymerSkipLoadingFontRoboto) {
- /* prettier-ignore */
- const font = 'https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic';
- const link = document.createElement('link');
- link.rel = 'stylesheet';
- link.type = 'text/css';
- link.crossOrigin = 'anonymous';
- link.href = font;
- document.head.appendChild(link);
-}
diff --git a/packages/vaadin-material-styles/user-colors.d.ts b/packages/vaadin-material-styles/user-colors.d.ts
deleted file mode 100644
index e4eaaa39222..00000000000
--- a/packages/vaadin-material-styles/user-colors.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 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 userColors: CSSResult;
diff --git a/packages/vaadin-material-styles/user-colors.js b/packages/vaadin-material-styles/user-colors.js
deleted file mode 100644
index 2a38634dc3f..00000000000
--- a/packages/vaadin-material-styles/user-colors.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './version.js';
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { addMaterialGlobalStyles } from './global.js';
-
-const userColors = css`
- :host {
- --vaadin-user-color-0: #ab47bc;
- --vaadin-user-color-1: #546e7a;
- --vaadin-user-color-2: #2e7d32;
- --vaadin-user-color-3: #6d4c41;
- --vaadin-user-color-4: #1976d2;
- --vaadin-user-color-5: #00838f;
- --vaadin-user-color-6: #827717;
- }
-
- [theme~='dark'] {
- --vaadin-user-color-0: #9fa8da;
- --vaadin-user-color-1: #00bcd4;
- --vaadin-user-color-2: #ffeb3b;
- --vaadin-user-color-3: #a1887f;
- --vaadin-user-color-4: #2196f3;
- --vaadin-user-color-5: #4caf50;
- --vaadin-user-color-6: #ff9800;
- }
-`;
-
-addMaterialGlobalStyles('user-colors', userColors);
-
-export { userColors };
diff --git a/packages/vaadin-material-styles/version.js b/packages/vaadin-material-styles/version.js
deleted file mode 100644
index e182abc0bcd..00000000000
--- a/packages/vaadin-material-styles/version.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-
-/**
- * Dummy custom element used for collecting
- * development time usage statistics.
- *
- * @private
- */
-class Material extends HTMLElement {
- static get is() {
- return 'vaadin-material-styles';
- }
-}
-
-defineCustomElement(Material);
-
-console.warn('The Material theme is deprecated and will be removed in Vaadin 25.');
-
-export { Material };
diff --git a/packages/vertical-layout/package.json b/packages/vertical-layout/package.json
index a2cfe00d715..67491d2b13c 100644
--- a/packages/vertical-layout/package.json
+++ b/packages/vertical-layout/package.json
@@ -38,7 +38,6 @@
"@polymer/polymer": "^3.0.0",
"@vaadin/component-base": "25.0.0-alpha0",
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha0",
- "@vaadin/vaadin-material-styles": "25.0.0-alpha0",
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha0",
"lit": "^3.0.0"
},
diff --git a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/basic.png b/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/basic.png
deleted file mode 100644
index 2c3c551a936..00000000000
Binary files a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/basic.png and /dev/null differ
diff --git a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-margin-padding-spacing.png b/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-margin-padding-spacing.png
deleted file mode 100644
index e7c3e87078a..00000000000
Binary files a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-margin-padding-spacing.png and /dev/null differ
diff --git a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-margin-padding.png b/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-margin-padding.png
deleted file mode 100644
index 3e3f9353f0a..00000000000
Binary files a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-margin-padding.png and /dev/null differ
diff --git a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-margin-spacing.png b/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-margin-spacing.png
deleted file mode 100644
index 059774884ec..00000000000
Binary files a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-margin-spacing.png and /dev/null differ
diff --git a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-margin.png b/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-margin.png
deleted file mode 100644
index 81dcdff6888..00000000000
Binary files a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-margin.png and /dev/null differ
diff --git a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-padding.png b/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-padding.png
deleted file mode 100644
index c1818529856..00000000000
Binary files a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-padding.png and /dev/null differ
diff --git a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-spacing.png b/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-spacing.png
deleted file mode 100644
index 3250633457a..00000000000
Binary files a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-spacing.png and /dev/null differ
diff --git a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-wrap.png b/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-wrap.png
deleted file mode 100644
index e5eea998748..00000000000
Binary files a/packages/vertical-layout/test/visual/material/screenshots/vertical-layout/baseline/theme-wrap.png and /dev/null differ
diff --git a/packages/vertical-layout/test/visual/material/vertical-layout.test.js b/packages/vertical-layout/test/visual/material/vertical-layout.test.js
deleted file mode 100644
index cc26f193e92..00000000000
--- a/packages/vertical-layout/test/visual/material/vertical-layout.test.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
-import { visualDiff } from '@web/test-runner-visual-regression';
-import '../../../theme/material/vaadin-vertical-layout.js';
-
-describe('vertical-layout', () => {
- let div, element;
-
- beforeEach(() => {
- div = document.createElement('div');
- div.style.display = 'flex';
- element = fixtureSync(
- `
- Item 1
- Item 2
-