@ionic/core 8.8.6-dev.11777928681.1e4919af → 8.8.6-dev.11778015413.1dc85fcb

package/dist/collection/components/select-popover/select-popover.js

@@ -3,13 +3,9 @@
  */
 import { Host, h, forceUpdate } from "@stencil/core";
 import { safeCall } from "../../utils/overlays";
-import { renderOptionLabel } from "../../utils/select-option-render";
 import { getClassMap } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- *
  * @internal
  */
 export class SelectPopover {
@@ -80,93 +76,56 @@ export class SelectPopover {
         }
     }
     renderCheckboxOptions(options) {
-        return options.map((option, index) => {
-            /**
-             * Cast to `SelectOverlayOption` to access rich content
-             * fields (`startContent`, `endContent`, `description`)
-             * that are passed through from `ion-select` but not
-             * part of the public `SelectPopoverOption` interface.
-             */
-            const richOption = option;
-            const optionLabelOptions = {
-                id: `popover-option-${index}`,
-                label: richOption.text,
-                startContent: richOption.startContent,
-                endContent: richOption.endContent,
-                description: richOption.description,
-            };
-            return (h("ion-item", { class: Object.assign({
-                    // TODO FW-4784
-                    'item-checkbox-checked': option.checked
-                }, getClassMap(option.cssClass)) }, h("ion-checkbox", { value: option.value, disabled: option.disabled, checked: option.checked, justify: "start", labelPlacement: "end", onIonChange: (ev) => {
-                    this.setChecked(ev);
-                    this.callOptionHandler(ev);
-                    // TODO FW-4784
-                    forceUpdate(this);
-                } }, renderOptionLabel(optionLabelOptions, 'select-option-label'))));
-        });
+        return options.map((option) => (h("ion-item", { class: Object.assign({
+                // TODO FW-4784
+                'item-checkbox-checked': option.checked
+            }, getClassMap(option.cssClass)) }, h("ion-checkbox", { value: option.value, disabled: option.disabled, checked: option.checked, justify: "start", labelPlacement: "end", onIonChange: (ev) => {
+                this.setChecked(ev);
+                this.callOptionHandler(ev);
+                // TODO FW-4784
+                forceUpdate(this);
+            } }, option.text))));
     }
     renderRadioOptions(options) {
         const checked = options.filter((o) => o.checked).map((o) => o.value)[0];
-        return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, options.map((option, index) => {
-            /**
-             * Cast to `SelectOverlayOption` to access rich content
-             * fields (`startContent`, `endContent`, `description`)
-             * that are passed through from `ion-select` but not
-             * part of the public `SelectPopoverOption` interface.
-             */
-            const richOption = option;
-            const optionLabelOptions = {
-                id: `popover-option-${index}`,
-                label: richOption.text,
-                startContent: richOption.startContent,
-                endContent: richOption.endContent,
-                description: richOption.description,
-            };
-            return (h("ion-item", { class: Object.assign({
-                    // TODO FW-4784
-                    'item-radio-checked': option.value === checked
-                }, getClassMap(option.cssClass)) }, h("ion-radio", { value: option.value, disabled: option.disabled, onClick: () => this.dismissParentPopover(), onKeyDown: (ev) => {
-                    if (ev.key === 'Enter' && !ev.repeat) {
-                        this.pendingEnterTarget = ev.currentTarget;
-                    }
-                }, onKeyUp: (ev) => {
-                    if (ev.key === ' ') {
-                        // Space selects and dismisses in one press.
+        return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, options.map((option) => (h("ion-item", { class: Object.assign({
+                // TODO FW-4784
+                'item-radio-checked': option.value === checked
+            }, getClassMap(option.cssClass)) }, h("ion-radio", { value: option.value, disabled: option.disabled, onClick: () => this.dismissParentPopover(), onKeyDown: (ev) => {
+                if (ev.key === 'Enter' && !ev.repeat) {
+                    this.pendingEnterTarget = ev.currentTarget;
+                }
+            }, onKeyUp: (ev) => {
+                if (ev.key === ' ') {
+                    // Space selects and dismisses in one press.
+                    this.dismissParentPopover();
+                }
+                else if (ev.key === 'Enter') {
+                    const shouldDismiss = this.pendingEnterTarget === ev.currentTarget;
+                    this.pendingEnterTarget = null;
+                    if (shouldDismiss) {
                         this.dismissParentPopover();
                     }
-                    else if (ev.key === 'Enter') {
-                        const shouldDismiss = this.pendingEnterTarget === ev.currentTarget;
-                        this.pendingEnterTarget = null;
-                        if (shouldDismiss) {
-                            this.dismissParentPopover();
-                        }
-                    }
-                } }, renderOptionLabel(optionLabelOptions, 'select-option-label'))));
-        })));
+                }
+            } }, option.text))))));
     }
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '75388b15e655f05df0849bbcd79064e4f9f72294', class: {
-                [theme]: true,
-            } }, h("ion-list", { key: '14a2f8e328145d7563e9f1924637e08ba3f64f07' }, header !== undefined && h("ion-list-header", { key: '22f0b835c1ea3c13e54dc3be563dcb2dc8d7f53e' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'd0464a9be0c4c3f5df33597929b89d20bc57ca7b' }, h("ion-label", { key: '362f77d17c4613a27ced112cc056369ac6915fc7', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '7166ad9c5a5f39ee3006e59ab069bbee6fbf8c2f' }, subHeader), message !== undefined && h("p", { key: 'a195ed5683525cf6d63b6b8c36c49965dcab7315' }, message)))), this.renderOptions(options))));
+        return (h(Host, { key: '81783ad099ad52b3e035efa18e5a23be766faf7b', class: getIonMode(this) }, h("ion-list", { key: '319171787e9c2228d1d5a0133b2f5e0998644516' }, header !== undefined && h("ion-list-header", { key: '09a0fdbe2807c270b9abdb908965f72c4838030c' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'ede19cb8e121fd14a2335fcb81cc59b9a102eac5' }, h("ion-label", { key: '6b98c0f132bc6161299b22c0e56092f85b7b0095', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '8053e175eb36d7b8f52df1f93cee48ee0794857e' }, subHeader), message !== undefined && h("p", { key: '508673abcda7444ed8f8c828b5418dd48ef86b8e' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["select-popover.ios.scss"],
-            "md": ["select-popover.md.scss"],
-            "ionic": ["select-popover.ionic.scss"]
+            "md": ["select-popover.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select-popover.ios.css"],
-            "md": ["select-popover.md.css"],
-            "ionic": ["select-popover.ionic.css"]
+            "md": ["select-popover.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/select-popover/select-popover.md.css

@@ -1,64 +1,3 @@
-/**
- * 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.
- */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -139,39 +78,6 @@ ion-label {
   overflow-y: auto;
 }
 
-.select-option-label {
-  display: flex;
-  align-items: center;
-}
-
-.select-option-label-text {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.select-option-description {
-  display: block;
-}
-
-.select-option-label {
-  gap: 12px;
-}
-
-.select-option-description {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 5px;
-  padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-  font-size: 0.75rem;
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -227,12 +133,6 @@ ion-label {
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/skeleton-text/skeleton-text.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -4,11 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { hostContext } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class SkeletonText {
     constructor() {
         /**
@@ -31,12 +27,12 @@ export class SkeletonText {
     render() {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '5014563646b6c5213750d503babce3013b66ec96', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '887d958d982345ce610730ab5c9ae35010430f75', class: {
+                [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '4b816883b1c71bb1db66d8b2b084559f7cb489bd' }, "\u00A0")));
+            } }, h("span", { key: 'a184f4b9780a2aada0a16729109ac81436e9c9e1' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/{spinner.ionic.css → spinner.css}

@@ -1,31 +1,3 @@
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -90,7 +62,6 @@
   width: 28px;
   height: 28px;
   color: var(--color);
-  overflow: hidden;
   user-select: none;
 }
 
@@ -127,6 +98,16 @@ svg {
   }
 }
 
+:host(.spinner-lines) line,
+:host(.spinner-lines-small) line {
+  stroke-width: 7px;
+}
+
+:host(.spinner-lines-sharp) line,
+:host(.spinner-lines-sharp-small) line {
+  stroke-width: 4px;
+}
+
 :host(.spinner-lines) line,
 :host(.spinner-lines-small) line,
 :host(.spinner-lines-sharp) line,
@@ -248,53 +229,4 @@ svg {
     stroke-dasharray: 100px, 200px;
     stroke-dashoffset: -125px;
   }
-}
-:host {
-  --color: var(--token-primitives-neutral-800, #626262);
-  width: var(--token-scale-700, 28px);
-  height: var(--token-scale-700, 28px);
-}
-
-:host(.ion-color-medium) {
-  color: var(--ion-color-medium-subtle-contrast, var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262)));
-}
-
-:host(.spinner-lines) line,
-:host(.spinner-lines-small) line {
-  stroke-width: var(--token-scale-150, 6px);
-}
-
-:host(.spinner-lines-sharp) line,
-:host(.spinner-lines-sharp-small) line {
-  stroke-width: var(--token-scale-100, 4px);
-}
-
-/* Extra Small */
-:host(.spinner-xsmall) {
-  width: var(--token-scale-600, 24px);
-  height: var(--token-scale-600, 24px);
-}
-
-/* Small */
-:host(.spinner-small) {
-  width: var(--token-scale-800, 32px);
-  height: var(--token-scale-800, 32px);
-}
-
-/* Medium */
-:host(.spinner-medium) {
-  width: var(--token-scale-1000, 40px);
-  height: var(--token-scale-1000, 40px);
-}
-
-/* Large */
-:host(.spinner-large) {
-  width: var(--token-scale-1200, 48px);
-  height: var(--token-scale-1200, 48px);
-}
-
-/* Extra Large */
-:host(.spinner-xlarge) {
-  width: var(--token-scale-1400, 56px);
-  height: var(--token-scale-1400, 56px);
 }

package/dist/collection/components/spinner/spinner.js

@@ -4,12 +4,8 @@
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonTheme, getIonMode } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { SPINNERS } from "./spinner-configs";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class Spinner {
     constructor() {
         /**
@@ -25,24 +21,11 @@ export class Spinner {
         }
         return mode === 'ios' ? 'lines' : 'circular';
     }
-    getSize() {
-        const theme = getIonTheme(this);
-        const { size } = this;
-        // TODO(ROU-10912): Remove theme check when sizes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (size === undefined) {
-            return 'xsmall';
-        }
-        return size;
-    }
     render() {
         var _a;
         const self = this;
-        const theme = getIonTheme(self);
+        const mode = getIonMode(self);
         const spinnerName = self.getName();
-        const size = this.getSize();
         const spinner = (_a = SPINNERS[spinnerName]) !== null && _a !== void 0 ? _a : SPINNERS['lines'];
         const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
         const svgs = [];
@@ -56,27 +39,22 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '0b3ce4b99c2c828d05b507c4f073811ebbe17d0f', class: createColorClasses(self.color, {
-                [theme]: true,
+        return (h(Host, { key: 'c35ebd01186e860acb9cac260193f0836424fdf4', class: createColorClasses(self.color, {
+                [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
-                [`spinner-${size}`]: size !== undefined,
             }), role: "progressbar", style: spinner.elmDuration ? { animationDuration: duration + 'ms' } : {} }, svgs));
     }
     static get is() { return "ion-spinner"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["spinner.native.scss"],
-            "md": ["spinner.native.scss"],
-            "ionic": ["spinner.ionic.scss"]
+            "$": ["spinner.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["spinner.native.css"],
-            "md": ["spinner.native.css"],
-            "ionic": ["spinner.ionic.css"]
+            "$": ["spinner.css"]
         };
     }
     static get properties() {
@@ -171,25 +149,6 @@ export class Spinner {
                 "reflect": false,
                 "attribute": "paused",
                 "defaultValue": "false"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'",
-                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xsmall\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to `\"xsmall\"` for the smallest size.\nSet to `\"small\"` for a smaller size.\nSet to `\"medium\"` for a medium size.\nSet to `\"large\"` for a large size.\nSet to `\"xlarge\"` for the largest size.\n\nDefaults to `\"xsmall\"` for the `ionic` theme, undefined for all other themes."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size"
             }
         };
     }

package/dist/collection/components/split-pane/split-pane.ios.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -59,12 +53,6 @@
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -128,8 +116,8 @@
    * @prop --side-width: Width of the side pane. Does not apply when split pane is collapsed.
    */
   --side-width: 100%;
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -140,8 +128,8 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: relative;
@@ -163,12 +151,6 @@
   display: none;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/split-pane/split-pane.js

@@ -3,7 +3,7 @@
  */
 import { Build, Host, h } from "@stencil/core";
 import { printIonWarning } from "../../utils/logging/index";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 // TODO(FW-2832): types
 const SPLIT_PANE_MAIN = 'split-pane-main';
 const SPLIT_PANE_SIDE = 'split-pane-side';
@@ -15,10 +15,6 @@ const QUERY = {
     xl: '(min-width: 1200px)',
     never: '',
 };
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class SplitPane {
     constructor() {
         this.visible = false;
@@ -129,28 +125,26 @@ export class SplitPane {
         }
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '9d0c67f1f81b09bb9a6f14a66053e5cc7431a286', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '694e989fafcfe2453e0a83b3cb736efaa1eb4fec', class: {
+                [mode]: true,
                 // Used internally for styling
-                [`split-pane-${theme}`]: true,
+                [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: 'ab7b3050d3c5484bd00949cf57efa4396b4d5bc3' })));
+            } }, h("slot", { key: 'dde7e9382b62cc11971aa233cf98c2314ae4f720' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["split-pane.ios.scss"],
-            "md": ["split-pane.md.scss"],
-            "ionic": ["split-pane.md.scss"]
+            "md": ["split-pane.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["split-pane.ios.css"],
-            "md": ["split-pane.md.css"],
-            "ionic": ["split-pane.md.css"]
+            "md": ["split-pane.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/split-pane/split-pane.md.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -59,12 +53,6 @@
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -128,8 +116,8 @@
    * @prop --side-width: Width of the side pane. Does not apply when split pane is collapsed.
    */
   --side-width: 100%;
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -140,8 +128,8 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: relative;
@@ -163,12 +151,6 @@
   display: none;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use