@ionic/core 9.0.11-dev.11793890855.1bf6a6e5 → 9.0.11-dev.11793906456.1ea7a0a7

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 and Ionic themes should
- * display days such as "Mon" or "Tue".
+ * 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 === 'md' ? 'narrow' : 'short';
+    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/utils/state.js

@@ -74,7 +74,7 @@ export const isDayDisabled = (refParts, minParts, maxParts, dayValues) => {
  * Given a locale, a date, the selected date(s), and today's date,
  * generate the state for a given calendar day button.
  */
-export const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues, rangeParts) => {
+export const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues) => {
     /**
      * activeParts signals what day(s) are currently selected in the datetime.
      * If multiple="true", this will be an array, but the logic in this util
@@ -90,20 +90,6 @@ export const getCalendarDayState = (locale, refParts, activeParts, todayParts, m
     const isActive = activePartsArray.find((parts) => isSameDay(refParts, parts)) !== undefined;
     const isToday = isSameDay(refParts, todayParts);
     const disabled = isDayDisabled(refParts, minParts, maxParts, dayValues);
-    /**
-     * Range state: determine if this day is the range start, end, or in between.
-     */
-    let isRangeStart = false;
-    let isRangeEnd = false;
-    let isInRange = false;
-    if (rangeParts) {
-        const { start, end } = rangeParts;
-        isRangeStart = isSameDay(refParts, start);
-        if (end) {
-            isRangeEnd = isSameDay(refParts, end);
-            isInRange = !disabled && !isRangeStart && !isRangeEnd && isAfter(refParts, start) && isBefore(refParts, end);
-        }
-    }
     /**
      * Note that we always return one object regardless of whether activeParts
      * was an array, since we pare down to one value for isActive.
@@ -112,9 +98,6 @@ export const getCalendarDayState = (locale, refParts, activeParts, todayParts, m
         disabled,
         isActive,
         isToday,
-        isRangeStart,
-        isRangeEnd,
-        isInRange,
         ariaSelected: isActive ? 'true' : null,
         ariaLabel: generateDayAriaLabel(locale, isToday, refParts),
         text: refParts.day != null ? getDay(locale, refParts) : null,

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,12 @@ 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 { isAfter } from "../datetime/utils/comparison";
+import { getIonMode } from "../../global/ionic-global";
 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.
@@ -54,7 +52,7 @@ export class DatetimeButton {
             if (!datetimeEl) {
                 return;
             }
-            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, selectionMode, titleSelectedDatesFormatter, } = datetimeEl;
+            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
             const parsedValues = this.getParsedDateValues(value);
             /**
              * Both ion-datetime and ion-datetime-button default to today's date and
@@ -66,8 +64,6 @@ export class DatetimeButton {
             if (!parsedDatetimes) {
                 return;
             }
-            const isRangeMode = selectionMode === 'range';
-            const isMultipleMode = selectionMode === 'multiple' || (selectionMode === undefined && multiple);
             /**
              * If developers incorrectly use multiple="true"
              * with non "date" datetimes, then just select
@@ -77,12 +73,11 @@ export class DatetimeButton {
              */
             const firstParsedDatetime = parsedDatetimes[0];
             const computedHourCycle = getHourCycle(locale, hourCycle);
-            const dateFormatOptions = formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' };
             this.dateText = this.timeText = undefined;
             switch (datetimePresentation) {
                 case 'date-time':
                 case 'time-date':
-                    const dateText = getLocalizedDateTime(locale, firstParsedDatetime, dateFormatOptions);
+                    const dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' });
                     const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
                     if (preferWheel) {
                         this.dateText = `${dateText} ${timeText}`;
@@ -93,31 +88,7 @@ export class DatetimeButton {
                     }
                     break;
                 case 'date':
-                    if (isRangeMode && parsedValues.length >= 2) {
-                        /**
-                         * Use the first and last entries in date order, matching
-                         * how ion-datetime reads a range value.
-                         */
-                        let startIndex = 0;
-                        let endIndex = parsedValues.length - 1;
-                        if (isAfter(parsedDatetimes[startIndex], parsedDatetimes[endIndex])) {
-                            [startIndex, endIndex] = [endIndex, startIndex];
-                        }
-                        const rangeValues = [parsedValues[startIndex], parsedValues[endIndex]];
-                        const startDate = getLocalizedDateTime(locale, parsedDatetimes[startIndex], dateFormatOptions);
-                        const endDate = getLocalizedDateTime(locale, parsedDatetimes[endIndex], dateFormatOptions);
-                        let rangeText = `${startDate} - ${endDate}`;
-                        if (titleSelectedDatesFormatter !== undefined) {
-                            try {
-                                rangeText = titleSelectedDatesFormatter(rangeValues);
-                            }
-                            catch (e) {
-                                printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
-                            }
-                        }
-                        this.dateText = rangeText;
-                    }
-                    else if (isMultipleMode && parsedValues.length !== 1) {
+                    if (multiple && parsedValues.length !== 1) {
                         let headerText = `${parsedValues.length} days`; // default/fallback for multiple selection
                         if (titleSelectedDatesFormatter !== undefined) {
                             try {
@@ -130,7 +101,7 @@ export class DatetimeButton {
                         this.dateText = headerText;
                     }
                     else {
-                        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, dateFormatOptions);
+                        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' });
                     }
                     break;
                 case 'time':
@@ -366,27 +337,25 @@ export class DatetimeButton {
     }
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'e022c5c280d4f889c1ba7ca3e96b38063c5add30', class: createColorClasses(color, {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '2aaa284fe9b53b6347fcb5a1d325fbab1a6f38bd', class: createColorClasses(color, {
+                [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (h("button", { key: 'b1267d98cefbce7666b0cafa083c42f3116e2398', 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", { key: '3fdfa6adf73ee1e35cdb7f318f1d1ddcf4ab4d7b', name: "date-target" }, dateText), theme === 'md' && h("ion-ripple-effect", { key: 'a832d63c77fffe8d7e0d28827bbb469726373d1e' }))), timeText && (h("button", { key: 'c589bdf2b8221609713f0d3554494dd08a1f2e5b', 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", { key: '10769ddadf7933d78744facaaa153bb413ff484a', name: "time-target" }, timeText), theme === 'md' && h("ion-ripple-effect", { key: '7832de031919ddfb312528b45a3dc8e1c20edea6' })))));
+            }) }, dateText && (h("button", { key: 'd9698471fa5d5c834ca73db57f9ed98dfc705b4c', 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", { key: 'c8761a7f25ae5b93c953b3486dd6335f5ad4fd53', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '3dd5e97af8d35a2b008de4ab01f690b3c2223135' }))), timeText && (h("button", { key: '1107ca2382940b642b551f885f7ca763012c236c', 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", { key: '5cff53e486923b03715b9ab4dc0947e26f4ea1d9', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: '5aac1facb6fc7457307c4f59a241e3a5b31facc8' })))));
     }
     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
@@ -250,8 +226,8 @@
 }
 
 :host(.fab-horizontal-center) {
-  right: 0px;
   left: 0px;
+  right: 0px;
   -webkit-margin-start: auto;
   margin-inline-start: auto;
   -webkit-margin-end: auto;

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() {
         /**
@@ -57,13 +53,13 @@ export class Fab {
     }
     render() {
         const { horizontal, vertical, edge } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '569b07978a63756169d050f3b67368cecf26dd98', 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: 'cd10d4baa1c2e8c2dcfefe66bdb7ffb8262f8e17' })));
+            } }, h("slot", { key: '9394ef6d6e5b0410fa6ba212171f687fb178ce2d' })));
     }
     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
@@ -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

@@ -6,11 +6,9 @@ import { inheritAriaAttributes, hasShadowDom } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 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).
@@ -40,7 +38,7 @@ export class FabButton {
         this.show = false;
         /**
          * If `true`, the fab button will be translucent.
-         * Only applies when the theme is `"ios"` and the device supports
+         * 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;
@@ -48,6 +46,12 @@ export class FabButton {
          * 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();
         };
@@ -132,23 +136,10 @@ export class FabButton {
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
-    /**
-     * Get the icon to use for the close icon.
-     * If an icon is set on the component, use that.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     */
-    get fabButtonCloseIcon() {
-        // Return the icon if it is explicitly set
-        if (this.closeIcon != null) {
-            return this.closeIcon;
-        }
-        return config.get('fabButtonCloseIcon', close);
-    }
     render() {
-        const { el, disabled, fabButtonCloseIcon, color, href, activated, show, translucent, size, inheritedAttributes, type, } = this;
+        const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes, type } = 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 }
@@ -165,8 +156,8 @@ export class FabButton {
         if (type !== 'button') {
             this.renderHiddenButton();
         }
-        return (h(Host, { key: 'fc2e7284b76590aa65e45b8251f7c7776e11f0dc', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
-                [theme]: true,
+        return (h(Host, { key: '89e8f2564f12f8c1cd8509a40359202347948846', 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,
@@ -176,22 +167,20 @@ export class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, { key: '21598ba114ac64d8f98bc0f16934678166def17e', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation), ...inheritedAttributes }, h("ion-icon", { key: '673609441ffe18d6e8f4b2dc2de37eda7efdda75', "aria-hidden": "true", icon: fabButtonCloseIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '13b3dac62a91549431d227676bbe8a0a0fc93665', class: "button-inner" }, h("slot", { key: 'aefbe96ef9790dd85002432d7bb5a70f17e52a15' })), theme === 'md' && h("ion-ripple-effect", { key: '6888c7374b87c08a9a04009549026ae7365f4b92' }))));
+            }) }, h(TagType, { key: '9e2fd462316e1aec50f53fa1b7ad7f02fd399592', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation), ...inheritedAttributes }, h("ion-icon", { key: 'c3bdb8614eb249297afc963810066658dc85efd6', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'a6a505b24d21cc716d2e3351ad4c380b95c768d7', class: "button-inner" }, h("slot", { key: 'f44fc1e95533438ee3adc8cc5bdd9e1e85849fd6' })), mode === 'md' && h("ion-ripple-effect", { key: 'b7c7dc7fceb0bb5613239608225f040010b7b2bd' }))));
     }
     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() {
@@ -421,7 +410,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)."
                 },
                 "getter": false,
                 "setter": false,
@@ -497,11 +486,11 @@ 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."
@@ -509,7 +498,8 @@ export class FabButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "close-icon"
+                "attribute": "close-icon",
+                "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,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 FabList {
     constructor() {
         this.activateTimeouts = [];
@@ -34,12 +30,12 @@ export class FabList {
         this.activateTimeouts = [];
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: 'a9b498b07b2082107cbeef3259bdd3cff429c1ac', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '03a8920c29a93c6df4bab14753a78a8a30722ce8', class: {
+                [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, h("slot", { key: '6e993eab68de44c0bc3396fd4871c3005274a9f5' })));
+            } }, h("slot", { key: 'd9e1541cb044e209bc2dff14080f3b938a2b84ae' })));
     }
     static get is() { return "ion-fab-list"; }
     static get encapsulation() { return "shadow"; }