@ionic/core 9.0.6-dev.11790615145.1d8c56a2 → 9.0.6-dev.11790776272.1d27d1bd

package/dist/collection/components/item-option/item-option.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
@@ -53,42 +59,111 @@
  *   }
  * }
  */
+/**
+ * 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;
+ *   }
+ * }
+ */
+/**
+ * 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;
+ *   }
+ * }
+ */
 :host {
   /**
    * @prop --background: Background of the item option
    * @prop --color: Color of the item option
    */
-  --background: var(--ion-color-primary, #0054e9);
-  --color: var(--ion-color-primary-contrast, #fff);
   background: var(--background);
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
-}
-
-:host(.ion-color) {
-  background: var(--ion-color-base);
-  color: var(--ion-color-contrast);
 }
 
 .button-native {
+  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
-  -webkit-padding-start: 0.7em;
-  padding-inline-start: 0.7em;
-  -webkit-padding-end: 0.7em;
-  padding-inline-end: 0.7em;
-  padding-top: 0;
-  padding-bottom: 0;
   display: inline-block;
   position: relative;
   width: 100%;
@@ -124,6 +199,41 @@
   flex-shrink: 0;
 }
 
+:host(.item-option-expandable) {
+  flex-shrink: 0;
+  transition-duration: 0;
+  transition-property: none;
+}
+
+:host(.item-option-disabled) {
+  pointer-events: none;
+}
+
+:host(.item-option-disabled) .button-native {
+  cursor: default;
+  pointer-events: none;
+}
+
+:host {
+  --background: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary-contrast, #fff);
+  font-family: var(--ion-font-family, inherit);
+}
+
+:host(.ion-color) {
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
+}
+
+.button-native {
+  -webkit-padding-start: 0.7em;
+  padding-inline-start: 0.7em;
+  -webkit-padding-end: 0.7em;
+  padding-inline-end: 0.7em;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 ::slotted([slot=start]) {
   -webkit-margin-start: 0;
   margin-inline-start: 0;
@@ -157,23 +267,20 @@
   font-size: 1.8em;
 }
 
-:host(.item-option-expandable) {
-  flex-shrink: 0;
-  transition-duration: 0;
-  transition-property: none;
-  transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
-}
-
-:host(.item-option-disabled) {
-  pointer-events: none;
-}
-
 :host(.item-option-disabled) .button-native {
-  cursor: default;
   opacity: 0.5;
-  pointer-events: none;
 }
 
+:host(.item-option-expandable) {
+  transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 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

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

@@ -0,0 +1,221 @@
+/**
+ * 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-item-options {
+  /* stylelint-disable property-disallowed-list */
+  top: 0;
+  right: 0;
+  /* stylelint-enable property-disallowed-list */
+  justify-content: flex-end;
+  display: none;
+  position: absolute;
+  height: 100%;
+  user-select: none;
+}
+:host-context([dir=rtl]) ion-item-options {
+  justify-content: flex-start;
+}
+:host-context([dir=rtl]) ion-item-options:not(.item-options-end) {
+  /* stylelint-disable property-disallowed-list */
+  right: auto;
+  left: 0;
+  /* stylelint-enable property-disallowed-list */
+  justify-content: flex-end;
+}
+
+[dir=rtl] ion-item-options {
+  justify-content: flex-start;
+}
+[dir=rtl] ion-item-options:not(.item-options-end) {
+  /* stylelint-disable property-disallowed-list */
+  right: auto;
+  left: 0;
+  /* stylelint-enable property-disallowed-list */
+  justify-content: flex-end;
+}
+
+@supports selector(:dir(rtl)) {
+  ion-item-options:dir(rtl) {
+    justify-content: flex-start;
+  }
+  ion-item-options:dir(rtl):not(.item-options-end) {
+    /* stylelint-disable property-disallowed-list */
+    right: auto;
+    left: 0;
+    /* stylelint-enable property-disallowed-list */
+    justify-content: flex-end;
+  }
+}
+
+.item-options-start {
+  /* stylelint-disable property-disallowed-list */
+  right: auto;
+  left: 0;
+  /* stylelint-enable property-disallowed-list */
+  justify-content: flex-start;
+}
+:host-context([dir=rtl]) .item-options-start {
+  justify-content: flex-end;
+}
+
+[dir=rtl] .item-options-start {
+  justify-content: flex-end;
+}
+
+@supports selector(:dir(rtl)) {
+  .item-options-start:dir(rtl) {
+    justify-content: flex-end;
+  }
+}
+
+/* stylelint-disable property-disallowed-list */
+[dir=ltr] .item-options-start ion-item-option:first-child,
+[dir=rtl] .item-options-start ion-item-option:last-child {
+  padding-left: var(--ion-safe-area-left);
+}
+
+[dir=ltr] .item-options-end ion-item-option:last-child,
+[dir=rtl] .item-options-end ion-item-option:first-child {
+  padding-right: var(--ion-safe-area-right);
+}
+
+/* stylelint-enable property-disallowed-list */
+:host-context([dir=rtl]) .item-sliding-active-slide.item-sliding-active-options-start ion-item-options:not(.item-options-end) {
+  width: 100%;
+  visibility: visible;
+}
+
+[dir=rtl] .item-sliding-active-slide.item-sliding-active-options-start ion-item-options:not(.item-options-end) {
+  width: 100%;
+  visibility: visible;
+}
+
+@supports selector(:dir(rtl)) {
+  .item-sliding-active-slide:dir(rtl).item-sliding-active-options-start ion-item-options:not(.item-options-end) {
+    width: 100%;
+    visibility: visible;
+  }
+}
+.item-sliding-active-slide ion-item-options {
+  display: flex;
+  visibility: hidden;
+}
+.item-sliding-active-slide.item-sliding-active-options-start .item-options-start, .item-sliding-active-slide.item-sliding-active-options-end ion-item-options:not(.item-options-start) {
+  width: 100%;
+  visibility: visible;
+}
+
+ion-item-options {
+  z-index: 1;
+}
+
+.item-options-ionic {
+  align-items: center;
+  background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
+  gap: var(--token-space-100, var(--token-scale-100, 4px));
+}
+
+/* stylelint-disable property-disallowed-list */
+[dir=ltr] .item-options-start ion-item-option:last-child,
+[dir=rtl] .item-options-start ion-item-option:first-child {
+  margin-right: var(--token-space-200, var(--token-scale-200, 8px));
+}
+
+[dir=ltr] .item-options-start ion-item-option:first-child,
+[dir=rtl] .item-options-start ion-item-option:last-child {
+  margin-left: calc(var(--token-space-200, var(--token-scale-200, 8px)) + var(--ion-safe-area-left, 0));
+  padding-left: initial;
+}
+
+[dir=ltr] .item-options-end ion-item-option:first-child,
+[dir=rtl] .item-options-end ion-item-option:last-child {
+  margin-left: var(--token-space-200, var(--token-scale-200, 8px));
+}
+
+[dir=ltr] .item-options-end ion-item-option:last-child,
+[dir=rtl] .item-options-end ion-item-option:first-child {
+  margin-right: calc(var(--token-space-200, var(--token-scale-200, 8px)) + var(--ion-safe-area-right, 0));
+  padding-right: initial;
+}
+
+/* stylelint-enable property-disallowed-list */

package/dist/collection/components/item-options/item-options.ios.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-options/item-options.js

@@ -3,7 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { isEndSide } from "../../utils/helpers";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @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 ItemOptions {
     constructor() {
         /**
@@ -19,12 +23,12 @@ export class ItemOptions {
         });
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const isEnd = isEndSide(this.side);
-        return (h(Host, { key: '6e60ff004d48bf7701711e518ec0b21264496ae8', class: {
-                [mode]: true,
+        return (h(Host, { key: '3505a534ecca3fe1615b1e686d9ab15bc8967049', class: {
+                [theme]: true,
                 // Used internally for styling
-                [`item-options-${mode}`]: true,
+                [`item-options-${theme}`]: true,
                 /**
                  * Note: The "start" and "end" terms refer to the
                  * direction ion-item-option instances within ion-item-options flow.
@@ -41,13 +45,15 @@ export class ItemOptions {
     static get originalStyleUrls() {
         return {
             "ios": ["item-options.ios.scss"],
-            "md": ["item-options.md.scss"]
+            "md": ["item-options.md.scss"],
+            "ionic": ["item-options.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["item-options.ios.css"],
-            "md": ["item-options.md.css"]
+            "md": ["item-options.md.css"],
+            "ionic": ["item-options.ionic.css"]
         };
     }
     static get properties() {