@ionic/core 8.4.2-dev.11736507189.18234064 → 8.4.2-dev.11736797843.16cc5058

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

@@ -2,16 +2,19 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-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.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class Fab {
     constructor() {
-        this.horizontal = undefined;
-        this.vertical = undefined;
+        /**
+         * If `true`, the fab will display on the edge of the header if
+         * `vertical` is `"top"`, and on the edge of the footer if
+         * it is `"bottom"`. Should be used with a `fixed` slot.
+         */
         this.edge = false;
+        /**
+         * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.
+         * That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
+         */
         this.activated = false;
     }
     activatedChanged() {
@@ -50,13 +53,13 @@ export class Fab {
     }
     render() {
         const { horizontal, vertical, edge } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'e2d3e3263a6b9e7d97bd9398dda1a124ae626012', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '8a310806d0e748d7ebb0ed3d9a2652038e0f2960', class: {
+                [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, h("slot", { key: '2ed256f10ea7a208f096c0c24b673f89008cc1c4' })));
+            } }, h("slot", { key: '9394ef6d6e5b0410fa6ba212171f687fb178ce2d' })));
     }
     static get is() { return "ion-fab"; }
     static get encapsulation() { return "shadow"; }
@@ -86,6 +89,8 @@ export class Fab {
                     "tags": [],
                     "text": "Where to align the fab horizontally in the viewport."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "horizontal",
                 "reflect": false
             },
@@ -103,6 +108,8 @@ export class Fab {
                     "tags": [],
                     "text": "Where to align the fab vertically in the viewport."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "vertical",
                 "reflect": false
             },
@@ -120,6 +127,8 @@ export class Fab {
                     "tags": [],
                     "text": "If `true`, the fab will display on the edge of the header if\n`vertical` is `\"top\"`, and on the edge of the footer if\nit is `\"bottom\"`. Should be used with a `fixed` slot."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "edge",
                 "reflect": false,
                 "defaultValue": "false"
@@ -138,6 +147,8 @@ export class Fab {
                     "tags": [],
                     "text": "If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.\nThat means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "activated",
                 "reflect": false,
                 "defaultValue": "false"

package/dist/collection/components/fab-button/fab-button.ios.css

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

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

@@ -1,16 +1,13 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import xRegular from "@phosphor-icons/core/assets/regular/x.svg";
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
 import { close } from "ionicons/icons";
-import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } 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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part native - The native HTML button or anchor element that wraps all child elements.
  * @part close-icon - The close icon that is displayed when a fab list opens (uses ion-icon).
@@ -19,6 +16,39 @@ export class FabButton {
     constructor() {
         this.fab = null;
         this.inheritedAttributes = {};
+        /**
+         * If `true`, the fab button will be show a close icon.
+         */
+        this.activated = false;
+        /**
+         * If `true`, the user cannot interact with the fab button.
+         */
+        this.disabled = false;
+        /**
+         * When using a router, it specifies the transition direction when navigating to
+         * another page using `href`.
+         */
+        this.routerDirection = 'forward';
+        /**
+         * If `true`, the fab button will show when in a fab-list.
+         */
+        this.show = false;
+        /**
+         * If `true`, the fab button will be translucent.
+         * Only applies when the mode is `"ios"` and the device supports
+         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+         */
+        this.translucent = false;
+        /**
+         * The type of the button.
+         */
+        this.type = 'button';
+        /**
+         * The icon name to use for the close icon. This will appear when the fab button
+         * is pressed. Only applies if it is the main button inside of a fab containing a
+         * fab list.
+         */
+        this.closeIcon = close;
         this.onFocus = () => {
             this.ionFocus.emit();
         };
@@ -32,20 +62,6 @@ export class FabButton {
             }
             fab.toggle();
         };
-        this.color = undefined;
-        this.activated = false;
-        this.disabled = false;
-        this.download = undefined;
-        this.href = undefined;
-        this.rel = undefined;
-        this.routerDirection = 'forward';
-        this.routerAnimation = undefined;
-        this.target = undefined;
-        this.show = false;
-        this.translucent = false;
-        this.type = 'button';
-        this.size = undefined;
-        this.closeIcon = undefined;
     }
     connectedCallback() {
         this.fab = this.el.closest('ion-fab');
@@ -53,27 +69,10 @@ export class FabButton {
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
-    get fabButtonCloseIcon() {
-        // Return the icon if it is explicitly set
-        if (this.closeIcon != null) {
-            return this.closeIcon;
-        }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: close,
-            ionic: xRegular,
-            md: close,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured fab button close icon or the default icon
-        return config.get('fabButtonCloseIcon', defaultIcon);
-    }
     render() {
-        const { el, disabled, fabButtonCloseIcon, color, href, activated, show, translucent, size, inheritedAttributes } = this;
+        const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
         const inList = hostContext('ion-fab-list', el);
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const TagType = href === undefined ? 'button' : 'a';
         const attrs = TagType === 'button'
             ? { type: this.type }
@@ -83,8 +82,8 @@ export class FabButton {
                 rel: this.rel,
                 target: this.target,
             };
-        return (h(Host, { key: '9f358aa5ec3ab99c0a8f7cf27d71ae012bed329c', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
-                [theme]: true,
+        return (h(Host, { key: '4eee204d20b0e2ffed49a88f6cb3e04b6697965c', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+                [mode]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
                 'fab-button-close-active': activated,
@@ -94,22 +93,20 @@ export class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, Object.assign({ key: 'ebd33b41cbd872f27f9b7471e4600c816b5c0a3d' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: 'cd54a839c29a86f6e335b21adebce346c2a73a28', "aria-hidden": "true", icon: fabButtonCloseIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '0e1e5d2ce3ee11f4f4a7147a99b5ace5858c53af', class: "button-inner" }, h("slot", { key: 'a295df948b0ff6b4bc981a6a222af7dbfffc63a6' })), theme === 'md' && h("ion-ripple-effect", { key: '1d63f25cb5c81ac87f0da9de01e152bff880440e' }))));
+            }) }, h(TagType, Object.assign({ key: '914561622c0c6bd41453e828a7d8a39f924875ac' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: '2c8090742a64c62a79243667027a195cca9d5912', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'c3e55291e4c4d306d34a4b95dd2e727e87bdf39c', class: "button-inner" }, h("slot", { key: 'f8e57f71d8f8878d9746cfece82f57f19ef9e988' })), mode === 'md' && h("ion-ripple-effect", { key: 'a5e94fa0bb9836072300617245ed0c1b4887bac6' }))));
     }
     static get is() { return "ion-fab-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["fab-button.ios.scss"],
-            "md": ["fab-button.md.scss"],
-            "ionic": ["fab-button.md.scss"]
+            "md": ["fab-button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["fab-button.ios.css"],
-            "md": ["fab-button.md.css"],
-            "ionic": ["fab-button.md.css"]
+            "md": ["fab-button.md.css"]
         };
     }
     static get properties() {
@@ -134,6 +131,8 @@ export class FabButton {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": true
             },
@@ -151,6 +150,8 @@ export class FabButton {
                     "tags": [],
                     "text": "If `true`, the fab button will be show a close icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "activated",
                 "reflect": false,
                 "defaultValue": "false"
@@ -169,6 +170,8 @@ export class FabButton {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the fab button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -187,6 +190,8 @@ export class FabButton {
                     "tags": [],
                     "text": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "download",
                 "reflect": false
             },
@@ -204,6 +209,8 @@ export class FabButton {
                     "tags": [],
                     "text": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": false
             },
@@ -221,6 +228,8 @@ export class FabButton {
                     "tags": [],
                     "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "rel",
                 "reflect": false
             },
@@ -244,6 +253,8 @@ export class FabButton {
                     "tags": [],
                     "text": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "router-direction",
                 "reflect": false,
                 "defaultValue": "'forward'"
@@ -267,7 +278,9 @@ export class FabButton {
                 "docs": {
                     "tags": [],
                     "text": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "target": {
                 "type": "string",
@@ -283,6 +296,8 @@ export class FabButton {
                     "tags": [],
                     "text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "target",
                 "reflect": false
             },
@@ -300,6 +315,8 @@ export class FabButton {
                     "tags": [],
                     "text": "If `true`, the fab button will show when in a fab-list."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show",
                 "reflect": false,
                 "defaultValue": "false"
@@ -316,8 +333,10 @@ export class FabButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the fab button will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the fab button will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "translucent",
                 "reflect": false,
                 "defaultValue": "false"
@@ -336,6 +355,8 @@ export class FabButton {
                     "tags": [],
                     "text": "The type of the button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'button'"
@@ -354,6 +375,8 @@ export class FabButton {
                     "tags": [],
                     "text": "The size of the button. Set this to `small` in order to have a mini fab button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false
             },
@@ -362,17 +385,20 @@ export class FabButton {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The icon name to use for the close icon. This will appear when the fab button\nis pressed. Only applies if it is the main button inside of a fab containing a\nfab list."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "close-icon",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "close"
             }
         };
     }

package/dist/collection/components/fab-button/fab-button.md.css

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -96,7 +90,7 @@
   --color-focused: var(--color);
   --color-hover: var(--color);
   --background-hover: var(--ion-color-primary-contrast, #fff);
-  --background-hover-opacity: 0.08;
+  --background-hover-opacity: .08;
   --transition: background-color, opacity 100ms linear;
   --ripple-color: currentColor;
   --border-radius: 50%;
@@ -130,18 +124,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%;
@@ -169,8 +163,8 @@
 }
 
 .button-native::after {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -179,8 +173,8 @@
 }
 
 .button-inner {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   display: flex;
   position: absolute;
@@ -247,8 +241,8 @@
   margin-inline-end: auto;
   margin-top: 0;
   margin-bottom: 0;
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   position: absolute;
   height: 100%;
@@ -284,12 +278,6 @@ 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
@@ -351,8 +339,8 @@ ion-ripple-effect {
   --background-focused: currentColor;
   --background-hover: currentColor;
   --background-activated-opacity: 0;
-  --background-focused-opacity: 0.24;
-  --background-hover-opacity: 0.08;
+  --background-focused-opacity: .24;
+  --background-hover-opacity: .08;
   --color: var(--ion-color-primary-contrast, #fff);
   --box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
   --transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1), color 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;

package/dist/collection/components/fab-list/fab-list.css

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -59,12 +53,6 @@
  *   }
  * }
  */
-/**
- * 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/fab-list/fab-list.js

@@ -2,14 +2,16 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-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.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class FabList {
     constructor() {
+        /**
+         * If `true`, the fab list will show all fab buttons in the list.
+         */
         this.activated = false;
+        /**
+         * The side the fab list will show on relative to the main fab button.
+         */
         this.side = 'bottom';
     }
     activatedChanged(activated) {
@@ -21,12 +23,12 @@ export class FabList {
         });
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'ce4ca73c50015a4c76bbb81343cf466e9029fa09', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '64b33366447f66c7f979cfac56307fbb1a6fac1c', class: {
+                [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, h("slot", { key: 'ff9a011541e315749f81f5b304ae71c4ce1f9516' })));
+            } }, h("slot", { key: 'd9f474f7f20fd7e813db358fddc720534ca05bb6' })));
     }
     static get is() { return "ion-fab-list"; }
     static get encapsulation() { return "shadow"; }
@@ -56,6 +58,8 @@ export class FabList {
                     "tags": [],
                     "text": "If `true`, the fab list will show all fab buttons in the list."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "activated",
                 "reflect": false,
                 "defaultValue": "false"
@@ -74,6 +78,8 @@ export class FabList {
                     "tags": [],
                     "text": "The side the fab list will show on relative to the main fab button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "side",
                 "reflect": false,
                 "defaultValue": "'bottom'"

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

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -71,12 +65,6 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   padding-bottom: var(--ion-safe-area-bottom, 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
@@ -138,15 +126,15 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
 
 @supports (backdrop-filter: blur(0)) {
   .footer-background {
-    right: 0;
     left: 0;
+    right: 0;
     top: 0;
     bottom: 0;
     position: absolute;
     backdrop-filter: saturate(180%) blur(20px);
   }
   .footer-translucent-ios ion-toolbar {
-    --opacity: 0.8;
+    --opacity: .8;
   }
 }
 .footer-ios.ion-no-border ion-toolbar:first-of-type {