@ionic/core 8.8.4-dev.11776178970.14763043 → 8.8.4-dev.11776186452.1cc0af05

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

@@ -1,3 +1,58 @@
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 /**
  * Convert a pixels given value into rem
  * 
@@ -222,6 +277,7 @@
 .action-sheet-selected {
   color: var(--button-color-selected);
 }
+
 .action-sheet-selected::after {
   background: var(--button-background-selected);
   opacity: var(--button-background-selected-opacity);
@@ -230,6 +286,7 @@
 .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);
@@ -238,6 +295,7 @@
 .action-sheet-button.ion-focused {
   color: var(--button-color-focused);
 }
+
 .action-sheet-button.ion-focused::after {
   background: var(--button-background-focused);
   opacity: var(--button-background-focused-opacity);
@@ -252,6 +310,32 @@
     opacity: var(--button-background-hover-opacity);
   }
 }
+.action-sheet-button-label {
+  display: flex;
+  align-items: center;
+}
+
+.select-option-content {
+  flex: 1;
+}
+
+.select-option-description {
+  display: block;
+}
+
+.action-sheet-button-label {
+  gap: 12px;
+}
+
+.select-option-description {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 5px;
+  padding-bottom: 0;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  font-size: 0.75rem;
+}
+
 /**
  * Convert a pixels given value into rem
  * 

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

@@ -6,6 +6,7 @@ import { createButtonActiveGesture } from "../../utils/gesture/button-active";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { BACKDROP, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
+import { renderOptionLabel } from "../../utils/select-option-render";
 import { getClassMap } from "../../utils/theme";
 import { getIonMode, getIonTheme } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
@@ -374,12 +375,26 @@ export class ActionSheet {
             if (isRadio) {
                 htmlAttrs['aria-checked'] = isActiveRadio ? 'true' : 'false';
             }
+            /**
+             * Cast to `SelectActionSheetButton` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `ActionSheetButton` interface.
+             */
+            const richButton = b;
+            const optionLabelOptions = {
+                id: buttonId,
+                label: richButton.text,
+                startContent: richButton.startContent,
+                endContent: richButton.endContent,
+                description: richButton.description,
+            };
             return (h("button", Object.assign({}, htmlAttrs, { role: isRadio ? 'radio' : undefined, type: "button", id: buttonId, class: Object.assign(Object.assign({}, buttonClass(b)), { 'action-sheet-selected': isActiveRadio }), onClick: () => {
                     if (isRadio) {
                         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" }), b.text), theme === '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')), theme === 'md' && h("ion-ripple-effect", null)));
         });
     }
     render() {
@@ -389,12 +404,12 @@ export class ActionSheet {
         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, Object.assign({ key: '3ef5b086f7a4ac4f361de8dcff5255ed1d2bcbdf', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '8abe5fcc3941ca61ec313b4c47608c58c8eb2815', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({ [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'd98bb285f8a09a4207f35f930da77548bcdf529a', tappable: this.backdropDismiss }), h("div", { key: '6cd6aba45144244a51d76bfe0b606c3fb9a882ea', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'e6a007bcde062bd2ea7c094394aa0024ee595c9e', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '31948475a84d28488fd53e7fde16cb1deff14a2f', class: "action-sheet-container" }, h("div", { key: '4f2bbc00d36792cf6e24c402f5396546653f1e00', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (h("div", { key: '68bcafe38b49be0fe21e3e4820ee3f05f6abffad', id: headerID, class: {
+            }, class: Object.assign(Object.assign({ [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '773948649ab8de68d0d683f5f0665c0fb94446db', tappable: this.backdropDismiss }), h("div", { key: 'a107d07dc073c088da7059d2a96f393ae9a9e494', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '7a0468225a402e3ae72048d84abb48cdb940e8ca', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '6ba6a114547440c1e746a4fbba717954bfbe2a50', class: "action-sheet-container" }, h("div", { key: '4d9c249bdcfc0ab981d187edd3d4b1397cc59f5a', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (h("div", { key: '325c63cf2a1b081d411b3c80b65fe403e9aaa298', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { key: 'd253c010d0bba4a38836b6319b2d8073e1a526b9', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (h("div", { key: 'b30f50a64b425a992e26673bf072332d7c3b3409', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'e35087c05c7c8f04ca9aef322917f8172c0c4f8f' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '1f7a50fac729e19d0ee12d54bc67e071ff7b3f08', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '452641544297efc017529b674235e269285c4100', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && h("ion-ripple-effect", { key: '15795e15d27297e6e87f7fe39386bb8581993dfa' })))))), h("div", { key: '301fef1a45d1c523221ec2312276dd3a62f3134d', tabindex: "0", "aria-hidden": "true" })));
+            } }, header, this.subHeader && h("div", { key: '0ef643a1d43ab6f95017b55fe07ddc00e9a0a2f0', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (h("div", { key: '4549b06fd306ccc029b8a8c9209dafa13e4af8e3', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'cd33e2fed14ec36bce0c882449831fb8685c26ab' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '24717a96d90e806a1daddc78685d33afee6397ec', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '9b3162193520f3e10db8f0ca016d367787848126', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && h("ion-ripple-effect", { key: '5f6e18c24164395393d4541de1fa60cd88e0f6ea' })))))), h("div", { key: '78a306469aafada4158d434502ab02c8d1fed2d0', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-action-sheet"; }
     static get encapsulation() { return "scoped"; }
@@ -402,14 +417,14 @@ export class ActionSheet {
         return {
             "ios": ["action-sheet.ios.scss"],
             "md": ["action-sheet.md.scss"],
-            "ionic": ["action-sheet.md.scss"]
+            "ionic": ["action-sheet.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["action-sheet.ios.css"],
             "md": ["action-sheet.md.css"],
-            "ionic": ["action-sheet.md.css"]
+            "ionic": ["action-sheet.ionic.css"]
         };
     }
     static get properties() {

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

@@ -1,3 +1,58 @@
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 /**
  * Convert a pixels given value into rem
  * 
@@ -222,6 +277,7 @@
 .action-sheet-selected {
   color: var(--button-color-selected);
 }
+
 .action-sheet-selected::after {
   background: var(--button-background-selected);
   opacity: var(--button-background-selected-opacity);
@@ -230,6 +286,7 @@
 .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);
@@ -238,6 +295,7 @@
 .action-sheet-button.ion-focused {
   color: var(--button-color-focused);
 }
+
 .action-sheet-button.ion-focused::after {
   background: var(--button-background-focused);
   opacity: var(--button-background-focused-opacity);
@@ -252,6 +310,32 @@
     opacity: var(--button-background-hover-opacity);
   }
 }
+.action-sheet-button-label {
+  display: flex;
+  align-items: center;
+}
+
+.select-option-content {
+  flex: 1;
+}
+
+.select-option-description {
+  display: block;
+}
+
+.action-sheet-button-label {
+  gap: 12px;
+}
+
+.select-option-description {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 5px;
+  padding-bottom: 0;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  font-size: 0.75rem;
+}
+
 /**
  * Convert a pixels given value into rem
  *