@ionic/core 8.2.3-dev.11724345963.10ca6051 → 8.2.3-dev.11724680612.1b9ef92a

package/dist/collection/components/textarea/textarea.js

@@ -275,6 +275,15 @@ export class Textarea {
     get hasLabel() {
         return this.label !== undefined || this.labelSlot !== null;
     }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11050): Update theme check when shapes are defined for all themes.
+        if (theme === 'ionic' && shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
     /**
      * Renders the border container when fill="outline".
      */
@@ -336,8 +345,9 @@ export class Textarea {
         return (h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
     }
     render() {
-        const { inputId, disabled, fill, shape, size, labelPlacement, el, hasFocus } = this;
+        const { inputId, disabled, fill, size, labelPlacement, el, hasFocus } = this;
         const theme = getIonTheme(this);
+        const shape = this.getShape();
         const value = this.getValue();
         const inItem = hostContext('ion-item', this.el);
         const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
@@ -361,7 +371,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '0f80c3af71da1262718eabb385478447a4d04bce', class: createColorClasses(this.color, {
+        return (h(Host, { key: '25f8192436c242c227cdcec236dc376a6ad4331d', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -371,7 +381,7 @@ export class Textarea {
                 [`textarea-size-${size}`]: true,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: 'd20e202c8dbbf26e4a734b856294256bdf18ef94', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'c54e1d41af4a4c9e5c954a829061fb9ecd2eab15', class: "textarea-wrapper-inner" }, 
+            }) }, h("label", { key: 'cd1a80101c9cc5c1123005e9e3bfe1ff06e9a5d8', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '68dffe868cdf170f0eab38e912a97c2374c82aaa', class: "textarea-wrapper-inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -381,7 +391,7 @@ export class Textarea {
          * <label> element, ensuring that clicking the label text
          * focuses the textarea.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: '148f16138dcbfd8a724d248b4e1f73220b017fd4', class: "textarea-outline" }), h("div", { key: 'b5550e1ad2af3af871b6e9d05c040a5ee009f1da', class: "start-slot-wrapper" }, h("slot", { key: 'ce6d54e769b9de5afb43f432c1194a1a80d8124d', name: "start" })), h("div", { key: '80de31c0139de21273ecc381c9d99bbfebed188a', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '4a3174126f2979ce3fa873c42c313ff83a5f71de', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: '5d6e196c46f9af1360b89a3d355ecf434df47657', class: "end-slot-wrapper" }, h("slot", { key: '4109293cca9ccca19a81428ea5149107ebb00359', name: "end" }))), shouldRenderHighlight && h("div", { key: '18063161e67aa882dc2262626fd435352192d6c3', class: "textarea-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: 'eafeed172c5deafd3e28e8dbc8339b9ab3d06298', class: "textarea-outline" }), h("div", { key: 'dae967e2619efd99e40db41dfde375d162a772a4', class: "start-slot-wrapper" }, h("slot", { key: '4d5d48dcd842bec3effbab43fdcbbca137f01237', name: "start" })), h("div", { key: 'd3b11f95a4b76dd13363ed67279bd09be8776b71', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'e86bd3b607b29b67ebcdbfa0b2e73417df786e1d', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: 'ac0788d419f7b74d6a4f35cbd8e7ae78412380a6', class: "end-slot-wrapper" }, h("slot", { key: 'b409e7f30418b2e70f4dcb43f184be9032591089', name: "end" }))), shouldRenderHighlight && h("div", { key: '35f5928604c3a35962d08e99d4eeeedebb53a470', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -880,15 +890,15 @@ export class Textarea {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'round'",
-                    "resolved": "\"round\" | undefined",
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The shape of the textarea. If \"round\" it will have an increased border radius."
+                    "text": "Set to `\"soft\"` for a textarea with slightly rounded corners,\n`\"round\"` for a textarea with fully rounded corners, or `\"rectangular\"`\nfor a textarea without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
                 },
                 "attribute": "shape",
                 "reflect": false

package/dist/collection/components/toggle/test/color/toggle.e2e.js

@@ -3,7 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('toggle: color'), () => {
         test('should apply color when checked', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/toggle/test/enable-on-off-labels/toggle.e2e.js

@@ -3,7 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
+configs({ palettes: ['light', 'dark'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('toggle: enable-on-off-labels'), () => {
         test('should not have visual regressions', async ({ page }) => {
             await page.setContent(`

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

@@ -3,7 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('toggle: item'), () => {
         test('should render correctly in list', async ({ page }) => {
             await page.setContent(`
@@ -29,7 +29,7 @@ configs().forEach(({ title, screenshot, config }) => {
         });
     });
 });
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('toggle: item color contrast'), () => {
         test('label should have correct contrast when used in an item', async ({ page }) => {
             await page.setContent(`
@@ -73,6 +73,8 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
             await expect(list).toHaveScreenshot(screenshot(`toggle-stacked-label-in-item`));
         });
     });
+});
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, config }) => {
     test.describe(title('toggle: ionChange'), () => {
         test('clicking padded space within item should click the toggle', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/toggle/test/label/toggle.e2e.js

@@ -118,3 +118,32 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screen
         });
     });
 });
+configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('toggle: start placement'), () => {
+        test('should render the label in the start position', async ({ page }) => {
+            await page.setContent(`
+         <ion-toggle label-placement="start">Label</ion-toggle>
+       `, config);
+            const toggle = page.locator('ion-toggle');
+            await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-start`));
+        });
+    });
+    test.describe(title('toggle: end placement'), () => {
+        test('should render the label in the end position', async ({ page }) => {
+            await page.setContent(`
+         <ion-toggle label-placement="end">Label</ion-toggle>
+       `, config);
+            const toggle = page.locator('ion-toggle');
+            await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-end`));
+        });
+    });
+    test.describe(title('toggle: start long label'), () => {
+        test('long label should truncate', async ({ page }) => {
+            await page.setContent(`
+          <ion-toggle label-placement="start">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-toggle>
+        `, config);
+            const toggle = page.locator('ion-toggle');
+            await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-start-long-label`));
+        });
+    });
+});

package/dist/collection/components/toggle/test/sizes/toggle.e2e.js

@@ -3,7 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('toggle: sizes'), () => {
         test('should not have visual regressions', async ({ page }) => {
             await page.goto(`/src/components/toggle/test/sizes`, config);

package/dist/collection/components/toggle/test/states/toggle.e2e.js

@@ -3,7 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('toggle: states'), () => {
         test('should render disabled toggle correctly', async ({ page }) => {
             await page.setContent(`
@@ -28,3 +28,31 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
+/**
+ * Focused and Pressed states are only available in the Ionic theme
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('toggle: states'), () => {
+        test('should render focused toggle correctly', async ({ page }) => {
+            await page.setContent(`
+        <ion-toggle class="ion-focused">Label</ion-toggle>
+      `, config);
+            const toggle = page.locator('ion-toggle');
+            await expect(toggle).toHaveScreenshot(screenshot(`toggle-focused`));
+        });
+        test('should render pressed unchecked toggle correctly', async ({ page }) => {
+            await page.setContent(`
+        <ion-toggle class="ion-activated">Label</ion-toggle>
+      `, config);
+            const toggle = page.locator('ion-toggle');
+            await expect(toggle).toHaveScreenshot(screenshot(`toggle-unchecked-pressed`));
+        });
+        test('should render pressed checked toggle correctly', async ({ page }) => {
+            await page.setContent(`
+        <ion-toggle class="ion-activated" checked>Label</ion-toggle>
+      `, config);
+            const toggle = page.locator('ion-toggle');
+            await expect(toggle).toHaveScreenshot(screenshot(`toggle-checked-pressed`));
+        });
+    });
+});

package/dist/collection/components/toggle/toggle.ionic.css

@@ -0,0 +1,391 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * This is an auto-generated file, please do not change it directly.
+ * Ionic Design System
+ */
+/**
+ * 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 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.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  /**
+   * @prop --track-background: Background of the toggle track
+   * @prop --track-background-checked: Background of the toggle track when checked
+   * @prop --border-radius: Border radius of the toggle track
+   *
+   * @prop --handle-background: Background of the toggle handle
+   * @prop --handle-background-checked: Background of the toggle handle when checked
+   *
+   * @prop --handle-border-radius: Border radius of the toggle handle
+   * @prop --handle-box-shadow: Box shadow of the toggle handle
+   * @prop --handle-height: Height of the toggle handle
+   * @prop --handle-max-height: Maximum height of the toggle handle
+   * @prop --handle-width: Width of the toggle handle
+   * @prop --handle-spacing: Horizontal spacing around the toggle handle
+   * @prop --handle-transition: Transition of the toggle handle
+   */
+  /* stylelint-disable-next-line declaration-no-important */
+  box-sizing: content-box !important;
+  display: inline-block;
+  position: relative;
+  max-width: 100%;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+}
+
+:host(.in-item) {
+  flex: 1 1 0;
+  width: 100%;
+  height: 100%;
+}
+
+/**
+ * Toggle can be slotted
+ * in components such as item and
+ * toolbar which is why we do not
+ * limit the below behavior to just ion-item.
+ */
+:host([slot=start]),
+:host([slot=end]) {
+  flex: initial;
+  width: auto;
+}
+
+:host(.ion-focused) input {
+  border: 2px solid #5e9ed6;
+}
+
+:host(.toggle-disabled) {
+  pointer-events: none;
+}
+
+input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  opacity: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.toggle-wrapper {
+  display: flex;
+  position: relative;
+  flex-grow: 1;
+  height: inherit;
+  transition: background-color 15ms linear;
+  cursor: inherit;
+}
+
+/**
+ * If no label text is placed into the slot
+ * then the element should be hidden otherwise
+ * there will be additional margins added.
+ */
+.label-text-wrapper-hidden {
+  display: none;
+}
+
+.native-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+/**
+ * Label is on the left of the input in LTR and
+ * on the right in RTL.
+ */
+:host(.toggle-label-placement-start) .toggle-wrapper {
+  flex-direction: row;
+}
+
+/**
+ * Label is on the right of the input in LTR and
+ * on the left in RTL.
+ */
+:host(.toggle-label-placement-end) .toggle-wrapper {
+  flex-direction: row-reverse;
+}
+
+.toggle-icon-wrapper {
+  display: flex;
+  position: relative;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  transition: var(--handle-transition);
+  will-change: transform;
+}
+
+.toggle-icon {
+  border-radius: var(--border-radius);
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--track-background);
+  overflow: inherit;
+}
+
+:host(.toggle-checked) .toggle-icon {
+  background: var(--track-background-checked);
+}
+
+.toggle-inner {
+  border-radius: var(--handle-border-radius);
+  position: absolute;
+  left: var(--handle-spacing);
+  width: var(--handle-width);
+  height: var(--handle-height);
+  max-height: var(--handle-max-height);
+  transition: var(--handle-transition);
+  background: var(--handle-background);
+  box-shadow: var(--handle-box-shadow);
+  contain: strict;
+}
+
+/**
+ * We do not use the @ltr and @rtl mixins
+ * here because ion-toggle uses the Shadow DOM
+ * and WebKit does not support :host-context.
+ */
+:host(.toggle-ltr) .toggle-inner {
+  left: var(--handle-spacing);
+}
+
+:host(.toggle-rtl) .toggle-inner {
+  right: var(--handle-spacing);
+}
+
+:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper {
+  transform: translate3d(calc(100% - var(--handle-width)), 0, 0);
+}
+
+:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper {
+  transform: translate3d(calc(-100% + var(--handle-width)), 0, 0);
+}
+
+:host(.toggle-checked) .toggle-inner {
+  background: var(--handle-background-checked);
+}
+
+:host(.toggle-ltr.toggle-checked) .toggle-inner {
+  transform: translate3d(calc(var(--handle-spacing) * -2), 0, 0);
+}
+
+:host(.toggle-rtl.toggle-checked) .toggle-inner {
+  transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);
+}
+
+:host {
+  --track-background: var(--ionic-color-neutral-800, #626262);
+  --track-background-checked: var(--ion-color-primary, #105cef);
+  --border-radius: var(--ionic-border-radius-full, 999px);
+  --focus-ring-color: var(--ionic-state-focus-1, #9ec4fd);
+  --focus-ring-width: var(--ionic-border-size-050, 2px);
+  --handle-background: var(--ionic-color-base-white, #ffffff);
+  --handle-background-checked: var(--ionic-color-base-white, #ffffff);
+  --handle-border-radius: var(--ionic-border-radius-full, 999px);
+  --handle-height: var(--ionic-scale-500, 20px);
+  --handle-max-height: var(--ionic-scale-500, 20px);
+  --handle-width: var(--ionic-scale-500, 20px);
+  --handle-spacing: var(--ionic-space-050, 2px);
+  --handle-transition: transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms,
+    right 110ms ease-in-out 80ms;
+  font-size: var(--ionic-font-size-350, 0.875rem);
+  font-weight: var(--ionic-font-weight-regular, 400);
+  letter-spacing: var(--ionic-letter-spacing-0, 0);
+  line-height: var(--ionic-line-height-600, 24px);
+  text-decoration: none;
+  text-transform: none;
+  width: 100%;
+  z-index: 2;
+}
+
+.toggle-wrapper {
+  align-items: center;
+  min-height: var(--ionic-scale-1200, 48px);
+}
+
+.native-wrapper .toggle-icon {
+  width: var(--ionic-scale-1100, 44px);
+  height: var(--ionic-scale-600, 24px);
+  /**
+   * The handle box shadow should not
+   * overflow outside of the track container.
+   */
+  overflow: hidden;
+}
+
+:host(.ion-color.toggle-checked) .toggle-icon {
+  background: var(--ion-color-base);
+}
+
+:host(.ion-focused) .toggle-icon {
+  outline: var(--focus-ring-width) var(--ionic-border-style-solid, solid) var(--focus-ring-color);
+  outline-offset: var(--focus-ring-width);
+}
+
+:host(.ion-activated) .toggle-icon::after {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  background-color: var(--ionic-state-pressed, rgba(36, 36, 36, 0.08));
+  content: "";
+}
+
+:host(.toggle-disabled) .toggle-icon::after {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  background-color: var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));
+  content: "";
+  pointer-events: none;
+}
+
+.toggle-inner {
+  will-change: background-color, transform;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ionic-color-neutral-1200, #242424);
+}
+
+.toggle-inner .toggle-switch-icon {
+  width: var(--ionic-scale-400, 16px);
+  height: var(--ionic-scale-400, 16px);
+}
+
+/**
+* Label is on the left of the input in LTR and
+* on the right in RTL.
+*/
+:host .toggle-wrapper {
+  justify-content: space-between;
+}
+
+:host .label-text-wrapper {
+  /**
+  * The margin between the label and
+  * the input should be on the end
+  * when the label sits at the start.
+  */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: var(--ionic-space-400, 16px);
+  margin-inline-end: var(--ionic-space-400, 16px);
+  color: var(--ionic-color-neutral-1200, #242424);
+}
+
+/**
+* Label is on the right of the input in LTR and
+* on the left in RTL.
+*/
+:host(.toggle-label-placement-end) .toggle-wrapper {
+  justify-content: start;
+}
+
+/**
+* The margin between the label and
+* the input should be on the start
+* when the label sits at the end.
+*/
+:host(.toggle-label-placement-end) .label-text-wrapper {
+  -webkit-margin-start: var(--ionic-space-400, 16px);
+  margin-inline-start: var(--ionic-space-400, 16px);
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+}