@ionic/core 8.8.14-dev.11784222473.142aed23 → 8.8.14-dev.11784243422.11f0110c

package/dist/collection/components/alert/alert.md.css

@@ -1,3 +1,168 @@
+/**
+ * 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 {
+  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;
+}
+
+.select-option-description {
+  padding-left: 0;
+  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.
+ */
+.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;
+}
+
+/**
+ * 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-end > ion-avatar {
+  width: 40px;
+  height: 40px;
+}
+
+.select-option-start > ion-icon,
+.select-option-end > ion-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.select-option-start > ion-img,
+.select-option-start > img,
+.select-option-start > svg,
+.select-option-start > ion-thumbnail,
+.select-option-end > ion-img,
+.select-option-end > img,
+.select-option-end > svg,
+.select-option-end > ion-thumbnail {
+  width: 56px;
+  height: 56px;
+}
+
+.select-option-start > video,
+.select-option-end > video {
+  width: 114px;
+  height: 56px;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -242,6 +407,39 @@
   min-height: inherit;
 }
 
+/**
+ * Label is on the right of the radio in LTR and
+ * on the left in RTL.
+ */
+.radio-label-placement-start,
+.checkbox-label-placement-start {
+  flex-direction: row-reverse;
+}
+
+/**
+ * Label is on the left of the radio in LTR and
+ * on the right in RTL.
+ */
+.radio-label-placement-end,
+.checkbox-label-placement-end {
+  flex-direction: row;
+}
+
+.radio-justify-start,
+.checkbox-justify-start {
+  justify-content: start;
+}
+
+.radio-justify-end,
+.checkbox-justify-end {
+  justify-content: end;
+}
+
+.radio-justify-space-between,
+.checkbox-justify-space-between {
+  justify-content: space-between;
+}
+
 .alert-input-disabled,
 .alert-checkbox-button-disabled .alert-button-inner,
 .alert-radio-button-disabled .alert-button-inner {
@@ -419,10 +617,10 @@ textarea.alert-input {
 }
 
 .alert-head {
-  -webkit-padding-start: 23px;
-  padding-inline-start: 23px;
-  -webkit-padding-end: 23px;
-  padding-inline-end: 23px;
+  -webkit-padding-start: 24px;
+  padding-inline-start: 24px;
+  -webkit-padding-end: 24px;
+  padding-inline-end: 24px;
   padding-top: 20px;
   padding-bottom: 15px;
   text-align: start;
@@ -522,30 +720,56 @@ textarea.alert-input {
 }
 
 .alert-radio-label {
-  -webkit-padding-start: 52px;
-  padding-inline-start: 52px;
-  -webkit-padding-end: 26px;
-  padding-inline-end: 26px;
   padding-top: 13px;
   padding-bottom: 13px;
-  flex: 1;
+  max-width: calc(100% - 20px);
   color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   font-size: 1rem;
 }
 
+.radio-label-placement-end .alert-radio-label {
+  /**
+   * The label's inline padding clears space for the icon on the icon's side.
+   * When the label is placed at the end, the icon is at the start, so the
+   * larger padding clears it on the start side.
+   */
+  -webkit-padding-start: 56px;
+  padding-inline-start: 56px;
+  -webkit-padding-end: 24px;
+  padding-inline-end: 24px;
+}
+
+.radio-label-placement-start .alert-radio-label {
+  /**
+   * The label's inline padding clears space for the icon on the icon's side.
+   * When the label is placed at the start, the icon is at the end, so the
+   * larger padding clears it on the end side.
+   */
+  -webkit-padding-start: 24px;
+  padding-inline-start: 24px;
+  -webkit-padding-end: 56px;
+  padding-inline-end: 56px;
+}
+
 .alert-radio-icon {
   top: 0;
   border-radius: 50%;
   display: block;
   position: relative;
+  flex-shrink: 0;
   width: 20px;
   height: 20px;
   border-width: 2px;
   border-style: solid;
   border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
 }
-.alert-radio-icon {
-  inset-inline-start: 26px;
+
+.radio-label-placement-end .alert-radio-icon {
+  inset-inline-start: 24px;
+}
+
+.radio-label-placement-start .alert-radio-icon {
+  inset-inline-end: 24px;
 }
 
 .alert-radio-inner {
@@ -575,22 +799,42 @@ textarea.alert-input {
 }
 
 .alert-checkbox-label {
-  -webkit-padding-start: 53px;
-  padding-inline-start: 53px;
-  -webkit-padding-end: 26px;
-  padding-inline-end: 26px;
   padding-top: 13px;
   padding-bottom: 13px;
-  flex: 1;
-  width: calc(100% - 53px);
+  max-width: calc(100% - 16px);
   color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   font-size: 1rem;
 }
 
+.checkbox-label-placement-end .alert-checkbox-label {
+  /**
+   * The label's inline padding clears space for the icon on the icon's side.
+   * When the label is placed at the end, the icon is at the start, so the
+   * larger padding clears it on the start side.
+   */
+  -webkit-padding-start: 56px;
+  padding-inline-start: 56px;
+  -webkit-padding-end: 24px;
+  padding-inline-end: 24px;
+}
+
+.checkbox-label-placement-start .alert-checkbox-label {
+  /**
+   * The label's inline padding clears space for the icon on the icon's side.
+   * When the label is placed at the start, the icon is at the end, so the
+   * larger padding clears it on the end side.
+   */
+  -webkit-padding-start: 24px;
+  padding-inline-start: 24px;
+  -webkit-padding-end: 56px;
+  padding-inline-end: 56px;
+}
+
 .alert-checkbox-icon {
   top: 0;
   border-radius: 2px;
   position: relative;
+  flex-shrink: 0;
   width: 16px;
   height: 16px;
   border-width: 2px;
@@ -598,8 +842,13 @@ textarea.alert-input {
   border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
   contain: strict;
 }
-.alert-checkbox-icon {
-  inset-inline-start: 26px;
+
+.checkbox-label-placement-end .alert-checkbox-icon {
+  inset-inline-start: 24px;
+}
+
+.checkbox-label-placement-start .alert-checkbox-icon {
+  inset-inline-end: 24px;
 }
 
 [aria-checked=true] .alert-checkbox-icon {
@@ -658,7 +907,7 @@ textarea.alert-input {
   overflow: hidden;
 }
 
-.alert-button-inner {
+.alert-button-group .alert-button-inner {
   justify-content: flex-end;
 }
 

package/dist/collection/components/img/img.js

@@ -3,8 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
+import { printIonWarning } from "../../utils/logging/index";
 import { getIonMode } from "../../global/ionic-global";
 /**
+ * @deprecated
+ *
  * @part image - The inner `img` element.
  */
 export class Img {
@@ -24,6 +27,8 @@ export class Img {
         this.inheritedAttributes = inheritAttributes(this.el, ['draggable']);
     }
     componentDidLoad() {
+        printIonWarning('[ion-img] - This component is deprecated and will be removed in Ionic v10. ' +
+            'Use a native <img> with the loading="lazy" attribute instead.', this.el);
         this.addIO();
     }
     disconnectedCallback() {
@@ -76,7 +81,7 @@ export class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (h(Host, { key: '9bfaa659b0680189fd29f3acb2fdce7f70be6060', class: getIonMode(this) }, h("img", { key: 'd484beae0d5cbe0406958bfad40cdd6c05625340', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (h(Host, { key: '57bfb44d9850381fe7b6fcf0c9019b03f7ef86ec', class: getIonMode(this) }, h("img", { key: '888ec06a266fa2751fc0147ede6a567f4e2b29a6', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     static get is() { return "ion-img"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input/input.js

@@ -56,7 +56,7 @@ export class Input {
         /**
          * Whether auto correction should be enabled when the user is entering/editing the text value.
          */
-        this.autocorrect = 'off';
+        this.autocorrect = false;
         /**
          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
          *
@@ -540,7 +540,7 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '9ba9cf425b573d2ca9ac34455a0e6b8474c4de6d', class: createColorClasses(this.color, {
+        return (h(Host, { key: '6a05f61339d8045285d5820c2508296cc842c210', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -551,14 +551,14 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '74b989d0aa5ab38f29f952519868f05119df6005', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '47f2b42e2f74ea866b4f871026e08ab375d7a726', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: 'eaabe5a4a329a356cac3294d15c087d0d131fff2', name: "start" }), h("input", Object.assign({ key: 'c821a984a8a9b7f96f30892c06d8deda093ff24b', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '62069c11016ee190dc46ab941372e1c4ad8a36ed', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: 'b546d66f53ea25082494e3a4cb0ce7532ee649d7', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '6af832f2b25fadee7a49adb999166dbc97565e2d', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: 'e7a8895038a8d2503f646acfda20c6c1a99c2839', name: "start" }), h("input", Object.assign({ key: 'ce85703e0434a6322bb4275a924e3cd91c79fa20', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '1e59589fc89a37d7830dc915b4c19d26a8f568c7', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'dd75a516d32110d85382b664c663bd41f177ce12', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '330d4b9389f2c62223a5ee24003e96ef3e6b2473', name: "end" })), shouldRenderHighlight && h("div", { key: '8e442bed130ddc84976ab70fd3f8578d6bcc6316', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '7d443c5061bf6436d3b77a2444676c679b3e62e4', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '5516f88d46886348217570ec1fadda0b79b63c01', name: "end" })), shouldRenderHighlight && h("div", { key: '2a1fdb7e7c974654dfbb3afb4fbfd9204e9d9092', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }
@@ -650,11 +650,11 @@ export class Input {
                 "defaultValue": "'off'"
             },
             "autocorrect": {
-                "type": "string",
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "'on' | 'off'",
-                    "resolved": "\"off\" | \"on\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -667,7 +667,7 @@ export class Input {
                 "setter": false,
                 "reflect": false,
                 "attribute": "autocorrect",
-                "defaultValue": "'off'"
+                "defaultValue": "false"
             },
             "autofocus": {
                 "type": "boolean",

package/dist/collection/components/loading/loading.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
-import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegateController, createTriggerController, setOverlayId, } from "../../utils/overlays";
+import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
@@ -114,6 +114,10 @@ export class Loading {
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
+        // Clean up aria-hidden if removed without dismiss() being called
+        if (this.presented) {
+            cleanupRootFocusTrapAccessibility();
+        }
     }
     /**
      * Present the loading overlay after it has been created.
@@ -179,9 +183,9 @@ export class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: 'f86ddbc600cb5c396b7de38fb5f49625388c3c3f', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'ab48bfcee8f7e3e33847a2f262fdc08b9ea804ca', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'b53727aaddc37ef3c685fcc150c6d5193290a847', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '4c61bede8e0a4e47daa6f1f9d0f364ef6aec0bc3', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '84e51ceb07118f1eaeb757df28801c255496931b', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'fc97f1912e0fc558b7c309a5bc084415f5f620b2', class: "loading-spinner" }, h("ion-spinner", { key: '6e186d856cd3f10f22c3e317ef00f31b4216459c', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'dcbe9d9a619daa1c08174e73827bdabeb59dde92', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '41baccc7fb6474389a3a3431c208e829ef738b75', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '7b7290974abbe8db8739b19835aca9f8b5c271c2', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'e32466abfcc92aaad47ea03b1dcb49f66abe4b63', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'c5e6e6f9e3f39dba0225d08d7dd2c1b96a1d83c7', class: "loading-spinner" }, h("ion-spinner", { key: 'f428038959d879404ea898011363aac0b807ad11', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '490e531367b86c319fa4260722dcff4dd631fa88', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/modal/modal.ios.css

@@ -126,14 +126,6 @@ ion-backdrop {
   z-index: 10;
 }
 
-/**
- * The wrapper receives programmatic focus for screen readers but should not
- * show a visible focus ring, which is meant only for keyboard navigation.
- */
-.modal-wrapper {
-  outline: none;
-}
-
 .modal-shadow {
   position: absolute;
   background: transparent;

package/dist/collection/components/modal/modal.js

@@ -8,7 +8,7 @@ import { raf, inheritAttributes, hasLazyBuild, getElementRoot } from "../../util
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { Style as StatusBarStyle, StatusBar } from "../../utils/native/status-bar";
-import { GESTURE, BACKDROP, dismiss, eventMethod, prepareOverlay, present, createTriggerController, setOverlayId, FOCUS_TRAP_DISABLE_CLASS, } from "../../utils/overlays";
+import { BACKDROP, cleanupRootFocusTrapAccessibility, createTriggerController, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, GESTURE, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
 import { config } from "../../global/config";
@@ -77,13 +77,20 @@ export class Modal {
         /**
          * The interaction behavior for the sheet modal when the handle is pressed.
          *
-         * Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed.
-         * Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.
+         * Handle behavior is unavailable when the `handle` property is set to
+         * `false` or when the `breakpoints` property is not set (using a
+         * fullscreen or card modal).
          *
-         * Handle behavior is unavailable when the `handle` property is set to `false` or
-         * when the `breakpoints` property is not set (using a fullscreen or card modal).
+         * Set to `"cycle"` to make the handle focusable and let the sheet modal
+         * cycle between available breakpoints when pressed. This keeps the sheet
+         * operable with assistive technology.
+         *
+         * Set to `"none"` to make the handle purely decorative when pressed and
+         * removed from the tab order.
+         *
+         * Defaults to `"cycle"`.
          */
-        this.handleBehavior = 'none';
+        this.handleBehavior = 'cycle';
         /**
          * If `true`, the modal will be dismissed when the backdrop is clicked.
          */
@@ -275,6 +282,10 @@ export class Modal {
         // Also called in dismiss() — intentional dual cleanup covers both
         // dismiss-then-remove and direct DOM removal without dismiss.
         this.cleanupSafeAreaOverrides();
+        // Clean up aria-hidden if removed without dismiss() being called
+        if (this.presented) {
+            cleanupRootFocusTrapAccessibility();
+        }
     }
     componentWillLoad() {
         var _a;
@@ -1162,26 +1173,20 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: 'ab93657f4a5b4c97168d292b398d975e4b5b4af4', "no-router": true,
+        return (h(Host, Object.assign({ key: '528f9e354f470e22563938e7531e3f23a97e4200', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '5ba6315c7c8c64fa04c62f85fd493da5275b2cbd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'a76c48d41c67f86c18a7481e980e6925e614f85d', class: "modal-shadow" }), h("div", Object.assign({ key: 'dccf3c774355429bc0ea7461d9b1ef941ea91902',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '53983c96bc6b30df89986c8d9c978a8e6f78fe80', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '34288a7343b7c47fed00d3abc73957f45f06d2fd', class: "modal-shadow" }), h("div", Object.assign({ key: 'f9b37f547bd5c61037bbad1a71bfed80ba8c630b',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
-  
-              tabIndex={-1} is required so present() can move focus to this
-              element (which carries the dialog role) instead of the role-less
-              host. role="dialog" alone does not make an element focusable, so
-              without the tabindex focus() would be a no-op and screen readers
-              may not properly announce the dialog and its content when it opens.
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'ba4ebd6364faba46ac8532d1c83cb655ae873a14', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'b8741594108d3ea681ff41ff8f2241a4119578b1', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '11d5921a8ebbcd0017d4f28a33d68049253f63f0', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'bcc7960fae3fed09076c704d08c3afc46caa0738', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -1453,13 +1458,13 @@ export class Modal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The interaction behavior for the sheet modal when the handle is pressed.\n\nDefaults to `\"none\"`, which  means the modal will not change size or position when the handle is pressed.\nSet to `\"cycle\"` to let the modal cycle between available breakpoints when pressed.\n\nHandle behavior is unavailable when the `handle` property is set to `false` or\nwhen the `breakpoints` property is not set (using a fullscreen or card modal)."
+                    "text": "The interaction behavior for the sheet modal when the handle is pressed.\n\nHandle behavior is unavailable when the `handle` property is set to\n`false` or when the `breakpoints` property is not set (using a\nfullscreen or card modal).\n\nSet to `\"cycle\"` to make the handle focusable and let the sheet modal\ncycle between available breakpoints when pressed. This keeps the sheet\noperable with assistive technology.\n\nSet to `\"none\"` to make the handle purely decorative when pressed and\nremoved from the tab order.\n\nDefaults to `\"cycle\"`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "handle-behavior",
-                "defaultValue": "'none'"
+                "defaultValue": "'cycle'"
             },
             "component": {
                 "type": "string",

package/dist/collection/components/modal/modal.md.css

@@ -126,14 +126,6 @@ ion-backdrop {
   z-index: 10;
 }
 
-/**
- * The wrapper receives programmatic focus for screen readers but should not
- * show a visible focus ring, which is meant only for keyboard navigation.
- */
-.modal-wrapper {
-  outline: none;
-}
-
 .modal-shadow {
   position: absolute;
   background: transparent;

package/dist/collection/components/popover/popover.ios.css

@@ -177,6 +177,21 @@
   }
 }
 
+:host(.select-popover-rich-content) {
+  /**
+   * Rich content options (start/end slots, descriptions) need
+   * more horizontal space than the default fixed width provides,
+   * otherwise content gets cut off.
+   *
+   * A viewport-relative value is used instead of `auto` or
+   * `max-content` because the enter animation reads `--width`
+   * via getBoundingClientRect() before the first layout pass
+   * completes. Intrinsic values return 0 at that point and
+   * cause the popover to be positioned off-screen on first open.
+   */
+  --width: clamp(250px, calc(100vw - 40px), 400px);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use