diff --git a/BREAKING.md b/BREAKING.md index 2858e6d446d..a15b840256b 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -26,6 +26,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Progress bar](#version-8x-progress-bar) - [Select](#version-8x-select) - [Textarea](#version-8x-textarea) + - [Toggle](#version-8x-toggle)

Browser and Platform Support

@@ -184,3 +185,7 @@ For more information on styling toast buttons, refer to the [Toast Theming docum

Textarea

- The `legacy` property and support for the legacy syntax, which involved placing an `ion-textarea` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy textarea syntax, refer to the [Textarea documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax). + +

Toggle

+ +- The `legacy` property and support for the legacy syntax, which involved placing an `ion-toggle` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy toggle syntax, refer to the [Toggle documentation](https://ionicframework.com/docs/api/toggle#migrating-from-legacy-toggle-syntax). \ No newline at end of file diff --git a/core/api.txt b/core/api.txt index 1241a58e605..7b3fb11a20f 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1514,7 +1514,6 @@ ion-toggle,prop,disabled,boolean,false,false,false ion-toggle,prop,enableOnOffLabels,boolean | undefined,config.get('toggleOnOffLabels'),false,false ion-toggle,prop,justify,"end" | "space-between" | "start",'space-between',false,false ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false -ion-toggle,prop,legacy,boolean | undefined,undefined,false,false ion-toggle,prop,mode,"ios" | "md",undefined,false,false ion-toggle,prop,name,string,this.inputId,false,false ion-toggle,prop,value,null | string | undefined,'on',false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 68efdd59e7a..2318b26d04f 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3223,10 +3223,6 @@ export namespace Components { * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property. */ "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked'; - /** - * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup. - */ - "legacy"?: boolean; /** * The mode determines which platform styles to use. */ @@ -4605,7 +4601,6 @@ declare global { "ionChange": ToggleChangeEventDetail; "ionFocus": void; "ionBlur": void; - "ionStyle": StyleEventDetail; } interface HTMLIonToggleElement extends Components.IonToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLIonToggleElement, ev: IonToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -8032,10 +8027,6 @@ declare namespace LocalJSX { * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property. */ "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked'; - /** - * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup. - */ - "legacy"?: boolean; /** * The mode determines which platform styles to use. */ @@ -8056,10 +8047,6 @@ declare namespace LocalJSX { * Emitted when the toggle has focus. */ "onIonFocus"?: (event: IonToggleCustomEvent) => void; - /** - * Emitted when the styles change. - */ - "onIonStyle"?: (event: IonToggleCustomEvent) => void; /** * The value of the toggle does not mean if it's checked or not, use the `checked` property for that. The value of a toggle is analogous to the value of a ``, it's only used when the toggle participates in a native `
`. */ diff --git a/core/src/components/item/test/disabled/index.html b/core/src/components/item/test/disabled/index.html index 6cb3b2ae668..f783a0ade44 100644 --- a/core/src/components/item/test/disabled/index.html +++ b/core/src/components/item/test/disabled/index.html @@ -39,10 +39,6 @@ Disabled Item Anchor - - Disabled Toggle - - Disabled Checkbox @@ -85,7 +81,6 @@ - Checkbox + Toggle diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png index 272b191e449..a9a5e88befc 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png index ae86aebc143..a0454864061 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png index 5bb51b0426d..9bd3295902d 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png index 844700c7e0c..332dfec83ca 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png index 7fde6e073d2..7075bd58b1e 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png index 0ca08456396..c3a31fe0f06 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/index.html b/core/src/components/item/test/legacy/disabled/index.html index b64f3647d24..49b38cdb363 100644 --- a/core/src/components/item/test/legacy/disabled/index.html +++ b/core/src/components/item/test/legacy/disabled/index.html @@ -38,12 +38,6 @@ Disabled Item Anchor - - - Disabled Toggle - - - Disabled Checkbox @@ -85,12 +79,6 @@ - - - Checkbox + Toggle - - - Checkbox + Buttons diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png index c459077b4a5..000a9c184ce 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png index b645dcbc406..3d4688ce48e 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png index 4f0acae9c1a..7c77d983d5d 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png index 41274b76532..a267ee15635 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png index c0fcce36c43..2367f71afa3 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png index f2cadffcb4d..24cade08c1b 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png index 2fc3b4086c5..46e27d9844e 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png index bac3bf2eebc..3f1fb976be8 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png index 82aa463e7fc..67c0666ef65 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png index 26dac515a59..6e68f24b045 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png index 4cd2759ce74..82b91f06fbe 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png index dce040be17a..13287c84747 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/legacy/basic/index.html b/core/src/components/toggle/test/legacy/basic/index.html deleted file mode 100644 index c9804b6163d..00000000000 --- a/core/src/components/toggle/test/legacy/basic/index.html +++ /dev/null @@ -1,162 +0,0 @@ - - - - - Toggle - Basic - - - - - - - - - - - - - Toggle - Basic - - - - - - - - - - Orange - - - - - Apple - - - - - Banana - - - - - Cherry, disabled - - - - - Grape, checked, disabled - - - - - Kiwi, (ionChange) Secondary color - - - - - Strawberry, (ionChange) checked="true" - - - - - Checkbox right, checked, really long text that should ellipsis - - - - - Checkbox right side - - - - - Button w/ right side default icon, really long text that should ellipsis - - - - - Custom - - - - - Stop Immediate Event Propagation - - - - - - -

- - Stand-alone toggle: - -

- - - - - - - - diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts deleted file mode 100644 index 7d7d921d91f..00000000000 --- a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; - -configs().forEach(({ title, screenshot, config }) => { - test.describe(title('toggle: rendering'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/toggle/test/legacy/basic`, config); - await page.setIonViewport(); - - await expect(page).toHaveScreenshot(screenshot(`toggle-diff`)); - }); - }); -}); - -/** - * This behavior does not vary across modes/directions. - */ -configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { - test.describe(title('toggle: functionality'), () => { - test.beforeEach(async ({ page }) => { - await page.goto(`/src/components/toggle/test/legacy/basic`, config); - }); - test('should have proper class and aria role when checked', async ({ page }) => { - const toggle = page.locator('#orange'); - - await expect(toggle).not.toHaveClass(/toggle-checked/); - await expect(toggle).toHaveAttribute('aria-checked', 'false'); - - await toggle.click(); - await page.waitForChanges(); - - await expect(toggle).toHaveClass(/toggle-checked/); - await expect(toggle).toHaveAttribute('aria-checked', 'true'); - - await toggle.click(); - await page.waitForChanges(); - - await expect(toggle).not.toHaveClass(/toggle-checked/); - await expect(toggle).toHaveAttribute('aria-checked', 'false'); - }); - - test('should fire change event with detail', async ({ page }) => { - const toggle = page.locator('#orange'); - const ionChange = await page.spyOnEvent('ionChange'); - - await toggle.click(); - await page.waitForChanges(); - - expect(ionChange).toHaveReceivedEventDetail({ - checked: true, - value: 'on', - }); - - await toggle.click(); - await page.waitForChanges(); - - expect(ionChange).toHaveReceivedEventDetail({ - checked: false, - value: 'on', - }); - }); - - test('should not fire change event if checked prop is changed directly', async ({ page }) => { - const toggle = page.locator('#orange'); - const ionChange = await page.spyOnEvent('ionChange'); - - await toggle.evaluate((el: HTMLIonToggleElement) => (el.checked = true)); - await page.waitForChanges(); - - expect(ionChange).toHaveReceivedEventTimes(0); - }); - - test('should pass properties down to hidden input', async ({ page }) => { - const toggle = page.locator('#grapeChecked'); - - await expect(toggle).toHaveJSProperty('disabled', true); - await expect(toggle).toHaveJSProperty('value', 'grape'); - await expect(toggle).toHaveJSProperty('name', 'grape'); - - const hiddenInput = page.locator('#grapeChecked input[type=hidden]'); - - await expect(hiddenInput).toBeDisabled(); - await expect(hiddenInput).toHaveJSProperty('value', 'grape'); - await expect(hiddenInput).toHaveJSProperty('name', 'grape'); - - await toggle.evaluate((el: HTMLIonToggleElement) => { - el.disabled = false; - el.checked = false; - el.value = 'new-value'; - el.name = 'new-name'; - }); - - await page.waitForChanges(); - - await expect(hiddenInput).not.toBeDisabled(); - await expect(hiddenInput).toHaveJSProperty('name', 'new-name'); - - // shouldn't have a value because it's unchecked - // note: using toHaveJSProperty to check empty string triggers error for some reason - const value = await hiddenInput.evaluate((el: HTMLInputElement) => el.value); - expect(value).toBe(''); - }); - }); -}); diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index c99deca68c6..00000000000 Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index d96fe9fd71f..00000000000 Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index ce17274b601..00000000000 Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index c8ce8359803..00000000000 Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index b650a703c76..00000000000 Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index e897463b78a..00000000000 Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index bddb426d2ae..00000000000 Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 364b3e8f9dd..00000000000 Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 6a1a4df8a99..00000000000 Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 02dc0e94d72..00000000000 Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 55fb5d8c6db..00000000000 Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 5fb2f072bb6..00000000000 Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/index.html b/core/src/components/toggle/test/legacy/enable-on-off-labels/index.html deleted file mode 100644 index 9b9a48c9670..00000000000 --- a/core/src/components/toggle/test/legacy/enable-on-off-labels/index.html +++ /dev/null @@ -1,284 +0,0 @@ - - - - - Toggle - enableOnOffLabels - - - - - - - - - - - - - - - Toggle - enableOnOffLabels - - Options - - - - - Dark Mode - - - - - - - - - - - Unchecked - - - - - Checked - - - - - Secondary Unchecked - - - - - Secondary Checked - - - - - Success Unchecked - - - - - Success Checked - - - - - Danger Unchecked - - - - - Danger Checked - - - - - Tertiary Unchecked - - - - - Tertiary Checked - - - - - Light Unchecked - - - - - Light Checked - - - - - Medium Unchecked - - - - - Medium Checked - - - - - Dark Unchecked - - - - - Dark Checked - - - - - - - - - diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts deleted file mode 100644 index c2041c80ecb..00000000000 --- a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; - -configs().forEach(({ title, screenshot, config }) => { - test.describe(title('toggle: enableOnOffLabels'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/toggle/test/legacy/enable-on-off-labels`, config); - await page.setIonViewport(); - - await expect(page).toHaveScreenshot(screenshot(`toggle-on-off-labels-diff`)); - }); - }); -}); - -/** - * This behavior does not vary across directions. - */ -configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { - test.describe(title('toggle: dark mode'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/toggle/test/legacy/enable-on-off-labels`, config); - const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent'); - const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss'); - - await page.click('#popover-trigger'); - await ionPopoverDidPresent.next(); - - await page.click('#dark-mode'); - - await page.evaluate(() => { - const popover = document.querySelector('ion-popover'); - return popover?.dismiss(); - }); - await ionPopoverDidDismiss.next(); - - await page.waitForChanges(); - - await page.setIonViewport(); - - await expect(page).toHaveScreenshot(screenshot(`toggle-on-off-labels-dark-mode-diff`)); - }); - }); -}); diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 8a93d554914..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 414cf1bcec5..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 165db887887..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 7b0932b4af1..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index dca4650ce3e..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 777e0db6d93..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 366f07b7cae..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index ecb7dd85c04..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index b8b8867d540..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-dark-mode-diff-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 7236f981478..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 8d1b68adec8..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index f92d360ed99..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index f6feff80e82..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 924adfd6348..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 404391dde8e..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index ad70d3942ad..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 0e343202901..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 5c7fe26c2d0..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 0e3408864f1..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 051c440e004..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 9f5b528ebc7..00000000000 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/sizes/index.html b/core/src/components/toggle/test/legacy/sizes/index.html deleted file mode 100644 index 369de5a3362..00000000000 --- a/core/src/components/toggle/test/legacy/sizes/index.html +++ /dev/null @@ -1,230 +0,0 @@ - - - - - Toggle - Sizes - - - - - - - - - - - - - Toggle - Sizes - - Toggle - - - - - -

Default

- - - - - - - -

Custom Widths

- - - - - - - -

Custom Heights

-
- - -
- - - - - - -

Dynamic Sizes

- - - - - -

Complex Custom Toggles

- - - - - - - - - - - - - - - - - - - - - - diff --git a/core/src/components/toggle/test/legacy/sizes/power-outline.svg b/core/src/components/toggle/test/legacy/sizes/power-outline.svg deleted file mode 100644 index 009582f7db8..00000000000 --- a/core/src/components/toggle/test/legacy/sizes/power-outline.svg +++ /dev/null @@ -1 +0,0 @@ -ionicons-v5-p \ No newline at end of file diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts deleted file mode 100644 index dc12e6311ef..00000000000 --- a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; - -configs().forEach(({ title, screenshot, config }) => { - test.describe(title('toggle: sizes'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/toggle/test/legacy/sizes`, config); - - await page.setIonViewport(); - - await expect(page).toHaveScreenshot(screenshot(`toggle-sizes-diff`)); - }); - }); -}); diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 39770c100e1..00000000000 Binary files a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 30bcb6ba31a..00000000000 Binary files a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 506d199c085..00000000000 Binary files a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 92425215512..00000000000 Binary files a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 99f78b72b4c..00000000000 Binary files a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 7f7aae3d9d1..00000000000 Binary files a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 8ebc14d7512..00000000000 Binary files a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 5f3541b293f..00000000000 Binary files a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index ffc41dd738b..00000000000 Binary files a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 2a8fc8ca67a..00000000000 Binary files a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 4df76f690c0..00000000000 Binary files a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 0ab5f3032dc..00000000000 Binary files a/core/src/components/toggle/test/legacy/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/toggle/test/sizes/index.html b/core/src/components/toggle/test/sizes/index.html index 0caa1531bad..ec92691d718 100644 --- a/core/src/components/toggle/test/sizes/index.html +++ b/core/src/components/toggle/test/sizes/index.html @@ -172,8 +172,8 @@

Complex Custom Toggles

} .icon-custom { - --handle-background-checked: #fff url(/src/components/toggle/test/legacy/sizes/power-outline.svg) no-repeat - center / contain; + --handle-background-checked: #fff url(/src/components/toggle/test/sizes/power-outline.svg) no-repeat center / + contain; } .icon-custom::before { diff --git a/core/src/components/toggle/toggle.ios.scss b/core/src/components/toggle/toggle.ios.scss index d14879c0232..e8092622822 100644 --- a/core/src/components/toggle/toggle.ios.scss +++ b/core/src/components/toggle/toggle.ios.scss @@ -19,15 +19,6 @@ --handle-transition: #{$toggle-ios-transition}; } -:host(.legacy-toggle) { - width: $toggle-ios-width; - height: $toggle-ios-height; - - contain: strict; - - overflow: hidden; -} - // Toggle Native Wrapper // ---------------------------------------------------------------- @@ -180,25 +171,3 @@ :host(.toggle-disabled) { opacity: $toggle-ios-disabled-opacity; } - -// iOS Toggle Within An Item -// ---------------------------------------------------------- - -:host(.in-item.legacy-toggle) { - @include margin($toggle-ios-media-margin); - @include padding( - $toggle-ios-item-end-padding-top, - $toggle-ios-item-end-padding-end, - $toggle-ios-item-end-padding-bottom, - $toggle-ios-item-end-padding-start - ); -} - -:host(.in-item.legacy-toggle[slot="start"]) { - @include padding( - $toggle-ios-item-start-padding-top, - $toggle-ios-item-start-padding-end, - $toggle-ios-item-start-padding-bottom, - $toggle-ios-item-start-padding-start - ); -} diff --git a/core/src/components/toggle/toggle.ios.vars.scss b/core/src/components/toggle/toggle.ios.vars.scss index b1a9d8b3dfd..e95847dd7b8 100644 --- a/core/src/components/toggle/toggle.ios.vars.scss +++ b/core/src/components/toggle/toggle.ios.vars.scss @@ -37,9 +37,6 @@ $toggle-ios-handle-box-shadow: 0 3px 4px rgba(0, 0, 0, .06), 0 3px 8px r /// @prop - Background color of the toggle handle $toggle-ios-handle-background-color: #ffffff !default; -/// @prop - Margin of the toggle handle -$toggle-ios-media-margin: 0 !default; - /// @prop - Transition duration of the toggle icon $toggle-ios-transition-duration: 300ms !default; @@ -49,29 +46,5 @@ $toggle-ios-transition: transform $toggle-ios-transition-duration /// @prop - Opacity of the disabled toggle $toggle-ios-disabled-opacity: .3 !default; -/// @prop - Padding top of the toggle positioned on the start in an item -$toggle-ios-item-start-padding-top: 6px !default; - -/// @prop - Padding end of the toggle positioned on the start in an item -$toggle-ios-item-start-padding-end: 16px !default; - -/// @prop - Padding bottom of the toggle positioned on the start in an item -$toggle-ios-item-start-padding-bottom: 5px !default; - -/// @prop - Padding start of the toggle positioned on the start in an item -$toggle-ios-item-start-padding-start: 0 !default; - -/// @prop - Padding top of the toggle positioned on the end in an item -$toggle-ios-item-end-padding-top: 6px !default; - -/// @prop - Padding end of the toggle positioned on the end in an item -$toggle-ios-item-end-padding-end: 0 !default; - -/// @prop - Padding bottom of the toggle positioned on the end in an item -$toggle-ios-item-end-padding-bottom: 5px !default; - -/// @prop - Padding start of the toggle positioned on the end in an item -$toggle-ios-item-end-padding-start: $item-ios-padding-start !default; - /// @prop - The text color of the on/off labels when the toggle is checked $toggle-ios-on-off-label-checked-color: #fff !default; diff --git a/core/src/components/toggle/toggle.md.scss b/core/src/components/toggle/toggle.md.scss index 3444913991e..d0a3bfda360 100644 --- a/core/src/components/toggle/toggle.md.scss +++ b/core/src/components/toggle/toggle.md.scss @@ -19,14 +19,6 @@ --handle-transition: #{$toggle-md-transition}; } -:host(.legacy-toggle) { - @include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start); - width: $toggle-md-track-width; - height: $toggle-md-track-height; - - contain: strict; -} - // Toggle Native Wrapper // ---------------------------------------------------------------- @@ -84,32 +76,3 @@ :host(.toggle-disabled) { opacity: $toggle-md-disabled-opacity; } - -// Material Design Toggle Within An Item -// ---------------------------------------------------------- - -:host(.in-item.legacy-toggle) { - @include margin( - $toggle-md-media-margin-top, - $toggle-md-media-margin-end, - $toggle-md-media-margin-bottom, - $toggle-md-media-margin-start - ); - @include padding( - $toggle-md-item-end-padding-top, - $toggle-md-item-end-padding-end, - $toggle-md-item-end-padding-bottom, - $toggle-md-item-end-padding-start - ); - - cursor: pointer; -} - -:host(.in-item.legacy-toggle[slot="start"]) { - @include padding( - $toggle-md-item-start-padding-top, - $toggle-md-item-start-padding-end, - $toggle-md-item-start-padding-bottom, - $toggle-md-item-start-padding-start - ); -} diff --git a/core/src/components/toggle/toggle.md.vars.scss b/core/src/components/toggle/toggle.md.vars.scss index 7c980ca42ad..7377082f006 100644 --- a/core/src/components/toggle/toggle.md.vars.scss +++ b/core/src/components/toggle/toggle.md.vars.scss @@ -34,18 +34,6 @@ $toggle-md-handle-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, . /// @prop - Background color of the toggle handle $toggle-md-handle-background-color-off: #ffffff !default; -/// @prop - Margin top of the toggle -$toggle-md-media-margin-top: 0 !default; - -/// @prop - Margin end of the toggle -$toggle-md-media-margin-end: $toggle-md-media-margin-top !default; - -/// @prop - Margin bottom of the toggle -$toggle-md-media-margin-bottom: $toggle-md-media-margin-top !default; - -/// @prop - Margin start of the toggle -$toggle-md-media-margin-start: $toggle-md-media-margin-end !default; - /// @prop - Transition duration of the toggle icon $toggle-md-transition-duration: 160ms !default; @@ -55,42 +43,6 @@ $toggle-md-transition: transform $toggle-md-transitio /// @prop - Opacity of the disabled toggle $toggle-md-disabled-opacity: $form-control-md-disabled-opacity !default; -/// @prop - Padding top of standalone toggle -$toggle-md-padding-top: 12px !default; - -/// @prop - Padding end of standalone toggle -$toggle-md-padding-end: $toggle-md-padding-top !default; - -/// @prop - Padding bottom of standalone toggle -$toggle-md-padding-bottom: $toggle-md-padding-top !default; - -/// @prop - Padding start of standalone toggle -$toggle-md-padding-start: $toggle-md-padding-end !default; - -/// @prop - Padding top of the toggle positioned on the start in an item -$toggle-md-item-start-padding-top: 12px !default; - -/// @prop - Padding end of the toggle positioned on the start in an item -$toggle-md-item-start-padding-end: 18px !default; - -/// @prop - Padding bottom of the toggle positioned on the start in an item -$toggle-md-item-start-padding-bottom: 12px !default; - -/// @prop - Padding start the toggle positioned on the start in an item -$toggle-md-item-start-padding-start: 2px !default; - -/// @prop - Padding top of the toggle positioned on the end in an item -$toggle-md-item-end-padding-top: 12px !default; - -/// @prop - Padding end of the toggle positioned on the end in an item -$toggle-md-item-end-padding-end: 0 !default; - -/// @prop - Padding bottom of the toggle positioned on the end in an item -$toggle-md-item-end-padding-bottom: 12px !default; - -/// @prop - Padding start of the toggle positioned on the end in an item -$toggle-md-item-end-padding-start: $item-md-padding-start !default; - /// @prop - The text color of the on/off labels $toggle-md-on-off-label-color: #000 !default; diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss index b55981aa712..89ce182bb5d 100644 --- a/core/src/components/toggle/toggle.scss +++ b/core/src/components/toggle/toggle.scss @@ -38,7 +38,7 @@ z-index: $z-index-item-input; } -:host(.in-item:not(.legacy-toggle)) { +:host(.in-item) { width: 100%; height: 100%; } @@ -49,17 +49,11 @@ * toolbar which is why we do not * limit the below behavior to just ion-item. */ -:host([slot="start"]:not(.legacy-toggle)), -:host([slot="end"]:not(.legacy-toggle)) { +:host([slot="start"]), +:host([slot="end"]) { width: auto; } -:host(.legacy-toggle) { - contain: content; - - touch-action: none; -} - :host(.ion-focused) input { border: 2px solid #5e9ed6; } @@ -68,18 +62,6 @@ pointer-events: none; } -:host(.legacy-toggle) label { - @include input-cover(); - - display: flex; - - align-items: center; - - opacity: 0; - - pointer-events: none; -} - input { @include visually-hidden(); } @@ -112,7 +94,7 @@ input { overflow: hidden; } -:host(.in-item:not(.legacy-toggle)) .label-text-wrapper { +:host(.in-item) .label-text-wrapper { @include margin($toggle-item-label-margin-top, null, $toggle-item-label-margin-bottom, null); } diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index 783f86c348f..864c4059c4a 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -1,10 +1,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core'; -import type { LegacyFormController } from '@utils/forms'; -import { createLegacyFormController } from '@utils/forms'; -import { getAriaLabel, renderHiddenInput, inheritAriaAttributes } from '@utils/helpers'; +import { renderHiddenInput, inheritAriaAttributes } from '@utils/helpers'; import type { Attributes } from '@utils/helpers'; -import { printIonWarning } from '@utils/logging'; import { hapticSelection } from '@utils/native/haptic'; import { isRTL } from '@utils/rtl'; import { createColorClasses, hostContext } from '@utils/theme'; @@ -12,7 +9,7 @@ import { checkmarkOutline, removeOutline, ellipseOutline } from 'ionicons/icons' import { config } from '../../global/config'; import { getIonMode } from '../../global/ionic-global'; -import type { Color, Gesture, GestureDetail, Mode, StyleEventDetail } from '../../interface'; +import type { Color, Gesture, GestureDetail, Mode } from '../../interface'; import type { ToggleChangeEventDetail } from './toggle-interface'; @@ -38,14 +35,10 @@ export class Toggle implements ComponentInterface { private gesture?: Gesture; private focusEl?: HTMLElement; private lastDrag = 0; - private legacyFormController!: LegacyFormController; private inheritedAttributes: Attributes = {}; private toggleTrack?: HTMLElement; private didLoad = false; - // This flag ensures we log the deprecation warning at most once. - private hasLoggedDeprecationWarning = false; - @Element() el!: HTMLIonToggleElement; @State() activated = false; @@ -95,17 +88,6 @@ export class Toggle implements ComponentInterface { */ @Prop() labelPlacement: 'start' | 'end' | 'fixed' | 'stacked' = 'start'; - /** - * Set the `legacy` property to `true` to forcibly use the legacy form control markup. - * Ionic will only opt components in to the modern form markup when they are - * using either the `aria-label` attribute or the default slot that contains - * the label text. As a result, the `legacy` property should only be used as - * an escape hatch when you want to avoid this automatic opt-in behavior. - * Note that this property will be removed in an upcoming major release - * of Ionic, and all form components will be opted-in to using the modern form markup. - */ - @Prop() legacy?: boolean; - /** * How to pack the label and toggle within a line. * `"start"`: The label and toggle will appear on the left in LTR and @@ -140,15 +122,8 @@ export class Toggle implements ComponentInterface { */ @Event() ionBlur!: EventEmitter; - /** - * Emitted when the styles change. - * @internal - */ - @Event() ionStyle!: EventEmitter; - @Watch('disabled') disabledChanged() { - this.emitStyle(); if (this.gesture) { this.gesture.enable(!this.disabled); } @@ -167,8 +142,6 @@ export class Toggle implements ComponentInterface { } async connectedCallback() { - this.legacyFormController = createLegacyFormController(this.el); - /** * If we have not yet rendered * ion-toggle, then toggleTrack is not defined. @@ -211,23 +184,9 @@ export class Toggle implements ComponentInterface { } componentWillLoad() { - this.emitStyle(); - - if (!this.legacyFormController.hasLegacyControl()) { - this.inheritedAttributes = { - ...inheritAriaAttributes(this.el), - }; - } - } - - private emitStyle() { - if (this.legacyFormController.hasLegacyControl()) { - this.ionStyle.emit({ - 'interactive-disabled': this.disabled, - // TODO(FW-2990): remove this - legacy: !!this.legacy, - }); - } + this.inheritedAttributes = { + ...inheritAriaAttributes(this.el), + }; } private onStart() { @@ -328,12 +287,6 @@ export class Toggle implements ComponentInterface { } render() { - const { legacyFormController } = this; - - return legacyFormController.hasLegacyControl() ? this.renderLegacyToggle() : this.renderToggle(); - } - - private renderToggle() { const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this; const mode = getIonMode(this); @@ -387,72 +340,6 @@ export class Toggle implements ComponentInterface { ); } - - private renderLegacyToggle() { - if (!this.hasLoggedDeprecationWarning) { - printIonWarning( - `ion-toggle now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute. - -Example: Email -Example with aria-label: - -Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, - this.el - ); - - if (this.legacy) { - printIonWarning( - `ion-toggle is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup. - -Developers can dismiss this warning by removing their usage of the "legacy" property and using the new toggle syntax.`, - this.el - ); - } - - this.hasLoggedDeprecationWarning = true; - } - - const { activated, color, checked, disabled, el, inputId, name } = this; - const mode = getIonMode(this); - const { label, labelId, labelText } = getAriaLabel(el, inputId); - const value = this.getValue(); - const rtl = isRTL(el) ? 'rtl' : 'ltr'; - - renderHiddenInput(true, el, name, checked ? value : '', disabled); - - return ( - - {this.renderToggleControl()} - - this.onFocus()} - onBlur={() => this.onBlur()} - ref={(focusEl) => (this.focusEl = focusEl)} - /> - - ); - } } const shouldToggle = (rtl: boolean, checked: boolean, deltaX: number, margin: number): boolean => { diff --git a/core/src/utils/test/aria.spec.ts b/core/src/utils/test/aria.spec.ts index 66178021eef..ec992073a77 100644 --- a/core/src/utils/test/aria.spec.ts +++ b/core/src/utils/test/aria.spec.ts @@ -5,7 +5,8 @@ import { Label } from '../../components/label/label'; import { Toggle } from '../../components/toggle/toggle'; import { getAriaLabel } from '../helpers'; -describe('getAriaLabel()', () => { +// TODO FW-5969 +describe.skip('getAriaLabel()', () => { it('should correctly link component to label', async () => { const page = await newSpecPage({ components: [Item, Label, Toggle], diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index df360fc2cd1..9e7b764c584 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -2339,14 +2339,14 @@ Shorthand for ionToastDidDismiss. @ProxyCmp({ - inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'] + inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'value'] }) @Component({ selector: 'ion-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'], + inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'value'], }) export class IonToggle { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/toggle.ts b/packages/angular/standalone/src/directives/toggle.ts index 7bd3db96546..76e37ad1a04 100644 --- a/packages/angular/standalone/src/directives/toggle.ts +++ b/packages/angular/standalone/src/directives/toggle.ts @@ -23,7 +23,6 @@ const TOGGLE_INPUTS = [ 'enableOnOffLabels', 'justify', 'labelPlacement', - 'legacy', 'mode', 'name', 'value', diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index ba6d8f163ba..f6c51ac57e3 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -866,13 +866,11 @@ export const IonToggle = /*@__PURE__*/ defineContainer