@ionic/core 8.8.8 → 8.8.9-dev.11779403760.13ea2a08

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

@@ -0,0 +1,119 @@
+/**
+ * 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 pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+: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;
+}
+
+.radio-group-top {
+  font-size: var(--token-font-size-300, 0.75rem);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
+  text-decoration: none;
+  text-transform: none;
+}
+
+.radio-group-top .error-text {
+  color: var(--token-text-danger, var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b)));
+}
+
+.radio-group-top .helper-text {
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+}
+
+:host(.in-list) .radio-group-top {
+  /* stylelint-disable */
+  padding-right: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-left: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-left, 0px));
+  /* stylelint-enable */
+}
+:host-context([dir=rtl]):host(.in-list) .radio-group-top, :host-context([dir=rtl]).in-list .radio-group-top {
+  padding-right: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0px));
+  padding-left: var(--token-space-400, var(--token-scale-400, 16px));
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.in-list:dir(rtl)) .radio-group-top {
+    padding-right: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0px));
+    padding-left: var(--token-space-400, var(--token-scale-400, 16px));
+  }
+}

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

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -53,6 +59,36 @@
  *   }
  * }
  */
+: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
@@ -108,36 +144,24 @@
  *   }
  * }
  */
-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));
 }
 
-.ion-touched.ion-invalid .radio-group-top .error-text {
-  display: block;
-}
-
-.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
@@ -193,7 +217,7 @@ ion-radio-group {
  *   }
  * }
  */
-ion-list .radio-group-top {
+:host(.in-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,8 +3,17 @@
  */
 import { Build, Host, h } from "@stencil/core";
 import { checkInvalidState } from "../../utils/forms/index";
-import { renderHiddenInput } from "../../utils/helpers";
-import { getIonMode } from "../../global/ionic-global";
+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.
+ */
 export class RadioGroup {
     constructor() {
         this.inputId = `ion-rg-${radioGroupIds++}`;
@@ -23,6 +32,8 @@ 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
@@ -86,6 +97,10 @@ 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
@@ -234,7 +249,7 @@ export class RadioGroup {
         if (!hasHintText) {
             return;
         }
-        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)));
+        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)));
     }
     getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
@@ -248,21 +263,27 @@ export class RadioGroup {
     }
     render() {
         const { label, labelId, el, name, value } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         renderHiddenInput(true, el, name, value, false);
-        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' })));
+        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' })));
     }
     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"]
+            "md": ["radio-group.md.scss"],
+            "ionic": ["radio-group.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["radio-group.ios.css"],
-            "md": ["radio-group.md.css"]
+            "md": ["radio-group.md.css"],
+            "ionic": ["radio-group.ionic.css"]
         };
     }
     static get properties() {
@@ -450,6 +471,26 @@ 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,3 +1,9 @@
+/**
+ * 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
@@ -53,6 +59,36 @@
  *   }
  * }
  */
+: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
@@ -108,36 +144,24 @@
  *   }
  * }
  */
-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));
 }
 
-.ion-touched.ion-invalid .radio-group-top .error-text {
-  display: block;
-}
-
-.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
@@ -193,7 +217,7 @@ ion-radio-group {
  *   }
  * }
  */
-ion-list .radio-group-top {
+:host(.in-list) .radio-group-top {
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;
   -webkit-padding-end: 16px;