@ionic/core 8.8.9-dev.11781024903.1e4268e5 → 8.8.9-dev.11781098612.122c6758

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

@@ -1,248 +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
- * 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.
- *
- * 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.
- */
-.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 {
-  gap: 16px;
-}
-
-.action-sheet-button-label-text,
-.alert-checkbox-label-text,
-.alert-radio-label-text,
-.select-option-label-text {
-  gap: 12px;
-}
-
-.select-option-start,
-.select-option-end {
-  gap: 8px;
-}
-
-.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
- * 
- * @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;
- *   }
- * }
- */
-/**
- * Cap slotted children so they can't stretch the option
- * row out of proportion, keeping rows visually uniform
- * regardless of the content.
- */
-.select-option-start > ion-avatar,
-.select-option-start > ion-img,
-.select-option-start > ion-thumbnail,
-.select-option-start > img,
-.select-option-start > svg,
-.select-option-end > ion-avatar,
-.select-option-end > ion-img,
-.select-option-end > ion-thumbnail,
-.select-option-end > img,
-.select-option-end > svg {
-  width: 44px;
-  height: 44px;
-}
-
-.select-option-start > ion-icon,
-.select-option-end > ion-icon {
-  width: 28px;
-  height: 28px;
-}
-
-.action-sheet-button-label-text {
-  justify-content: center;
-}
-
-.select-option-has-rich-content {
-  -webkit-padding-end: 16px;
-  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
@@ -298,94 +53,6 @@
  *   }
  * }
  */
-/**
- * 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
@@ -431,15 +98,17 @@ 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;
-  right: 0;
   left: 0;
+  right: 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) {
@@ -447,8 +116,8 @@ ion-checkbox.select-option-has-rich-content::part(label),
 }
 
 .action-sheet-wrapper {
-  right: 0;
   left: 0;
+  right: 0;
   bottom: 0;
   transform: translate3d(0,  100%,  0);
   display: block;
@@ -459,6 +128,7 @@ 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;
 }
 
@@ -479,10 +149,6 @@ ion-checkbox.select-option-has-rich-content::part(label),
   opacity: 0.4;
 }
 
-.action-sheet-button:disabled ion-icon {
-  color: currentColor;
-}
-
 .action-sheet-button-inner {
   display: flex;
   position: relative;
@@ -538,8 +204,8 @@ ion-checkbox.select-option-has-rich-content::part(label),
 }
 
 .action-sheet-button::after {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -550,7 +216,6 @@ 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);
@@ -559,26 +224,19 @@ 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);
 }
 
-.action-sheet-button.ion-focused:not(.ion-activated) {
+.action-sheet-button.ion-focused {
   color: var(--button-color-focused);
 }
-
-.action-sheet-button.ion-focused:not(.ion-activated)::after {
+.action-sheet-button.ion-focused::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));
-}
-
 @media (any-hover: hover) {
   .action-sheet-button:not(:disabled):hover {
     color: var(--button-color-hover);
@@ -588,21 +246,6 @@ 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
@@ -663,11 +306,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: 0.08;
+  --button-background-activated-opacity: .08;
   --button-background-hover: currentColor;
-  --button-background-hover-opacity: 0.04;
+  --button-background-hover-opacity: .04;
   --button-background-focused: currentColor;
-  --button-background-focused-opacity: 0.12;
+  --button-background-focused-opacity: .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

@@ -5,17 +5,15 @@ import { Host, h, readTask } from "@stencil/core";
 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 { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
-import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } 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 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.
  */
 export class ActionSheet {
     constructor() {
@@ -40,7 +38,7 @@ export class ActionSheet {
         this.backdropDismiss = true;
         /**
          * If `true`, the action sheet 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;
@@ -286,6 +284,10 @@ export class ActionSheet {
             this.gesture = undefined;
         }
         this.triggerController.removeClickListener();
+        // Clean up aria-hidden if removed without dismiss() being called
+        if (this.presented) {
+            cleanupRootFocusTrapAccessibility();
+        }
     }
     componentWillLoad() {
         var _a;
@@ -296,7 +298,6 @@ export class ActionSheet {
         this.buttonsChanged();
     }
     componentDidLoad() {
-        const mode = getIonMode(this);
         /**
          * Only create gesture if:
          * 1. A gesture does not already exist
@@ -305,7 +306,7 @@ export class ActionSheet {
          * 4. A group ref exists
          */
         const { groupEl, wrapperEl } = this;
-        if (!this.gesture && mode === 'ios' && wrapperEl && groupEl) {
+        if (!this.gesture && getIonMode(this) === 'ios' && wrapperEl && groupEl) {
             readTask(() => {
                 const isScrollable = groupEl.scrollHeight > groupEl.clientHeight;
                 if (!isScrollable) {
@@ -333,7 +334,7 @@ export class ActionSheet {
         this.triggerChanged();
     }
     renderActionSheetButtons(filteredButtons) {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const { activeRadioId } = this;
         return filteredButtons.map((b, index) => {
             var _a;
@@ -375,56 +376,40 @@ 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)), (isRadio && { '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" }), renderOptionLabel(optionLabelOptions, 'action-sheet-button-label', true)), 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" }), b.text), mode === 'md' && h("ion-ripple-effect", null)));
         });
     }
     render() {
         const { header, htmlAttributes, overlayIndex, hasRadioButtons } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(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, Object.assign({ key: '686ad4bf09a5f90bec0a80381b673f00b798345a', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '572ea2b7b7ffd902186a17f8063e46f4e7360633', 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: '9a9d56159c030c5a9f23b588350abdc69806d825', tappable: this.backdropDismiss }), h("div", { key: 'd851dd250c9e371f77618aefae1ca17273e56455', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'b3779f483a4d761b38e73a1f24eb2640c5f2b9ee', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '91bc56942ef4530b88d83b6a50c0a9b6e0c7eea5', class: "action-sheet-container" }, h("div", { key: '815ab417de569a79c59b116e2daf651947a8dafc', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (h("div", { key: '065c2d9a7466d5bbfadacae2c3defb7c657c02c7', id: headerID, class: {
+            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '065f29ec2021e25fdde59707a42cbacd4f9319c6', tappable: this.backdropDismiss }), h("div", { key: 'c92615ae5b292bfd223cee644c07f144f5f1d974', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'd4b30e289503203048420c35ac447dfff72c9183', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '7fc9bcc2f32666e170cd2052ce2b359b3915da60', class: "action-sheet-container" }, h("div", { key: 'd85ff13a6029bbe081053e818eeaa115327abdc1', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (h("div", { key: 'c743f928302e20007219fbcdd1e5c2efa662d3d9', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { key: 'f516079993b9db392a19ab6d341d41b72d5958b4', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (h("div", { key: 'e1f1a5df31837663a3c386d7be23760ddf5ed84a', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'a1e87b6f25d1504562547f70b406327c07105578' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '26d5d7325648b0ebcf9c586ab62825dbc53e77eb', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: 'b7ff6919503142323acc87683f83fc4ef32435a9', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && h("ion-ripple-effect", { key: '40fff3b72af7d0399aebf66081a58c57cd45f07f' })))))), h("div", { key: '68d21ad90f00e0bb1f4dde673411bb8d8d675aad', tabindex: "0", "aria-hidden": "true" })));
+            } }, header, this.subHeader && h("div", { key: '2cce9ba82989d893052cb6acf88677058a7b26ce', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (h("div", { key: 'cf91d8a47838570e4c533694614bb6ad46f20ac7', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '5ffc9e3d9f4db002a1112ed71977a407edb9f86e' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: 'e0802b849fef77fd8158cbfee23adf7fc6e08d62', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '991a60ebf6966e5815f849325c4e9c571a31fdeb', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: 'af533882239ba0d4e98691e38d517fbcee858a6d' })))))), h("div", { key: '7107a8b235b00bf48486db95f66ac3ba53faf157', 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"],
-            "ionic": ["action-sheet.ionic.scss"]
+            "md": ["action-sheet.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["action-sheet.ios.css"],
-            "md": ["action-sheet.md.css"],
-            "ionic": ["action-sheet.ionic.css"]
+            "md": ["action-sheet.md.css"]
         };
     }
     static get properties() {
@@ -683,7 +668,7 @@ export class ActionSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "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)."
+                    "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)."
                 },
                 "getter": false,
                 "setter": false,