@ionic/core 8.8.4-dev.11776178970.14763043 → 8.8.4-dev.11776184632.103b8351

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,19 @@ export class ActionSheet {
             if (isRadio) {
                 htmlAttrs['aria-checked'] = isActiveRadio ? 'true' : 'false';
             }
+            const optionLabelOptions = {
+                id: buttonId,
+                label: b.text,
+                startContent: b.startContent,
+                endContent: b.endContent,
+                description: b.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 +397,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: '32d662676784385bf348708be6560929ca1599f8', 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: '8b84d7292ffcf68138fff9cd0ec6455c91c9cd25', tappable: this.backdropDismiss }), h("div", { key: '2a733b2adef42786bec7ce9c29a29d0935952430', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '1846b99afa26e30b6344e5a860300254e61f3692', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'c6a5a986304767935a6de7e01b5ca3feddc2c0d0', class: "action-sheet-container" }, h("div", { key: '467fdb1c8468ca25e733606e0b427ad3888885e3', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (h("div", { key: 'e06690113e9c4da1089bd3495c819f72d7505574', 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: 'b607fe7d470703d7b4f123413cf27487a5bb1bfe', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (h("div", { key: '35c91756085c12ab97239366350b800110381142', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '803428a3d1a389b2dc4930cc46884dc2e2b137b0' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '38e86d26fa8fcd32d0ab13640b2701e458854542', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: 'bec1f332fcfa4b906d09dabae6c01bba1ef88460', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && h("ion-ripple-effect", { key: 'b7cfbaa5a5e5aab0f2317e7bb019802ac4ed3481' })))))), h("div", { key: 'c2527fc1383b7d9388ffbf6ab56461daf986a52d', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-action-sheet"; }
     static get encapsulation() { return "scoped"; }
@@ -402,14 +410,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
  *