@ionic/core 9.0.2 → 9.0.3-dev.11788456135.1ab1d6cd

package/dist/collection/components/action-sheet/action-sheet.ios.css

@@ -1,3 +1,64 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -57,36 +118,18 @@
 .alert-radio-label-has-rich-content,
 .alert-checkbox-label-has-rich-content,
 .select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
   gap: 16px;
 }
 
-/**
- * Outer label container has rich content
- * (start, content, description, end) that needs the
- * label to span the available row width.
- */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-content {
-  flex: 1;
-}
-
 .action-sheet-button-label-text,
 .alert-checkbox-label-text,
 .alert-radio-label-text,
 .select-option-label-text {
-  display: flex;
-  align-items: center;
   gap: 12px;
 }
 
 .select-option-start,
 .select-option-end {
-  display: flex;
-  align-items: center;
   gap: 8px;
 }
 
@@ -95,39 +138,16 @@
   padding-right: 0;
   padding-top: 5px;
   padding-bottom: 0;
-  display: block;
   color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
   font-size: 0.75rem;
 }
 
 /**
- * Non-rich labels are plain text and should ellipsize when they
- * overflow the row. Rich-content labels switch to flex so the
- * start / content / end pieces can lay out side-by-side and wrap.
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
  */
-.select-option-label:not(.select-option-label-has-rich-content) {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
-}
-
-ion-radio.select-option-has-rich-content::part(label),
-ion-checkbox.select-option-has-rich-content::part(label),
-.select-option-content {
-  flex: 1;
-  /**
-   * Let rich content wrap instead of inheriting the label part's
-   * single-line truncation, so arbitrary slotted elements render
-   * without clipping.
-   */
-  white-space: normal;
-}
-
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -216,6 +236,12 @@ ion-checkbox.select-option-has-rich-content::part(label),
   padding-inline-end: 16px;
 }
 
+/**
+ * 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
@@ -271,6 +297,94 @@ ion-checkbox.select-option-has-rich-content::part(label),
  *   }
  * }
  */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+.action-sheet-button-label-has-rich-content,
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content,
+.select-option-label-has-rich-content {
+  display: flex;
+  align-items: center;
+}
+
+/**
+ * Outer label container has rich content
+ * (start, content, description, end) that needs the
+ * label to span the available row width.
+ */
+.action-sheet-button-label-has-rich-content,
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content,
+.select-option-content {
+  flex: 1;
+}
+
+.action-sheet-button-label-text,
+.alert-checkbox-label-text,
+.alert-radio-label-text,
+.select-option-label-text {
+  display: flex;
+  align-items: center;
+}
+
+.select-option-start,
+.select-option-end {
+  display: flex;
+  align-items: center;
+}
+
+.select-option-description {
+  display: block;
+}
+
+/**
+ * Non-rich labels are plain text and should ellipsize when they
+ * overflow the row. Rich-content labels switch to flex so the
+ * start / content / end pieces can lay out side-by-side and wrap.
+ */
+.select-option-label:not(.select-option-label-has-rich-content) {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.select-option-label-has-rich-content {
+  display: flex;
+  align-items: center;
+}
+
+ion-radio.select-option-has-rich-content::part(label),
+ion-checkbox.select-option-has-rich-content::part(label),
+.select-option-content {
+  flex: 1;
+  /**
+   * Let rich content wrap instead of inheriting the label part's
+   * single-line truncation, so arbitrary slotted elements render
+   * without clipping.
+   */
+  white-space: normal;
+}
+
 :host {
   /**
    * @prop --background: Background of the action sheet group
@@ -316,17 +430,15 @@ ion-checkbox.select-option-has-rich-content::part(label),
   --max-height: calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: block;
   position: fixed;
   outline: none;
-  font-family: var(--ion-font-family, inherit);
   touch-action: none;
   user-select: none;
-  z-index: 1001;
 }
 
 :host(.overlay-hidden) {
@@ -334,8 +446,8 @@ ion-checkbox.select-option-has-rich-content::part(label),
 }
 
 .action-sheet-wrapper {
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
   transform: translate3d(0,  100%,  0);
   display: block;
@@ -346,7 +458,6 @@ ion-checkbox.select-option-has-rich-content::part(label),
   height: var(--height);
   min-height: var(--min-height);
   max-height: var(--max-height);
-  z-index: 10;
   pointer-events: none;
 }
 
@@ -426,8 +537,8 @@ ion-checkbox.select-option-has-rich-content::part(label),
 }
 
 .action-sheet-button::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -438,6 +549,7 @@ ion-checkbox.select-option-has-rich-content::part(label),
 .action-sheet-selected {
   color: var(--button-color-selected);
 }
+
 .action-sheet-selected::after {
   background: var(--button-background-selected);
   opacity: var(--button-background-selected-opacity);
@@ -446,6 +558,7 @@ ion-checkbox.select-option-has-rich-content::part(label),
 .action-sheet-button.ion-activated {
   color: var(--button-color-activated);
 }
+
 .action-sheet-button.ion-activated::after {
   background: var(--button-background-activated);
   opacity: var(--button-background-activated-opacity);
@@ -454,10 +567,12 @@ ion-checkbox.select-option-has-rich-content::part(label),
 .action-sheet-button.ion-focused:not(.ion-activated) {
   color: var(--button-color-focused);
 }
+
 .action-sheet-button.ion-focused:not(.ion-activated)::after {
   background: var(--button-background-focused);
   opacity: var(--button-background-focused-opacity);
 }
+
 .action-sheet-button.ion-focused:not(.ion-activated).action-sheet-selected::after {
   background: var(--button-background-focused, var(--button-background-selected));
   opacity: var(--button-background-focused-opacity, var(--button-background-selected-opacity));
@@ -472,6 +587,21 @@ ion-checkbox.select-option-has-rich-content::part(label),
     opacity: var(--button-background-hover-opacity);
   }
 }
+:host {
+  font-family: var(--ion-font-family, inherit);
+  z-index: 1001;
+}
+
+.action-sheet-wrapper {
+  z-index: 10;
+}
+
+/**
+ * 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
@@ -532,11 +662,11 @@ ion-checkbox.select-option-has-rich-content::part(label),
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
   --button-background: linear-gradient(0deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08), rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08) 50%, transparent 50%) bottom/100% 1px no-repeat transparent;
   --button-background-activated: var(--ion-text-color, #000);
-  --button-background-activated-opacity: .08;
+  --button-background-activated-opacity: 0.08;
   --button-background-hover: currentColor;
-  --button-background-hover-opacity: .04;
+  --button-background-hover-opacity: 0.04;
   --button-background-focused: currentColor;
-  --button-background-focused-opacity: .12;
+  --button-background-focused-opacity: 0.12;
   --button-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, var(--ion-background-color, #fff)));
   --button-background-selected-opacity: 1;
   --button-color: var(--ion-color-primary, #0054e9);

package/dist/collection/components/action-sheet/action-sheet.js

@@ -8,13 +8,14 @@ import { createLockController } from "../../utils/lock-controller";
 import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, restoreRootFocusTrapAccessibility, safeCall, setOverlayId, } from "../../utils/overlays";
 import { renderOptionLabel } from "../../utils/select-option-render";
 import { getClassMap } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 ActionSheet {
     constructor() {
@@ -39,7 +40,7 @@ export class ActionSheet {
         this.backdropDismiss = true;
         /**
          * If `true`, the action sheet will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
+         * Only applies when the theme is `"ios"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         this.translucent = false;
@@ -349,7 +350,7 @@ export class ActionSheet {
         this.triggerChanged();
     }
     renderActionSheetButtons(filteredButtons) {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const { activeRadioId } = this;
         return filteredButtons.map((b, index) => {
             const isRadio = b.htmlAttributes?.role === 'radio';
@@ -412,40 +413,42 @@ export class ActionSheet {
                         this.selectRadioButton(b);
                     }
                     this.buttonClick(b);
-                }, disabled: b.disabled, tabIndex: tabIndex }, h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), renderOptionLabel(optionLabelOptions, 'action-sheet-button-label', true)), mode === 'md' && h("ion-ripple-effect", null)));
+                }, disabled: b.disabled, tabIndex: tabIndex }, h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), renderOptionLabel(optionLabelOptions, 'action-sheet-button-label', true)), theme === 'md' && h("ion-ripple-effect", null)));
         });
     }
     render() {
         const { header, htmlAttributes, overlayIndex, hasRadioButtons } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const allButtons = this.getButtons();
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (h(Host, { key: '83b47ea6b81d4eec6582c1dcaae6f267c78ba634', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1", ...htmlAttributes, style: {
+        return (h(Host, { key: 'bc48c9983f6f9b87d4addce02d82274d5599bae0', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: {
-                [mode]: true,
+                [theme]: true,
                 ...getClassMap(this.cssClass),
                 'overlay-hidden': true,
                 'action-sheet-translucent': this.translucent,
-            }, onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '3652793ec76adcfb87b814eb65d1260ae26f6910', tappable: this.backdropDismiss }), h("div", { key: '7de3a51daf95b50e02734a2cc8eec6f55b1473f3', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '9b76bbf12901b956f7ee6d984f7f71e169bb5939', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'cb52c905275a46ff27810fb1b4748ab533a78c45', class: "action-sheet-container" }, h("div", { key: '578c7194cfbcb65c1e41e15c390af41f179a2686', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (h("div", { key: 'ee961307c25cb1fcb0c6bbf667a8ed76ab717860', id: headerID, class: {
+            }, onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '76be86cb9b2fdde1e66cf4c0f03b90683f2ee4cd', tappable: this.backdropDismiss }), h("div", { key: 'c6523b8164cff7e4666c9af5298c9bf308025013', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '312a0b62a6f532b9dee00dfb211d3b97bb74c789', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'feb8555c00e9877611ce82bf4c81f0d5efc61b14', class: "action-sheet-container" }, h("div", { key: '75d086bf210048ceda477a7377163e5ad45bc6d1', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined, "data-roving-focus": hasRadioButtons ? true : undefined }, header !== undefined && (h("div", { key: '6e7c42b8bdcf73a2b66f13f3224083bb0d37df35', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { key: '82d4016010db14d3f3b9911c276cb9a63b960ef4', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (h("div", { key: 'a88fbfab194e13c6642a65f2e19a12299dd4ac23', class: "action-sheet-group action-sheet-group-cancel" }, h("button", { key: 'a232b8d23f1fc2efb7b37a605102b6994761a2f6', ...cancelButton.htmlAttributes, type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }, h("span", { key: '19a7d95d3428d78a56b7dacabdec8fc0b722d8c2', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '5f3f3cb996a48e6365a3a09ea72ddc68ac9ccb78', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: '6e8fcb5f103ac19aa4b0682f19791cef0a147001' })))))), h("div", { key: '36f63ab77949c88f662e2cf6bb18510cb9de6a9f', tabindex: "0", "aria-hidden": "true" })));
+            } }, header, this.subHeader && h("div", { key: '111488ced63fc037f894294be91db6a66471ea85', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (h("div", { key: '314e2a1915940b756bcd8bb720b60efcbf56ad10', class: "action-sheet-group action-sheet-group-cancel" }, h("button", { key: 'a48e39e72a559ff69fa870f276a248a6087f6c47', ...cancelButton.htmlAttributes, type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }, h("span", { key: '018844992da6bf5217e52d6a942601bbe9a1ab4f', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '93e73400695e3aee48e54382cea0e7618ce76abc', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && h("ion-ripple-effect", { key: '8332a0a6a7e4e321b176843c491f4be8a833b9bc' })))))), h("div", { key: '525d6407cd943430aa57070de9ab078ad433a124', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-action-sheet"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["action-sheet.ios.scss"],
-            "md": ["action-sheet.md.scss"]
+            "md": ["action-sheet.md.scss"],
+            "ionic": ["action-sheet.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["action-sheet.ios.css"],
-            "md": ["action-sheet.md.css"]
+            "md": ["action-sheet.md.css"],
+            "ionic": ["action-sheet.ionic.css"]
         };
     }
     static get properties() {
@@ -704,7 +707,7 @@ export class ActionSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the action sheet 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)."
+                    "text": "If `true`, the action sheet 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)."
                 },
                 "getter": false,
                 "setter": false,