voyager-ionic-core 7.4.3 → 7.5.0

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

@@ -1,3 +1,36 @@
+/**
+ * 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 {
   /**
    * @prop --color: Color of the radio
@@ -302,13 +335,79 @@ input {
   }
 }
 
+/**
+ * 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.
+ */
+/**
+ * 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 {
   --color-checked: var(--ion-color-primary, #3880ff);
 }
 
 :host(.legacy-radio) {
-  width: 15px;
-  height: 24px;
+  width: 0.9375rem;
+  height: 1.5rem;
 }
 
 :host(.ion-color.radio-checked) .radio-inner {
@@ -327,7 +426,7 @@ input {
 
 :host(.radio-checked) .radio-inner {
   transform: rotate(45deg);
-  border-width: 2px;
+  border-width: 0.125rem;
   border-top-width: 0;
   border-left-width: 0;
   border-style: solid;
@@ -393,6 +492,6 @@ input {
 }
 
 .native-wrapper .radio-icon {
-  width: 15px;
-  height: 24px;
+  width: 0.9375rem;
+  height: 1.5rem;
 }

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

@@ -27,7 +27,10 @@ export class Radio {
       }
     };
     this.onClick = () => {
-      const { radioGroup, checked } = this;
+      const { radioGroup, checked, disabled } = this;
+      if (disabled) {
+        return;
+      }
       /**
        * The legacy control uses a native input inside
        * of the radio host, so we can set this.checked

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

@@ -1,3 +1,36 @@
+/**
+ * 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 {
   /**
    * @prop --color: Color of the radio
@@ -302,17 +335,83 @@ input {
   }
 }
 
+/**
+ * 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.
+ */
+/**
+ * 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 {
   --color: rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);
   --color-checked: var(--ion-color-primary, #3880ff);
-  --border-width: 2px;
+  --border-width: 0.125rem;
   --border-style: solid;
   --border-radius: 50%;
 }
 
 :host(.legacy-radio) {
-  width: 20px;
-  height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 :host(.ion-color) .radio-inner {
@@ -416,6 +515,6 @@ input {
 }
 
 .native-wrapper .radio-icon {
-  width: 20px;
-  height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
 }

package/dist/collection/components/radio/test/a11y/radio.e2e.js

@@ -82,3 +82,24 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 });
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('radio: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+        <ion-radio-group value="a">
+          <ion-radio value="a">Radio Label</ion-alert>
+        </ion-radio-group>
+      `, config);
+      const radioGroup = page.locator('ion-radio-group');
+      await expect(radioGroup).toHaveScreenshot(screenshot(`radio-scale`));
+    });
+  });
+});

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

@@ -33,7 +33,7 @@ export class RadioGroup {
        * using the `name` attribute.
        */
       const selectedRadio = ev.target && ev.target.closest('ion-radio');
-      if (selectedRadio) {
+      if (selectedRadio && selectedRadio.disabled === false) {
         const currentValue = this.value;
         const newValue = selectedRadio.value;
         if (newValue !== currentValue) {

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

@@ -1,3 +1,36 @@
+/**
+ * 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 {
   /**
    * @prop --bar-background: Background of the range bar
@@ -60,7 +93,9 @@
   top: calc((var(--height) - var(--knob-handle-size)) / 2);
   -webkit-margin-start: calc(0px - var(--knob-handle-size) / 2);
   margin-inline-start: calc(0px - var(--knob-handle-size) / 2);
+  display: flex;
   position: absolute;
+  justify-content: center;
   width: var(--knob-handle-size);
   height: var(--knob-handle-size);
   text-align: center;
@@ -407,6 +442,39 @@
   margin-bottom: 0px;
 }
 
+/**
+ * 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.
+ */
 /**
  * 24px was chosen so the knob and its
  * shadow do not get cut off by the item.
@@ -478,7 +546,7 @@
   * overlapping the range. The buffer is added to the
   * bottom of the range label instead of the host.
   */
-  padding-top: 20px;
+  padding-top: calc(8px + 0.75rem);
 }
 
 :host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
@@ -487,7 +555,7 @@
   * margin to the bottom of the label, it provides a buffer
   * for the pin to move into when it is pressed.
   */
-  margin-bottom: 20px;
+  margin-bottom: calc(8px + 0.75rem);
 }
 
 .range-bar-active {
@@ -520,27 +588,33 @@
 }
 
 .range-pin {
-  transform: translate3d(0,  28px,  0) scale(0.01);
+  transform: translate3d(0,  100%,  0) scale(0.01);
   -webkit-padding-start: 8px;
   padding-inline-start: 8px;
   -webkit-padding-end: 8px;
   padding-inline-end: 8px;
   padding-top: 8px;
   padding-bottom: 8px;
-  display: inline-block;
-  position: relative;
-  top: -20px;
   min-width: 28px;
   transition: transform 120ms ease;
   background: transparent;
   color: var(--ion-text-color, #000);
-  font-size: 12px;
+  font-size: 0.75rem;
   text-align: center;
 }
 
+/**
+ * The -100% ensures the pin sits on top
+ * of the range-knob-handle container.
+ * We apply 11px so that the pin
+ * text is closer to the knob inside of the container.
+ * We also apply the 11px here instead of using "top"
+ * otherwise the pin text will translate below the knob
+ * when the text is scaled.
+ */
 .range-knob-pressed .range-pin,
 .range-knob-handle.ion-focused .range-pin {
-  transform: translate3d(0,  0,  0) scale(1);
+  transform: translate3d(0, calc(-100% + 11px), 0) scale(1);
 }
 
 :host(.range-disabled) {

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

@@ -1,3 +1,36 @@
+/**
+ * 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 {
   /**
    * @prop --bar-background: Background of the range bar
@@ -60,7 +93,9 @@
   top: calc((var(--height) - var(--knob-handle-size)) / 2);
   -webkit-margin-start: calc(0px - var(--knob-handle-size) / 2);
   margin-inline-start: calc(0px - var(--knob-handle-size) / 2);
+  display: flex;
   position: absolute;
+  justify-content: center;
   width: var(--knob-handle-size);
   height: var(--knob-handle-size);
   text-align: center;
@@ -407,6 +442,39 @@
   margin-bottom: 0px;
 }
 
+/**
+ * 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.
+ */
 /**
  * 18px was chosen so the knob and its focus/active
  * effects do not get cut off by the item.
@@ -423,13 +491,18 @@
   --height: 42px;
   --pin-background: var(--ion-color-primary, #3880ff);
   --pin-color: var(--ion-color-primary-contrast, #fff);
-  font-size: 12px;
 }
 
-::slotted([slot=label]), .label-text {
+:host(.legacy-range) ::slotted([slot=label]) {
   font-size: initial;
 }
 
+:host(:not(.legacy-range)) ::slotted(:not(ion-icon)[slot=start]),
+:host(:not(.legacy-range)) ::slotted(:not(ion-icon)[slot=end]),
+:host(:not(.legacy-range)) .native-wrapper {
+  font-size: 0.75rem;
+}
+
 :host(.legacy-range) {
   -webkit-padding-start: 14px;
   padding-inline-start: 14px;
@@ -437,6 +510,7 @@
   padding-inline-end: 14px;
   padding-top: 8px;
   padding-bottom: 8px;
+  font-size: 0.75rem;
 }
 
 :host(.range-item-start-adjustment) {
@@ -494,7 +568,7 @@
   * overlapping the range. The buffer is added to the
   * bottom of the range label instead of the host.
   */
-  padding-top: 28px;
+  padding-top: 1.75rem;
 }
 
 :host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
@@ -503,7 +577,7 @@
   * margin to the bottom of the label, it provides a buffer
   * for the pin to move into when it is pressed.
   */
-  margin-bottom: 28px;
+  margin-bottom: 1.75rem;
 }
 
 .range-bar-active {
@@ -580,17 +654,26 @@
   padding-bottom: 8px;
   border-radius: 50%;
   transform: translate3d(0,  0,  0) scale(0.01);
-  display: inline-block;
-  position: relative;
-  min-width: 28px;
-  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /**
+   * The dimensions of the range need
+   * to scale with the size of the text
+   * which is why we use dynamic dimensions here.
+   */
+  width: 1.75rem;
+  height: 1.75rem;
   transition: transform 120ms ease, background 120ms ease;
   background: var(--pin-background);
   color: var(--pin-color);
-  text-align: center;
 }
 .range-pin::before {
-  top: 3px;
+  /**
+   * The -1px here moves the ::before
+   * psuedo-element down to create a uniform pin shape.
+   */
+  bottom: -1px;
   -webkit-margin-start: -13px;
   margin-inline-start: -13px;
   /* stylelint-disable-next-line property-disallowed-list */
@@ -648,9 +731,14 @@
   }
 }
 
+/**
+ * Move the pin up by its full height
+ * plus a few pixels so the tip is above
+ * (but not touching) the knob.
+ */
 .range-knob-pressed .range-pin,
 .range-knob-handle.ion-focused .range-pin {
-  transform: translate3d(0,  -24px,  0) scale(1);
+  transform: translate3d(0, calc(-100% + 4px), 0) scale(1);
 }
 
 @media (any-hover: hover) {

package/dist/collection/components/range/test/a11y/range.e2e.js

@@ -54,4 +54,26 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await expect(range).toHaveScreenshot(screenshot(`range-focus-with-pin`));
     });
   });
+  test.describe(title('range: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      // Capture both icons and text in the start/end slots
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+        <ion-range value="50" label="Label" pin="true">
+          <ion-icon name="snow" slot="start" aria-hidden="true"></ion-icon>
+          <div name="snow" slot="end" aria-hidden="true">Warm</div>
+        </ion-range>
+      `, config);
+      const range = page.locator('ion-range');
+      const rangeHandle = range.locator('.range-knob-handle');
+      // Capture the range pin in screenshots
+      await rangeHandle.evaluate((el) => el.classList.add('ion-focused'));
+      await page.waitForChanges();
+      await expect(range).toHaveScreenshot(screenshot(`range-scale`));
+    });
+  });
 });