@ionic/core 8.8.9-dev.11779411201.1a483e09 → 8.8.9-dev.11780349068.18c33698

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

@@ -1,9 +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
@@ -59,28 +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;
- *   }
- * }
- */
 :host {
   /**
    * @prop --color: Color of the radio
@@ -95,28 +67,10 @@
   min-height: inherit;
   cursor: pointer;
   user-select: none;
+  z-index: 2;
   box-sizing: border-box;
 }
 
-input {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  opacity: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
 :host(.radio-disabled) {
   pointer-events: none;
 }
@@ -135,6 +89,25 @@ input {
   box-sizing: border-box;
 }
 
+input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  clip: rect(0 0 0 0);
+  opacity: 0;
+  overflow: hidden;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
 :host(:focus) {
   outline: none;
 }
@@ -168,6 +141,26 @@ input {
   cursor: inherit;
 }
 
+.label-text-wrapper {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+:host(.in-item) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+:host(.in-item.radio-label-placement-stacked) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+:host(.in-item.radio-label-placement-stacked) .native-wrapper {
+  margin-bottom: 10px;
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -210,12 +203,6 @@ input {
   display: block;
 }
 
-.label-text-wrapper {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
 /**
  * Label is on the left of the radio in LTR and
  * on the right in RTL.
@@ -224,75 +211,6 @@ input {
   flex-direction: row;
 }
 
-/**
- * Label is on the right of the radio in LTR and
- * on the left in RTL.
- */
-:host(.radio-label-placement-end) .radio-wrapper {
-  flex-direction: row-reverse;
-}
-
-/**
- * Label is on the left of the radio in LTR and
- * on the right in RTL. Label also has a fixed width.
- */
-:host(.radio-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-  width: 100px;
-  min-width: 100px;
-}
-
-/**
- * Label is on top of the radio.
- */
-:host(.radio-label-placement-stacked) .radio-wrapper {
-  flex-direction: column;
-}
-
-:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper {
-  transform-origin: left top;
-}
-:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper {
-  transform-origin: right top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper {
-    transform-origin: right top;
-  }
-}
-
-:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper {
-  transform-origin: center top;
-}
-:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper {
-  transform-origin: calc(100% - center) top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper {
-    transform-origin: calc(100% - center) top;
-  }
-}
-
-:host {
-  z-index: 2;
-}
-
-:host(.in-item) .label-text-wrapper {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-:host(.in-item.radio-label-placement-stacked) .label-text-wrapper {
-  margin-top: 10px;
-  margin-bottom: 16px;
-}
-
-:host(.in-item.radio-label-placement-stacked) .native-wrapper {
-  margin-bottom: 10px;
-}
-
 :host(.radio-label-placement-start) .label-text-wrapper {
   /**
    * The margin between the label and
@@ -305,6 +223,14 @@ input {
   margin-inline-end: 16px;
 }
 
+/**
+ * Label is on the right of the radio in LTR and
+ * on the left in RTL.
+ */
+:host(.radio-label-placement-end) .radio-wrapper {
+  flex-direction: row-reverse;
+}
+
 /**
  * The margin between the label and
  * the radio should be on the start
@@ -329,6 +255,23 @@ input {
   margin-inline-end: 16px;
 }
 
+/**
+ * Label is on the left of the radio in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.radio-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+}
+
+/**
+ * Label is on top of the radio.
+ */
+:host(.radio-label-placement-stacked) .radio-wrapper {
+  flex-direction: column;
+}
+
 :host(.radio-label-placement-stacked) .label-text-wrapper {
   transform: scale(0.75);
   /**
@@ -346,12 +289,32 @@ input {
   max-width: calc(100% / 0.75);
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
+:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper {
+  transform-origin: left top;
+}
+:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper {
+    transform-origin: right top;
+  }
+}
+
+:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper {
+  transform-origin: center top;
+}
+:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper {
+  transform-origin: calc(100% - center) top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper {
+    transform-origin: calc(100% - center) top;
+  }
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -407,12 +370,6 @@ input {
  *   }
  * }
  */
-/**
- * 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

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

@@ -1,9 +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
@@ -59,36 +53,6 @@
  *   }
  * }
  */
-:host {
-  display: block;
-}
-
-/**
- * Error text should only be shown when .ion-invalid is present
- * on the radio group. Otherwise the helper text should be shown.
- */
-.radio-group-top .error-text {
-  display: none;
-}
-
-.radio-group-top .helper-text {
-  display: block;
-}
-
-:host(.ion-touched.ion-invalid) .radio-group-top .error-text {
-  display: block;
-}
-
-:host(.ion-touched.ion-invalid) .radio-group-top .helper-text {
-  display: none;
-}
-
-/**
- * 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
@@ -144,24 +108,36 @@
  *   }
  * }
  */
+ion-radio-group {
+  vertical-align: top;
+}
+
 .radio-group-top {
   line-height: 1.5;
 }
 
+/**
+ * Error text should only be shown when .ion-invalid is present
+ * on the radio group. Otherwise the helper text should be shown.
+ */
 .radio-group-top .error-text {
+  display: none;
   color: var(--ion-color-danger, #c5000f);
 }
 
 .radio-group-top .helper-text {
+  display: block;
   color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
+.ion-touched.ion-invalid .radio-group-top .error-text {
+  display: block;
+}
+
+.ion-touched.ion-invalid .radio-group-top .helper-text {
+  display: none;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -217,7 +193,7 @@
  *   }
  * }
  */
-:host(.in-list) .radio-group-top {
+ion-list .radio-group-top {
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;
   -webkit-padding-end: 16px;

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

@@ -3,17 +3,8 @@
  */
 import { Build, Host, h } from "@stencil/core";
 import { checkInvalidState } from "../../utils/forms/index";
-import { debounce, renderHiddenInput } from "../../utils/helpers";
-import { hostContext } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @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.
- *
- * @part supporting-text - Supporting text displayed above the radios.
- * @part helper-text - Supporting text displayed above the radios when the radio group is valid.
- * @part error-text - Supporting text displayed above the radios when the radio group is invalid and touched.
- */
+import { renderHiddenInput } from "../../utils/helpers";
+import { getIonMode } from "../../global/ionic-global";
 export class RadioGroup {
     constructor() {
         this.inputId = `ion-rg-${radioGroupIds++}`;
@@ -32,8 +23,6 @@ export class RadioGroup {
          * The name of the control, which is submitted with the form data.
          */
         this.name = this.inputId;
-        /** Ensures that the tabindex update is debounced and only called once. */
-        this.scheduleTabindexUpdate = debounce(() => this.setRadioTabindex(this.value), 0);
         this.setRadioTabindex = (value) => {
             const radios = this.getRadios();
             // Get the first radio that is not disabled and the checked one
@@ -97,10 +86,6 @@ export class RadioGroup {
          */
         this.valueChanged(this.value);
     }
-    /** @internal - Recompute which radio has tabindex 0. Call when radios are added/removed. */
-    async updateRadiosTabindex() {
-        this.scheduleTabindexUpdate();
-    }
     async connectedCallback() {
         // Get the list header if it exists and set the id
         // this is used to set aria-labelledby
@@ -249,7 +234,7 @@ export class RadioGroup {
         if (!hasHintText) {
             return;
         }
-        return (h("div", { class: "radio-group-top" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null)));
+        return (h("div", { class: "radio-group-top" }, h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
     getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
@@ -263,27 +248,21 @@ export class RadioGroup {
     }
     render() {
         const { label, labelId, el, name, value } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return (h(Host, { key: 'c8077cb16bcc6719fa2aba1a5a9cb139e0b81a9e', class: {
-                [theme]: true,
-                'in-list': hostContext('ion-list', el),
-            }, role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick }, this.renderHintText(), h("slot", { key: 'ddeca1867cb8e74121add7616f6be9e1a202c142' })));
+        return (h(Host, { key: '377e4aa3a656cc84b742f9d7a7d4be65d20c69f5', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("slot", { key: 'c3187a2497773b4f15cea3b413b036502bcec8c0' })));
     }
     static get is() { return "ion-radio-group"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["radio-group.ios.scss"],
-            "md": ["radio-group.md.scss"],
-            "ionic": ["radio-group.ionic.scss"]
+            "md": ["radio-group.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["radio-group.ios.css"],
-            "md": ["radio-group.md.css"],
-            "ionic": ["radio-group.ionic.css"]
+            "md": ["radio-group.md.css"]
         };
     }
     static get properties() {
@@ -471,26 +450,6 @@ export class RadioGroup {
     }
     static get methods() {
         return {
-            "updateRadiosTabindex": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "- Recompute which radio has tabindex 0. Call when radios are added/removed."
-                        }]
-                }
-            },
             "setFocus": {
                 "complexType": {
                     "signature": "() => Promise<void>",

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

@@ -1,9 +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
@@ -59,36 +53,6 @@
  *   }
  * }
  */
-:host {
-  display: block;
-}
-
-/**
- * Error text should only be shown when .ion-invalid is present
- * on the radio group. Otherwise the helper text should be shown.
- */
-.radio-group-top .error-text {
-  display: none;
-}
-
-.radio-group-top .helper-text {
-  display: block;
-}
-
-:host(.ion-touched.ion-invalid) .radio-group-top .error-text {
-  display: block;
-}
-
-:host(.ion-touched.ion-invalid) .radio-group-top .helper-text {
-  display: none;
-}
-
-/**
- * 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
@@ -144,24 +108,36 @@
  *   }
  * }
  */
+ion-radio-group {
+  vertical-align: top;
+}
+
 .radio-group-top {
   line-height: 1.5;
 }
 
+/**
+ * Error text should only be shown when .ion-invalid is present
+ * on the radio group. Otherwise the helper text should be shown.
+ */
 .radio-group-top .error-text {
+  display: none;
   color: var(--ion-color-danger, #c5000f);
 }
 
 .radio-group-top .helper-text {
+  display: block;
   color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
+.ion-touched.ion-invalid .radio-group-top .error-text {
+  display: block;
+}
+
+.ion-touched.ion-invalid .radio-group-top .helper-text {
+  display: none;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -217,7 +193,7 @@
  *   }
  * }
  */
-:host(.in-list) .radio-group-top {
+ion-list .radio-group-top {
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;
   -webkit-padding-end: 16px;