@ionic/core 8.2.2 → 8.2.3-dev.11719301373.17616928

package/dist/collection/components/label/label.js

@@ -3,9 +3,10 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export class Label {
     constructor() {
@@ -54,27 +55,29 @@ export class Label {
     }
     render() {
         const position = this.position;
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'c2c0f388dab910d294efb9fbb409ee4ef829c1ed', class: createColorClasses(this.color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'cbe26d0a3da25830de8b19ef83c5a6d0102e7b79', class: createColorClasses(this.color, {
+                [theme]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, h("slot", { key: '4de6b69950f417873a13c851018ec31ea2686f0a' })));
+            }) }, h("slot", { key: '8480c80f4dd4f311168358cbdf8ef00a684623be' })));
     }
     static get is() { return "ion-label"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["label.ios.scss"],
-            "md": ["label.md.scss"]
+            "md": ["label.md.scss"],
+            "ionic": ["label.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["label.ios.css"],
-            "md": ["label.md.css"]
+            "md": ["label.md.css"],
+            "ionic": ["label.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/label/label.md.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -123,6 +129,12 @@
   overflow: inherit;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -178,6 +190,12 @@
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/list/list.ionic.css

@@ -0,0 +1,174 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * This is an auto-generated file, please do not change it directly.
+ * Ionic Design System
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+ion-list {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  display: block;
+  contain: content;
+  list-style-type: none;
+}
+
+.list-ionic.list-inset {
+  -webkit-margin-start: var(--ionic-space-100, 4px);
+  margin-inline-start: var(--ionic-space-100, 4px);
+  -webkit-margin-end: var(--ionic-space-100, 4px);
+  margin-inline-end: var(--ionic-space-100, 4px);
+  margin-top: var(--ionic-space-100, 4px);
+  margin-bottom: var(--ionic-space-100, 4px);
+}
+
+.list-ionic:has(ion-list-header) {
+  /* Round */
+  /* Soft */
+  /* Rectangular */
+}
+.list-ionic:has(ion-list-header).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.
+   */
+  border-start-start-radius: initial;
+  border-start-end-radius: initial;
+  border-end-end-radius: var(--ionic-border-radius-400, 16px);
+  border-end-start-radius: var(--ionic-border-radius-400, 16px);
+}
+.list-ionic:has(ion-list-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.
+   */
+  border-start-start-radius: var(--ionic-border-radius-400, 16px);
+  border-start-end-radius: var(--ionic-border-radius-400, 16px);
+  border-end-end-radius: initial;
+  border-end-start-radius: initial;
+}
+.list-ionic:has(ion-list-header).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.
+   */
+  border-start-start-radius: initial;
+  border-start-end-radius: initial;
+  border-end-end-radius: var(--ionic-border-radius-200, 8px);
+  border-end-start-radius: var(--ionic-border-radius-200, 8px);
+}
+.list-ionic:has(ion-list-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.
+   */
+  border-start-start-radius: var(--ionic-border-radius-200, 8px);
+  border-start-end-radius: var(--ionic-border-radius-200, 8px);
+  border-end-end-radius: initial;
+  border-end-start-radius: initial;
+}
+.list-ionic:has(ion-list-header).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.
+   */
+  border-start-start-radius: initial;
+  border-start-end-radius: initial;
+  border-end-end-radius: var(--ionic-border-radius-0, 0px);
+  border-end-start-radius: var(--ionic-border-radius-0, 0px);
+}
+.list-ionic:has(ion-list-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.
+   */
+  border-start-start-radius: var(--ionic-border-radius-0, 0px);
+  border-start-end-radius: var(--ionic-border-radius-0, 0px);
+  border-end-end-radius: initial;
+  border-end-start-radius: initial;
+}
+
+.list-ionic:not(:has(ion-list-header)) {
+  /* Round */
+  /* Soft */
+  /* Rectangular */
+}
+.list-ionic:not(:has(ion-list-header)).list-round {
+  border-radius: var(--ionic-border-radius-400, 16px);
+}
+.list-ionic:not(:has(ion-list-header)).list-soft {
+  border-radius: var(--ionic-border-radius-200, 8px);
+}
+.list-ionic:not(:has(ion-list-header)).list-rectangular {
+  border-radius: var(--ionic-border-radius-0, 0px);
+}

package/dist/collection/components/list/list.ios.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -72,6 +78,12 @@ ion-list.list-inset {
   overflow: hidden;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -127,6 +139,12 @@ ion-list.list-inset {
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/list/list.js

@@ -2,14 +2,16 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export class List {
     constructor() {
         this.lines = undefined;
         this.inset = false;
+        this.shape = undefined;
     }
     /**
      * If `ion-item-sliding` are used inside the list, this method closes
@@ -24,29 +26,48 @@ export class List {
         }
         return false;
     }
+    getShape() {
+        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 mode = getIonMode(this);
+        const theme = getIonTheme(this);
+        const shape = this.getShape();
         const { lines, inset } = this;
-        return (h(Host, { key: '8bde220025a7eeca6da075379c6487c4c9bdddc1', role: "list", class: {
-                [mode]: true,
+        return (h(Host, { key: '9dc48461bc98a22e3592ea35af053016a4ace586', role: "list", class: {
+                [theme]: true,
                 // Used internally for styling
-                [`list-${mode}`]: true,
+                [`list-${theme}`]: true,
                 'list-inset': inset,
                 [`list-lines-${lines}`]: lines !== undefined,
-                [`list-${mode}-lines-${lines}`]: lines !== undefined,
+                [`list-${theme}-lines-${lines}`]: lines !== undefined,
+                [`list-${shape}`]: shape !== undefined,
             } }));
     }
     static get is() { return "ion-list"; }
     static get originalStyleUrls() {
         return {
             "ios": ["list.ios.scss"],
-            "md": ["list.md.scss"]
+            "md": ["list.md.scss"],
+            "ionic": ["list.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["list.ios.css"],
-            "md": ["list.md.css"]
+            "md": ["list.md.css"],
+            "ionic": ["list.ionic.css"]
         };
     }
     static get properties() {
@@ -85,6 +106,23 @@ export class List {
                 "attribute": "inset",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"soft\"` for slightly rounded corners,\n`\"round\"` for fully rounded corners,\nor `\"rectangular\"` for no rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme\nwhen inset is `true`\ndefaults to `\"rectangular\"` for the `ionic`\ntheme when inset is `false`,\nundefined for all other themes."
+                },
+                "attribute": "shape",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/list/list.md.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -72,6 +78,12 @@ ion-list.list-inset {
   overflow: hidden;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -127,6 +139,12 @@ ion-list.list-inset {
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -212,8 +230,8 @@ ion-list.list-inset {
  * 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

package/dist/collection/components/list/test/shape/list.e2e.js

@@ -0,0 +1,204 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+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(`
+          <style>
+            ion-content {
+              --background: #e5e5e5;
+            }
+          </style>
+
+          <ion-content>
+            <div class="wrapper" style="display: flex">
+              <ion-list inset="true" style="width: 100%" shape="round">
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </ion-content>
+        `, 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(`
+          <style>
+            ion-content {
+              --background: #e5e5e5;
+            }
+          </style>
+
+          <ion-content>
+            <div class="wrapper" style="display: flex">
+              <ion-list inset="true" style="width: 100%" shape="round">
+                <ion-list-header>
+                  <ion-label>Header</ion-label>
+                </ion-list-header>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </ion-content>
+        `, 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(`
+          <style>
+            ion-content {
+              --background: #e5e5e5;
+            }
+          </style>
+
+          <ion-content>
+            <div class="wrapper" style="display: flex">
+              <ion-list inset="true" style="width: 100%" shape="soft">
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </ion-content>
+        `, 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(`
+          <style>
+            ion-content {
+              --background: #e5e5e5;
+            }
+          </style>
+
+          <ion-content>
+            <div class="wrapper" style="display: flex">
+              <ion-list inset="true" style="width: 100%" shape="soft">
+                <ion-list-header>
+                  <ion-label>Header</ion-label>
+                </ion-list-header>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </ion-content>
+        `, 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(`
+          <style>
+            ion-content {
+              --background: #e5e5e5;
+            }
+          </style>
+
+          <ion-content>
+            <div class="wrapper" style="display: flex">
+              <ion-list inset="true" style="width: 100%" shape="rectangular">
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </ion-content>
+        `, 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(`
+          <style>
+            ion-content {
+              --background: #e5e5e5;
+            }
+          </style>
+
+          <ion-content>
+            <div class="wrapper" style="display: flex">
+              <ion-list inset="true" style="width: 100%" shape="rectangular">
+                <ion-list-header>
+                  <ion-label>Header</ion-label>
+                </ion-list-header>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </ion-content>
+        `, config);
+                const listWrapper = page.locator('.wrapper');
+                await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-rectangular-with-header`));
+            });
+        });
+    });
+});

package/dist/collection/components/list-header/list-header.ios.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -124,6 +130,12 @@
   --inner-border-width: 0;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -179,6 +191,12 @@
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use