From 168aad8a8401bda18903b4a13fff9dd6db7ef114 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 15 May 2023 15:33:05 -0400 Subject: [PATCH 1/4] feat(select): add label slot (#27468) --- core/src/components.d.ts | 4 +- core/src/components/select/select.scss | 12 +++- core/src/components/select/select.tsx | 61 +++++++++++++++--- .../components/select/test/a11y/index.html | 1 + .../select/test/label/select.e2e.ts | 59 ++++++++++++++++- ...ot-truncate-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 9284 bytes ...t-truncate-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 4023 bytes ...ot-truncate-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 8984 bytes .../components/select/test/select.spec.tsx | 54 ++++++++++++++++ 9 files changed, 177 insertions(+), 14 deletions(-) create mode 100644 core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/select/test/select.spec.tsx diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 55fabe7a3e6..f888b36dca7 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2698,7 +2698,7 @@ export namespace Components { */ "justify": 'start' | 'end' | 'space-between'; /** - * The visible label associated with the select. + * The visible label associated with the select. Use this if you need to render a plaintext label. The `label` property will take priority over the `label` slot if both are used. */ "label"?: string; /** @@ -6772,7 +6772,7 @@ declare namespace LocalJSX { */ "justify"?: 'start' | 'end' | 'space-between'; /** - * The visible label associated with the select. + * The visible label associated with the select. Use this if you need to render a plaintext label. The `label` property will take priority over the `label` slot if both are used. */ "label"?: string; /** diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index ef32a431950..2128ca099e4 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -294,7 +294,8 @@ button { * works on block-level elements. A flex item is * considered blockified (https://www.w3.org/TR/css-display-3/#blockify). */ -.label-text { +.label-text, +::slotted([slot="label"]) { text-overflow: ellipsis; white-space: nowrap; @@ -302,6 +303,15 @@ button { overflow: hidden; } +/** + * If no label text is placed into the slot + * then the element should be hidden otherwise + * there will be additional margins added. + */ +.label-text-wrapper-hidden { + display: none; +} + // Select Native Wrapper // ---------------------------------------------------------------- diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 5931915cf31..4fb6fe5bdac 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -32,9 +32,12 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from ' /** * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. * + * @slot label - label - The label text to associate with the select. Use the "labelPlacement" property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML. + * * @part placeholder - The text displayed in the select when there is no value. * @part text - The displayed value of the select. * @part icon - The select icon container. + * */ @Component({ tag: 'ion-select', @@ -122,6 +125,10 @@ export class Select implements ComponentInterface { /** * The visible label associated with the select. + * + * Use this if you need to render a plaintext label. + * + * The `label` property will take priority over the `label` slot if both are used. */ @Prop() label?: string; @@ -566,7 +573,7 @@ export class Select implements ComponentInterface { * TODO FW-3194 * Remove legacyFormController logic. * Remove label and labelText vars - * Pass `this.label` instead of `labelText` + * Pass `this.labelText` instead of `labelText` * when setting the header. */ let label: HTMLElement | null; @@ -576,7 +583,7 @@ export class Select implements ComponentInterface { label = this.getLabel(); labelText = label ? label.textContent : null; } else { - labelText = this.label; + labelText = this.labelText; } const interfaceOptions = this.interfaceOptions; @@ -649,6 +656,30 @@ export class Select implements ComponentInterface { return Array.from(this.el.querySelectorAll('ion-select-option')); } + /** + * Returns any plaintext associated with + * the label (either prop or slot). + * Note: This will not return any custom + * HTML. Use the `hasLabel` getter if you + * want to know if any slotted label content + * was passed. + */ + private get labelText() { + const { el, label } = this; + + if (label !== undefined) { + return label; + } + + const labelSlot = el.querySelector('[slot="label"]'); + + if (labelSlot !== null) { + return labelSlot.textContent; + } + + return; + } + private getText(): string { const selectedText = this.selectedText; if (selectedText != null && selectedText !== '') { @@ -696,17 +727,29 @@ export class Select implements ComponentInterface { private renderLabel() { const { label } = this; - if (label === undefined) { - return; - } return ( -
-
{this.label}
+
+ {label === undefined ? :
{label}
}
); } + /** + * Returns `true` if label content is provided + * either by a prop or a content. If you want + * to get the plaintext value of the label use + * the `labelText` getter instead. + */ + private get hasLabel() { + return this.label !== undefined || this.el.querySelector('[slot="label"]') !== null; + } + /** * Renders the border container * when fill="outline". @@ -902,10 +945,10 @@ Developers can use the "legacy" property to continue using the legacy form marku } private get ariaLabel() { - const { placeholder, label, el, inputId, inheritedAttributes } = this; + const { placeholder, el, inputId, inheritedAttributes } = this; const displayValue = this.getText(); const { labelText } = getAriaLabel(el, inputId); - const definedLabel = label ?? inheritedAttributes['aria-label'] ?? labelText; + const definedLabel = this.labelText ?? inheritedAttributes['aria-label'] ?? labelText; /** * If developer has specified a placeholder diff --git a/core/src/components/select/test/a11y/index.html b/core/src/components/select/test/a11y/index.html index fd7b9bd55f8..cd859593888 100644 --- a/core/src/components/select/test/a11y/index.html +++ b/core/src/components/select/test/a11y/index.html @@ -15,6 +15,7 @@

Select - a11y

+
Slotted Label




diff --git a/core/src/components/select/test/label/select.e2e.ts b/core/src/components/select/test/label/select.e2e.ts index 1989ffab301..f9c0c570f0a 100644 --- a/core/src/components/select/test/label/select.e2e.ts +++ b/core/src/components/select/test/label/select.e2e.ts @@ -267,7 +267,7 @@ configs().forEach(({ title, screenshot, config }) => { configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('select: label overflow'), () => { - test('label should be truncated with ellipses', async ({ page }) => { + test('label property should be truncated with ellipses', async ({ page }) => { await page.setContent( ` @@ -278,11 +278,24 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co const select = page.locator('ion-select'); expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-truncate`)); }); + test('label slot should be truncated with ellipses', async ({ page }) => { + await page.setContent( + ` + +
Label Label Label Label Label
+ + `, + config + ); + + const select = page.locator('ion-select'); + expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-slot-truncate`)); + }); }); }); configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { test.describe(title('select: alert label'), () => { - test('should use the label to set the default header in an alert', async ({ page }) => { + test('should use the label prop to set the default header in an alert', async ({ page }) => { await page.setContent( ` @@ -301,5 +314,47 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await expect(alert.locator('.alert-title')).toHaveText('My Alert'); }); + test('should use the label slot to set the default header in an alert', async ({ page }) => { + await page.setContent( + ` + +
My Alert
+ A + + `, + config + ); + + const select = page.locator('ion-select'); + const alert = page.locator('ion-alert'); + const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent'); + + await select.click(); + await ionAlertDidPresent.next(); + + await expect(alert.locator('.alert-title')).toHaveText('My Alert'); + }); + test('should use the label prop to set the default header in an alert if both prop and slot are set', async ({ + page, + }) => { + await page.setContent( + ` + +
My Slot Alert
+ A + + `, + config + ); + + const select = page.locator('ion-select'); + const alert = page.locator('ion-alert'); + const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent'); + + await select.click(); + await ionAlertDidPresent.next(); + + await expect(alert.locator('.alert-title')).toHaveText('My Prop Alert'); + }); }); }); diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..5acafac7d00300d0ae6e573f66f89293bfc1e592 GIT binary patch literal 9284 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 aZtdwd_HS_AxaWxm&>x(E8MYkbK>QDQ>_buj literal 0 HcmV?d00001 diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-slot-truncate-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..60b208fee5e4e248237427fce682ae9fac70a1c5 GIT binary patch literal 8984 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 O%J { + it('should render label prop if only prop provided', async () => { + const page = await newSpecPage({ + components: [Select], + html: ` + + `, + }); + + const select = page.body.querySelector('ion-select'); + + const propEl = select.shadowRoot.querySelector('.label-text'); + const slotEl = select.shadowRoot.querySelector('slot[name="label"]'); + + expect(propEl).not.toBe(null); + expect(slotEl).toBe(null); + }); + it('should render label slot if only slot provided', async () => { + const page = await newSpecPage({ + components: [Select], + html: ` +
Label Prop Slot
 + `, + }); + + const select = page.body.querySelector('ion-select'); + + const propEl = select.shadowRoot.querySelector('.label-text'); + const slotEl = select.shadowRoot.querySelector('slot[name="label"]'); + + expect(propEl).toBe(null); + expect(slotEl).not.toBe(null); + }); + it('should render label prop if both prop and slot provided', async () => { + const page = await newSpecPage({ + components: [Select], + html: ` +
Label Prop Slot
 + `, + }); + + const select = page.body.querySelector('ion-select'); + + const propEl = select.shadowRoot.querySelector('.label-text'); + const slotEl = select.shadowRoot.querySelector('slot[name="label"]'); + + expect(propEl).not.toBe(null); + expect(slotEl).toBe(null); + }); +}); From 436320b2493504f2e1a66cf9926d4982941a1585 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 24 May 2023 08:51:06 -0400 Subject: [PATCH 2/4] fix(select): slotted label content works with outline notch (#27483) --- core/src/components/select/select.tsx | 154 +++++++++++++++++- .../components/select/test/fill/select.e2e.ts | 58 +++++++ ...otted-label-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 11184 bytes ...tted-label-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 3897 bytes ...otted-label-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 11054 bytes ...otted-label-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 11184 bytes ...tted-label-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 3897 bytes ...otted-label-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 11054 bytes 8 files changed, 207 insertions(+), 5 deletions(-) create mode 100644 core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 819ba2e5ad9..a461ef1003c 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core'; import type { LegacyFormController } from '@utils/forms'; import { createLegacyFormController } from '@utils/forms'; -import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from '@utils/helpers'; +import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes, raf } from '@utils/helpers'; import type { Attributes } from '@utils/helpers'; import { printIonWarning } from '@utils/logging'; import { actionSheetController, alertController, popoverController } from '@utils/overlays'; @@ -10,6 +10,7 @@ import type { OverlaySelect } from '@utils/overlays-interface'; import { isRTL } from '@utils/rtl'; import { createColorClasses, hostContext } from '@utils/theme'; import { watchForOptions } from '@utils/watch-options'; +import { win } from '@utils/window'; import { caretDownSharp, chevronExpand } from 'ionicons/icons'; import { getIonMode } from '../../global/ionic-global'; @@ -55,6 +56,8 @@ export class Select implements ComponentInterface { private legacyFormController!: LegacyFormController; private inheritedAttributes: Attributes = {}; private nativeWrapperEl: HTMLElement | undefined; + private notchSpacerEl: HTMLElement | undefined; + private notchVisibilityIO: IntersectionObserver | undefined; // This flag ensures we log the deprecation warning at most once. private hasLoggedDeprecationWarning = false; @@ -665,13 +668,13 @@ export class Select implements ComponentInterface { * was passed. */ private get labelText() { - const { el, label } = this; + const { label } = this; if (label !== undefined) { return label; } - const labelSlot = el.querySelector('[slot="label"]'); + const { labelSlot } = this; if (labelSlot !== null) { return labelSlot.textContent; @@ -740,6 +743,28 @@ export class Select implements ComponentInterface { ); } + componentDidRender() { + if (this.needsExplicitNotchWidth()) { + /** + * Run this the frame after + * the browser has re-painted the select. + * Otherwise, the label element may have a width + * of 0 and the IntersectionObserver will be used. + */ + raf(() => { + this.setNotchWidth(); + }); + } + } + + /** + * Gets any content passed into the `label` slot, + * not the definition. + */ + private get labelSlot() { + return this.el.querySelector('[slot="label"]'); + } + /** * Returns `true` if label content is provided * either by a prop or a content. If you want @@ -747,7 +772,126 @@ export class Select implements ComponentInterface { * the `labelText` getter instead. */ private get hasLabel() { - return this.label !== undefined || this.el.querySelector('[slot="label"]') !== null; + return this.label !== undefined || this.labelSlot !== null; + } + + private needsExplicitNotchWidth() { + if ( + /** + * If the notch is not being used + * then we do not need to set the notch width. + */ + this.notchSpacerEl === undefined || + /** + * If no label is being used, then we + * do not need to estimate the notch width. + */ + !this.hasLabel || + /** + * If the label property is being used + * then we can render the label text inside + * of the notch and let the browser + * determine the notch size for us. + */ + this.label !== undefined + ) { + return false; + } + + return true; + } + + /** + * When using a label prop we can render + * the label value inside of the notch and + * let the browser calculate the size of the notch. + * However, we cannot render the label slot in multiple + * places so we need to manually calculate the notch dimension + * based on the size of the slotted content. + * + * This function should only be used to set the notch width + * on slotted label content. The notch width for label prop + * content is automatically calculated based on the + * intrinsic size of the label text. + */ + private setNotchWidth() { + const { el, notchSpacerEl } = this; + + if (notchSpacerEl === undefined) { + return; + } + + if (!this.needsExplicitNotchWidth()) { + notchSpacerEl.style.removeProperty('width'); + return; + } + + const width = this.labelSlot!.scrollWidth; + if ( + /** + * If the computed width of the label is 0 + * and notchSpacerEl's offsetParent is null + * then that means the element is hidden. + * As a result, we need to wait for the element + * to become visible before setting the notch width. + * + * We do not check el.offsetParent because + * that can be null if ion-select has + * position: fixed applied to it. + * notchSpacerEl does not have position: fixed. + */ + width === 0 && + notchSpacerEl.offsetParent === null && + win !== undefined && + 'IntersectionObserver' in win + ) { + /** + * If there is an IO already attached + * then that will update the notch + * once the element becomes visible. + * As a result, there is no need to create + * another one. + */ + if (this.notchVisibilityIO !== undefined) { + return; + } + + const io = (this.notchVisibilityIO = new IntersectionObserver( + (ev) => { + /** + * If the element is visible then we + * can try setting the notch width again. + */ + if (ev[0].intersectionRatio === 1) { + this.setNotchWidth(); + io.disconnect(); + this.notchVisibilityIO = undefined; + } + }, + /** + * Set the root to be the select + * This causes the IO callback + * to be fired in WebKit as soon as the element + * is visible. If we used the default root value + * then WebKit would only fire the IO callback + * after any animations (such as a modal transition) + * finished, and there would potentially be a flicker. + */ + { threshold: 0.01, root: el } + )); + + io.observe(notchSpacerEl); + return; + } + + /** + * If the element is visible then we can set the notch width. + * The notch is only visible when the label is scaled, + * which is why we multiply the width by 0.75 as this is + * the same amount the label element is scaled by in the + * select CSS (See $select-floating-label-scale in select.vars.scss). + */ + notchSpacerEl.style.setProperty('width', `${width * 0.75}px`); } /** @@ -770,7 +914,7 @@ export class Select implements ComponentInterface {
- diff --git a/core/src/components/select/test/fill/select.e2e.ts b/core/src/components/select/test/fill/select.e2e.ts index 767191fbdfa..cfd282d7854 100644 --- a/core/src/components/select/test/fill/select.e2e.ts +++ b/core/src/components/select/test/fill/select.e2e.ts @@ -120,6 +120,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => { const select = page.locator('ion-select'); expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-outline-label-floating`)); }); + test('should not have visual regressions with shaped outline', async ({ page }) => { await page.setContent( ` @@ -167,3 +168,60 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => { }); }); }); + +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('select: label slot'), () => { + test('should render the notch correctly with a slotted label', async ({ page }) => { + await page.setContent( + ` + + +
My Label Content
+ Apple + + `, + config + ); + + const select = page.locator('ion-select'); + expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-outline-slotted-label`)); + }); + test('should render the notch correctly with a slotted label after the select was originally hidden', async ({ + page, + }) => { + await page.setContent( + ` + + +
My Label Content
+ Apple + + `, + config + ); + + const select = page.locator('ion-select'); + + await select.evaluate((el: HTMLIonSelectElement) => el.style.removeProperty('display')); + + expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-outline-hidden-slotted-label`)); + }); + }); +}); diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..e189c85fe0e7d3cbe9b8efb518706da87c8d1766 GIT binary patch literal 11184 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 Le4O{_*_;0Y=(Xc+ literal 0 HcmV?d00001 diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..79d572bee4595d1379cbad39a90dac34e89663d5 GIT binary patch literal 3897 zcmYLMc|4Te`<90Ak}dRFGR9i$-ae= z?7JfSlC7z1-)H>(_HVY*TI^Z>a#HMGSSe`uoxf!3mTd;Sn#_t z13mc3pbi}H7d5vI z)VG!zD3nNa=Xe z8o2Bri2nUrW4n!Wq{inSg`$V!9-l#NArpBO%3XS%+Z5fYN;>~+Uh30tr?rWyf`(nP zT8cfZv}w9xpKEWbWBjG?Jb{2-S=o*F^8y|rQ-1L*yw|!m8z}Y^UT2Mkr~i44+J#hY zeL5g}j1~(7827)@Kz?t-1|RK@PL?{hPI*=?eK2??GM@kL74P7y-NF93=10h(Jo8Nj zf`F`3>~zF#UvSUW8q07N5Vtf%!g}IeCfY+!PfxsLRO$B-Wfu9uF1U<^PjT$UJ@fP!uMfOf^zpUEP|R-^ym5A-{?OfteiYz)hum2uhx5Bd5-4b_xzJ- z&&nScJN73$OWG@!E(NcAZNF3Fjm(TX4qK?Qsc^MX~K#&3|cVIf21cChf{rfM6NCIIcbHpzyptS0o|712q@ zc!6Ghp5w94^y!I+L$GGSOQetqiIV#7*{?%;0Qe#E7>d;LM)f3FuQb0` zUt|Rn`^5c7WiSzLk*HIG)7E5%qFUW599D<&xpG{--xNt}`Uz`hPD|!kbnDbK1c{XP z%8dNwcY;7Va*7z24&Km;zhk9L^gJMLm{5o~ht}cGM|@{v zVuf>j1aA?)IxweUAY@+i-O<%3(b)N^ZoFpX=gXYLpZSuoNAhH4;gvrItU}*0OwQW_ zHhWd=f)QVI&V9Vl$LCY;*eMtlF$dFG_>9U$Q8ul>R?Tsa`u#0F5pfGf>=wO=)PtgE zfeY>J?N%~jI|~Uw&|_m$5(2LL>QFhR$vAxKgI_S%#2=$_k}R-oH*aXTfW*Eku$j|F z$m@;L#av*_Sa5!#vA8OxOm=U5a8sfSfZKq!mD)cmRvVBU>i#$&qmoq=#5LI!=XQNwwu8YHH6?{!H?j$zfGz?-$i zHc;xkXQNIU`bcV{6IGrsc95b(1Qx*pKxJr$R^D5}BaqR7^bh!5@k3$=*&Gf=ri_JF z@t94p6}=U4kDNL(Kg*dY1+9+_i09tO2Qo8Twvjc{&&}W%?^IH!zGLLyy)sa0Cb(`J zI6BsCRHygsA}_dD$75?6kN-;KS`o1bGoIJ>O@;jCrpc-~ivC09`X9%Yb(;%GsOAs1 zArEgZExGS12p##W@z3h9u z?!o03w%-$S2b?K{q%t!fA+GPZfkF?bsX|DLW5wz}yD{Cy>DPGk#e8!7*(|JL%H){9 z-goa;7L438uPKk0{n@DW)lQQ8p&*fi{h3lW>nc0I$**7eh&Uq5Vql*{D;wt|d6x*i zg;147(~XE`MmXhEvSsnuhc*xA)klJ5lS+V3BaR?F*Wt=H3apB3nb=?FYQi|rup>;e zKI_E@g^Df+7ze_i8p7?t$GiLo){5)MDwx1t9E9%AXBg{ql7(86dD#$$?EFQmA2I>C zw?FsKq7RV0h7wz1=?b2UR#HN2$jR!U2me}~aoi?{&Ko+5UdtKqwb;|Ya_(G*tg`v4 zGFs0p7p4P`QEq0AH+r4%wruDwhU2gSTJ-o~n6qpD6}e(89j&C)?}M$zX%FF08CRg~ zT~|35W8>3kPZ5@|`9!7KK>m(YglPFod|nxN?wOilXfXb4zKveWd_-uBW0>@Vs{mga z)Nm&zm5ee(0#HFlOB~{p1|czicpn^Rc_?LS}H00O{06o z+2ltIzVj*K<6Ys1A1T(nM%Sbp_AF{H3~B{@6Sz!R0|h^%GwhvVtoAD8U250uOFei& zZd*aU1yHuf-{$&$osr{WB>aa-O{~bq?^fVP|8Z$VAK98~5{dNiuVKH&-Ru^cEbP8o z+bWq`Rk}!UC`Z1sdwq%42v*(7s-^Dlku8u-7n^jDm5Xqg~k z$A^Dp`#p2QOO}J!yYy+JvB0h7Hb8 zE%+KX%DSG=mhSUu<++YUyn~G>j7V;E8^)P7V8Q8{7H?4hUVLI_Ek=F%qmDL=$VV}F zbKwj-TeKMi0Z>BQVlWCpLom5*?%;1&~!bH~g#pe;B4~pn_9m zULY(Ptw@$s1SbZF6o;3*!8KX;FHp4~$v3Cy710N#;g{rH@pb`y3f^kHb(^(4hDJuy zi<(|17|0F*UmzBhj(%}ep;?B zXzf>~(g>3!9DTHJU8D15dEm`PHcrZ44aagxeayRIf21o2O0yo^G1DDUA(77XZS2n# z-|Bx{)Vc#F+Her3HW7*!<7fL`2Ku9!sFR~x&vzy=W&&%uscgZTxS7^BKRC8NHlZi~ zYHL7I2wriA_lhOWh)qJAI+Av^LrB)~0&8gradE!`ozPv{rkMfIJ^Dx4m*2-$xev4; z?Nof{nlK2<5fOVhO$)jUL&uaLWI32?5-^ZpOr=Lri55KP15gv4d^Y^mxbrQvT#UcU zI&}J9D)b~${o+W4+YJh;lOQlXTaPHTZ%`FshB3KMRu?4-s3{gHZo{JIzKrIXzk%82 zJt_T~(1&~Pk#dVoNoR?TN|+a8=?NMCuRJV1WOHhKgGDfzPK0A!Yx?~yi5I%OG7b;< z1go&1Nw&$<(0yv05;+-lF8_;&@N^J)bv*uRRsf9P= zWH5ett(#l&wgYmavTSp@?wo2)6X3M`<+VY`6VESM(J0p#F<~3HxuxZO05;!|XjEVl z0XHwP*LX3rI$5(N@{pl!b)<+-Oqq1bg9lUe{@N(jniu{Tf8M)=KZg#+(L0wfe(k~6 zw#O`d-149P>@H1mS=)ZIxS<{8(7ni%`%2EvIb1 zL5|0>Wfev%C6<5X+7`(q&$zfaQyK7l{13IEeBR6uiyq1p^F_1_&=KS=2G<~ z78E6R`k?(&1QlISp@fwTTTc~A1{9^1tYXbm1bwPPEnI()N==xJDoPiJhTokk6ayF# zro>oIQ)&T4iQ!T0-%|vBP_DX&d~Y33Q@RMrKp2x$tFk>ui><&C$#i6$VrxS@pwZwx z$HvdEj4L@g*>b4l-t3)fFPpRR`9f4is98D;Wb0Yk+k4Z2gNsr%BWtM}612J=AkmI^ z{nJH1WEi5M1=w6%T&(Wg@vy56EQ?7<>=5LUvULX!bUF0%{{vePJwqD@dZdwrgaq3! aKebl#40!QU$rSKPOk<#D3KZ))#QYBsvqbR# literal 0 HcmV?d00001 diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-hidden-slotted-label-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0344c584fe7e189932f1da09962e089d017641fc GIT binary patch literal 11054 zcmeHtS5y>Tw{820C@MivL4rtD5Rfb&AWCYYNKRrva?Tk9L=g~al4K-GR-i$NDj>}|`ZriAj=HGlmn`s!#P#@jW`<07WzVel_va>&G%6Cw~2A|`Zl-HCI zaJbTViozlE4W+c~gNq;Z4vxE44SF;%f+L;II&QvWb$Ka8VlFpZGgBpVQZl;dodcBh z^ahR&c2>vgjJ5wBMn>FH*;j+f8Exlpw8nBLin|p(G1*=k;Lp4IpV5>=g!JVaHNn`U-ed>!Tz$2vCr1G7bk;LZO3XQBqbk>s;a1{C@3gA zdX(~HE!k~!Zy~>UVX1x=e$R+sXAF+C9jSb7YMQVoe@ohT$J@t;QOb9CEtV}WKVRH+ z$$hbpyZ-S|xlL45l(^f9HMZgK@bKfuk3$u9bi@Yb)*h>)64cbx894=drKUf_uE`w-#x(x!OnYL5 z^L+QL#UT9S(Mp!(;g4o!}%ggn#(gFJIjM9=ivG!^_?MSA@FKHd^1t)YR0{(h}BF zT3Q;33_&{zTXk8YvE_%0Ge5)W*o+yJe|2=k9gdAOHJQP~<%*vt=ohBkc1UOa;xzj^ zAt6DmLq$;$B{QXR!_d*OWa=P3F>z?L#!F?^I^Y@+F|qAn8Isa_cWq*QvWa{7?^3Qe zF(&>RAd;TL1GPun20fyQ*UofE;k^|V-yHtt zH7LI+Ej%?p93TNUFs27&8JvZ{*_Q zfBz%_=G>u{9kU47#q4);w!^I|4tMqe!|(ll}0?lP7hD)4Zfo+?<@K z!*A9<2GLged3onqG_sY~aX5a@LNS$OF)hmG)>d%`Y|wn^*|TR=Q|?&MsOM@@u`A!g zS1P_sNZ<^C!KE8i*v=%;F)(m5DvCKyy_RKo4-;%+_*vMf%Jm2v%FFuw$B!R1UORoR ziqg{GOP;r~es50{sj%qD{@wcZ>sOzRb`g|`BLsx3tnAEYU*#13_>_2-O@EP5RL&wS zlh8)99VQQxBH_gt$ zI$pYgzkC8QZsIIvhLj*9@-L95MQln+O5&8;f^KMJ z7wCS*w#5qse}}ZVl6=g0=10G=AGgPXTo}!I3s>=bkFReT#D6w5*$tJegqfoUAy2E1 zwufeR1~|jsCRJ5dwgiSR=NH$a4uvn$(k8rn_t^IwXd$7@_vnmjdS(#)j=b2KqA!Cs`rvFC4)yuq6MI5_j# z8T^(p-eqa5X8kAKOe&A$Tju71TRrLN>B=4Bs0X>40%pIXi8M4crm4MsKWCtqNQ9DR<-G^7cD5e)waEK4HA$ zg$ox@uStWImk*Xi8@T^Ld?Wb+$l~P%p~%k9&(F!JD0NT_C>9?dkA0u0PeD|uotTnR z)H4szf02@sl8TDOZ%Zs|N*;ysx zlcW+}+sgcOofwSPu~6%L^Q?AEOpMUNrAaK7_1PJi-Z&m36r;!1f)?_{yR@`xJuDv` zaT6Dsb;mkdnxi<_TpSFIjM}d-#dVqs_GGI>5kcv)o0*R#6DT+Dx<~1;ITtC*t=qEF zk%F_kfI$4tkqy1f$H&LS#PsszOR?mYA1}}CZ_0C@`GLvT*(!F2aDelWZ3ACR*_-9R znf^}7eVBWmWz2gceEvmAb@d%29|~~0b%RYwe(0Zn{vjs6dXt2moxRWX@Wsi~tZ_8_ zCJIm{xhts~u85Z4(ym8|ON}dT*em6?2?* z(nU`%Ue|K3k=j_({Wm*}Qr2LFos@a!wR(l*m&m>%BQB4Q*>I6jm>X36O$Hk(q9-lU zH&CxbJWwd~X`-eiCX2TV3ky|ltB-2E_aM{c-_j$G-R9@#%U8QYd26qS&=@&SU>ieG z3LPmDiw>elQj%m<4v+R;;xJWr+f3G`pn`&%$V}e~O^TqnN1jOBD^6~1bpL^-_N;Qp zRRrSG>%_#w+dtnWCgx)-jet}X7n648X>qZ2gkQYEa3WFEDSJw57Yd_F%AEo8b8?}P zG(PfU-Ce@c6mk()N6IWT>RV=DMe)Z6tEbP?ToWxRDS62Mp|z*SsrRFL>?8HhSEYQD zqN6vDcE%v9`NYMmu8NeZ*R1_GhkD($V?VWutR?)m4)0qp-br(AF5a}PJSg*Q9jW10 zM_I~Tx51g|Y0OtAGvo*!;JF#^$Pg(Y;e|kad&sR{W$$z8S7V@Y@&7!TMBl<9 zSD*d?s%{`l8O?p_czeiBY1ENV|NRu)6qOrNXiyPLEo}b!_~=0C5xd9Q`1hSLKRcSP zd1v4tU$39zrN-&KR7ntYs35K?c>U+Y{nN;X z?XAaCA=*d5=&h-f@}@lGh2E;$OD7Nrr4SN*NY!UKmXxKY?WpK2;~G!&6N@IGRA{Sy z+N){W`QevYEYhIZ9nP!y@rNw|!DxJQ30uL&k;tT{r6uILq`OC}VpqF210_q$Wx*uw zQ9L`NK~%v=0Y}HQYSQhle4XN-3)(C|riO})s?M`qxpGC@Vh>6yO7>@Ub#)jIKLk0O zhgBIk{o#IEZOqWBVP^nP;JD>i+pRA{~UuxuI1WeoB5s{vY`V|`8 zmLyslDaK;_O(luLV|h>rNxBI%w3S0f^j!>>jv_Oo&t@db39^I7sFD@3tP(%$)PZCc z6%`HdWuu$xFHZI5St+*}q8-HnRcDJFY}s%1yPmuA+E`sZa-u`f^SAnuv3;c(IS95O zjVvf&1YLu&%X<2R(t{5*K0bbdMNaUc8oToQYaT|oZrniP**}Xw}vKFj_Pmy>b+Nz*`1rk+QV{6`awPhNQoSIY!eW6?Yg`poblbKPoL6PmPIhl zdJ(XwM$}-CoyH)@2KXZGDJz6Q-SJj29hw7oY8V*7#>NI)PcyyeM->Vpk1d7iI>Rzp z{DcJB`qy$9B;@3AjG|Dtnh!BpEH<1@MA#NjOW-b3cI&`_)g15N#4T5hDKeiVK7WRc zOxV*NYAI`Li5|Oq)NeP_VTzgLbC3*jm7#y4j10ia-;5`gnouKZeN}qxh%?A4o3wPG&05QG0e}Mbfm5 zrd~l^UH#s@fG4c{{J6c@RJ)}V!90I|1d^47B_l2ETU!r7qFZ9}f}O_!$?J}m?b@Y$ zmj}@}!TXQeN@wGh0wTH7(_<_U4QHa5Ma;a#dXV0El(P2xe_v}t!AI8tv z*P5vny{I^Y@J}V-P#z+ZelO`$Y0_-eY+z$ER1OOHBdI5ID#wjn@zuHeHUXc1kYF$v zLN1EV!d&}7`NPe7#FAA5;whoX``HBqG*V27PMxaRU&u!%^V<&J-b;0uZi(?b7#eF^ zoq$CwcVEW>*lo}E$V+B*{sa}W4N_P!fQ^kU@HBa?=T_d{a&%l=)6buy)gBs@_{|Q|(km3nkcjNV{)V<=fDJv@jLEJ*^b_}#%p0Zz^Z0?}~CA0JKU8~^fIZ=^=`7L}CngWFmg- zT*cMc)m6L1lsOQXQ-bfk|H<^$&bxM|4u7<2>@gh!>p+|RP)JB=lAsg%;?s7dw`(oFE+++&TBNw>l7KnEU9X0Mjvv20S`wkZk0~VdCqIKh9iPk zuY{GE`6=*D5Ck|iB_*Z)0zIk=7nt;DR0_4puip8xBBjP+P~}=!eOAfAVZ9-QDkCEU zq^6Rh;*^<$2hId$qqy#P9~>L!i65t$bH0E7Zd%LIU+Z)5yfqdX0NMgp(C28YKU@_c zY-s?r_0UDmI# zHG<>8gLg48E{D4g8TG-bKHCHSCr-BQWe9OHGN#^tMYgp(w9~}s7wzqgn}YRL69!KU z5DZ{tV|$y2i;Ihg=XZO14cyJfIE~=7f#U;(GhyJx6#-MjN@t{GLiFF`;^oWRp~i>I zw{CSpsDkhpu^m=GBKbU}4A7P_(b25As=4&_!K6{ug6>fJUcY_~Nm*{uBbSdEt@Wvb zb-^{Bmw`+~3LX;tiOnQof_Rx}iybt*D`pp~QL(!~7UFIMbY+6$UuY$|g z(9mFfjEj@AQm{npQ=xf!Ew{h|ViVwW5i@diEst*<;MV>07-A!sMG6Ew#A#e{ib3~6z|NFyG;^f(W@O5+keok%2TIDXNEWuxhjUt* znkIjb_dS~S_G=JYmCo}|)lb*%Vnc!AO}ECiO11p{Eu15xXm4*1epRM>K|1gir-72^ zs29_4377`(>e_WyV*M^HW*rae2`W{!!-4~OHsIFtmWzAjYv5{>9YwUu8E;*Y^!{>a z8? zJX+wzs3<8HDipl{M<7+Gc?@+Uoaog4_2Go=MyrFXmqk4{=b#+y%yrdwQ)zKxz`jL0 zPAi7XX+$iNUEyct=2nqxR8@zm7la=W3uB`@Qhsql9YD;^v{@t;7q5aWV*3uk-qL@? z%6jr=cvQ!ZQvfZB5_k>e2zY2f@8o&yF4Y9Ht8>&wphTf7L|Et`=_Aqj~i(9`C?)ViJ}2-}E3vcscS z!MRmQ6y6^Pb|!|e0+&D_&aT_|7X~B5#54gJW%$MZiMjd5E*6ZX%UG>Xh4p|V*a99~ zN*l5=GW3$(yN7!ltJNECcja$!-nrvF@#7^V%r5vdfZPi{vUFgg>Nq+&YHRnc`r!}2 z0icr4)69dk0Rfqllangu(!yzF;XK#*1RPA@|Eo1SDIo?6z$KnGyaobgT;*y5Gg*!& z$@WbUv?u{T4cOt!pdcEFZ~guKZP`h<0jdJePz1tWG0*2UFcu7KRl$;t|; zva8wZgMz#Chmo#x-dXSO0ZvI{W23FDE$~kx2z+3y-in!+k!la9NgEJspro{NHDL-N zgqPqI0K*D=3sZgfZvd8XaO8lkl%D>hr>Cc*qZpnF`ZT84a``%Vs3oPPcEexR!42u| zeyF3Pqo&s3@9*E)*}1l6Z)dkESF;a3UTH}Qv=ojY<`)($0l_YF>pKJgzj;%+R;=_S z2u+v?2=VLJufveRojgZI<~yGiH)YkA*u0k_k^k2YPWY0?ZIQ@LKreohHOOn=jb%E1 z(3U}5Pkmo5y2pxq`L4j^(#4Ctb$)*0Tc_X)|3D@iD`zb&tuddSOTWk_=ePs11E zW-q5cbS;lm>69eIZ(!aL!MRR%g(2FJRQ#b?{RotCpn|QBl0h0G#_i#YeyBP&x_2K^ z1Pzp$4dn~Kc?A6h3j-FYgPl+a&1k?Rj0a{_vwsr4`gS3*T+diVr5&yw^F1K+R?r0n zZEG3ilDprUnwlOl5Uv`3P3wc1Obr310Wf~ByBi%F3syM%-x4wZ=kp{0koA}d;ZbDa zW$j`ut*ymIRi;=(xLnlx_j4;Nwxv9T0os!(qsm@_9Jd}Q$pUq}y#h&&Ks4PS?3?@N z3^Turj#s3k&S$RZ?8R73J-Y~NK9Jd6G!;T?bD++rEllv=8}?< z!otGnL~OyWh2;u*^{Va=*9sxDy+TX4ut{#vR0#ZGIJQ>^Q;jgIXGIb|9|(2}|Ihr? z@p41R-GS~$OAHs*R#`cWLHzGh)hY}{UuR=`{v(J4Tcny(`pk?l{y)@Ftc1zE+eI&A zV*o(6fQJHERZ~Uy4I;desiz#u0!W}YRS>?jzmrR!{SC&n_1h+cu_%<|>~DtpUtq5< zVXhE=nar|*PTXLPR|V@X;4!4uK$aBYtIm(~yf#DN zta*5R^&J`;GY%6_qlEMR8jjUv?YAU=Z6D7pF6NIxm#)3J`LkLo;a6#0xBoZ}{hLpn zcF##gSg1XeriI!+F;K2LR10_Kb1dYbb%uMhn8V-e_8(Dy{#2?h*y}%Q}aybQDgJ339tx9JLph}>VL8OqK zJ6Ea{ICI+rH&wM-%cWPn0%h85byP)3=>T-eX)^lV={V!ySFa2f-@w59ji7_-(U~TV z{fIm{?_3G(KalH@Tmat-)>11*AR9WmikNdG(pa6BL*WK<@o; z%^bluVu1y7Fte}#@Y=)?FK+hN9i#2WYO|^7)l^i%-@H*oB0slWB7~p#o3OAYQ2bg6 z3otHV;93cmns1}auVkC-e-Pd)e`0C&7BFQT0CC?2&=;NzW7=98=&7%-U;C7!mP%MG zP?+U*on_GTICbta&D#rZP=VUs^Fc{u6t>m{lF{gnM1tp7<9d9!NBjuNEaFoYtgNv2 z>jG#>00S&l^rKCz&$I!{9s4*EnvQ}Ns9kkfb|CXxL#U8wmu}u}AP$RAKBT~;16ToD zNfP?1AT_iLbeUpvFA@>jjzFZ!eFE8+02tS?jaXY5nFcspY+RS}{{0u|C_@llym;|& ztJv?-?7X(7rgE|vrs38#7|}RIuceE%we^Ds4{8j~oH;`yWT~0#!guippXZG;KOjD# zb-FnOV1_y*y+ZayPfU%UnHdYD5?7`q4v&n0N*IE+wP(`e z?5v2b6Mj4yfjHYw*b6XxyE*7Kn^RbsN=}c>pHI@mLdxBnKi@LscbRVvfnSehKH*|H zST+wuH`QxJG$Yk@=?}Cyx^6wyZRr*!?K9oOP4DgP?Joo9F8%pje@jVl6a0`G=$2tu z0Jj$Z9fUe`+oAK)AoEQbXc?%d%G6Y2maRO#+j4`1JNgtVNK=680nyGa`mLkG4iql7 zXzyz$6l!tjxyM+4puj&H8$+s~TyR5k<9VPQ2*txy{BiLYaiDJ?Srcyif;`7=L*LcW z$%(rLda{VLyCBX$KRG%$@NKvsEww?aaVd%ZIdk3~A zZS|P8y=StGi;DyPGgKm-@f&C~K;u!leqk)Rl%g{r0VFzh1$gMqf1jbe&vv3sv|GL9 zs8#gtpthl5HTX3S73CM7&vkylT0H~2R8&+f(LPN~Mh``hXC;9LZI?(4r#Wri=DXRh zT}%6|A?CJn(>75m@k4fWkBJ=?i0|!0ebo-Ys1OWacOisODV2l86?2bid$X&Ml@K1Awv+}Wt)FN0Y%Cn zwh5jjp*Ohf4{Ix~_|;GJw8GGNGX>}}56Fc7hVF2P#SmCpz=RlRX)R+Up&kEb2zZ&R z-C9nnFJ%Qh2=e4f*F5+M<^O%(d1HNomTPT|@}s4oprE5$ygq$A9X+}VYA=gG_n^Ja z=U@-8Q{}RlJ=Qnxyx3n{p)GR0-=I`+u~+p4Lyn`Y!JJ z7yMpAbCZ)SwjJ>Tv(U6McmGQ{IMR$MAH$_!I+5wapt_=1cb12A9z5uLcX^@aJ-Pv4 zuhAyoWP#MW(>_KxBgze6(La^j0f{)xy~CR`*Cky4ly$2V0vV#cIj2G&ws+wEmUvi9 z+CTZhBD>%thYSU;9uokSf{2NqzZ=N3sH3oSbA}B#zs=3fSlg#h(|_LqJigRF*=LD{ zEe^Ji)u7GpM^pQzFJFhZO5{(4ow36Kv|tAY21u6(rFh&ViQSAUI;q@d_{-Yjf_&4l#7cpoPu60v>nS3nRkjqBPwW zl_6p4Ki6!V8XGMHX*W8A3^~T3-wAMmW{5|j9_s3vr{{)J^U}u3hJ=Pvy~0`dq^Sds z5HVEt255$6AfJz-tZd`jM7>U-{_}Y>+!gUB?p{whxKtC+7r?H7;JGR0^Xnbc@$oUX zD8y}QWwZu1LNowt&q%#|@gi^`ZTiiBrF%B7%@(m$sr|$~hp*p&<2X$Igoapld0=R0 zD1gp3&`GPl0tole=?8=vy`FlnN4Q>w>-u%`Z~iAPC$C_!PjAzpA>wg3+#s2x^V|an zL+I~$ArE1QKnjA<_W=`Oi-plFrf@V(9nuaq8d11GCjsW?lSwn|^P#M-hX@4m3-h+V zQ-?QV9Dwc~6q5xvb;A3V=QJpyz)=K>K<&l>mOdF*ydBsf#=d)5zEvMTnnO~6rp;d- zFDNJgeoMFd@7fsF-iyUveNhZE#Loj?P161+T^ zyH|{UhYnyILCZ^%Q_I$N<>fi*^VI70PEJE5&z0aTt)tQ3!DKd+0gBmxM?mEUrlMhl zoaffU){k?%ukRaxY8OZ-uh|~70ynI)zq1Y|6nJA;c^}jeaC1%(6Zd%-<%^gHC}s^p z1%--5XgL$Zejsonx+Z4V#|IoCA?Kn08rjqZWU3Of#*7yH_iLiKB;dkhT?Yr(mN?2NZn$$A)0E5r$6 z8QcS#U0K3v{y|~8%YhiB-0^rgTsZb1(Y;79tJ|)>x0fb1TX1T68tuJ@5flvK zb3qzbZiw&~B3R+?=iRRV*H6RckrUzys;b)VfrR^Ads;?H_`DeYzn}kK=Rsw8VIgk} zJnRxX9m0(fo=*d2;1q;I|Ef7!|Gu0wvu9&CA262A%M)rbN_uAVQpPqci5!|JG8V5 z^>a1zVB5_c7e3!vEcy8LzuUGPD!}3fp#)&wZ!U-(v?UB2!3FcwZHWdY0mW&52e#J1 zwjtQ;gI%=7D?$V33+w;_AkuZCBV4`Ih{2$t^gV6&lSY-31UyhzcYwr9N}@;76Ta{K z2+#$tCeYYTCl>rAk%SZr^dOW=3HPsQ2{RQ{Q4{aWwcLBhR|vZ^vg_Z|oQ7Y854YybcN literal 0 HcmV?d00001 diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..e189c85fe0e7d3cbe9b8efb518706da87c8d1766 GIT binary patch literal 11184 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 Le4O{_*_;0Y=(Xc+ literal 0 HcmV?d00001 diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..79d572bee4595d1379cbad39a90dac34e89663d5 GIT binary patch literal 3897 zcmYLMc|4Te`<90Ak}dRFGR9i$-ae= z?7JfSlC7z1-)H>(_HVY*TI^Z>a#HMGSSe`uoxf!3mTd;Sn#_t z13mc3pbi}H7d5vI z)VG!zD3nNa=Xe z8o2Bri2nUrW4n!Wq{inSg`$V!9-l#NArpBO%3XS%+Z5fYN;>~+Uh30tr?rWyf`(nP zT8cfZv}w9xpKEWbWBjG?Jb{2-S=o*F^8y|rQ-1L*yw|!m8z}Y^UT2Mkr~i44+J#hY zeL5g}j1~(7827)@Kz?t-1|RK@PL?{hPI*=?eK2??GM@kL74P7y-NF93=10h(Jo8Nj zf`F`3>~zF#UvSUW8q07N5Vtf%!g}IeCfY+!PfxsLRO$B-Wfu9uF1U<^PjT$UJ@fP!uMfOf^zpUEP|R-^ym5A-{?OfteiYz)hum2uhx5Bd5-4b_xzJ- z&&nScJN73$OWG@!E(NcAZNF3Fjm(TX4qK?Qsc^MX~K#&3|cVIf21cChf{rfM6NCIIcbHpzyptS0o|712q@ zc!6Ghp5w94^y!I+L$GGSOQetqiIV#7*{?%;0Qe#E7>d;LM)f3FuQb0` zUt|Rn`^5c7WiSzLk*HIG)7E5%qFUW599D<&xpG{--xNt}`Uz`hPD|!kbnDbK1c{XP z%8dNwcY;7Va*7z24&Km;zhk9L^gJMLm{5o~ht}cGM|@{v zVuf>j1aA?)IxweUAY@+i-O<%3(b)N^ZoFpX=gXYLpZSuoNAhH4;gvrItU}*0OwQW_ zHhWd=f)QVI&V9Vl$LCY;*eMtlF$dFG_>9U$Q8ul>R?Tsa`u#0F5pfGf>=wO=)PtgE zfeY>J?N%~jI|~Uw&|_m$5(2LL>QFhR$vAxKgI_S%#2=$_k}R-oH*aXTfW*Eku$j|F z$m@;L#av*_Sa5!#vA8OxOm=U5a8sfSfZKq!mD)cmRvVBU>i#$&qmoq=#5LI!=XQNwwu8YHH6?{!H?j$zfGz?-$i zHc;xkXQNIU`bcV{6IGrsc95b(1Qx*pKxJr$R^D5}BaqR7^bh!5@k3$=*&Gf=ri_JF z@t94p6}=U4kDNL(Kg*dY1+9+_i09tO2Qo8Twvjc{&&}W%?^IH!zGLLyy)sa0Cb(`J zI6BsCRHygsA}_dD$75?6kN-;KS`o1bGoIJ>O@;jCrpc-~ivC09`X9%Yb(;%GsOAs1 zArEgZExGS12p##W@z3h9u z?!o03w%-$S2b?K{q%t!fA+GPZfkF?bsX|DLW5wz}yD{Cy>DPGk#e8!7*(|JL%H){9 z-goa;7L438uPKk0{n@DW)lQQ8p&*fi{h3lW>nc0I$**7eh&Uq5Vql*{D;wt|d6x*i zg;147(~XE`MmXhEvSsnuhc*xA)klJ5lS+V3BaR?F*Wt=H3apB3nb=?FYQi|rup>;e zKI_E@g^Df+7ze_i8p7?t$GiLo){5)MDwx1t9E9%AXBg{ql7(86dD#$$?EFQmA2I>C zw?FsKq7RV0h7wz1=?b2UR#HN2$jR!U2me}~aoi?{&Ko+5UdtKqwb;|Ya_(G*tg`v4 zGFs0p7p4P`QEq0AH+r4%wruDwhU2gSTJ-o~n6qpD6}e(89j&C)?}M$zX%FF08CRg~ zT~|35W8>3kPZ5@|`9!7KK>m(YglPFod|nxN?wOilXfXb4zKveWd_-uBW0>@Vs{mga z)Nm&zm5ee(0#HFlOB~{p1|czicpn^Rc_?LS}H00O{06o z+2ltIzVj*K<6Ys1A1T(nM%Sbp_AF{H3~B{@6Sz!R0|h^%GwhvVtoAD8U250uOFei& zZd*aU1yHuf-{$&$osr{WB>aa-O{~bq?^fVP|8Z$VAK98~5{dNiuVKH&-Ru^cEbP8o z+bWq`Rk}!UC`Z1sdwq%42v*(7s-^Dlku8u-7n^jDm5Xqg~k z$A^Dp`#p2QOO}J!yYy+JvB0h7Hb8 zE%+KX%DSG=mhSUu<++YUyn~G>j7V;E8^)P7V8Q8{7H?4hUVLI_Ek=F%qmDL=$VV}F zbKwj-TeKMi0Z>BQVlWCpLom5*?%;1&~!bH~g#pe;B4~pn_9m zULY(Ptw@$s1SbZF6o;3*!8KX;FHp4~$v3Cy710N#;g{rH@pb`y3f^kHb(^(4hDJuy zi<(|17|0F*UmzBhj(%}ep;?B zXzf>~(g>3!9DTHJU8D15dEm`PHcrZ44aagxeayRIf21o2O0yo^G1DDUA(77XZS2n# z-|Bx{)Vc#F+Her3HW7*!<7fL`2Ku9!sFR~x&vzy=W&&%uscgZTxS7^BKRC8NHlZi~ zYHL7I2wriA_lhOWh)qJAI+Av^LrB)~0&8gradE!`ozPv{rkMfIJ^Dx4m*2-$xev4; z?Nof{nlK2<5fOVhO$)jUL&uaLWI32?5-^ZpOr=Lri55KP15gv4d^Y^mxbrQvT#UcU zI&}J9D)b~${o+W4+YJh;lOQlXTaPHTZ%`FshB3KMRu?4-s3{gHZo{JIzKrIXzk%82 zJt_T~(1&~Pk#dVoNoR?TN|+a8=?NMCuRJV1WOHhKgGDfzPK0A!Yx?~yi5I%OG7b;< z1go&1Nw&$<(0yv05;+-lF8_;&@N^J)bv*uRRsf9P= zWH5ett(#l&wgYmavTSp@?wo2)6X3M`<+VY`6VESM(J0p#F<~3HxuxZO05;!|XjEVl z0XHwP*LX3rI$5(N@{pl!b)<+-Oqq1bg9lUe{@N(jniu{Tf8M)=KZg#+(L0wfe(k~6 zw#O`d-149P>@H1mS=)ZIxS<{8(7ni%`%2EvIb1 zL5|0>Wfev%C6<5X+7`(q&$zfaQyK7l{13IEeBR6uiyq1p^F_1_&=KS=2G<~ z78E6R`k?(&1QlISp@fwTTTc~A1{9^1tYXbm1bwPPEnI()N==xJDoPiJhTokk6ayF# zro>oIQ)&T4iQ!T0-%|vBP_DX&d~Y33Q@RMrKp2x$tFk>ui><&C$#i6$VrxS@pwZwx z$HvdEj4L@g*>b4l-t3)fFPpRR`9f4is98D;Wb0Yk+k4Z2gNsr%BWtM}612J=AkmI^ z{nJH1WEi5M1=w6%T&(Wg@vy56EQ?7<>=5LUvULX!bUF0%{{vePJwqD@dZdwrgaq3! aKebl#40!QU$rSKPOk<#D3KZ))#QYBsvqbR# literal 0 HcmV?d00001 diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-slotted-label-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0344c584fe7e189932f1da09962e089d017641fc GIT binary patch literal 11054 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 literal 0 HcmV?d00001 From 71bcef0da09b0b3e843c54c6f951b7739e2827e9 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 25 May 2023 11:49:39 -0400 Subject: [PATCH 3/4] Update core/src/components/select/select.tsx Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> --- core/src/components/select/select.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index a461ef1003c..c0e03fa73b3 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -33,7 +33,7 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from ' /** * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. * - * @slot label - label - The label text to associate with the select. Use the "labelPlacement" property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML. + * @slot label - The label text to associate with the select. Use the "labelPlacement" property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML. * * @part placeholder - The text displayed in the select when there is no value. * @part text - The displayed value of the select. From ccc3b601d5f1305131496d3e02f6e43e0f4938de Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 25 May 2023 13:01:24 -0400 Subject: [PATCH 4/4] refactor(select): simplify needsExplicitNotchWidth --- core/src/components/select/select.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 90bda347da4..0592e5f50f5 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -785,17 +785,12 @@ export class Select implements ComponentInterface { */ this.notchSpacerEl === undefined || /** - * If no label is being used, then we - * do not need to estimate the notch width. + * If either the label property is being + * used or the label slot is not defined, + * then we do not need to estimate the notch width. */ - !this.hasLabel || - /** - * If the label property is being used - * then we can render the label text inside - * of the notch and let the browser - * determine the notch size for us. - */ - this.label !== undefined + this.label !== undefined || + this.labelSlot === null ) { return false; }