@ionic/core 7.7.2-dev.11707932366.16baf005 → 7.7.2-dev.11707941206.120570b8

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

@@ -249,7 +249,7 @@
 }
 
 :host(.popover-desktop) .popover-content {
-  border: 0.5px solid var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+  border: 0.5px solid var(--ion-color-step-100, #e6e6e6);
 }
 
 .popover-arrow {
@@ -258,6 +258,13 @@
   width: 20px;
   height: 10px;
   overflow: hidden;
+  /*
+   * Required for the arrow to render above the backdrop.
+   * Otherwise, the arrow will appear slightly transparent.
+   * The value is set to 11 since it's the minimum value that
+   * will allow the arrow to render above the backdrop.
+   */
+  z-index: 11;
 }
 
 .popover-arrow::after {
@@ -271,8 +278,32 @@
   content: "";
   z-index: 10;
 }
-.popover-arrow::after {
-  inset-inline-start: 3px;
+@supports (inset-inline-start: 0) {
+  .popover-arrow::after {
+    inset-inline-start: 3px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .popover-arrow::after {
+    left: 3px;
+  }
+  :host-context([dir=rtl]) .popover-arrow::after {
+    left: unset;
+    right: unset;
+    right: 3px;
+  }
+  [dir=rtl] .popover-arrow::after {
+    left: unset;
+    right: unset;
+    right: 3px;
+  }
+  @supports selector(:dir(rtl)) {
+    .popover-arrow::after:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 3px;
+    }
+  }
 }
 
 :host(.popover-bottom) .popover-arrow {

package/dist/collection/components/popover/popover.js

@@ -331,9 +331,9 @@ export class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '5c65659c22a8190ac3f7488fe97b8fe3545bb32a', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'f335ae001173483e6a973b2084f8a7b6b895ae5d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '6055fc5309dadb56d6c17f0a1cb19631e6e5731e', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: '71f67c60fee7a29c2883c0350f19493793527be9', class: "popover-content", part: "content" }, h("slot", { key: '8fdf91d4c5ae7db8be34bfd03f703b613c73d64f' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '8468f39b0a0f30b42ae9cac51950e5f0b9be1069', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: 'cb4eeaef385187f3c8e566931844e30edd5451c4', class: "popover-content", part: "content" }, h("slot", { key: '80a5739a4beb6eba150503e426104701954c90b9' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.ios.css

@@ -57,9 +57,11 @@
   /**
    * @prop --background: Background of the progress track, or the buffer bar if `buffer` is set
    * @prop --progress-background: Background of the progress bar representing the current value
+   * @prop --buffer-background: DEPRECATED, use `--background` instead
    */
-  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.3);
-  --progress-background: var(--ion-color-primary, #0054e9);
+  --background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.3);
+  --progress-background: var(--ion-color-primary, #3880ff);
+  --buffer-background: var(--background);
   display: block;
   position: relative;
   width: 100%;
@@ -113,7 +115,7 @@
 }
 
 .progress-buffer-bar {
-  background: var(--background);
+  background: var(--buffer-background);
   z-index: 1;
 }
 
@@ -150,7 +152,7 @@
 }
 
 .buffer-circles {
-  background-image: radial-gradient(ellipse at center, var(--background) 0%, var(--background) 30%, transparent 30%);
+  background-image: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%);
   /* stylelint-disable property-disallowed-list */
   background-repeat: repeat-x;
   background-position: 5px center;
@@ -170,6 +172,10 @@
   animation-play-state: paused;
 }
 
+:host(.ion-color) .progress-buffer-bar {
+  background: rgba(var(--ion-color-base-rgb), 0.3);
+}
+
 :host(.ion-color) .buffer-circles {
   background-image: radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%);
 }
@@ -251,17 +257,5 @@
   }
 }
 :host {
-  border-radius: 9999px;
-  height: 4px;
-}
-
-:host(.progress-bar-solid) {
-  /**
-   * On iOS the unfilled portion of the progress bar
-   * is always a consistent background color. We
-   * only apply this style when the progress bar is
-   * solid (with a buffer value of 1). This maintains
-   * the custom Ionic appearance for a buffered progress bar.
-   */
-  --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+  height: 3px;
 }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -26,14 +26,11 @@ export class ProgressBar {
         const { color, type, reversed, value, buffer } = this;
         const paused = config.getBoolean('_testing');
         const mode = getIonMode(this);
-        // If the progress is displayed as a solid bar.
-        const progressSolid = buffer === 1;
-        return (h(Host, { key: '56492aa6ed11b803c68a3cc3dbe65871b77af53a', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: '384d09558f91dc8119e689c3a8923e67c54c7eb2', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,
                 'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
-                'progress-bar-solid': progressSolid,
             }) }, type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)));
     }
     static get is() { return "ion-progress-bar"; }

package/dist/collection/components/progress-bar/progress-bar.md.css

@@ -57,9 +57,11 @@
   /**
    * @prop --background: Background of the progress track, or the buffer bar if `buffer` is set
    * @prop --progress-background: Background of the progress bar representing the current value
+   * @prop --buffer-background: DEPRECATED, use `--background` instead
    */
-  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.3);
-  --progress-background: var(--ion-color-primary, #0054e9);
+  --background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.3);
+  --progress-background: var(--ion-color-primary, #3880ff);
+  --buffer-background: var(--background);
   display: block;
   position: relative;
   width: 100%;
@@ -113,7 +115,7 @@
 }
 
 .progress-buffer-bar {
-  background: var(--background);
+  background: var(--buffer-background);
   z-index: 1;
 }
 
@@ -150,7 +152,7 @@
 }
 
 .buffer-circles {
-  background-image: radial-gradient(ellipse at center, var(--background) 0%, var(--background) 30%, transparent 30%);
+  background-image: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%);
   /* stylelint-disable property-disallowed-list */
   background-repeat: repeat-x;
   background-position: 5px center;
@@ -170,6 +172,10 @@
   animation-play-state: paused;
 }
 
+:host(.ion-color) .progress-buffer-bar {
+  background: rgba(var(--ion-color-base-rgb), 0.3);
+}
+
 :host(.ion-color) .buffer-circles {
   background-image: radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%);
 }
@@ -252,8 +258,4 @@
 }
 :host {
   height: 4px;
-}
-
-:host(.ion-color) .progress-buffer-bar {
-  background: rgba(var(--ion-color-base-rgb), 0.3);
 }

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

@@ -63,12 +63,15 @@
   --inner-border-radius: 50%;
   display: inline-block;
   position: relative;
+  box-sizing: border-box;
   max-width: 100%;
   min-height: inherit;
-  cursor: pointer;
   user-select: none;
   z-index: 2;
-  box-sizing: border-box;
+}
+
+:host(:not(.legacy-radio)) {
+  cursor: pointer;
 }
 
 :host(.radio-disabled) {
@@ -89,6 +92,50 @@
   box-sizing: border-box;
 }
 
+:host(.legacy-radio) label {
+  top: 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  appearance: none;
+  outline: none;
+  display: flex;
+  align-items: center;
+  opacity: 0;
+}
+@supports (inset-inline-start: 0) {
+  :host(.legacy-radio) label {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.legacy-radio) label {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.legacy-radio) label, :host-context([dir=rtl]).legacy-radio label {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.legacy-radio:dir(rtl)) label {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
+}
+:host(.legacy-radio) label::-moz-focus-inner {
+  border: 0;
+}
+
 input {
   position: absolute;
   top: 0;
@@ -112,7 +159,7 @@ input {
   outline: none;
 }
 
-:host(.in-item) {
+:host(.in-item:not(.legacy-radio)) {
   width: 100%;
   height: 100%;
 }
@@ -123,8 +170,8 @@ input {
  * toolbar which is why we do not
  * limit the below behavior to just ion-item.
  */
-:host([slot=start]),
-:host([slot=end]) {
+:host([slot=start]:not(.legacy-radio)),
+:host([slot=end]:not(.legacy-radio)) {
   width: auto;
 }
 
@@ -144,7 +191,7 @@ input {
   overflow: hidden;
 }
 
-:host(.in-item) .label-text-wrapper {
+:host(.in-item:not(.legacy-radio)) .label-text-wrapper {
   margin-top: 10px;
   margin-bottom: 10px;
 }
@@ -415,7 +462,12 @@ input {
  * }
  */
 :host {
-  --color-checked: var(--ion-color-primary, #0054e9);
+  --color-checked: var(--ion-color-primary, #3880ff);
+}
+
+:host(.legacy-radio) {
+  width: 0.9375rem;
+  height: 1.5rem;
 }
 
 :host(.ion-color.radio-checked) .radio-inner {
@@ -452,12 +504,51 @@ input {
   position: absolute;
   width: 36px;
   height: 36px;
-  background: var(--ion-color-primary-tint, #1a65eb);
+  background: var(--ion-color-primary-tint, #4c8dff);
   content: "";
   opacity: 0.2;
 }
-:host(.ion-focused) .radio-icon::after {
-  inset-inline-start: -9px;
+@supports (inset-inline-start: 0) {
+  :host(.ion-focused) .radio-icon::after {
+    inset-inline-start: -9px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.ion-focused) .radio-icon::after {
+    left: -9px;
+  }
+  :host-context([dir=rtl]):host(.ion-focused) .radio-icon::after, :host-context([dir=rtl]).ion-focused .radio-icon::after {
+    left: unset;
+    right: unset;
+    right: -9px;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.ion-focused:dir(rtl)) .radio-icon::after {
+      left: unset;
+      right: unset;
+      right: -9px;
+    }
+  }
+}
+
+:host(.in-item.legacy-radio) {
+  -webkit-margin-start: 8px;
+  margin-inline-start: 8px;
+  -webkit-margin-end: 11px;
+  margin-inline-end: 11px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  display: block;
+  position: static;
+}
+
+:host(.in-item.legacy-radio[slot=start]) {
+  -webkit-margin-start: 3px;
+  margin-inline-start: 3px;
+  -webkit-margin-end: 21px;
+  margin-inline-end: 21px;
+  margin-top: 8px;
+  margin-bottom: 8px;
 }
 
 .native-wrapper .radio-icon {

package/dist/collection/components/radio/radio.js

@@ -2,8 +2,9 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { isOptionSelected } from "../../utils/forms/index";
-import { addEventListener, removeEventListener } from "../../utils/helpers";
+import { createLegacyFormController, isOptionSelected } from "../../utils/forms/index";
+import { addEventListener, getAriaLabel, removeEventListener } from "../../utils/helpers";
+import { printIonWarning } from "../../utils/logging/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 /**
@@ -19,6 +20,8 @@ export class Radio {
     constructor() {
         this.inputId = `ion-rb-${radioButtonIds++}`;
         this.radioGroup = null;
+        // This flag ensures we log the deprecation warning at most once.
+        this.hasLoggedDeprecationWarning = false;
         this.updateState = () => {
             if (this.radioGroup) {
                 const { compareWith, value: radioGroupValue } = this.radioGroup;
@@ -30,6 +33,17 @@ export class Radio {
             if (disabled) {
                 return;
             }
+            /**
+             * The legacy control uses a native input inside
+             * of the radio host, so we can set this.checked
+             * to the state of the nativeInput. RadioGroup
+             * will prevent the native input from checking if
+             * allowEmptySelection="false" by calling ev.preventDefault().
+             */
+            if (this.legacyFormController.hasLegacyControl()) {
+                this.checked = this.nativeInput.checked;
+                return;
+            }
             /**
              * The modern control does not use a native input
              * inside of the radio host, so we cannot rely on the
@@ -59,6 +73,7 @@ export class Radio {
         this.disabled = false;
         this.value = undefined;
         this.labelPlacement = 'start';
+        this.legacy = undefined;
         this.justify = 'space-between';
         this.alignment = 'center';
     }
@@ -81,6 +96,7 @@ export class Radio {
         this.buttonTabindex = value;
     }
     connectedCallback() {
+        this.legacyFormController = createLegacyFormController(this.el);
         if (this.value === undefined) {
             this.value = this.inputId;
         }
@@ -97,6 +113,23 @@ export class Radio {
             this.radioGroup = null;
         }
     }
+    componentWillLoad() {
+        this.emitStyle();
+    }
+    styleChanged() {
+        this.emitStyle();
+    }
+    emitStyle() {
+        const style = {
+            'interactive-disabled': this.disabled,
+            // TODO(FW-3125): remove this
+            legacy: !!this.legacy,
+        };
+        if (this.legacyFormController.hasLegacyControl()) {
+            style['radio-checked'] = this.checked;
+        }
+        this.ionStyle.emit(style);
+    }
     get hasLabel() {
         return this.el.textContent !== '';
     }
@@ -104,10 +137,14 @@ export class Radio {
         return (h("div", { class: "radio-icon", part: "container" }, h("div", { class: "radio-inner", part: "mark" }), h("div", { class: "radio-ripple" })));
     }
     render() {
+        const { legacyFormController } = this;
+        return legacyFormController.hasLegacyControl() ? this.renderLegacyRadio() : this.renderRadio();
+    }
+    renderRadio() {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: '5ec600f0eb6e0fb1843d1c9960bd4632a162f2de', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -118,10 +155,37 @@ export class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '4da2ed7feadcad1ede7c32a0c6a9558339221ef8', class: "radio-wrapper" }, h("div", { key: '2190f49a40c13bfc3033fa26d7532a1469dffeae', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { class: "radio-wrapper" }, h("div", { class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: 'a0678ee1668f618492d54b2bff3f95927fbfb53d' })), h("div", { key: '93eb5e7188f4dd4490d1194a4017ea5546567ea0', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", null)), h("div", { class: "native-wrapper" }, this.renderRadioControl()))));
+    }
+    renderLegacyRadio() {
+        if (!this.hasLoggedDeprecationWarning) {
+            printIonWarning(`ion-radio now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute.
+
+Example: <ion-radio>Option Label</ion-radio>
+Example with aria-label: <ion-radio aria-label="Option Label"></ion-radio>
+
+Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el);
+            if (this.legacy) {
+                printIonWarning(`ion-radio is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.
+
+Developers can dismiss this warning by removing their usage of the "legacy" property and using the new radio syntax.`, this.el);
+            }
+            this.hasLoggedDeprecationWarning = true;
+        }
+        const { inputId, disabled, checked, color, el, buttonTabindex } = this;
+        const mode = getIonMode(this);
+        const { label, labelId, labelText } = getAriaLabel(el, inputId);
+        return (h(Host, { "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, "aria-labelledby": label ? labelId : null, role: "radio", tabindex: buttonTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+                [mode]: true,
+                'in-item': hostContext('ion-item', el),
+                interactive: true,
+                'radio-checked': checked,
+                'radio-disabled': disabled,
+                'legacy-radio': true,
+            }) }, this.renderRadioControl(), h("label", { htmlFor: inputId }, labelText), h("input", { type: "radio", checked: checked, disabled: disabled, tabindex: "-1", id: inputId, ref: (nativeEl) => (this.nativeInput = nativeEl) })));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -233,6 +297,23 @@ export class Radio {
                 "reflect": false,
                 "defaultValue": "'start'"
             },
+            "legacy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup."
+                },
+                "attribute": "legacy",
+                "reflect": false
+            },
             "justify": {
                 "type": "string",
                 "mutable": false,
@@ -279,6 +360,30 @@ export class Radio {
     }
     static get events() {
         return [{
+                "method": "ionStyle",
+                "name": "ionStyle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Emitted when the styles change."
+                },
+                "complexType": {
+                    "original": "StyleEventDetail",
+                    "resolved": "StyleEventDetail",
+                    "references": {
+                        "StyleEventDetail": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::StyleEventDetail"
+                        }
+                    }
+                }
+            }, {
                 "method": "ionFocus",
                 "name": "ionFocus",
                 "bubbles": true,
@@ -371,6 +476,15 @@ export class Radio {
         return [{
                 "propName": "value",
                 "methodName": "valueChanged"
+            }, {
+                "propName": "checked",
+                "methodName": "styleChanged"
+            }, {
+                "propName": "color",
+                "methodName": "styleChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "styleChanged"
             }];
     }
 }