diff --git a/core/api.txt b/core/api.txt index c2928a8988..3932a62514 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1146,6 +1146,7 @@ ion-list,none ion-list,prop,inset,boolean,false,false,false ion-list,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false ion-list,prop,mode,"ios" | "md",undefined,false,false +ion-list,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false ion-list,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-list,method,closeSlidingItems,closeSlidingItems() => Promise diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 8b44d6d181..968593113a 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1755,6 +1755,10 @@ export namespace Components { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; + /** + * Set to `"soft"` for slightly rounded corners, `"round"` for fully rounded corners, or `"rectangular"` for no rounded corners. Defaults to `"round"` for the `ionic` theme when inset is `true` defaults to `"rectangular"` for the `ionic` theme when inset is `false`, undefined for all other themes. + */ + "shape"?: 'soft' | 'round' | 'rectangular'; /** * The theme determines the visual appearance of the component. */ @@ -7045,6 +7049,10 @@ declare namespace LocalJSX { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; + /** + * Set to `"soft"` for slightly rounded corners, `"round"` for fully rounded corners, or `"rectangular"` for no rounded corners. Defaults to `"round"` for the `ionic` theme when inset is `true` defaults to `"rectangular"` for the `ionic` theme when inset is `false`, undefined for all other themes. + */ + "shape"?: 'soft' | 'round' | 'rectangular'; /** * The theme determines the visual appearance of the component. */ diff --git a/core/src/components/list/list.ionic.scss b/core/src/components/list/list.ionic.scss new file mode 100644 index 0000000000..45f33fccec --- /dev/null +++ b/core/src/components/list/list.ionic.scss @@ -0,0 +1,123 @@ +@use "../../themes/ionic/ionic.globals.scss" as globals; +@import "./list.ionic.vars.scss"; + +// Ionic List +// -------------------------------------------------- + +ion-list { + @include globals.margin(0); + @include globals.padding(0); + + display: block; + + contain: content; + list-style-type: none; +} + +// Ionic Inset List +// -------------------------------------------------- + +.list-ionic.list-inset { + @include globals.margin(globals.$ionic-space-100); +} + +// Ionic Shapes +// +// The border radius is applied to the list, excluding +// the header. The header is styled to appear as if +// it is above the list. +// +// This makes the border radius appear to be applied +// to the first element in the list (skips the header) +// and the last element in the list. These elements +// can be either `ion-item` or `ion-item-sliding`. +// -------------------------------------------------- + +.list-ionic:has(ion-list-header) { + /* Round */ + &.list-round { + /** + * Only apply the border radius to the bottom of the list. + * The top of the list should not have a border radius because + * that would include the header. + */ + @include globals.border-radius(initial, initial, $list-ionic-border-radius-round, $list-ionic-border-radius-round); + } + + // Target the first element in the list after the header + &.list-round ion-list-header + * { + /** + * Only apply the border radius to the top of the first element. + * The bottom of the first element should not have a border radius + * because that would not look connected to the rest. + */ + @include globals.border-radius($list-ionic-border-radius-round, $list-ionic-border-radius-round, initial, initial); + } + + /* Soft */ + &.list-soft { + /** + * Only apply the border radius to the bottom of the list. + * The top of the list should not have a border radius because + * that would include the header. + */ + @include globals.border-radius(initial, initial, $list-ionic-border-radius-soft, $list-ionic-border-radius-soft); + } + + // Target the first element in the list after the header + &.list-soft ion-list-header + * { + /** + * Only apply the border radius to the top of the first element. + * The bottom of the first element should not have a border radius + * because that would not look connected to the rest. + */ + @include globals.border-radius($list-ionic-border-radius-soft, $list-ionic-border-radius-soft, initial, initial); + } + + /* Rectangular */ + &.list-rectangular { + /** + * Only apply the border radius to the bottom of the list. + * The top of the list should not have a border radius because + * that would include the header. + */ + @include globals.border-radius( + initial, + initial, + $list-ionic-border-radius-rectangular, + $list-ionic-border-radius-rectangular + ); + } + + // Target the first element in the list after the header + &.list-rectangular ion-list-header + * { + /** + * Only apply the border radius to the top of the first element. + * The bottom of the first element should not have a border radius + * because that would not look connected to the rest. + */ + @include globals.border-radius( + $list-ionic-border-radius-rectangular, + $list-ionic-border-radius-rectangular, + initial, + initial + ); + } +} + +.list-ionic:not(:has(ion-list-header)) { + /* Round */ + &.list-round { + @include globals.border-radius($list-ionic-border-radius-round); + } + + /* Soft */ + &.list-soft { + @include globals.border-radius($list-ionic-border-radius-soft); + } + + /* Rectangular */ + &.list-rectangular { + @include globals.border-radius($list-ionic-border-radius-rectangular); + } +} diff --git a/core/src/components/list/list.ionic.vars.scss b/core/src/components/list/list.ionic.vars.scss new file mode 100644 index 0000000000..af02803d2d --- /dev/null +++ b/core/src/components/list/list.ionic.vars.scss @@ -0,0 +1,11 @@ +// Ionic List +// -------------------------------------------------- + +/// @prop - Round border radius of the list +$list-ionic-border-radius-round: globals.$ionic-border-radius-400; + +/// @prop - Soft border radius of the list +$list-ionic-border-radius-soft: globals.$ionic-border-radius-200; + +/// @prop - Rectangular border radius of the list +$list-ionic-border-radius-rectangular: globals.$ionic-border-radius-0; diff --git a/core/src/components/list/list.md.scss b/core/src/components/list/list.md.scss index fcedfb3df0..3d39598ec1 100644 --- a/core/src/components/list/list.md.scss +++ b/core/src/components/list/list.md.scss @@ -32,8 +32,8 @@ * These selectors ensure the last item in the list * has the correct border. * We need to consider the following scenarios: - 1. The last item in a list as long as it is not the only item. - 2. The item in the last item-sliding in a list. + * 1. The last item in a list as long as it is not the only item. + * 2. The item in the last item-sliding in a list. * Note that we do not select "ion-item-sliding ion-item:last-of-type" * because that will cause the borders to disappear on * items in an item-sliding when the item is the last diff --git a/core/src/components/list/list.tsx b/core/src/components/list/list.tsx index 01e2970af1..c684debf22 100644 --- a/core/src/components/list/list.tsx +++ b/core/src/components/list/list.tsx @@ -12,7 +12,7 @@ import { getIonTheme } from '../../global/ionic-global'; styleUrls: { ios: 'list.ios.scss', md: 'list.md.scss', - ionic: 'list.md.scss', + ionic: 'list.ionic.scss', }, }) export class List implements ComponentInterface { @@ -28,6 +28,19 @@ export class List implements ComponentInterface { */ @Prop() inset = false; + /** + * Set to `"soft"` for slightly rounded corners, + * `"round"` for fully rounded corners, + * or `"rectangular"` for no rounded corners. + * + * Defaults to `"round"` for the `ionic` theme + * when inset is `true` + * defaults to `"rectangular"` for the `ionic` + * theme when inset is `false`, + * undefined for all other themes. + */ + @Prop() shape?: 'soft' | 'round' | 'rectangular'; + /** * If `ion-item-sliding` are used inside the list, this method closes * any open sliding item. @@ -43,9 +56,31 @@ export class List implements ComponentInterface { return false; } + private getShape(): string | undefined { + const theme = getIonTheme(this); + const { shape, inset } = this; + + // TODO(ROU-10831): Remove theme check when shapes are defined for all themes. + if (theme !== 'ionic') { + return undefined; + } + + if (shape === undefined && inset) { + return 'round'; + } + + if (shape === undefined) { + return 'rectangular'; + } + + return shape; + } + render() { const theme = getIonTheme(this); + const shape = this.getShape(); const { lines, inset } = this; + return ( ); diff --git a/core/src/components/list/test/inset/index.html b/core/src/components/list/test/inset/index.html index 674bf441bf..23f3f9a227 100644 --- a/core/src/components/list/test/inset/index.html +++ b/core/src/components/list/test/inset/index.html @@ -2,7 +2,7 @@ - List - Basic + List - Inset + + + + List - Shape + + + + + + + + + + + + + + List - Shape + + + + + + + Default with inset + + + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+
+ + + + Default without inset + + + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+
+ + + + Round + + + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+
+ + + + Soft + + + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+
+ + + + Rectangular + + + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+
+
+
+ + diff --git a/core/src/components/list/test/shape/list.e2e.ts b/core/src/components/list/test/shape/list.e2e.ts new file mode 100644 index 0000000000..76ca85311e --- /dev/null +++ b/core/src/components/list/test/shape/list.e2e.ts @@ -0,0 +1,237 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('list: shape'), () => { + test.describe(title('shape: round'), () => { + test('should render without header', async ({ page }) => { + await page.setContent( + ` + + + +
+ + + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+
+
+
+ `, + config + ); + + const listWrapper = page.locator('.wrapper'); + + await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-round-without-header`)); + }); + + test('should render with header', async ({ page }) => { + await page.setContent( + ` + + + +
+ + + Header + + + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+
+
+
+ `, + config + ); + + const listWrapper = page.locator('.wrapper'); + + await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-round-with-header`)); + }); + }); + + test.describe(title('shape: soft'), () => { + test('should render without header', async ({ page }) => { + await page.setContent( + ` + + + +
+ + + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+
+
+
+ `, + config + ); + + const listWrapper = page.locator('.wrapper'); + + await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-soft-without-header`)); + }); + + test('should render with header', async ({ page }) => { + await page.setContent( + ` + + + +
+ + + Header + + + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+
+
+
+ `, + config + ); + + const listWrapper = page.locator('.wrapper'); + + await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-soft-with-header`)); + }); + }); + + test.describe(title('shape: rectangular'), () => { + test('should render without header', async ({ page }) => { + await page.setContent( + ` + + + +
+ + + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+
+
+
+ `, + config + ); + + const listWrapper = page.locator('.wrapper'); + + await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-rectangular-without-header`)); + }); + + test('should render with header', async ({ page }) => { + await page.setContent( + ` + + + +
+ + + Header + + + + Title +

Subtitle

+
+
+ + + Title +

Subtitle

+
+
+
+
+
+ `, + config + ); + + const listWrapper = page.locator('.wrapper'); + + await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-rectangular-with-header`)); + }); + }); + }); +}); diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..f3039a0c47 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..8a2accbc18 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0818396f82 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6671f1edb1 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..38b505d156 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..157aa1752e Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..61cb177d20 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..06e249745e Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..299c5efc7a Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7eb060bf2c Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d26173f292 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..74e0082398 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1f7eab3c87 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..04da21ddcd Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..4aaf13c234 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0a7b87f19b Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..20a428d208 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7664d9c617 Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index db6c7f8902..990158f80f 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -1209,7 +1209,7 @@ export declare interface IonLabel extends Components.IonLabel {} @ProxyCmp({ - inputs: ['inset', 'lines', 'mode', 'theme'], + inputs: ['inset', 'lines', 'mode', 'shape', 'theme'], methods: ['closeSlidingItems'] }) @Component({ @@ -1217,7 +1217,7 @@ export declare interface IonLabel extends Components.IonLabel {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['inset', 'lines', 'mode', 'theme'], + inputs: ['inset', 'lines', 'mode', 'shape', 'theme'], }) export class IonList { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index ee91d8f165..e3ebefb3da 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -1185,7 +1185,7 @@ export declare interface IonLabel extends Components.IonLabel {} @ProxyCmp({ defineCustomElementFn: defineIonList, - inputs: ['inset', 'lines', 'mode', 'theme'], + inputs: ['inset', 'lines', 'mode', 'shape', 'theme'], methods: ['closeSlidingItems'] }) @Component({ @@ -1193,7 +1193,7 @@ export declare interface IonLabel extends Components.IonLabel {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['inset', 'lines', 'mode', 'theme'], + inputs: ['inset', 'lines', 'mode', 'shape', 'theme'], standalone: true }) export class IonList { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 835ca9bbdc..6045289f8e 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -518,7 +518,8 @@ export const IonLabel = /*@__PURE__*/ defineContainer('ion-label', export const IonList = /*@__PURE__*/ defineContainer('ion-list', defineIonList, [ 'lines', - 'inset' + 'inset', + 'shape' ]);