@ionic/core 8.8.5 → 8.8.6-dev.11777490150.1970e4f2

package/dist/collection/components/item-options/item-options.md.css

@@ -1,36 +1,3 @@
-/**
- * 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.
- */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -63,7 +30,6 @@ ion-item-options {
   position: absolute;
   height: 100%;
   user-select: none;
-  z-index: 1;
 }
 :host-context([dir=rtl]) ion-item-options {
   justify-content: flex-start;
@@ -158,6 +124,12 @@ ion-item-options {
   visibility: visible;
 }
 
+/**
+ * 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
@@ -213,6 +185,77 @@ ion-item-options {
  *   }
  * }
  */
+ion-item-options {
+  z-index: 1;
+}
+
+/**
+ * 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
+ * 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.
+ */
+/**
+ * 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 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/item-sliding/item-sliding.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

package/dist/collection/components/item-sliding/item-sliding.js

@@ -6,10 +6,14 @@ import { findClosestIonContent, disableContentScrollY, resetContentScrollY } fro
 import { isEndSide } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { watchForOptions } from "../../utils/watch-options";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
 let openSlidingItem;
+/**
+ * @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 ItemSliding {
     constructor() {
         this.item = null;
@@ -60,10 +64,18 @@ export class ItemSliding {
         this.disabledChanged();
     }
     disconnectedCallback() {
+        var _a;
         if (this.gesture) {
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        if (this.tmr !== undefined) {
+            clearTimeout(this.tmr);
+            this.tmr = undefined;
+        }
+        // Abort any in-progress animation. The abort handler rejects the pending
+        // promise, causing animateFullSwipe's finally block to run cleanup.
+        (_a = this.animationAbortController) === null || _a === void 0 ? void 0 : _a.abort();
         this.item = null;
         this.leftOptions = this.rightOptions = undefined;
         if (openSlidingItem === this.el) {
@@ -97,6 +109,9 @@ export class ItemSliding {
      */
     async open(side) {
         var _a;
+        if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
+            return;
+        }
         /**
          * It is possible for the item to be added to the DOM
          * after the item-sliding component was created. As a result,
@@ -148,6 +163,9 @@ export class ItemSliding {
      * Close the sliding item. Items can also be closed from the [List](./list).
      */
     async close() {
+        if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
+            return;
+        }
         this.setOpenAmount(0, true);
     }
     /**
@@ -178,6 +196,111 @@ export class ItemSliding {
             return this.rightOptions;
         }
     }
+    /**
+     * Check if the given item options element contains at least one expandable, non-disabled option.
+     */
+    hasExpandableOptions(options) {
+        if (!options)
+            return false;
+        const optionElements = options.querySelectorAll('ion-item-option');
+        return Array.from(optionElements).some((option) => {
+            return option.expandable === true && !option.disabled;
+        });
+    }
+    /**
+     * Returns a Promise that resolves after `ms` milliseconds, or rejects if the
+     * given AbortSignal is fired before the timer expires.
+     */
+    delay(ms, signal) {
+        return new Promise((resolve, reject) => {
+            const id = setTimeout(resolve, ms);
+            signal.addEventListener('abort', () => {
+                clearTimeout(id);
+                reject(new DOMException('Animation cancelled', 'AbortError'));
+            }, { once: true });
+        });
+    }
+    /**
+     * Animate the item to a specific position using CSS transitions.
+     * Returns a Promise that resolves when the animation completes, or rejects if
+     * the given AbortSignal is fired.
+     */
+    animateToPosition(position, duration, signal) {
+        return new Promise((resolve, reject) => {
+            if (!this.item) {
+                return resolve();
+            }
+            this.item.style.transition = `transform ${duration}ms ease-out`;
+            this.item.style.transform = `translate3d(${-position}px, 0, 0)`;
+            const id = setTimeout(resolve, duration);
+            signal.addEventListener('abort', () => {
+                clearTimeout(id);
+                reject(new DOMException('Animation cancelled', 'AbortError'));
+            }, { once: true });
+        });
+    }
+    /**
+     * Calculate the swipe threshold distance required to trigger a full swipe animation.
+     * Returns the maximum options width plus a margin to ensure it's achievable.
+     */
+    getSwipeThreshold(direction) {
+        const maxWidth = direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide;
+        return maxWidth + SWIPE_MARGIN;
+    }
+    /**
+     * Animate the item through a full swipe sequence: off-screen → trigger action → return.
+     * This is used when an expandable option is swiped beyond the threshold.
+     */
+    async animateFullSwipe(direction) {
+        const abortController = new AbortController();
+        this.animationAbortController = abortController;
+        const { signal } = abortController;
+        // Prevent interruption during animation
+        if (this.gesture) {
+            this.gesture.enable(false);
+        }
+        try {
+            const options = direction === 'end' ? this.rightOptions : this.leftOptions;
+            // Trigger expandable state without moving the item
+            // Set state directly so expandable option fills its container, starting from
+            // the exact position where the user released, without any visual snap.
+            this.state =
+                direction === 'end'
+                    ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */ | 128 /* SlidingState.AnimatingFullSwipe */
+                    : 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */ | 128 /* SlidingState.AnimatingFullSwipe */;
+            await this.delay(100, signal);
+            // Animate off-screen while maintaining the expanded state
+            const offScreenDistance = direction === 'end' ? window.innerWidth : -window.innerWidth;
+            await this.animateToPosition(offScreenDistance, 250, signal);
+            // Trigger action
+            if (options) {
+                options.fireSwipeEvent();
+            }
+            // Small delay before returning
+            await this.delay(300, signal);
+            // Return to closed state
+            await this.animateToPosition(0, 250, signal);
+        }
+        catch (_a) {
+            // Animation was aborted (e.g. component disconnected). finally handles cleanup.
+        }
+        finally {
+            this.animationAbortController = undefined;
+            // Reset state
+            if (this.item) {
+                this.item.style.transition = '';
+                this.item.style.transform = '';
+            }
+            this.openAmount = 0;
+            this.state = 2 /* SlidingState.Disabled */;
+            if (openSlidingItem === this.el) {
+                openSlidingItem = undefined;
+            }
+            if (this.gesture) {
+                this.gesture.enable(!this.disabled);
+            }
+        }
+    }
     async updateOptions() {
         var _a;
         const options = this.el.querySelectorAll('ion-item-options');
@@ -284,6 +407,23 @@ export class ItemSliding {
         if (contentEl) {
             resetContentScrollY(contentEl, initialContentScrollY);
         }
+        // Check for full swipe conditions with expandable options
+        const rawSwipeDistance = Math.abs(gesture.deltaX);
+        const direction = gesture.deltaX < 0 ? 'end' : 'start';
+        const options = direction === 'end' ? this.rightOptions : this.leftOptions;
+        const hasExpandable = this.hasExpandableOptions(options);
+        const shouldTriggerFullSwipe = hasExpandable &&
+            (rawSwipeDistance > this.getSwipeThreshold(direction) ||
+                (Math.abs(gesture.velocityX) > 0.5 &&
+                    rawSwipeDistance > (direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide) * 0.5));
+        if (shouldTriggerFullSwipe) {
+            this.animateFullSwipe(direction).catch(() => {
+                if (this.gesture) {
+                    this.gesture.enable(!this.disabled);
+                }
+            });
+            return;
+        }
         const velocity = gesture.velocityX;
         let restingPoint = this.openAmount > 0 ? this.optsWidthRightSide : -this.optsWidthLeftSide;
         // Check if the drag didn't clear the buttons mid-point
@@ -390,9 +530,9 @@ export class ItemSliding {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '8fd81d74701402294a48b79c56d6eceadafd4881', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '321925e5582cc08b14031231603b1f1c49828b0a', class: {
+                [theme]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
                 'item-sliding-active-options-start': (this.state & 16 /* SlidingState.Start */) !== 0,

package/dist/collection/components/label/label.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
@@ -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/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() {
@@ -57,27 +58,29 @@ export class Label {
     }
     render() {
         const position = this.position;
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'd603670c442213c28737b0c052c094705b8c84ef', class: createColorClasses(this.color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '7cbec4c1b8fe8925f44255e02cee78bc1873fd70', 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: 'a8c3aed240a20ee5856c423662878481a1e6d4cf' })));
+            }) }, h("slot", { key: '6d8b4a7ab396792d7a7c0b7e259c622840b7ef9b' })));
     }
     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,212 @@
+/**
+ * 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 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
+ * 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.
+ */
+/**
+ * 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;
+ *   }
+ * }
+ */
+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(--token-space-100, var(--token-scale-100, 4px));
+  margin-inline-start: var(--token-space-100, var(--token-scale-100, 4px));
+  -webkit-margin-end: var(--token-space-100, var(--token-scale-100, 4px));
+  margin-inline-end: var(--token-space-100, var(--token-scale-100, 4px));
+  margin-top: var(--token-space-100, var(--token-scale-100, 4px));
+  margin-bottom: var(--token-space-100, var(--token-scale-100, 4px));
+}
+
+.list-ionic-lines-none .item-lines-default {
+  --inner-border-width: 0px;
+  --border-width: 0px;
+}
+
+.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(--token-border-radius-400, var(--token-scale-400, 16px));
+  border-end-start-radius: var(--token-border-radius-400, var(--token-scale-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(--token-border-radius-400, var(--token-scale-400, 16px));
+  border-start-end-radius: var(--token-border-radius-400, var(--token-scale-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(--token-border-radius-200, var(--token-scale-200, 8px));
+  border-end-start-radius: var(--token-border-radius-200, var(--token-scale-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(--token-border-radius-200, var(--token-scale-200, 8px));
+  border-start-end-radius: var(--token-border-radius-200, var(--token-scale-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(--token-border-radius-0, var(--token-scale-0, 0px));
+  border-end-start-radius: var(--token-border-radius-0, var(--token-scale-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(--token-border-radius-0, var(--token-scale-0, 0px));
+  border-start-end-radius: var(--token-border-radius-0, var(--token-scale-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(--token-border-radius-400, var(--token-scale-400, 16px));
+}
+.list-ionic:not(:has(ion-list-header)).list-soft {
+  border-radius: var(--token-border-radius-200, var(--token-scale-200, 8px));
+}
+.list-ionic:not(:has(ion-list-header)).list-rectangular {
+  border-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
+}
+
+.list-ionic-lines-none .item-lines-default {
+  --inner-border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
+  --border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
+}
+
+.list-ionic-lines-full .item-lines-default {
+  --inner-border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
+  --border-width: var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-size-0, var(--token-scale-0, 0px));
+}
+
+.list-ionic-lines-inset .item-lines-default {
+  --inner-border-width: var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-size-0, var(--token-scale-0, 0px));
+  --border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
+}