voyager-ionic-core 7.7.2 → 8.0.0-beta.1

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

@@ -26,11 +26,14 @@ export class ProgressBar {
         const { color, type, reversed, value, buffer } = this;
         const paused = config.getBoolean('_testing');
         const mode = getIonMode(this);
-        return (h(Host, { key: '384d09558f91dc8119e689c3a8923e67c54c7eb2', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        // If the progress is displayed as a solid bar.
+        const progressSolid = buffer === 1;
+        return (h(Host, { key: '78a32304c7164cb78145a91be7bb9b86ecd11b66', 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,11 +57,9 @@
   /**
    * @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, 56, 128, 255), 0.3);
-  --progress-background: var(--ion-color-primary, #3880ff);
-  --buffer-background: var(--background);
+  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.3);
+  --progress-background: var(--ion-color-primary, #0054e9);
   display: block;
   position: relative;
   width: 100%;
@@ -115,7 +113,7 @@
 }
 
 .progress-buffer-bar {
-  background: var(--buffer-background);
+  background: var(--background);
   z-index: 1;
 }
 
@@ -152,7 +150,7 @@
 }
 
 .buffer-circles {
-  background-image: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%);
+  background-image: radial-gradient(ellipse at center, var(--background) 0%, var(--background) 30%, transparent 30%);
   /* stylelint-disable property-disallowed-list */
   background-repeat: repeat-x;
   background-position: 5px center;
@@ -172,10 +170,6 @@
   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%);
 }
@@ -258,4 +252,8 @@
 }
 :host {
   height: 4px;
+}
+
+:host(.ion-color) .progress-buffer-bar {
+  background: rgba(var(--ion-color-base-rgb), 0.3);
 }

package/dist/collection/components/progress-bar/test/a11y/progress-bar.e2e.js

@@ -0,0 +1,24 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import AxeBuilder from "@axe-core/playwright";
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+    test.describe(title('progress-bar: a11y'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            /**
+             * All page content should be contained by landmarks (main, nav, etc.)
+             * By containing the badge in a main element, we can avoid this violation.
+             */
+            await page.setContent(`
+          <main>
+            <ion-progress-bar type="indeterminate" aria-label="default"></ion-progress-bar>
+            <ion-progress-bar buffer="0.10" value="0.02" aria-label="buffer"></ion-progress-bar>
+          </main>
+        `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});

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

@@ -63,15 +63,12 @@
   --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;
-}
-
-:host(:not(.legacy-radio)) {
-  cursor: pointer;
+  box-sizing: border-box;
 }
 
 :host(.radio-disabled) {
@@ -92,50 +89,6 @@
   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;
@@ -159,7 +112,7 @@ input {
   outline: none;
 }
 
-:host(.in-item:not(.legacy-radio)) {
+:host(.in-item) {
   width: 100%;
   height: 100%;
 }
@@ -170,8 +123,8 @@ input {
  * toolbar which is why we do not
  * limit the below behavior to just ion-item.
  */
-:host([slot=start]:not(.legacy-radio)),
-:host([slot=end]:not(.legacy-radio)) {
+:host([slot=start]),
+:host([slot=end]) {
   width: auto;
 }
 
@@ -191,7 +144,7 @@ input {
   overflow: hidden;
 }
 
-:host(.in-item:not(.legacy-radio)) .label-text-wrapper {
+:host(.in-item) .label-text-wrapper {
   margin-top: 10px;
   margin-bottom: 10px;
 }
@@ -462,12 +415,7 @@ input {
  * }
  */
 :host {
-  --color-checked: var(--ion-color-primary, #3880ff);
-}
-
-:host(.legacy-radio) {
-  width: 0.9375rem;
-  height: 1.5rem;
+  --color-checked: var(--ion-color-primary, #0054e9);
 }
 
 :host(.ion-color.radio-checked) .radio-inner {
@@ -504,51 +452,12 @@ input {
   position: absolute;
   width: 36px;
   height: 36px;
-  background: var(--ion-color-primary-tint, #4c8dff);
+  background: var(--ion-color-primary-tint, #1a65eb);
   content: "";
   opacity: 0.2;
 }
-@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;
+:host(.ion-focused) .radio-icon::after {
+  inset-inline-start: -9px;
 }
 
 .native-wrapper .radio-icon {

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

@@ -2,9 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { createLegacyFormController, isOptionSelected } from "../../utils/forms/index";
-import { addEventListener, getAriaLabel, removeEventListener } from "../../utils/helpers";
-import { printIonWarning } from "../../utils/logging/index";
+import { isOptionSelected } from "../../utils/forms/index";
+import { addEventListener, removeEventListener } from "../../utils/helpers";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 /**
@@ -20,8 +19,6 @@ 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;
@@ -33,17 +30,6 @@ 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
@@ -73,7 +59,6 @@ export class Radio {
         this.disabled = false;
         this.value = undefined;
         this.labelPlacement = 'start';
-        this.legacy = undefined;
         this.justify = 'space-between';
         this.alignment = 'center';
     }
@@ -96,7 +81,6 @@ export class Radio {
         this.buttonTabindex = value;
     }
     connectedCallback() {
-        this.legacyFormController = createLegacyFormController(this.el);
         if (this.value === undefined) {
             this.value = this.inputId;
         }
@@ -113,23 +97,6 @@ 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 !== '';
     }
@@ -137,14 +104,10 @@ 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, { onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '46bb0202f75b6cc81df10de71fbe971dc4dcaa68', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -155,37 +118,10 @@ 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", { class: "radio-wrapper" }, h("div", { class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '55061e8cc857752d963c9e4a65f46727f5c2cd9d', class: "radio-wrapper" }, h("div", { key: '589fd41fccd0e6d007e7bc502067f3f2447e4b80', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, 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) })));
+            }, part: "label" }, h("slot", { key: '0076f1f3b64c1a0cf2bc511424956a63d6cf2db9' })), h("div", { key: '1505a84e6dc8715f8fcb19ce94fab79e624a0622', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -297,23 +233,6 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
                 "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,
@@ -360,30 +279,6 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
     }
     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,
@@ -476,15 +371,6 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         return [{
                 "propName": "value",
                 "methodName": "valueChanged"
-            }, {
-                "propName": "checked",
-                "methodName": "styleChanged"
-            }, {
-                "propName": "color",
-                "methodName": "styleChanged"
-            }, {
-                "propName": "disabled",
-                "methodName": "styleChanged"
             }];
     }
 }

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

@@ -63,15 +63,12 @@
   --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;
-}
-
-:host(:not(.legacy-radio)) {
-  cursor: pointer;
+  box-sizing: border-box;
 }
 
 :host(.radio-disabled) {
@@ -92,50 +89,6 @@
   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;
@@ -159,7 +112,7 @@ input {
   outline: none;
 }
 
-:host(.in-item:not(.legacy-radio)) {
+:host(.in-item) {
   width: 100%;
   height: 100%;
 }
@@ -170,8 +123,8 @@ input {
  * toolbar which is why we do not
  * limit the below behavior to just ion-item.
  */
-:host([slot=start]:not(.legacy-radio)),
-:host([slot=end]:not(.legacy-radio)) {
+:host([slot=start]),
+:host([slot=end]) {
   width: auto;
 }
 
@@ -191,7 +144,7 @@ input {
   overflow: hidden;
 }
 
-:host(.in-item:not(.legacy-radio)) .label-text-wrapper {
+:host(.in-item) .label-text-wrapper {
   margin-top: 10px;
   margin-bottom: 10px;
 }
@@ -463,17 +416,12 @@ input {
  */
 :host {
   --color: rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);
-  --color-checked: var(--ion-color-primary, #3880ff);
+  --color-checked: var(--ion-color-primary, #0054e9);
   --border-width: 0.125rem;
   --border-style: solid;
   --border-radius: 50%;
 }
 
-:host(.legacy-radio) {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 :host(.ion-color) .radio-inner {
   background: var(--ion-color-base);
 }
@@ -510,7 +458,6 @@ input {
   transform: scale3d(1, 1, 1);
 }
 
-:host(.legacy-radio.radio-disabled),
 :host(.radio-disabled) .label-text-wrapper {
   opacity: 0.38;
 }
@@ -519,61 +466,17 @@ input {
   opacity: 0.63;
 }
 
-:host(.ion-focused.legacy-radio) .radio-icon::after {
-  top: -12px;
-}
-@supports (inset-inline-start: 0) {
-  :host(.ion-focused.legacy-radio) .radio-icon::after {
-    inset-inline-start: -12px;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.ion-focused.legacy-radio) .radio-icon::after {
-    left: -12px;
-  }
-  :host-context([dir=rtl]):host(.ion-focused.legacy-radio) .radio-icon::after, :host-context([dir=rtl]).ion-focused.legacy-radio .radio-icon::after {
-    left: unset;
-    right: unset;
-    right: -12px;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.ion-focused.legacy-radio:dir(rtl)) .radio-icon::after {
-      left: unset;
-      right: unset;
-      right: -12px;
-    }
-  }
-}
-
 :host(.ion-focused) .radio-icon::after {
   border-radius: var(--inner-border-radius);
   display: block;
   position: absolute;
   width: 36px;
   height: 36px;
-  background: var(--ion-color-primary-tint, #4c8dff);
+  background: var(--ion-color-primary-tint, #1a65eb);
   content: "";
   opacity: 0.2;
 }
 
-:host(.in-item.legacy-radio) {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 9px;
-  margin-bottom: 9px;
-  display: block;
-  position: static;
-}
-
-:host(.in-item.legacy-radio[slot=start]) {
-  -webkit-margin-start: 4px;
-  margin-inline-start: 4px;
-  -webkit-margin-end: 36px;
-  margin-inline-end: 36px;
-  margin-top: 11px;
-  margin-bottom: 10px;
-}
-
 .native-wrapper .radio-icon {
   width: 1.25rem;
   height: 1.25rem;