@ionic/core 7.3.4-dev.11699991837.1bc64f72 → 7.3.4-dev.11700516018.128deb56

package/dist/collection/components/datetime/utils/data.js

@@ -220,20 +220,12 @@ export const generateTime = (refParts, hourCycle = 'h12', minParts, maxParts, ho
  * Given DatetimeParts, generate the previous,
  * current, and and next months.
  */
-export const generateMonths = (refParts, forcedDate) => {
-  const current = { month: refParts.month, year: refParts.year, day: refParts.day };
-  /**
-   * If we're forcing a month to appear, and it's different from the current month,
-   * ensure it appears by replacing the next or previous month as appropriate.
-   */
-  if (forcedDate !== undefined && (refParts.month !== forcedDate.month || refParts.year !== forcedDate.year)) {
-    const forced = { month: forcedDate.month, year: forcedDate.year, day: forcedDate.day };
-    const forcedMonthIsBefore = isBefore(forced, current);
-    return forcedMonthIsBefore
-      ? [forced, current, getNextMonth(refParts)]
-      : [getPreviousMonth(refParts), current, forced];
-  }
-  return [getPreviousMonth(refParts), current, getNextMonth(refParts)];
+export const generateMonths = (refParts) => {
+  return [
+    getPreviousMonth(refParts),
+    { month: refParts.month, year: refParts.year, day: refParts.day },
+    getNextMonth(refParts),
+  ];
 };
 export const getMonthColumnData = (locale, refParts, minParts, maxParts, monthValues, formatOptions = {
   month: 'long',

package/dist/collection/components/datetime/utils/parse.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { printIonWarning } from "../../../utils/logging/index";
 import { isAfter, isBefore } from "./comparison";
 import { getNumDaysInMonth } from "./helpers";
 const ISO_8601_REGEXP = 
@@ -48,22 +47,7 @@ export const getPartsFromCalendarDay = (el) => {
 };
 export function parseDate(val) {
   if (Array.isArray(val)) {
-    const parsedArray = [];
-    for (const valStr of val) {
-      const parsedVal = parseDate(valStr);
-      /**
-       * If any of the values weren't parsed correctly, consider
-       * the entire batch incorrect. This simplifies the type
-       * signatures by having "undefined" be a general error case
-       * instead of returning (Datetime | undefined)[], which is
-       * harder for TS to perform type narrowing on.
-       */
-      if (!parsedVal) {
-        return undefined;
-      }
-      parsedArray.push(parsedVal);
-    }
-    return parsedArray;
+    return val.map((valStr) => parseDate(valStr));
   }
   // manually parse IS0 cuz Date.parse cannot be trusted
   // ISO 8601 format: 1994-12-15T13:47:20Z
@@ -83,7 +67,6 @@ export function parseDate(val) {
   }
   if (parse === null) {
     // wasn't able to parse the ISO datetime
-    printIonWarning(`Unable to parse date string: ${val}. Please provide a valid ISO 8601 datetime string.`);
     return undefined;
   }
   // ensure all the parse values exist with at least 0

package/dist/collection/components/datetime-button/datetime-button.js

@@ -54,9 +54,6 @@ export class DatetimeButton {
        * to today's date and time if no value is set.
        */
       const parsedDatetimes = parseDate(parsedValues.length > 0 ? parsedValues : [getToday()]);
-      if (!parsedDatetimes) {
-        return;
-      }
       /**
        * If developers incorrectly use multiple="true"
        * with non "date" datetimes, then just select

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

@@ -47,18 +47,6 @@
 }
 
 :host(.menu-side-start) .menu-inner {
-  /**
-    * Menu does not cover the whole screen so we need to set the safe area for the
-    * side that touches the screen edge only. Since safe area is not logical, it
-    * needs to be applied to the correct side depending on the language direction.
-    * Otherwise, the content will have less space on both sides.
-    *
-    * LTR:
-    * The left side of the menu touches the screen edge. The safe area padding has
-    * already been set in the core styles, so there's no need to set it again.
-    * The right side of the menu is not touching the screen edge. Padding is not
-    * applied to the right side of the menu. A value of 0 is set.
-    */
   --ion-safe-area-right: 0px;
   top: 0;
   bottom: 0;
@@ -89,55 +77,8 @@
     }
   }
 }
-:host-context([dir=rtl]):host(.menu-side-start) .menu-inner, :host-context([dir=rtl]).menu-side-start .menu-inner {
-  /**
-    * Menu does not cover the whole screen so we need to set the safe area for the
-    * side that touches the screen edge only. Since safe area is not logical, it
-    * needs to be applied to the correct side depending on the language direction.
-    * Otherwise, the content will have less space on both sides.
-    *
-    * RTL:
-    * The right side of the menu touches the screen edge. The safe area padding has
-    * already been set in the core styles, so there's no need to set it again.
-    * The left side of the menu is not touching the screen edge. Padding is not
-    * applied to the left side of the menu. A value of 0 is set.
-    */
-  --ion-safe-area-right: env(safe-area-inset-right);
-  --ion-safe-area-left: 0px;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.menu-side-start) .menu-inner:dir(rtl) {
-    /**
-      * Menu does not cover the whole screen so we need to set the safe area for the
-      * side that touches the screen edge only. Since safe area is not logical, it
-      * needs to be applied to the correct side depending on the language direction.
-      * Otherwise, the content will have less space on both sides.
-      *
-      * RTL:
-      * The right side of the menu touches the screen edge. The safe area padding has
-      * already been set in the core styles, so there's no need to set it again.
-      * The left side of the menu is not touching the screen edge. Padding is not
-      * applied to the left side of the menu. A value of 0 is set.
-      */
-    --ion-safe-area-right: env(safe-area-inset-right);
-    --ion-safe-area-left: 0px;
-  }
-}
 
 :host(.menu-side-end) .menu-inner {
-  /**
-    * Menu does not cover the whole screen so we need to set the safe area for the
-    * side that touches the screen edge only. Since safe area is not logical, it
-    * needs to be applied to the correct side depending on the language direction.
-    * Otherwise, the content will have less space on both sides.
-    *
-    * LTR:
-    * The right side of the menu touches the screen edge. The safe area padding has
-    * already been set in the core styles, so there's no need to set it again.
-    * The left side of the menu is not touching the screen edge. Padding is not
-    * applied to the left side of the menu. A value of 0 is set.
-    */
   --ion-safe-area-left: 0px;
   top: 0;
   bottom: 0;
@@ -168,41 +109,6 @@
     }
   }
 }
-:host-context([dir=rtl]):host(.menu-side-end) .menu-inner, :host-context([dir=rtl]).menu-side-end .menu-inner {
-  /**
-    * Menu does not cover the whole screen so we need to set the safe area for the
-    * side that touches the screen edge only. Since safe area is not logical, it
-    * needs to be applied to the correct side depending on the language direction.
-    * Otherwise, the content will have less space on both sides.
-    *
-    * RTL:
-    * The left side of the menu touches the screen edge. The safe area padding has
-    * already been set in the core styles, so there's no need to set it again.
-    * The right side of the menu is not touching the screen edge. Padding is not
-    * applied to the right side of the menu. A value of 0 is set.
-    */
-  --ion-safe-area-left: env(safe-area-inset-left);
-  --ion-safe-area-right: 0px;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.menu-side-end) .menu-inner:dir(rtl) {
-    /**
-      * Menu does not cover the whole screen so we need to set the safe area for the
-      * side that touches the screen edge only. Since safe area is not logical, it
-      * needs to be applied to the correct side depending on the language direction.
-      * Otherwise, the content will have less space on both sides.
-      *
-      * RTL:
-      * The left side of the menu touches the screen edge. The safe area padding has
-      * already been set in the core styles, so there's no need to set it again.
-      * The right side of the menu is not touching the screen edge. Padding is not
-      * applied to the right side of the menu. A value of 0 is set.
-      */
-    --ion-safe-area-left: env(safe-area-inset-left);
-    --ion-safe-area-right: 0px;
-  }
-}
 
 ion-backdrop {
   display: none;

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

@@ -47,18 +47,6 @@
 }
 
 :host(.menu-side-start) .menu-inner {
-  /**
-    * Menu does not cover the whole screen so we need to set the safe area for the
-    * side that touches the screen edge only. Since safe area is not logical, it
-    * needs to be applied to the correct side depending on the language direction.
-    * Otherwise, the content will have less space on both sides.
-    *
-    * LTR:
-    * The left side of the menu touches the screen edge. The safe area padding has
-    * already been set in the core styles, so there's no need to set it again.
-    * The right side of the menu is not touching the screen edge. Padding is not
-    * applied to the right side of the menu. A value of 0 is set.
-    */
   --ion-safe-area-right: 0px;
   top: 0;
   bottom: 0;
@@ -89,55 +77,8 @@
     }
   }
 }
-:host-context([dir=rtl]):host(.menu-side-start) .menu-inner, :host-context([dir=rtl]).menu-side-start .menu-inner {
-  /**
-    * Menu does not cover the whole screen so we need to set the safe area for the
-    * side that touches the screen edge only. Since safe area is not logical, it
-    * needs to be applied to the correct side depending on the language direction.
-    * Otherwise, the content will have less space on both sides.
-    *
-    * RTL:
-    * The right side of the menu touches the screen edge. The safe area padding has
-    * already been set in the core styles, so there's no need to set it again.
-    * The left side of the menu is not touching the screen edge. Padding is not
-    * applied to the left side of the menu. A value of 0 is set.
-    */
-  --ion-safe-area-right: env(safe-area-inset-right);
-  --ion-safe-area-left: 0px;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.menu-side-start) .menu-inner:dir(rtl) {
-    /**
-      * Menu does not cover the whole screen so we need to set the safe area for the
-      * side that touches the screen edge only. Since safe area is not logical, it
-      * needs to be applied to the correct side depending on the language direction.
-      * Otherwise, the content will have less space on both sides.
-      *
-      * RTL:
-      * The right side of the menu touches the screen edge. The safe area padding has
-      * already been set in the core styles, so there's no need to set it again.
-      * The left side of the menu is not touching the screen edge. Padding is not
-      * applied to the left side of the menu. A value of 0 is set.
-      */
-    --ion-safe-area-right: env(safe-area-inset-right);
-    --ion-safe-area-left: 0px;
-  }
-}
 
 :host(.menu-side-end) .menu-inner {
-  /**
-    * Menu does not cover the whole screen so we need to set the safe area for the
-    * side that touches the screen edge only. Since safe area is not logical, it
-    * needs to be applied to the correct side depending on the language direction.
-    * Otherwise, the content will have less space on both sides.
-    *
-    * LTR:
-    * The right side of the menu touches the screen edge. The safe area padding has
-    * already been set in the core styles, so there's no need to set it again.
-    * The left side of the menu is not touching the screen edge. Padding is not
-    * applied to the left side of the menu. A value of 0 is set.
-    */
   --ion-safe-area-left: 0px;
   top: 0;
   bottom: 0;
@@ -168,41 +109,6 @@
     }
   }
 }
-:host-context([dir=rtl]):host(.menu-side-end) .menu-inner, :host-context([dir=rtl]).menu-side-end .menu-inner {
-  /**
-    * Menu does not cover the whole screen so we need to set the safe area for the
-    * side that touches the screen edge only. Since safe area is not logical, it
-    * needs to be applied to the correct side depending on the language direction.
-    * Otherwise, the content will have less space on both sides.
-    *
-    * RTL:
-    * The left side of the menu touches the screen edge. The safe area padding has
-    * already been set in the core styles, so there's no need to set it again.
-    * The right side of the menu is not touching the screen edge. Padding is not
-    * applied to the right side of the menu. A value of 0 is set.
-    */
-  --ion-safe-area-left: env(safe-area-inset-left);
-  --ion-safe-area-right: 0px;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.menu-side-end) .menu-inner:dir(rtl) {
-    /**
-      * Menu does not cover the whole screen so we need to set the safe area for the
-      * side that touches the screen edge only. Since safe area is not logical, it
-      * needs to be applied to the correct side depending on the language direction.
-      * Otherwise, the content will have less space on both sides.
-      *
-      * RTL:
-      * The left side of the menu touches the screen edge. The safe area padding has
-      * already been set in the core styles, so there's no need to set it again.
-      * The right side of the menu is not touching the screen edge. Padding is not
-      * applied to the right side of the menu. A value of 0 is set.
-      */
-    --ion-safe-area-left: env(safe-area-inset-left);
-    --ion-safe-area-right: 0px;
-  }
-}
 
 ion-backdrop {
   display: none;

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

@@ -147,15 +147,6 @@ 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
@@ -182,14 +173,6 @@ 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.
@@ -252,24 +235,6 @@ input {
   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 {
-  /**
-   * 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-checked: var(--ion-color-primary, #3880ff);
 }

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

@@ -70,7 +70,6 @@ export class Radio {
     this.labelPlacement = 'start';
     this.legacy = undefined;
     this.justify = 'space-between';
-    this.alignment = 'center';
   }
   valueChanged() {
     /**
@@ -135,7 +134,7 @@ export class Radio {
     return legacyFormController.hasLegacyControl() ? this.renderLegacyRadio() : this.renderRadio();
   }
   renderRadio() {
-    const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
+    const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex } = 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, {
@@ -144,7 +143,6 @@ 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,
@@ -277,15 +275,15 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'start' | 'end' | 'fixed' | 'stacked'",
-          "resolved": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
+          "original": "'start' | 'end' | 'fixed'",
+          "resolved": "\"end\" | \"fixed\" | \"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 (\"...\").\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."
+          "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 (\"...\")."
         },
         "attribute": "label-placement",
         "reflect": false,
@@ -325,24 +323,6 @@ 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

@@ -147,15 +147,6 @@ 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
@@ -182,14 +173,6 @@ 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.
@@ -252,24 +235,6 @@ input {
   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 {
-  /**
-   * 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,19 +51,4 @@ 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,25 +100,5 @@ 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

@@ -363,25 +363,6 @@
   max-width: 200px;
 }
 
-/**
- * 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;
@@ -426,31 +407,10 @@
   margin-bottom: 0;
 }
 
-: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.
-  */
+:host(.range-has-pin) {
   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 {
   bottom: 0;
   width: auto;

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' | 'stacked'",
-          "resolved": "\"end\" | \"fixed\" | \"stacked\" | \"start\"",
+          "original": "'start' | 'end' | 'fixed'",
+          "resolved": "\"end\" | \"fixed\" | \"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 (\"...\").\n`\"stacked\"`: The label will appear above the range regardless of the direction."
+          "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 (\"...\")."
         },
         "attribute": "label-placement",
         "reflect": false,

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

@@ -363,25 +363,6 @@
   max-width: 200px;
 }
 
-/**
- * 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);
@@ -442,31 +423,10 @@
   margin-bottom: 0;
 }
 
-: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.
-  */
+:host(.range-has-pin) {
   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 {
   bottom: 0;
   width: auto;