@ionic/core 8.7.6-dev.11759412372.1f332f62 → 8.7.6-dev.11759493293.13f81b9f

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

@@ -0,0 +1,148 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * 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.
+ */
+/**
+ * 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 --margin-top: Top margin of the divider
+   * @prop --margin-bottom: Bottom margin of the divider
+   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the divider
+   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the divider
+   */
+  --margin-top: 0px;
+  --margin-bottom: 0px;
+  --padding-start: 0px;
+  --padding-end: 0px;
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  display: block;
+  width: 100%;
+}
+
+:host hr {
+  display: block;
+  width: 100%;
+  margin-top: var(--margin-top);
+  margin-bottom: var(--margin-bottom);
+  border: none;
+}
+
+:host hr {
+  border-top: var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5));
+}
+
+:host(.divider-inset) {
+  --padding-start: var(--token-space-400, var(--token-scale-400, 16px));
+  --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
+}
+
+:host(.divider-spacing-xsmall) {
+  --margin-top: var(--token-space-200, var(--token-scale-200, 8px));
+  --margin-bottom: var(--token-space-200, var(--token-scale-200, 8px));
+}
+
+:host(.divider-spacing-small) {
+  --margin-top: var(--token-space-300, var(--token-scale-300, 12px));
+  --margin-bottom: var(--token-space-300, var(--token-scale-300, 12px));
+}
+
+:host(.divider-spacing-medium) {
+  --margin-top: var(--token-space-400, var(--token-scale-400, 16px));
+  --margin-bottom: var(--token-space-400, var(--token-scale-400, 16px));
+}
+
+:host(.divider-spacing-large) {
+  --margin-top: var(--token-space-600, var(--token-scale-600, 24px));
+  --margin-bottom: var(--token-space-600, var(--token-scale-600, 24px));
+}
+
+:host(.divider-spacing-xlarge) {
+  --margin-top: var(--token-space-800, var(--token-scale-800, 32px));
+  --margin-bottom: var(--token-space-800, var(--token-scale-800, 32px));
+}
+
+:host(.divider-spacing-xxlarge) {
+  --margin-top: var(--token-space-1000, var(--token-scale-1000, 40px));
+  --margin-bottom: var(--token-space-1000, var(--token-scale-1000, 40px));
+}

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

@@ -0,0 +1,87 @@
+/**
+ * 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 --margin-top: Top margin of the divider
+   * @prop --margin-bottom: Bottom margin of the divider
+   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the divider
+   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the divider
+   */
+  --margin-top: 0px;
+  --margin-bottom: 0px;
+  --padding-start: 0px;
+  --padding-end: 0px;
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  display: block;
+  width: 100%;
+}
+
+:host hr {
+  display: block;
+  width: 100%;
+  margin-top: var(--margin-top);
+  margin-bottom: var(--margin-bottom);
+  border: none;
+}
+
+:host hr {
+  border-top: 1px solid #e0e0e0;
+}
+
+:host(.divider-inset) {
+  --padding-start: 16px;
+  --padding-end: 16px;
+}
+
+:host(.divider-spacing-xsmall) {
+  --margin-top: 8px;
+  --margin-bottom: 8px;
+}
+
+:host(.divider-spacing-small) {
+  --margin-top: 12px;
+  --margin-bottom: 12px;
+}
+
+:host(.divider-spacing-medium) {
+  --margin-top: 16px;
+  --margin-bottom: 16px;
+}
+
+:host(.divider-spacing-large) {
+  --margin-top: 24px;
+  --margin-bottom: 24px;
+}
+
+:host(.divider-spacing-xlarge) {
+  --margin-top: 32px;
+  --margin-bottom: 32px;
+}
+
+:host(.divider-spacing-xxlarge) {
+  --margin-top: 40px;
+  --margin-bottom: 40px;
+}

package/dist/collection/components/divider/divider.js

@@ -0,0 +1,94 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { getIonTheme } from "../../global/ionic-global";
+import { Host, h } from "@stencil/core";
+export class Divider {
+    constructor() {
+        /**
+         * Set to `"xxsmall"` for the smallest spacing.
+         * Set to "xsmall" for very small spacing.
+         * Set to `"small"` for small spacing.
+         * Set to "medium" for medium spacing.
+         * Set to "large" for large spacing.
+         * Set to `"xlarge"` for the largest spacing.
+         *
+         * Defaults to `"medium"`.
+         */
+        this.spacing = 'medium';
+        /**
+         * If `true`, the divider will have horizontal margins
+         * By default, it's `false`
+         */
+        this.inset = false;
+    }
+    render() {
+        const { inset, spacing } = this;
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '387f7cb3ce69a1d4aa299f988d21d731fd5775d9', class: {
+                [theme]: true,
+                [`divider-spacing-${spacing}`]: spacing !== undefined,
+                [`divider-inset`]: inset,
+            } }, h("hr", { key: 'cecfeab61e8f532a1eda36e73011f5447be63480' })));
+    }
+    static get is() { return "ion-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "ios": ["divider.ios.scss"],
+            "md": ["divider.md.scss"],
+            "ionic": ["divider.ionic.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "ios": ["divider.ios.css"],
+            "md": ["divider.md.css"],
+            "ionic": ["divider.ionic.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "spacing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xsmall\" | \"xxlarge\" | \"xxsmall\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"xxsmall\"` for the smallest spacing.\nSet to \"xsmall\" for very small spacing.\nSet to `\"small\"` for small spacing.\nSet to \"medium\" for medium spacing.\nSet to \"large\" for large spacing.\nSet to `\"xlarge\"` for the largest spacing.\n\nDefaults to `\"medium\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "spacing",
+                "defaultValue": "'medium'"
+            },
+            "inset": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the divider will have horizontal margins\nBy default, it's `false`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inset",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,87 @@
+/**
+ * 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 --margin-top: Top margin of the divider
+   * @prop --margin-bottom: Bottom margin of the divider
+   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the divider
+   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the divider
+   */
+  --margin-top: 0px;
+  --margin-bottom: 0px;
+  --padding-start: 0px;
+  --padding-end: 0px;
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  display: block;
+  width: 100%;
+}
+
+:host hr {
+  display: block;
+  width: 100%;
+  margin-top: var(--margin-top);
+  margin-bottom: var(--margin-bottom);
+  border: none;
+}
+
+:host hr {
+  border-top: 1px solid #e0e0e0;
+}
+
+:host(.divider-inset) {
+  --padding-start: 16px;
+  --padding-end: 16px;
+}
+
+:host(.divider-spacing-xsmall) {
+  --margin-top: 8px;
+  --margin-bottom: 8px;
+}
+
+:host(.divider-spacing-small) {
+  --margin-top: 12px;
+  --margin-bottom: 12px;
+}
+
+:host(.divider-spacing-medium) {
+  --margin-top: 16px;
+  --margin-bottom: 16px;
+}
+
+:host(.divider-spacing-large) {
+  --margin-top: 24px;
+  --margin-bottom: 24px;
+}
+
+:host(.divider-spacing-xlarge) {
+  --margin-top: 32px;
+  --margin-bottom: 32px;
+}
+
+:host(.divider-spacing-xxlarge) {
+  --margin-top: 40px;
+  --margin-bottom: 40px;
+}

package/dist/collection/components/fab/fab.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,6 +59,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
@@ -108,6 +120,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
@@ -163,6 +181,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
@@ -226,8 +250,8 @@
 }
 
 :host(.fab-horizontal-center) {
-  left: 0px;
   right: 0px;
+  left: 0px;
   -webkit-margin-start: auto;
   margin-inline-start: auto;
   -webkit-margin-end: auto;

package/dist/collection/components/fab/fab.js

@@ -2,7 +2,11 @@
  * (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 the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
 export class Fab {
     constructor() {
         /**
@@ -53,13 +57,13 @@ export class Fab {
     }
     render() {
         const { horizontal, vertical, edge } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '8a310806d0e748d7ebb0ed3d9a2652038e0f2960', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '8b758c5283382f1bddd051f5a575d4952b001c50', class: {
+                [theme]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, h("slot", { key: '9394ef6d6e5b0410fa6ba212171f687fb178ce2d' })));
+            } }, h("slot", { key: '45ce20f308b3de9c09d625d45b3f3dc7b4ee8652' })));
     }
     static get is() { return "ion-fab"; }
     static get encapsulation() { return "shadow"; }
@@ -77,7 +81,6 @@ export class Fab {
         return {
             "horizontal": {
                 "type": "string",
-                "attribute": "horizontal",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'center'",
@@ -92,11 +95,11 @@ export class Fab {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "horizontal"
             },
             "vertical": {
                 "type": "string",
-                "attribute": "vertical",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'bottom' | 'center'",
@@ -111,11 +114,11 @@ export class Fab {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "vertical"
             },
             "edge": {
                 "type": "boolean",
-                "attribute": "edge",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -131,11 +134,11 @@ export class Fab {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "edge",
                 "defaultValue": "false"
             },
             "activated": {
                 "type": "boolean",
-                "attribute": "activated",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -151,6 +154,7 @@ export class Fab {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "activated",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/fab-button/fab-button.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
@@ -90,7 +96,7 @@
   --color-focused: var(--color);
   --color-hover: var(--color);
   --background-hover: var(--ion-color-primary-contrast, #fff);
-  --background-hover-opacity: .08;
+  --background-hover-opacity: 0.08;
   --transition: background-color, opacity 100ms linear;
   --ripple-color: currentColor;
   --border-radius: 50%;
@@ -124,18 +130,18 @@
   padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
+  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;
   display: block;
   position: relative;
   width: 100%;
@@ -163,8 +169,8 @@
 }
 
 .button-native::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -173,8 +179,8 @@
 }
 
 .button-inner {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   display: flex;
   position: absolute;
@@ -241,8 +247,8 @@
   margin-inline-end: auto;
   margin-top: 0;
   margin-bottom: 0;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   position: absolute;
   height: 100%;
@@ -278,6 +284,12 @@ ion-ripple-effect {
   color: var(--ion-color-contrast);
 }
 
+/**
+ * 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