@ionic/core 8.0.0-dev.11711476529.17eae6ec → 8.0.0-dev.11711630777.14c4f997

package/dist/collection/components/col/col.js

@@ -3,15 +3,11 @@
  */
 import { Host, forceUpdate, h } from "@stencil/core";
 import { matchBreakpoint } from "../../utils/media";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 const win = typeof window !== 'undefined' ? window : undefined;
 // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
 const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
-/**
- * @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 Col {
     constructor() {
         this.offset = undefined;
@@ -114,10 +110,10 @@ export class Col {
     }
     render() {
         const isRTL = document.dir === 'rtl';
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '10ac8290295f8b717c4155b1bf4fa07fe11f090d', class: {
-                [theme]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '6f86eafa8d585815f19abcf52678ab6e8cebb8f5' })));
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'af31133e071846ac6609a46eabe59cc481dafdb7', class: {
+                [mode]: true,
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: 'd11a95925819a0e2dc69966b7893f0d3efc62eb9' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content/content.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

package/dist/collection/components/content/content.js

@@ -6,11 +6,8 @@ import { componentOnReady, hasLazyBuild } from "../../utils/helpers";
 import { isPlatform } from "../../utils/platform";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonMode, 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.
- *
  * @slot - Content is placed in the scrollable area if provided without a slot.
  * @slot fixed - Should be used for fixed content that should not scroll.
  *
@@ -51,6 +48,7 @@ export class Content {
         };
         this.color = undefined;
         this.fullscreen = false;
+        this.fixedSlotPlacement = 'afterContent';
         this.forceOverscroll = undefined;
         this.scrollX = false;
         this.scrollY = true;
@@ -145,8 +143,9 @@ export class Content {
             this.resize();
         }, 100);
     }
-    shouldForceOverscroll(mode) {
+    shouldForceOverscroll() {
         const { forceOverscroll } = this;
+        const mode = getIonMode(this);
         return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
     }
     resize() {
@@ -331,27 +330,26 @@ export class Content {
         }
     }
     render() {
-        const { isMainContent, scrollX, scrollY, el } = this;
+        const { fixedSlotPlacement, isMainContent, scrollX, scrollY, el } = this;
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
-        const theme = getIonTheme(this);
-        const mode = getIonMode(this, theme);
-        const forceOverscroll = this.shouldForceOverscroll(mode);
-        const transitionShadow = theme === 'ios';
+        const mode = getIonMode(this);
+        const forceOverscroll = this.shouldForceOverscroll();
+        const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, { key: '9cc4e9b95b4c733cd3852ad04eac7a95b9d99cb0', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: '416e51ee77852f6819c73cd7bfcbaa762365edf6', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+                [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
                 [`content-${rtl}`]: true,
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, h("div", { key: '5e6503d66069d9db0fec36507580060c30851e2d', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h("div", { key: 'e7ee7b2bde9b394d6c2d074b72b226ad6477d2f5', class: {
+            } }, h("div", { key: '400a1684280a63a101abb3f1e18a3c0a8b19108c', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'beforeContent' ? h("slot", { name: "fixed" }) : null, h("div", { key: '69b707660cf2a9fdc315d9b0d996d650203bde2f', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '259d26f8dbb2ecd7626fd76790e20cddd5be7839' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: '33e7cfafeb99d6fae1fa320255372c449a2a1cac', name: "fixed" })));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: 'e7a8aded11f25137c13f822273ca0d5638835f6f' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement !== 'beforeContent' ? h("slot", { name: "fixed" }) : null));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }
@@ -408,6 +406,24 @@ export class Content {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "fixedSlotPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'afterContent' | 'beforeContent'",
+                    "resolved": "\"afterContent\" | \"beforeContent\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "To place a FAB or other fixed content before the main page content in the\nDOM, set this property to `beforeContent`."
+                },
+                "attribute": "fixed-slot-placement",
+                "reflect": false,
+                "defaultValue": "'afterContent'"
+            },
             "forceOverscroll": {
                 "type": "boolean",
                 "mutable": true,

package/dist/collection/components/datetime/datetime.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
@@ -497,12 +491,6 @@ ion-picker {
   --fade-background-rgb: var(--wheel-fade-background-rgb);
 }
 
-/**
- * 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/datetime/datetime.js

@@ -8,7 +8,7 @@ import { printIonError, printIonWarning } from "../../utils/logging/index";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses } from "../../utils/theme";
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from "ionicons/icons";
-import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from "./utils/comparison";
 import { generateMonths, getDaysOfMonth, getDaysOfWeek, getToday, getMonthColumnData, getDayColumnData, getYearColumnData, getTimeColumnsData, getCombinedDateColumnData, } from "./utils/data";
 import { formatValue, getLocalizedDateTime, getLocalizedTime, getMonthAndYear } from "./utils/format";
@@ -18,8 +18,7 @@ import { clampDate, convertToArrayOfNumbers, getPartsFromCalendarDay, parseAmPm,
 import { getCalendarDayState, getHighlightStyles, isDayDisabled, isMonthDisabled, isNextMonthDisabled, isPrevMonthDisabled, } from "./utils/state";
 import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from "./utils/validate";
 /**
- * @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.
  *
  * @slot title - The title of the datetime.
  * @slot buttons - The buttons in the datetime.
@@ -1265,10 +1264,10 @@ export class Datetime {
     /**
      * Grid Render Methods
      */
-    renderCalendarHeader(theme) {
+    renderCalendarHeader(mode) {
         const { disabled } = this;
-        const expandedIcon = theme === 'ios' ? chevronDown : caretUpSharp;
-        const collapsedIcon = theme === 'ios' ? chevronForward : caretDownSharp;
+        const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp;
+        const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp;
         const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
         const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
         // don't use the inheritAttributes util because it removes dir from the host, and we still need that
@@ -1277,7 +1276,7 @@ export class Datetime {
                 'calendar-month-year-toggle': true,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, h("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), theme === 'md' && h("ion-ripple-effect", null))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, theme, this.firstDayOfWeek % 7).map((d) => {
+            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, h("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && h("ion-ripple-effect", null))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
             return h("div", { class: "day-of-week" }, d);
         }))));
     }
@@ -1397,8 +1396,8 @@ export class Datetime {
             return this.renderMonth(month, year);
         })));
     }
-    renderCalendar(theme) {
-        return (h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(theme), this.renderCalendarBody()));
+    renderCalendar(mode) {
+        return (h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(mode), this.renderCalendarBody()));
     }
     renderTimeLabel() {
         const hasSlottedTimeLabel = this.el.querySelector('[slot="time-label"]') !== null;
@@ -1506,7 +1505,7 @@ export class Datetime {
      * Render entry point
      * All presentation types are rendered from here.
      */
-    renderDatetime(theme) {
+    renderDatetime(mode) {
         const { presentation, preferWheel } = this;
         /**
          * Certain presentation types have separate grid and wheel displays.
@@ -1520,7 +1519,7 @@ export class Datetime {
             case 'date-time':
                 return [
                     this.renderHeader(),
-                    this.renderCalendar(theme),
+                    this.renderCalendar(mode),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderTime(),
                     this.renderFooter(),
@@ -1529,7 +1528,7 @@ export class Datetime {
                 return [
                     this.renderHeader(),
                     this.renderTime(),
-                    this.renderCalendar(theme),
+                    this.renderCalendar(mode),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderFooter(),
                 ];
@@ -1542,7 +1541,7 @@ export class Datetime {
             default:
                 return [
                     this.renderHeader(),
-                    this.renderCalendar(theme),
+                    this.renderCalendar(mode),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderFooter(),
                 ];
@@ -1550,15 +1549,15 @@ export class Datetime {
     }
     render() {
         const { name, value, disabled, el, color, readonly, showMonthAndYear, preferWheel, presentation, size, isGridStyle, } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const isMonthAndYearPresentation = presentation === 'year' || presentation === 'month' || presentation === 'month-year';
         const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation;
         const monthYearPickerOpen = showMonthAndYear && !isMonthAndYearPresentation;
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '54afe8aefdc36f7cc5001d141e2f22b94fc7d9f8', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
-                [theme]: true,
+        return (h(Host, { key: '89de4c9f54e7c11038c62ecaa2e90aea47948393', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+                [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
                 'show-month-and-year': shouldShowMonthAndYear,
@@ -1567,22 +1566,20 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '632747f7ee8a54eafb16179f5039ba1df98ecd76', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme)));
+            })) }, h("div", { key: 'b9de6cc68dc7b7773bb408fd55a7d1872460a5f9', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["datetime.ios.scss"],
-            "md": ["datetime.md.scss"],
-            "ionic": ["datetime.md.scss"]
+            "md": ["datetime.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["datetime.ios.css"],
-            "md": ["datetime.md.css"],
-            "ionic": ["datetime.md.css"]
+            "md": ["datetime.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/datetime/datetime.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
@@ -497,12 +491,6 @@ ion-picker {
   --fade-background-rgb: var(--wheel-fade-background-rgb);
 }
 
-/**
- * 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/datetime/utils/data.js

@@ -43,20 +43,20 @@ const hour23 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18
 // h24 hour system uses 1-24. Midnight starts at 24:00.
 const hour24 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0];
 /**
- * Given a locale and a theme,
+ * Given a locale and a mode,
  * return an array with formatted days
  * of the week. iOS should display days
  * such as "Mon" or "Tue".
  * MD should display days such as "M"
  * or "T".
  */
-export const getDaysOfWeek = (locale, theme, firstDayOfWeek = 0) => {
+export const getDaysOfWeek = (locale, mode, firstDayOfWeek = 0) => {
     /**
      * Nov 1st, 2020 starts on a Sunday.
      * ion-datetime assumes weeks start on Sunday,
      * but is configurable via `firstDayOfWeek`.
      */
-    const weekdayFormat = theme === 'ios' ? 'short' : 'narrow';
+    const weekdayFormat = mode === 'ios' ? 'short' : 'narrow';
     const intl = new Intl.DateTimeFormat(locale, { weekday: weekdayFormat });
     const startDate = new Date('11/01/2020');
     const daysOfWeek = [];

package/dist/collection/components/datetime-button/datetime-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

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

@@ -5,14 +5,13 @@ import { Host, h } from "@stencil/core";
 import { componentOnReady, addEventListener } from "../../utils/helpers";
 import { printIonError } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { getToday } from "../datetime/utils/data";
 import { getLocalizedDateTime, getLocalizedTime } from "../datetime/utils/format";
 import { getHourCycle } from "../datetime/utils/helpers";
 import { parseDate } from "../datetime/utils/parse";
 /**
- * @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.
  *
  * @slot date-target - Content displayed inside of the date button.
  * @slot time-target - Content displayed inside of the time button.
@@ -337,27 +336,25 @@ export class DatetimeButton {
     }
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '730dd96060c0131ebb352aa219e91849c84451d0', class: createColorClasses(color, {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '49854fc8a4b9875194c1537d0b3b59459e39606f', class: createColorClasses(color, {
+                [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (h("button", { class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { name: "date-target" }, dateText), theme === 'md' && h("ion-ripple-effect", null))), timeText && (h("button", { class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { name: "time-target" }, timeText), theme === 'md' && h("ion-ripple-effect", null)))));
+            }) }, dateText && (h("button", { class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", null))), timeText && (h("button", { class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", null)))));
     }
     static get is() { return "ion-datetime-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["datetime-button.ios.scss"],
-            "md": ["datetime-button.md.scss"],
-            "ionic": ["datetime-button.md.scss"]
+            "md": ["datetime-button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["datetime-button.ios.css"],
-            "md": ["datetime-button.md.css"],
-            "ionic": ["datetime-button.md.css"]
+            "md": ["datetime-button.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/datetime-button/datetime-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

package/dist/collection/components/fab/fab.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
@@ -120,12 +108,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
@@ -181,12 +163,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/fab.js

@@ -2,11 +2,7 @@
  * (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;
@@ -50,13 +46,13 @@ export class Fab {
     }
     render() {
         const { horizontal, vertical, edge } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'd1db311656f40e40df4bc4e455daf41186f9745f', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '8d10537e35f518b03a840de9a0fbe7973abc4290', class: {
+                [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, h("slot", { key: 'f4cd7b0794897362b34258e94ef869c50c891722' })));
+            } }, h("slot", { key: '77331bf85f939b20ff14886f0a8b0f13c5ca392a' })));
     }
     static get is() { return "ion-fab"; }
     static get encapsulation() { return "shadow"; }

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
@@ -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

@@ -5,10 +5,9 @@ import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
 import { close } from "ionicons/icons";
-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).
@@ -54,7 +53,7 @@ export class FabButton {
     render() {
         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 }
@@ -64,8 +63,8 @@ export class FabButton {
                 rel: this.rel,
                 target: this.target,
             };
-        return (h(Host, { key: 'c4e05e1b51be2b157e46ae54a16f456c3ae388c8', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
-                [theme]: true,
+        return (h(Host, { key: 'bc00fdb39e41787a3b4c53aededfc32485ee9211', 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,
@@ -75,22 +74,20 @@ export class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, Object.assign({ key: '82228a3759e19520736f748a100c14b5d5dd364f' }, 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: '0b53d5f4d4d75db45b3f9392873505f19532577c', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '14e90759587409a81d3ed3e19c98b6109f166ba1', class: "button-inner" }, h("slot", { key: '35abbbffb2f7bf3f9347de6bdce9e1e2197c4148' })), theme === 'md' && h("ion-ripple-effect", null))));
+            }) }, h(TagType, Object.assign({ key: 'fe13b3e19638177b516e6e530e6ff0b745856481' }, 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: '210e4a3cd39e0ff6fc300eeaafa3a9330a9dc73f', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'c6547612ff58a1e46bae2e91302b6b86a49d6429', class: "button-inner" }, h("slot", { key: '48abc7e6a27391f2595eeddf9abd8d16c0a86630' })), mode === 'md' && h("ion-ripple-effect", null))));
     }
     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() {
@@ -297,7 +294,7 @@ 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)."
                 },
                 "attribute": "translucent",
                 "reflect": false,

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
@@ -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-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