@ionic/core 7.3.4-dev.11694441708.198de185 → 7.3.4-dev.11694445679.1bc64f72

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

@@ -70,6 +70,7 @@ export class Radio {
     this.labelPlacement = 'start';
     this.legacy = undefined;
     this.justify = 'space-between';
+    this.alignment = 'center';
   }
   valueChanged() {
     /**
@@ -134,7 +135,7 @@ export class Radio {
     return legacyFormController.hasLegacyControl() ? this.renderLegacyRadio() : this.renderRadio();
   }
   renderRadio() {
-    const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex } = this;
+    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, {
@@ -143,6 +144,7 @@ export class Radio {
         'radio-checked': checked,
         'radio-disabled': disabled,
         [`radio-justify-${justify}`]: true,
+        [`radio-alignment-${alignment}`]: true,
         [`radio-label-placement-${labelPlacement}`]: true,
         // Focus and active styling should not apply when the radio is in an item
         'ion-activatable': !inItem,
@@ -275,15 +277,15 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'start' | 'end' | 'fixed'",
-          "resolved": "\"end\" | \"fixed\" | \"start\"",
+          "original": "'start' | 'end' | 'fixed' | 'stacked'",
+          "resolved": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Where to place the label relative to the radio.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\")."
+          "text": "Where to place the label relative to the radio.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property."
         },
         "attribute": "label-placement",
         "reflect": false,
@@ -323,6 +325,24 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "attribute": "justify",
         "reflect": false,
         "defaultValue": "'space-between'"
+      },
+      "alignment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'start' | 'center'",
+          "resolved": "\"center\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "How to control the alignment of the radio and label on the cross axis.\n`\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL."
+        },
+        "attribute": "alignment",
+        "reflect": false,
+        "defaultValue": "'center'"
       }
     };
   }

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

@@ -1,36 +1,3 @@
-/**
- * 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
@@ -180,6 +147,15 @@ input {
   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
@@ -206,6 +182,14 @@ input {
   justify-content: end;
 }
 
+:host(.radio-alignment-start) .radio-wrapper {
+  align-items: start;
+}
+
+:host(.radio-alignment-center) .radio-wrapper {
+  align-items: center;
+}
+
 /**
  * Label is on the left of the radio in LTR and
  * on the right in RTL.
@@ -269,71 +253,23 @@ 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.
+ * 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 {
+  /**
+   * The margin between the label and
+   * the radio should be on the bottom
+   * when the label sits on top.
+   */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 16px;
+}
+
 :host {
   --color: rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);
   --color-checked: var(--ion-color-primary, #3880ff);

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

@@ -51,4 +51,19 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       await expect(list).toHaveScreenshot(screenshot(`radio-long-label-in-item`));
     });
   });
+  test.describe(title('radio: stacked label in item'), () => {
+    test('should render margins correctly when using stacked label in item', async ({ page }) => {
+      await page.setContent(`
+          <ion-list>
+            <ion-radio-group>
+              <ion-item>
+                <ion-radio label-placement="stacked">Enable Notifications</ion-radio>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        `, config);
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`radio-stacked-label-in-item`));
+    });
+  });
 });

package/dist/collection/components/radio/test/label-placement/radio.e2e.js

@@ -100,5 +100,25 @@ configs().forEach(({ title, screenshot, config }) => {
         await expect(radio).toHaveScreenshot(screenshot(`radio-label-fixed-justify-space-between`));
       });
     });
+    test.describe('radio: stacked placement', () => {
+      test('should align the label to the start of the container in the stacked position', async ({ page }) => {
+        await page.setContent(`
+            <ion-radio-group value="1">
+              <ion-radio label-placement="stacked" alignment="start" style="width: 200px" value="1">This is a long label</ion-radio>
+            </ion-radio-group>
+          `, config);
+        const radio = page.locator('ion-radio');
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-stacked-align-start`));
+      });
+      test('should align the label to the center of the container in the stacked position', async ({ page }) => {
+        await page.setContent(`
+            <ion-radio-group value="1">
+              <ion-radio label-placement="stacked" alignment="center" style="width: 200px" value="1">This is a long label</ion-radio>
+            </ion-radio-group>
+          `, config);
+        const radio = page.locator('ion-radio');
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-stacked-align-center`));
+      });
+    });
   });
 });

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

@@ -1,36 +1,3 @@
-/**
- * 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
@@ -93,9 +60,7 @@
   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;
@@ -399,38 +364,24 @@
 }
 
 /**
- * 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.
+ * Label is on top of the range.
  */
+:host(.range-label-placement-stacked) .range-wrapper {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:host(.range-label-placement-stacked) .label-text-wrapper {
+  /**
+  * The margin between the label and
+  * the range should be on the bottom
+  * when the label sits on top.
+  */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 16px;
+}
+
 :host {
   --knob-border-radius: 50%;
   --knob-background: #ffffff;
@@ -475,8 +426,29 @@
   margin-bottom: 0;
 }
 
-:host(.range-has-pin) {
-  padding-top: calc(0.75rem + 8px);
+:host(.range-has-pin:not(.range-label-placement-stacked)) {
+  /**
+  * The pin should not overlap any elements that are
+  * above the range. By adding padding to the top of the
+  * range, it provides a buffer for the pin to move into
+  * when it is pressed.
+  *
+  * The padding is not included when the label is stacked
+  * because the pin is below the label.
+  * It still requires a buffer to prevent the pin from
+  * overlapping the range. The buffer is added to the
+  * bottom of the range label instead of the host.
+  */
+  padding-top: 20px;
+}
+
+:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
+  /**
+  * The pin should not overlap the stacked label. By adding
+  * margin to the bottom of the label, it provides a buffer
+  * for the pin to move into when it is pressed.
+  */
+  margin-bottom: 20px;
 }
 
 .range-bar-active {
@@ -509,33 +481,27 @@
 }
 
 .range-pin {
-  transform: translate3d(0,  100%,  0) scale(0.01);
+  transform: translate3d(0,  28px,  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: 0.75rem;
+  font-size: 12px;
   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, calc(-100% + 11px), 0) scale(1);
+  transform: translate3d(0,  0,  0) scale(1);
 }
 
 :host(.range-disabled) {

package/dist/collection/components/range/range.js

@@ -808,15 +808,15 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'start' | 'end' | 'fixed'",
-          "resolved": "\"end\" | \"fixed\" | \"start\"",
+          "original": "'start' | 'end' | 'fixed' | 'stacked'",
+          "resolved": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Where to place the label relative to the range.\n`\"start\"`: The label will appear to the left of the range in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the range in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\")."
+          "text": "Where to place the label relative to the range.\n`\"start\"`: The label will appear to the left of the range in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the range in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the range regardless of the direction."
         },
         "attribute": "label-placement",
         "reflect": false,

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

@@ -1,36 +1,3 @@
-/**
- * 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
@@ -93,9 +60,7 @@
   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;
@@ -399,38 +364,24 @@
 }
 
 /**
- * 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.
+ * Label is on top of the range.
  */
+:host(.range-label-placement-stacked) .range-wrapper {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:host(.range-label-placement-stacked) .label-text-wrapper {
+  /**
+  * The margin between the label and
+  * the range should be on the bottom
+  * when the label sits on top.
+  */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 16px;
+}
+
 :host {
   --knob-border-radius: 50%;
   --knob-background: var(--bar-background-active);
@@ -443,18 +394,13 @@
   --height: 42px;
   --pin-background: var(--ion-color-primary, #3880ff);
   --pin-color: var(--ion-color-primary-contrast, #fff);
+  font-size: 12px;
 }
 
-:host(.legacy-range) ::slotted([slot=label]) {
+::slotted([slot=label]), .label-text {
   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;
@@ -462,7 +408,6 @@
   padding-inline-end: 14px;
   padding-top: 8px;
   padding-bottom: 8px;
-  font-size: 0.75rem;
 }
 
 :host(.ion-color) .range-bar {
@@ -497,8 +442,29 @@
   margin-bottom: 0;
 }
 
-:host(.range-has-pin) {
-  padding-top: 1.75rem;
+:host(.range-has-pin:not(.range-label-placement-stacked)) {
+  /**
+  * The pin should not overlap any elements that are
+  * above the range. By adding padding to the top of the
+  * range, it provides a buffer for the pin to move into
+  * when it is pressed.
+  *
+  * The padding is not included when the label is stacked
+  * because the pin is below the label.
+  * It still requires a buffer to prevent the pin from
+  * overlapping the range. The buffer is added to the
+  * bottom of the range label instead of the host.
+  */
+  padding-top: 28px;
+}
+
+:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
+  /**
+  * The pin should not overlap the stacked label. By adding
+  * margin to the bottom of the label, it provides a buffer
+  * for the pin to move into when it is pressed.
+  */
+  margin-bottom: 28px;
 }
 
 .range-bar-active {
@@ -575,26 +541,17 @@
   padding-bottom: 8px;
   border-radius: 50%;
   transform: translate3d(0,  0,  0) scale(0.01);
-  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;
+  display: inline-block;
+  position: relative;
+  min-width: 28px;
+  height: 28px;
   transition: transform 120ms ease, background 120ms ease;
   background: var(--pin-background);
   color: var(--pin-color);
+  text-align: center;
 }
 .range-pin::before {
-  /**
-   * The -1px here moves the ::before
-   * psuedo-element down to create a uniform pin shape.
-   */
-  bottom: -1px;
+  top: 3px;
   -webkit-margin-start: -13px;
   margin-inline-start: -13px;
   /* stylelint-disable-next-line property-disallowed-list */
@@ -652,14 +609,9 @@
   }
 }
 
-/**
- * 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, calc(-100% + 4px), 0) scale(1);
+  transform: translate3d(0,  -24px,  0) scale(1);
 }
 
 @media (any-hover: hover) {