+ {hasOutlineFill && this.renderOutlineContainer()}
+
(this.startContainerEl = el)}>
+
+
+ {this.renderLabel()}
(this.nativeWrapperEl = el)} part="container">
{this.renderSelectText()}
{this.renderListbox()}
+ {/**
+ * The icon is rendered inside the native wrapper when the
+ * label is not floating or stacked so it stays grouped with
+ * the control. This keeps it positioned correctly when the
+ * justify property is set.
+ */}
+ {!hasFloatingOrStackedLabel && this.renderSelectIcon()}
+
+
+ {/**
+ * The icon is rendered in the end container when the
+ * select has a floating or stacked label so it is
+ * centered vertically relative to the entire select.
+ */}
+ {hasFloatingOrStackedLabel && this.renderSelectIcon()}
- {!hasFloatingOrStackedLabel && this.renderSelectIcon()}
- {/**
- * The icon in a floating/stacked select
- * must be centered with the entire select,
- * while the start/end slots and native control
- * are vertically offset in the default or
- * solid fills. As a result, we render the
- * icon outside the inner wrapper, which holds
- * those components.
- */}
- {hasFloatingOrStackedLabel && this.renderSelectIcon()}
{shouldRenderHighlight &&
}
{this.renderBottomContent()}
diff --git a/core/src/components/select/test/basic/select.e2e.ts b/core/src/components/select/test/basic/select.e2e.ts
index d1fdcb8583f..2e2582abe3c 100644
--- a/core/src/components/select/test/basic/select.e2e.ts
+++ b/core/src/components/select/test/basic/select.e2e.ts
@@ -464,7 +464,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
// Create a spy function in page context
await page.setContent(
`
-
+
Apple
Banana
@@ -474,11 +474,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
// Track calls to the exposed function
const clickEvent = await page.spyOnEvent('click');
- const input = page.locator('label.select-wrapper');
+ const select = page.locator('label.select-wrapper');
// Use position to make sure we click into the label enough to trigger
// what would be the double click
- await input.click({
+ await select.click({
position: {
x: 5,
y: 5,
@@ -488,10 +488,196 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
// Verify the click was triggered exactly once
expect(clickEvent).toHaveReceivedEventTimes(1);
- // Verify that the event target is the checkbox and not the item
+ // Verify that the event target is the select and not the item
+ const event = clickEvent.events[0];
+ expect((event.target as HTMLElement).tagName.toLowerCase()).toBe('ion-select');
+ });
+
+ test('should trigger onclick only once when clicking the wrapper', async ({ page }, testInfo) => {
+ testInfo.annotations.push({
+ type: 'issue',
+ description: 'https://github.com/ionic-team/ionic-framework/issues/30165',
+ });
+ // Create a spy function in page context
+ await page.setContent(
+ `
+
+ Apple
+ Banana
+
+ `,
+ config
+ );
+
+ // Track calls to the exposed function
+ const clickEvent = await page.spyOnEvent('click');
+ const select = page.locator('div.native-wrapper');
+
+ // Use position to make sure we click into the label enough to trigger
+ // what would be the double click
+ await select.click({
+ position: {
+ x: 1,
+ y: 1,
+ },
+ });
+
+ // Verify the click was triggered exactly once
+ expect(clickEvent).toHaveReceivedEventTimes(1);
+
+ // Verify that the event target is the select and not the item
const event = clickEvent.events[0];
expect((event.target as HTMLElement).tagName.toLowerCase()).toBe('ion-select');
});
+
+ test('should trigger onclick only once when the select is itself slotted', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Apple
+ Banana
+
+
+ `,
+ config
+ );
+
+ const clickEvent = await page.spyOnEvent('click');
+
+ await page.locator('label.select-wrapper').click({
+ position: {
+ x: 5,
+ y: 5,
+ },
+ });
+
+ expect(clickEvent).toHaveReceivedEventTimes(1);
+ });
+
+ test('should propagate clicks from start slot button to parent', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Parent Container
+
+ Icon
+ Apple
+ Banana
+
+
+ `,
+ config
+ );
+
+ const button = page.locator('ion-button[slot="start"]');
+ const parent = page.locator('#parent');
+
+ // Click the button in the start slot
+ await button.click();
+
+ // The button's own click handler should have fired
+ let buttonClicks = await page.evaluate(() => (window as any).buttonClicks);
+ expect(buttonClicks).toBe(1);
+
+ // The parent's click handler should also have fired
+ let parentClicks = await page.evaluate(() => (window as any).parentClicks);
+ expect(parentClicks).toBe(1);
+
+ // Click on the parent container (far right to avoid the start button)
+ await parent.click({ position: { x: 250, y: 50 } });
+
+ // Parent should have incremented
+ parentClicks = await page.evaluate(() => (window as any).parentClicks);
+ expect(parentClicks).toBe(2);
+
+ // Button should NOT have incremented
+ buttonClicks = await page.evaluate(() => (window as any).buttonClicks);
+ expect(buttonClicks).toBe(1);
+ });
+
+ test('should propagate clicks from end slot button to parent', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Parent Container
+
+ Apple
+ Banana
+ Toggle
+
+
+ `,
+ config
+ );
+
+ const button = page.locator('ion-button[slot="end"]');
+ const parent = page.locator('#parent');
+
+ // Click the button in the end slot
+ await button.click();
+
+ // The button's own click handler should have fired
+ let buttonClicks = await page.evaluate(() => (window as any).buttonClicks);
+ expect(buttonClicks).toBe(1);
+
+ // The parent's click handler should also have fired
+ let parentClicks = await page.evaluate(() => (window as any).parentClicks);
+ expect(parentClicks).toBe(1);
+
+ // Click on the parent container (far left to avoid the end button)
+ await parent.click({ position: { x: 10, y: 50 } });
+
+ // Parent should have incremented
+ parentClicks = await page.evaluate(() => (window as any).parentClicks);
+ expect(parentClicks).toBe(2);
+
+ // Button should NOT have incremented
+ buttonClicks = await page.evaluate(() => (window as any).buttonClicks);
+ expect(buttonClicks).toBe(1);
+ });
+ });
+});
+
+/**
+ * The solid and outline fills are only supported by `md` mode. These
+ * are the only fills that get padding which can cause a double click.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+ test.describe(title('select: click'), () => {
+ ['solid', 'outline'].forEach((fill) => {
+ test(`should trigger onclick only once when clicking the ${fill} wrapper padding`, async ({ page }) => {
+ await page.setContent(
+ `
+
+ Apple
+ Banana
+
+ `,
+ config
+ );
+
+ const clickEvent = await page.spyOnEvent('click');
+ const wrapper = page.locator('label.select-wrapper');
+
+ await wrapper.click({
+ position: {
+ x: 5,
+ y: 5,
+ },
+ });
+
+ expect(clickEvent).toHaveReceivedEventTimes(1);
+
+ const event = clickEvent.events[0];
+ expect((event.target as HTMLElement).tagName.toLowerCase()).toBe('ion-select');
+ });
+ });
});
});
diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png
index ef499318f24..44b3f6e688e 100644
Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts b/core/src/components/select/test/custom/select.e2e.ts
index c21f83decab..d34e2730bcf 100644
--- a/core/src/components/select/test/custom/select.e2e.ts
+++ b/core/src/components/select/test/custom/select.e2e.ts
@@ -86,10 +86,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
background-color: red;
}
- ion-select::part(inner) {
- background-color: orange;
- }
-
ion-select::part(bottom) {
background-color: green;
}
@@ -104,26 +100,68 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
const select = page.locator('ion-select');
const wrapper = select.locator('.select-wrapper');
- const wrapperInner = select.locator('.select-wrapper-inner');
const bottom = select.locator('.select-bottom');
const wrapperBackgroundColor = await wrapper.evaluate((el) => {
return window.getComputedStyle(el).backgroundColor;
});
- const wrapperInnerBackgroundColor = await wrapperInner.evaluate((el) => {
- return window.getComputedStyle(el).backgroundColor;
- });
-
const bottomBackgroundColor = await bottom.evaluate((el) => {
return window.getComputedStyle(el).backgroundColor;
});
expect(wrapperBackgroundColor).toBe('rgb(255, 0, 0)');
- expect(wrapperInnerBackgroundColor).toBe('rgb(255, 165, 0)');
expect(bottomBackgroundColor).toBe('rgb(0, 128, 0)');
});
+ test('should be able to customize start, control and end using css parts', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ Apple
+ Start
+ End
+
+ `,
+ config
+ );
+
+ const select = page.locator('ion-select');
+ const start = select.locator('.select-start');
+ const control = select.locator('.select-control');
+ const end = select.locator('.select-end');
+
+ const startBackgroundColor = await start.evaluate((el) => {
+ return window.getComputedStyle(el).backgroundColor;
+ });
+
+ const controlBackgroundColor = await control.evaluate((el) => {
+ return window.getComputedStyle(el).backgroundColor;
+ });
+
+ const endBackgroundColor = await end.evaluate((el) => {
+ return window.getComputedStyle(el).backgroundColor;
+ });
+
+ expect(startBackgroundColor).toBe('rgb(255, 0, 0)');
+ expect(controlBackgroundColor).toBe('rgb(0, 128, 0)');
+ expect(endBackgroundColor).toBe('rgb(0, 0, 255)');
+ });
+
test('should render custom cancel text when prop is provided with alert interface', async ({ page }) => {
await page.setContent(
`
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Chrome-linux.png
index eff7fe50897..63ad2c291f4 100644
Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Firefox-linux.png
index 4541a49225e..e6e68d35dbe 100644
Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Safari-linux.png
index ed8be74361a..f5efe788fd6 100644
Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Chrome-linux.png
index 6602299e656..2241f4b2c60 100644
Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Firefox-linux.png
index 58209b382e7..4a98165216e 100644
Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Safari-linux.png
index ece3d7dbaf8..d7154921ad2 100644
Binary files a/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/custom/select.e2e.ts-snapshots/select-custom-parts-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts b/core/src/components/select/test/label/select.e2e.ts
index 2b7fb3c4b32..19193906e98 100644
--- a/core/src/components/select/test/label/select.e2e.ts
+++ b/core/src/components/select/test/label/select.e2e.ts
@@ -310,6 +310,65 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
const select = page.locator('ion-select');
await expect(select).toHaveScreenshot(screenshot(`select-label-slot-truncate`));
});
+
+ /**
+ * The floating label must be positioned relative to `.select-wrapper` so its
+ * width is not constrained when the select width collapses. These tests
+ * cover both cases: a long label should retain the same available width
+ * despite wide start content, and a short label should not collapse when
+ * the start content takes up most of the select's width.
+ */
+ test('start slot content should not shrink the label', async ({ page }) => {
+ await page.setContent(
+ `
+
+ `,
+ config
+ );
+
+ const labelWidth = (id: string) =>
+ page.locator(`${id} .label-text`).evaluate((el: HTMLElement) => ({
+ available: el.clientWidth,
+ wanted: el.scrollWidth,
+ }));
+
+ const plain = await labelWidth('#plain');
+ const wideStart = await labelWidth('#wide-start');
+
+ // The label is long enough that it has to truncate in both cases
+ expect(plain.wanted).toBeGreaterThan(plain.available);
+
+ expect(wideStart.available).toBe(plain.available);
+ });
+
+ test('start slot content should not collapse a short label', async ({ page }) => {
+ await page.setContent(
+ `
+
+ `,
+ config
+ );
+
+ const label = await page.locator('.label-text').evaluate((el: HTMLElement) => ({
+ available: el.clientWidth,
+ wanted: el.scrollWidth,
+ }));
+
+ expect(label.available).toBe(label.wanted);
+ });
});
});
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-ltr-Mobile-Chrome-linux.png
index 3ed605aeeb4..180bd4c00dd 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-ltr-Mobile-Firefox-linux.png
index 56677083296..29027605dcc 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-ltr-Mobile-Safari-linux.png
index 6684a203586..c033054acc4 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-rtl-Mobile-Chrome-linux.png
index d2f6fc5f9a3..08ff1032a0f 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-rtl-Mobile-Firefox-linux.png
index 47541dc8346..8bd46e0baba 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-rtl-Mobile-Safari-linux.png
index a5e68c1b88d..5078cba7651 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-ltr-Mobile-Chrome-linux.png
index 0177757b548..80e7aa4b8f6 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-ltr-Mobile-Firefox-linux.png
index 1a0b9331ab9..bde86b267c1 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-ltr-Mobile-Safari-linux.png
index 2f0f1808e79..90f93e2c820 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-rtl-Mobile-Chrome-linux.png
index 71f7f4e72c8..4412f2af29c 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-rtl-Mobile-Firefox-linux.png
index d2986c7fce5..c97b1f392d8 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-rtl-Mobile-Safari-linux.png
index fa59147c6cd..b0fc6cf3700 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-expanded-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png
index 1ddc9fb1414..7a6fc646c5a 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png
index dd6ca99b04f..f00adf940dc 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Safari-linux.png
index 89bb6f642ba..ab9cfae7250 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-ltr-Mobile-Chrome-linux.png
index 129cb9dace9..ec3a43ddbe3 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-ltr-Mobile-Firefox-linux.png
index 3ced41b34a2..218c34b9d18 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-ltr-Mobile-Safari-linux.png
index 75d1b4e2842..f2977660664 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Chrome-linux.png
index c258b4ef733..b6946469f81 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Firefox-linux.png
index 901eb2f8f69..8634647856e 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Safari-linux.png
index d163f919b60..bd68d3a74ef 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-ltr-Mobile-Chrome-linux.png
index 9b3525a2b21..7753ab6b337 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-ltr-Mobile-Firefox-linux.png
index b0915d2d15c..e764bf6e0dc 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-ltr-Mobile-Safari-linux.png
index 25ab62fe654..7b3275e53f4 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Chrome-linux.png
index 38f7e2016ad..4be8bcd188d 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Firefox-linux.png
index 70f2027262e..d4b75d41cbd 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Safari-linux.png
index 0026f61729a..daec59aa2c7 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-ltr-Mobile-Chrome-linux.png
index 978cc41d6ef..add1413fef8 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-ltr-Mobile-Firefox-linux.png
index 4eece398fb8..ae9d21f2a84 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-ltr-Mobile-Safari-linux.png
index 1cddb7d481b..760998cd028 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-rtl-Mobile-Chrome-linux.png
index a1b060278b3..819d414161b 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-rtl-Mobile-Firefox-linux.png
index a166e45e3f8..5419d8d0d9d 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-rtl-Mobile-Safari-linux.png
index 0de1a08d767..4ac51c1fa9a 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-ltr-Mobile-Chrome-linux.png
index 0857c286f41..62fd74caa46 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-ltr-Mobile-Firefox-linux.png
index 41599e27b36..6a606f145b4 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-ltr-Mobile-Safari-linux.png
index 226283e7583..ca4052039c5 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-rtl-Mobile-Chrome-linux.png
index c8a094627ae..23e6a7cc1de 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-rtl-Mobile-Firefox-linux.png
index e2a8a1fb46c..9240a1e090c 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-rtl-Mobile-Safari-linux.png
index 68472e6210e..e43874b01be 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-value-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-ltr-Mobile-Chrome-linux.png
index 07e110ee51c..180bd4c00dd 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-ltr-Mobile-Firefox-linux.png
index dd5953fa39a..29027605dcc 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-ltr-Mobile-Safari-linux.png
index 63d3fb67911..c033054acc4 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-rtl-Mobile-Chrome-linux.png
index b92d97bf8cc..08ff1032a0f 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-rtl-Mobile-Firefox-linux.png
index 1fbcd543104..8bd46e0baba 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-rtl-Mobile-Safari-linux.png
index 95210410358..5078cba7651 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-ltr-Mobile-Chrome-linux.png
index 2b49ca634d8..80e7aa4b8f6 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-ltr-Mobile-Firefox-linux.png
index 9c41294452c..bde86b267c1 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-ltr-Mobile-Safari-linux.png
index b795084c955..90f93e2c820 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-rtl-Mobile-Chrome-linux.png
index 996782615e7..4412f2af29c 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-rtl-Mobile-Firefox-linux.png
index 107a32ea005..c97b1f392d8 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-rtl-Mobile-Safari-linux.png
index 691610673a7..b0fc6cf3700 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-expanded-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-ltr-Mobile-Chrome-linux.png
index 129cb9dace9..ec3a43ddbe3 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-ltr-Mobile-Firefox-linux.png
index 3ced41b34a2..218c34b9d18 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-ltr-Mobile-Safari-linux.png
index 75d1b4e2842..f2977660664 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Chrome-linux.png
index c258b4ef733..b6946469f81 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Firefox-linux.png
index 901eb2f8f69..8634647856e 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Safari-linux.png
index d163f919b60..bd68d3a74ef 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-ltr-Mobile-Chrome-linux.png
index 9b3525a2b21..7753ab6b337 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-ltr-Mobile-Firefox-linux.png
index b0915d2d15c..e764bf6e0dc 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-ltr-Mobile-Safari-linux.png
index 25ab62fe654..7b3275e53f4 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Chrome-linux.png
index 38f7e2016ad..4be8bcd188d 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Firefox-linux.png
index 70f2027262e..d4b75d41cbd 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Safari-linux.png
index 0026f61729a..daec59aa2c7 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-ltr-Mobile-Chrome-linux.png
index 978cc41d6ef..add1413fef8 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-ltr-Mobile-Firefox-linux.png
index 4eece398fb8..ae9d21f2a84 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-ltr-Mobile-Safari-linux.png
index 1cddb7d481b..760998cd028 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-rtl-Mobile-Chrome-linux.png
index a1b060278b3..819d414161b 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-rtl-Mobile-Firefox-linux.png
index a166e45e3f8..5419d8d0d9d 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-rtl-Mobile-Safari-linux.png
index 0de1a08d767..4ac51c1fa9a 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-ltr-Mobile-Chrome-linux.png
index 0857c286f41..62fd74caa46 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-ltr-Mobile-Firefox-linux.png
index 41599e27b36..6a606f145b4 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-ltr-Mobile-Safari-linux.png
index 226283e7583..ca4052039c5 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-rtl-Mobile-Chrome-linux.png
index c8a094627ae..23e6a7cc1de 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-rtl-Mobile-Firefox-linux.png
index e2a8a1fb46c..9240a1e090c 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-rtl-Mobile-Safari-linux.png
index 68472e6210e..e43874b01be 100644
Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-value-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-ios-ltr-Mobile-Chrome-linux.png
index 65b83d62d23..5ba99860fe1 100644
Binary files a/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-ios-ltr-Mobile-Firefox-linux.png
index 9379f05868b..96bfc7e088e 100644
Binary files a/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-md-ltr-Mobile-Chrome-linux.png
index a741ba882d2..0c187482dff 100644
Binary files a/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-md-ltr-Mobile-Firefox-linux.png
index db773de4fa1..d384c34c51b 100644
Binary files a/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/rich-content-option/select.e2e.ts-snapshots/select-rich-content-alert-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/slot/index.html b/core/src/components/select/test/slot/index.html
index c23bccbf616..04105ed57bc 100644
--- a/core/src/components/select/test/slot/index.html
+++ b/core/src/components/select/test/slot/index.html
@@ -2,7 +2,7 @@
- Select - Slots
+ Select - Slot
@@ -42,7 +64,7 @@
- Select - Slots
+ Select - Slot
@@ -50,7 +72,13 @@
No Fill / Start Label / Justify Start
-
+
Pepperoni
Supreme
@@ -69,6 +97,7 @@ Solid / Start Label / Justify Start
label-placement="start"
justify="start"
fill="solid"
+ interface="action-sheet"
>
Pepperoni
@@ -88,6 +117,7 @@ Outline / Start Label / Justify Start
label-placement="start"
justify="start"
fill="outline"
+ interface="action-sheet"
>
Pepperoni
@@ -101,7 +131,13 @@ Outline / Start Label / Justify Start
No Fill / Start Label / Justify End
-
+
Pepperoni
Supreme
@@ -120,6 +156,7 @@ Solid / Start Label / Justify End
label-placement="start"
justify="end"
fill="solid"
+ interface="action-sheet"
>
Pepperoni
@@ -139,6 +176,7 @@ Outline / Start Label / Justify End
label-placement="start"
justify="end"
fill="outline"
+ interface="action-sheet"
>
Pepperoni
@@ -157,6 +195,7 @@ No Fill / Start Label / Justify Space Between
placeholder="Select a pizza"
label-placement="start"
justify="space-between"
+ interface="action-sheet"
>
Pepperoni
@@ -176,6 +215,7 @@ Solid / Start Label / Justify Space Between
label-placement="start"
justify="space-between"
fill="solid"
+ interface="action-sheet"
>
Pepperoni
@@ -195,6 +235,7 @@ Outline / Start Label / Justify Space Between
label-placement="start"
justify="space-between"
fill="outline"
+ interface="action-sheet"
>
Pepperoni
@@ -208,7 +249,12 @@ Outline / Start Label / Justify Space Between
No Fill / Floating Label
-
+
Pepperoni
Supreme
@@ -221,7 +267,13 @@ No Fill / Floating Label
Solid / Floating Label
-
+
Pepperoni
Supreme
@@ -234,7 +286,69 @@ Solid / Floating Label
Outline / Floating Label
-
+
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
+
+
+
+
No Fill / Stacked Label
+
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
+
+
+
+
Solid / Stacked Label
+
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
+
+
+
+
Outline / Stacked Label
+
Pepperoni
Supreme
@@ -245,7 +359,302 @@ Outline / Floating Label
+
+ Overflowing Slots
+
+
+
No Fill / Start Label / No Slot
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
+
No Fill / Start Label / Start Slot
+
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
+
No Fill / Start Label / End Slot
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
+
+
Outline / Start Label / No Slot
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
+
Outline / Start Label / Start Slot
+
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
+
Outline / Start Label / End Slot
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
+
+
Outline / Floating Label / No Slot
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
+
Outline / Floating Label / Start Slot
+
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
+
Outline / Floating Label / End Slot
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
Click Propagation
+
+ Each click on the host is counted, and the target of each is logged to the console. One physical click should
+ count once. Click the padding strip (the gap between the border and the text), the label, the input text, and
+ the slotted button, and compare.
+
+
+
+
No Fill
+
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
+
host: 0
+
+
+
+
Solid (16px padding)
+
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
+
host: 0
+
+
+
+
Outline (16px padding)
+
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
+
host: 0
+
+
Async Slot Content
+
+
+
Outline / Async Label
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+
+
+
Outline / Async Decorations
+
+ Pepperoni
+ Supreme
+ Chicken
+
+
+