diff --git a/BREAKING_CHANGES/v3.md b/BREAKING_CHANGES/v3.md
index 04c68a38afa..1d7a59fbf6a 100644
--- a/BREAKING_CHANGES/v3.md
+++ b/BREAKING_CHANGES/v3.md
@@ -121,58 +121,82 @@ The following component members marked as internal by comment have been changed
- `ix-menu-settings`: `show`
- `ix-dropdown-item`: `emitItemClick()`
+## Remove `bootstrap` as peerDependency
+
+We are removing Bootstrap as a dependency to reduce the overall style size and to become more independent of any CSS framework. If you still wish to use Bootstrap, you will need to add it as a dependency on your own.
+
+### HTML-Table `.table` and `.table-striped` is not based on bootstrap anymore
+
+HTML-Table `.table` and `.table-striped` is not based on bootstrap anymore, if you have used additional functionality from bootstrap like hover. You have to load the bootstrap dependency on your own.
+
## Component Updates
#### ix-action-card
+
- The `insight` and `notification` variants have been **replaced by** `outline` and `filled`.
#### ix-card
+
- The `insight` and `notification` variants have been **replaced by** `outline` and `filled`.
#### ix-chip
+
- The `color` property has been **replaced by** `chipColor`.
#### ix-date-picker
+
- Removed attributes: `individual`, and `eventDelimiter`.
- The `textSelectedDate` property has been **replaced by** `i18nDone`.
- The `done` event has been **replaced by** `dateSelect`.
#### ix-datetime-picker
+
- The `textSelectedDate` property has been **replaced by** `i18nDone`.
- The `done` event has been **replaced by** `dateSelect`.
- The `eventDelimiter` property has been removed.
#### ix-event-list
+
- The `color` attribute has been **replaced by** `itemColor`.
#### ix-icon-button
+
- The `color` attribute has been **replaced by** `iconColor`.
- Size `32` has been removed.
#### ix-menu
+
- Removed the `maxVisibleMenuItems` attribute.
#### ix-menu-item
+
- Removed the `tabIcon` attribute and replaced with icon.
#### ix-modal
+
- The `keyboard` attribute has been **replaced by** `closeOnEscape`.
#### ix-pill
+
- The `color` attribute has been **replaced by** `pillColor`.
#### ix-push-card
+
- The `insight` and `notification` variants have been **replaced by** `outline` and `filled`.
#### ix-select
+
- The `selectedIndices` attribute has been **replaced by** `value`.
- The `itemSelectionChange` event has been **replaced by** `valueChange`.
#### ix-select-item
+
- The `value` attribute type has been changed to `string`.
#### ix-time-picker
+
- Removed attributes: `individual` and `showTimeReference`.
#### ix-typography
+
- The `color` attribute has been **replaced by** `textColor`.
diff --git a/package.json b/package.json
index d7775ce1895..c0a3ff489e1 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
"build": "dotenv -- turbo run build",
"storybook": "dotenv -- turbo run storybook",
"start": "dotenv -- turbo run start",
- "turbo": "dotenv -- turbo",
+ "turbo": "turbo",
"lint": "dotenv -- turbo run lint",
"format": "prettier --write ./packages/**/src/**/*.{ts,tsx,js,jsx,css,scss,html,vue,json}",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
@@ -55,7 +55,7 @@
"prettier": "^2.8.8",
"prettier-plugin-organize-imports": "^3.2.4",
"tsx": "^4.16.2",
- "turbo": "^2.0.9",
+ "turbo": "^2.1.1",
"typescript": "^5.5.4"
},
"config": {
diff --git a/packages/core/package.json b/packages/core/package.json
index 6d78705ffd9..053ee147c66 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -69,7 +69,6 @@
"@typescript-eslint/parser": "^6.21.0",
"animate.css": "~4.1.1",
"autoprefixer": "10.4.5",
- "bootstrap": "^5.3.3",
"cssnano": "^6.1.2",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^8.57.0",
@@ -90,9 +89,7 @@
"typescript": "~5.4.5"
},
"peerDependencies": {
- "@popperjs/core": "^2.11.0",
- "@siemens/ix-icons": "0.0.0-20240827135516",
- "bootstrap": "~5.2.0"
+ "@siemens/ix-icons": "0.0.0-20240827135516"
},
"config": {
"commitizen": {
diff --git a/packages/core/scss/_core.scss b/packages/core/scss/_core.scss
index 895a47388c5..7c58ed32e82 100644
--- a/packages/core/scss/_core.scss
+++ b/packages/core/scss/_core.scss
@@ -33,6 +33,7 @@
@import './components/fonts';
@import 'mixins/scrollbar';
+@import './normalize';
:root {
--animate-duration: #{$default-time};
@@ -56,9 +57,3 @@ body {
body:not(.disable-scrollbar) {
@include scrollbar();
}
-
-*,
-*::after,
-*::before {
- box-sizing: border-box;
-}
diff --git a/packages/core/scss/_normalize.scss b/packages/core/scss/_normalize.scss
new file mode 100644
index 00000000000..c11b4afa7b7
--- /dev/null
+++ b/packages/core/scss/_normalize.scss
@@ -0,0 +1,235 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Normalization of HTML elements, manually forked from bootstrap to remove
+// styles targeting irrelevant browsers while applying new styles.
+//
+// Bootstrap is licensed MIT. https://github.com/twbs/bootstrap (Commit: 6f87fce7962bef83c59eff895d891016db620cd7)
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+:root {
+ @media (prefers-reduced-motion: no-preference) {
+ scroll-behavior: smooth;
+ }
+}
+
+hr {
+ margin: 1rem 0;
+ color: inherit;
+ border: 0;
+ border-top: 1px solid;
+ opacity: 0.25;
+}
+
+p {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+h6,
+.h6,
+h5,
+.h5,
+h4,
+.h4,
+h3,
+.h3,
+h2,
+.h2,
+h1,
+.h1 {
+ margin-top: 0;
+ margin-bottom: 0.5rem;
+}
+
+p {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+abbr[title] {
+ cursor: help;
+ text-decoration: underline dotted;
+ text-decoration-skip-ink: none;
+}
+
+address {
+ margin-bottom: 1rem;
+ font-style: normal;
+ line-height: inherit;
+}
+
+ol,
+ul {
+ padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+ margin-bottom: 0;
+}
+
+dt {
+ font-weight: 700;
+}
+
+dd {
+ margin-bottom: 0.5rem;
+ margin-left: 0;
+}
+
+blockquote {
+ margin: 0 0 1rem;
+}
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+small,
+.small {
+ font-size: 0.875em;
+}
+
+mark,
+.mark {
+ padding: 0.1875em;
+ background-color: var(--theme-color-warning-40);
+}
+
+sub,
+sup {
+ position: relative;
+ font-size: 0.75em;
+ line-height: 0;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+a:not([href]):not([class]),
+a:not([href]):not([class]):hover {
+ color: inherit;
+ text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+ font-family: var(--theme-font-code);
+ font-size: 1em;
+}
+
+pre {
+ display: block;
+ margin-top: 0;
+ margin-bottom: 1rem;
+ overflow: auto;
+ font-size: 0.875em;
+}
+
+pre code {
+ font-size: inherit;
+ color: inherit;
+ word-break: normal;
+}
+
+code {
+ font-size: 0.875em;
+ word-wrap: break-word;
+
+ a > code {
+ color: inherit;
+ }
+}
+
+kbd {
+ padding: 0.1875rem 0.375rem;
+ font-size: 0.875em;
+ border-radius: 0.25rem;
+}
+
+kbd kbd {
+ padding: 0;
+ font-size: 1em;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+ border-color: inherit;
+ border-style: solid;
+ border-width: 0;
+}
+
+label {
+ display: inline-block;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+ margin: 0;
+ font-family: inherit;
+ line-height: inherit;
+}
+
+figure {
+ margin: 0 0 1rem;
+}
+
+// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+::-moz-focus-inner {
+ padding: 0;
+ border-style: none;
+}
+
+iframe {
+ border: 0;
+}
+
+img,
+svg {
+ vertical-align: middle;
+}
+
+summary {
+ display: list-item;
+ cursor: pointer;
+}
+
+[hidden] {
+ display: none !important;
+}
diff --git a/packages/core/scss/components/_fonts.scss b/packages/core/scss/components/_fonts.scss
index 778662d91e1..9a08979f763 100644
--- a/packages/core/scss/components/_fonts.scss
+++ b/packages/core/scss/components/_fonts.scss
@@ -66,31 +66,37 @@
}
h6,
+ .h6,
.typography-h6 {
@include typography-h6;
}
h5,
+ .h5,
.typography-h5 {
@include typography-h5;
}
h4,
+ .h4,
.typography-h4 {
@include typography-h4;
}
h3,
+ .h3,
.typography-h3 {
@include typography-h3;
}
h2,
+ .h2,
.typography-h2 {
@include typography-h2;
}
h1,
+ .h1,
.typography-h1 {
@include typography-h1;
}
diff --git a/packages/core/scss/components/_table.scss b/packages/core/scss/components/_table.scss
index c1a1b7a7169..abaeb5b9aa3 100644
--- a/packages/core/scss/components/_table.scss
+++ b/packages/core/scss/components/_table.scss
@@ -8,7 +8,7 @@
*/
@import 'legacy/mixins/fonts';
-.table {
+@mixin bs-legacy-support {
--bs-table-color-type: initial;
--bs-table-bg-type: initial;
--bs-table-color-state: initial;
@@ -23,19 +23,53 @@
--bs-table-active-bg: var(--theme-table-data-row-alt--background--active);
--bs-table-hover-color: var(--theme-table--color);
--bs-table-hover-bg: var(--theme-table-data-row-alt--background--hover);
+}
+
+.table {
+ box-sizing: border-box;
+ border-spacing: 0px;
+ width: 100%;
+ margin-bottom: 1rem;
+ color: var(--theme-color-std-text);
+ vertical-align: top;
+ border-color: var(--theme-table--border-color);
@include text-default;
- thead {
- background-color: var(--theme-table-header-row--background);
- }
+ --ix-table-background: var(--theme-table--background);
- th,
- td {
- border-bottom-color: var(--theme-table-data-row--border-color);
- }
+ // TODO(IX-???): Will be removed after web component implementation is available
+ @include bs-legacy-support;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
- --bs-table-accent-bg: var(--theme-table-data-row-alt--background);
- color: inherit;
+ --ix-table-background: var(--theme-table-data-row-alt--background);
+}
+
+.table thead {
+ background-color: var(--theme-table-header-row--background);
+}
+
+.table > thead {
+ vertical-align: bottom;
+}
+
+.table > :not(caption) > * > * {
+ padding: 0.5rem 0.5rem;
+ background-color: var(--ix-table-background);
+ border-bottom-width: 1px;
+ box-shadow: inset 0 0 0 9999px transparent;
+}
+
+.table th,
+.table td {
+ border-bottom-color: var(--theme-table-data-row--border-color);
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+ text-align: left;
}
diff --git a/packages/core/scss/components/form/_input.scss b/packages/core/scss/components/form/_input.scss
index 696fd61d5bf..4953654501d 100644
--- a/packages/core/scss/components/form/_input.scss
+++ b/packages/core/scss/components/form/_input.scss
@@ -111,6 +111,8 @@
}
@mixin element-textarea {
+ min-height: 2rem;
+ height: 3.25rem;
padding: 0.375rem 1.25rem 0.375rem 0.5rem;
}
@@ -141,6 +143,10 @@
textarea {
@include element-input();
@include element-textarea();
+
+ &.form-control {
+ padding: 0.375rem 0.5rem;
+ }
}
textarea ~ .valid-feedback,
diff --git a/packages/core/scss/ix.scss b/packages/core/scss/ix.scss
index 8d39b1f3517..5422e52afa1 100644
--- a/packages/core/scss/ix.scss
+++ b/packages/core/scss/ix.scss
@@ -8,7 +8,6 @@
*/
/* Include 3rd party libraries */
-@import '~bootstrap/scss/bootstrap';
/* Default Theme */
@import './theme/classic-dark';
diff --git a/packages/core/src/components/drawer/test/drawer.ct.ts b/packages/core/src/components/drawer/test/drawer.ct.ts
index ee436bd70fb..5c91bc21514 100644
--- a/packages/core/src/components/drawer/test/drawer.ct.ts
+++ b/packages/core/src/components/drawer/test/drawer.ct.ts
@@ -17,6 +17,11 @@
import { expect } from '@playwright/test';
import { regressionTest } from '@utils/test';
+// Reduce flaky behavior
+regressionTest.describe.configure({
+ mode: 'serial',
+});
+
regressionTest('renders', async ({ mount, page }) => {
await mount(`Content`);
const drawer = page.locator('ix-drawer');
diff --git a/packages/core/src/components/tooltip/test/tooltip.ct.ts b/packages/core/src/components/tooltip/test/tooltip.ct.ts
index 054ab08c678..0ac22a71ec5 100644
--- a/packages/core/src/components/tooltip/test/tooltip.ct.ts
+++ b/packages/core/src/components/tooltip/test/tooltip.ct.ts
@@ -9,6 +9,11 @@
import { expect } from '@playwright/test';
import { regressionTest } from '@utils/test';
+// Reduce flaky behavior
+regressionTest.describe.configure({
+ mode: 'serial',
+});
+
regressionTest('renders', async ({ mount, page }) => {
await mount(`
tooltip
diff --git a/packages/core/src/tests/3rd-party/bootstrap/bootstrap.e2e.ts-snapshots/3rd-party-bootstrap-html-elements-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/3rd-party/bootstrap/bootstrap.e2e.ts-snapshots/3rd-party-bootstrap-html-elements-1-chromium---theme-classic-dark-linux.png
index 3bfb4cf163c..4e963074335 100644
Binary files a/packages/core/src/tests/3rd-party/bootstrap/bootstrap.e2e.ts-snapshots/3rd-party-bootstrap-html-elements-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/3rd-party/bootstrap/bootstrap.e2e.ts-snapshots/3rd-party-bootstrap-html-elements-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/3rd-party/bootstrap/bootstrap.e2e.ts-snapshots/3rd-party-bootstrap-html-elements-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/3rd-party/bootstrap/bootstrap.e2e.ts-snapshots/3rd-party-bootstrap-html-elements-1-chromium---theme-classic-light-linux.png
index 3bfb4cf163c..4e963074335 100644
Binary files a/packages/core/src/tests/3rd-party/bootstrap/bootstrap.e2e.ts-snapshots/3rd-party-bootstrap-html-elements-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/3rd-party/bootstrap/bootstrap.e2e.ts-snapshots/3rd-party-bootstrap-html-elements-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/3rd-party/bootstrap/html-elements/index.html b/packages/core/src/tests/3rd-party/bootstrap/html-elements/index.html
index 641f499bca8..1f3d94574eb 100644
--- a/packages/core/src/tests/3rd-party/bootstrap/html-elements/index.html
+++ b/packages/core/src/tests/3rd-party/bootstrap/html-elements/index.html
@@ -13,6 +13,12 @@
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
Stencil Component Starter
+
@@ -75,7 +81,7 @@
variant="filled"
>
-
+
Use Swap Instance to replace content
diff --git a/packages/core/src/tests/action-card/selected/index.html b/packages/core/src/tests/action-card/selected/index.html
index 55ad48edc6c..d08b4833046 100644
--- a/packages/core/src/tests/action-card/selected/index.html
+++ b/packages/core/src/tests/action-card/selected/index.html
@@ -17,6 +17,12 @@
ix-action-card {
margin: 1rem;
}
+
+ .card-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
@@ -84,7 +90,7 @@
variant="filled"
>
-
+
Use Swap Instance to replace content
diff --git a/packages/core/src/tests/card-list/card-list.e2e.ts b/packages/core/src/tests/card-list/card-list.e2e.ts
index 3b1a72cd8c9..358c80ff8e6 100644
--- a/packages/core/src/tests/card-list/card-list.e2e.ts
+++ b/packages/core/src/tests/card-list/card-list.e2e.ts
@@ -37,6 +37,7 @@ regressionTest.describe('card-list: basic', () => {
regressionTest('layout scrolling', async ({ page }) => {
await page.goto('card-list/layout-scroll');
+ await page.locator('#end').scrollIntoViewIfNeeded();
await page.waitForTimeout(1000);
expect(
await page.screenshot({ fullPage: true, animations: 'disabled' })
@@ -46,7 +47,7 @@ regressionTest.describe('card-list: basic', () => {
regressionTest('layout scrolling end', async ({ page }) => {
await page.goto('card-list/layout-scroll');
- await page.locator('#end').scrollIntoViewIfNeeded();
+ await page.locator('ix-push-card').last().scrollIntoViewIfNeeded();
await page.waitForTimeout(1000);
expect(
await page.screenshot({ fullPage: true, animations: 'disabled' })
diff --git a/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-dark-linux.png
index fa5eda96e27..c9e4c096488 100644
Binary files a/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-light-linux.png
index b490143ed38..b07a932979c 100644
Binary files a/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-dark-linux.png
index 14e74aebb56..afd799167f8 100644
Binary files a/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-light-linux.png
index 92d1e42e01b..75b47b48ed2 100644
Binary files a/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/card/basic/index.html b/packages/core/src/tests/card/basic/index.html
index 428cafeaf4b..1c25c85ff34 100644
--- a/packages/core/src/tests/card/basic/index.html
+++ b/packages/core/src/tests/card/basic/index.html
@@ -17,61 +17,67 @@
ix-card {
margin: 1rem;
}
+
+ .card-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
-
+
Insight
-
+
Notification
-
+
Alarm
-
+
Critical
-
+
Warning
-
+
Info
-
+
Neutral
-
+
Success
-
+
Primary
-
+
Outline
-
+
Filled
diff --git a/packages/core/src/tests/card/selected/index.html b/packages/core/src/tests/card/selected/index.html
index 9fed0074481..017562c6d7e 100644
--- a/packages/core/src/tests/card/selected/index.html
+++ b/packages/core/src/tests/card/selected/index.html
@@ -17,61 +17,67 @@
ix-card {
margin: 1rem;
}
+
+ .card-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
-
+
Insight
-
+
Notification
-
+
Alarm
-
+
Critical
-
+
Warning
-
+
Info
-
+
Neutral
-
+
Success
-
+
Primary
-
+
Outline
-
+
Filled
diff --git a/packages/core/src/tests/flip-tile/basic/index.html b/packages/core/src/tests/flip-tile/basic/index.html
index 74cd403fbbf..6a137156d08 100644
--- a/packages/core/src/tests/flip-tile/basic/index.html
+++ b/packages/core/src/tests/flip-tile/basic/index.html
@@ -13,21 +13,28 @@
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
Stencil Component Starter
-
-
-
+ }
+
+ .content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+
+
+
Flip header
Predicted maintenance date
-
@@ -36,7 +43,7 @@
Flip header
Predicted maintenance date
-
@@ -45,7 +52,7 @@
Flip header
Predicted maintenance date
-
@@ -54,7 +61,7 @@
Flip header
Predicted maintenance date
-
@@ -63,7 +70,7 @@
Flip header
Predicted maintenance date
-
diff --git a/packages/core/src/tests/flip-tile/custom-sizes/index.html b/packages/core/src/tests/flip-tile/custom-sizes/index.html
index 3f429706f04..bc331565d3d 100644
--- a/packages/core/src/tests/flip-tile/custom-sizes/index.html
+++ b/packages/core/src/tests/flip-tile/custom-sizes/index.html
@@ -13,21 +13,28 @@
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
Stencil Component Starter
-
-
-
+ }
+
+ .content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+
+
+
Flip header
Predicted maintenance date
-
@@ -36,7 +43,7 @@
Flip header
Predicted maintenance date
-
@@ -45,7 +52,7 @@
Flip header
Predicted maintenance date
-
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-basic-1-chromium---theme-classic-dark-linux.png
index cbc56830e07..fc8aacb83ce 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-basic-1-chromium---theme-classic-light-linux.png
index 8155920b9be..6182d323ce0 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-1-chromium---theme-classic-dark-linux.png
index 61ddacdb999..579350529a4 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-1-chromium---theme-classic-light-linux.png
index d4578d107fd..fd46a4b04a8 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-disabled-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-disabled-1-chromium---theme-classic-dark-linux.png
index d4f7fbf7401..c5628b07e11 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-disabled-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-disabled-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-disabled-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-disabled-1-chromium---theme-classic-light-linux.png
index ec5a2b4ece3..1a770bd97aa 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-disabled-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-disabled-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-readonly-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-readonly-1-chromium---theme-classic-dark-linux.png
index bc5586e56cb..66c3c3730ed 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-readonly-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-readonly-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-readonly-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-readonly-1-chromium---theme-classic-light-linux.png
index aec18e4a271..e86fb8f55a9 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-readonly-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-info-with-readonly-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-1-chromium---theme-classic-dark-linux.png
index adb58917c53..95243c62442 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-1-chromium---theme-classic-light-linux.png
index 165bba862c0..9b09aa46e90 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-disabled-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-disabled-1-chromium---theme-classic-dark-linux.png
index b4cba3a33ab..8affc36b8ca 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-disabled-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-disabled-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-disabled-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-disabled-1-chromium---theme-classic-light-linux.png
index dc0b76e51d4..dce4dfa87df 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-disabled-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-disabled-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-readonly-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-readonly-1-chromium---theme-classic-dark-linux.png
index 2e143c14972..89039184c74 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-readonly-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-readonly-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-readonly-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-readonly-1-chromium---theme-classic-light-linux.png
index 869215fc5cf..cbdeaa791f7 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-readonly-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-invalid-with-readonly-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-1-chromium---theme-classic-dark-linux.png
index 1d168ee62f0..75bb01f845f 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-1-chromium---theme-classic-light-linux.png
index b53a76c7527..32fb6ec384f 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-disabled-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-disabled-1-chromium---theme-classic-dark-linux.png
index 245b3754845..a06bc19f36a 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-disabled-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-disabled-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-disabled-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-disabled-1-chromium---theme-classic-light-linux.png
index 2017afc4b80..32495878c03 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-disabled-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-disabled-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-readonly-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-readonly-1-chromium---theme-classic-dark-linux.png
index 09256a26b4b..408baf909ea 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-readonly-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-readonly-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-readonly-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-readonly-1-chromium---theme-classic-light-linux.png
index af5b5e4e3e1..1f31c4238a8 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-readonly-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-valid-with-readonly-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-1-chromium---theme-classic-dark-linux.png
index 7de6ca6dada..0e5823afeb3 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-1-chromium---theme-classic-light-linux.png
index 568a06b84d5..e2eb1f2f27b 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-disabled-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-disabled-1-chromium---theme-classic-dark-linux.png
index 2555139d0d0..90da71c94cc 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-disabled-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-disabled-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-disabled-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-disabled-1-chromium---theme-classic-light-linux.png
index 8095a7cb7ed..c2ee462f5de 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-disabled-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-disabled-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-readonly-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-readonly-1-chromium---theme-classic-dark-linux.png
index 7a51d3761fe..05a1a5b6da1 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-readonly-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-readonly-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-readonly-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-readonly-1-chromium---theme-classic-light-linux.png
index 7662cbfb3d6..26fc5ec75d6 100644
Binary files a/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-readonly-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/form-fields/form-fields.e2e.ts-snapshots/form-fields-state-warning-with-readonly-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/input/input.e2e.ts-snapshots/input-focus-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/input/input.e2e.ts-snapshots/input-focus-1-chromium---theme-classic-dark-linux.png
index 5eb91c90645..d9ff23ab5b8 100644
Binary files a/packages/core/src/tests/input/input.e2e.ts-snapshots/input-focus-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/input/input.e2e.ts-snapshots/input-focus-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/input/input.e2e.ts-snapshots/input-focus-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/input/input.e2e.ts-snapshots/input-focus-1-chromium---theme-classic-light-linux.png
index 2374840b515..17f7f8de5e0 100644
Binary files a/packages/core/src/tests/input/input.e2e.ts-snapshots/input-focus-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/input/input.e2e.ts-snapshots/input-focus-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/input/input.e2e.ts-snapshots/input-with-value-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/input/input.e2e.ts-snapshots/input-with-value-1-chromium---theme-classic-dark-linux.png
index e90280e0a24..1bd67f56be8 100644
Binary files a/packages/core/src/tests/input/input.e2e.ts-snapshots/input-with-value-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/input/input.e2e.ts-snapshots/input-with-value-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/input/input.e2e.ts-snapshots/input-with-value-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/input/input.e2e.ts-snapshots/input-with-value-1-chromium---theme-classic-light-linux.png
index 831ffe148d3..ce8e5b02c4b 100644
Binary files a/packages/core/src/tests/input/input.e2e.ts-snapshots/input-with-value-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/input/input.e2e.ts-snapshots/input-with-value-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/layout-grid/basic/index.html b/packages/core/src/tests/layout-grid/basic/index.html
new file mode 100644
index 00000000000..337c7f8dfd6
--- /dev/null
+++ b/packages/core/src/tests/layout-grid/basic/index.html
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
+
Stencil Component Starter
+
+
+
+
+
Column = 4
+
+
+ 1
+ 2
+
+ Test
+
+ 4
+ 5
+
+
+
+
Normal
+
+
+ 1
+ 2
+
+ Test
+
+ 4
+ 5
+
+
+
+
No padding
+
+
+ 1
+ 2
+
+ Test
+
+ 4
+ 5
+
+
+
+
No row gap
+
+
+ 1
+ 2
+
+ Test
+
+ 4
+ 5
+
+
+
+ 1
+ 2
+
+ Test
+
+ 4
+ 5
+
+
+
+
+
+
diff --git a/packages/core/src/tests/layout-grid/layout-grid.e2e.ts b/packages/core/src/tests/layout-grid/layout-grid.e2e.ts
index 8c448760ec9..6eb5dadec96 100644
--- a/packages/core/src/tests/layout-grid/layout-grid.e2e.ts
+++ b/packages/core/src/tests/layout-grid/layout-grid.e2e.ts
@@ -9,136 +9,38 @@
import { expect } from '@playwright/test';
import { regressionTest, viewPorts } from '@utils/test';
-regressionTest('should not have regression', async ({ mount, page }) => {
+regressionTest('should not have regression', async ({ page }) => {
await page.setViewportSize(viewPorts.lg);
- await mount(htmlSource);
+ await page.goto('layout-grid/basic');
const grid = page.locator('ix-layout-grid').nth(0);
await expect(grid).toHaveClass(/hydrated/);
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});
-regressionTest('should not have regression large', async ({ mount, page }) => {
+regressionTest('should not have regression large', async ({ page }) => {
await page.setViewportSize(viewPorts.lg);
- await mount(htmlSimple);
+ await page.goto('layout-grid/simple');
const grid = page.locator('ix-layout-grid').nth(0);
await expect(grid).toHaveClass(/hydrated/);
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});
-regressionTest('should not have regression medium', async ({ mount, page }) => {
+regressionTest('should not have regression medium', async ({ page }) => {
await page.setViewportSize(viewPorts.md);
- await mount(htmlSimple);
+ await page.goto('layout-grid/simple');
const grid = page.locator('ix-layout-grid').nth(0);
await expect(grid).toHaveClass(/hydrated/);
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});
-regressionTest('should not have regression small', async ({ mount, page }) => {
+regressionTest('should not have regression small', async ({ page }) => {
await page.setViewportSize(viewPorts.sm);
- await mount(htmlSimple);
+ await page.goto('layout-grid/simple');
const grid = page.locator('ix-layout-grid').nth(0);
await expect(grid).toHaveClass(/hydrated/);
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});
-
-const htmlSimple = `
-
-
-
- 1
-
-
- 2
-
-
- 3
-
-
-
-
-
-`;
-
-const htmlSource = `
-
Column = 4
-
-
- 1
- 2
-
- Test
-
- 4
- 5
-
-
-
-
Normal
-
-
- 1
- 2
-
- Test
-
- 4
- 5
-
-
-
-
No padding
-
-
- 1
- 2
-
- Test
-
- 4
- 5
-
-
-
-
No row gap
-
-
- 1
- 2
-
- Test
-
- 4
- 5
-
-
-
- 1
- 2
-
- Test
-
- 4
- 5
-
-
-
-
-`;
diff --git a/packages/core/src/tests/layout-grid/simple/index.html b/packages/core/src/tests/layout-grid/simple/index.html
new file mode 100644
index 00000000000..50df911749f
--- /dev/null
+++ b/packages/core/src/tests/layout-grid/simple/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
Stencil Component Starter
+
+
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
diff --git a/packages/core/src/tests/message-bar/basic/index.html b/packages/core/src/tests/message-bar/basic/index.html
index 6c9c39fb427..ca55c5fa265 100644
--- a/packages/core/src/tests/message-bar/basic/index.html
+++ b/packages/core/src/tests/message-bar/basic/index.html
@@ -13,16 +13,29 @@
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
Stencil Component Starter
+
-
-
Message text
-
Message text
-
-
- Message text Action
-
-
+
+
Message text
+
Message text
+
+
+ Message text Action
+
+
diff --git a/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-dark-linux.png
index f2e2fabb802..fa4fc175312 100644
Binary files a/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-light-linux.png
index b0daedcf06d..a5d01b9e751 100644
Binary files a/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png
index 8a53ddbfaec..7de7514865e 100644
Binary files a/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png
index fcde62bae2f..1913dc2cb91 100644
Binary files a/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-dark-linux.png
index b95028f6ef3..38312a894c3 100644
Binary files a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-light-linux.png
index 6b539f5b2e4..55aa9eae698 100644
Binary files a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-basic-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-disabled-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-disabled-1-chromium---theme-classic-dark-linux.png
index 954332fbb8f..9b157acd398 100644
Binary files a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-disabled-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-disabled-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-disabled-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-disabled-1-chromium---theme-classic-light-linux.png
index 18e1281ed6a..091e3e24fa6 100644
Binary files a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-disabled-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-disabled-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-dark-linux.png
index ef0100dcc58..82ed3748052 100644
Binary files a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-light-linux.png
index a8ee99f60e6..b7c8f0f56da 100644
Binary files a/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-light-linux.png and b/packages/core/src/tests/textarea/textarea.e2e.ts-snapshots/textarea-readonly-1-chromium---theme-classic-light-linux.png differ
diff --git a/packages/core/src/tests/tile/basic/index.html b/packages/core/src/tests/tile/basic/index.html
index 48e68a75c73..3b5172d505e 100644
--- a/packages/core/src/tests/tile/basic/index.html
+++ b/packages/core/src/tests/tile/basic/index.html
@@ -13,40 +13,52 @@
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
Stencil Component Starter
+
92.8 °C
-
+
Tile header
92.8 °C
-
-