@ionic/core 7.7.2-dev.11707425083.192d8103 → 7.7.2-dev.11707881769.185d2a14

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

@@ -280,8 +280,32 @@
   width: 1.3125rem;
   height: 1.3125rem;
 }
-.searchbar-search-icon {
-  inset-inline-start: 16px;
+@supports (inset-inline-start: 0) {
+  .searchbar-search-icon {
+    inset-inline-start: 16px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .searchbar-search-icon {
+    left: 16px;
+  }
+  :host-context([dir=rtl]) .searchbar-search-icon {
+    left: unset;
+    right: unset;
+    right: 16px;
+  }
+  [dir=rtl] .searchbar-search-icon {
+    left: unset;
+    right: unset;
+    right: 16px;
+  }
+  @supports selector(:dir(rtl)) {
+    .searchbar-search-icon:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 16px;
+    }
+  }
 }
 
 .searchbar-cancel-button {
@@ -295,8 +319,32 @@
   background-color: transparent;
   font-size: 1.5em;
 }
-.searchbar-cancel-button {
-  inset-inline-start: 9px;
+@supports (inset-inline-start: 0) {
+  .searchbar-cancel-button {
+    inset-inline-start: 9px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .searchbar-cancel-button {
+    left: 9px;
+  }
+  :host-context([dir=rtl]) .searchbar-cancel-button {
+    left: unset;
+    right: unset;
+    right: 9px;
+  }
+  [dir=rtl] .searchbar-cancel-button {
+    left: unset;
+    right: unset;
+    right: 9px;
+  }
+  @supports selector(:dir(rtl)) {
+    .searchbar-cancel-button:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 9px;
+    }
+  }
 }
 
 .searchbar-search-icon,
@@ -347,8 +395,32 @@
   border: 0;
   background-color: transparent;
 }
-.searchbar-clear-button {
-  inset-inline-end: 13px;
+@supports (inset-inline-start: 0) {
+  .searchbar-clear-button {
+    inset-inline-end: 13px;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .searchbar-clear-button {
+    right: 13px;
+  }
+  :host-context([dir=rtl]) .searchbar-clear-button {
+    left: unset;
+    right: unset;
+    left: 13px;
+  }
+  [dir=rtl] .searchbar-clear-button {
+    left: unset;
+    right: unset;
+    left: 13px;
+  }
+  @supports selector(:dir(rtl)) {
+    .searchbar-clear-button:dir(rtl) {
+      left: unset;
+      right: unset;
+      left: 13px;
+    }
+  }
 }
 
 .searchbar-clear-button.ion-activated {

package/dist/collection/components/segment/segment.js

@@ -420,14 +420,14 @@ export class Segment {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f27560e3fe5c7b9b7b4097a055eb687fbd926b13', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '971e62fdaef3b6380aa1bf214605a5bfde662abf', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, h("slot", { key: '75fad64af573a3cf08be98e106b2575825194271' })));
+            }) }, h("slot", { key: 'eaa7a8a3d5237c8bbc03f57690fd0aa7e4c124e3' })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,29 +4,6 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-/**
- * Only md mode uses ion-color() for the segment button
- */
-configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('segment: a11y for ion-color()'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <main>
-          <ion-segment aria-label="Tab Options" value="bookmarks">
-            <ion-segment-button value="bookmarks">
-              <ion-label>Bookmarks</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="reading-list">
-              <ion-label>Reading List</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </main>
-      `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 configs().forEach(({ title, config }) => {
     test.describe(title('segment: a11y'), () => {
         test('should not have any axe violations', async ({ page }) => {

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

@@ -78,7 +78,7 @@ export class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: 'd4184f03b4d567c34e445f821ac7ad9f9f999244', class: {
+        return (h(Host, { key: 'b50b375ed817b47720b743078202f38c737a4034', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -94,10 +94,10 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: 'a67f60e7327b87a985f066e67cb917c7ed0c495f', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '7e1cb99f67a63f1600987a8beb41b1110d482d12', class: "button-inner" }, h("slot", { key: 'b010b8e06b7c9c79afc6a97263603458d65782b2' })), mode === 'md' && h("ion-ripple-effect", null)), h("div", { key: '7bf296dfd23250f15d78fd2dd0316c56a33ccbe5', part: "indicator", class: {
+            } }, h("button", Object.assign({ key: '402f6467ec9ce97aa1df2c72382d07242b51c114', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '4f5a1988296c4e59e64255feff264bbbe2ccc312', class: "button-inner" }, h("slot", { key: '35b2a26cca8c76a111e447fa8cae464c504fcb97' })), mode === 'md' && h("ion-ripple-effect", null)), h("div", { key: 'adca0f1e0efcf18b575013d4fb2f22814c81c147', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, h("div", { key: '8f3a835079c23cb0d18c975361a5678685ab51fc', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("div", { key: '8a23ffe49dc115ee0603e298bb6a39834b910b67', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segment-button/segment-button.md.css

@@ -362,7 +362,7 @@ ion-ripple-effect {
   --background-focused-opacity: .12;
   --background-hover-opacity: .04;
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6);
-  --color-checked: var(--ion-color-primary, #0054e9);
+  --color-checked: var(--ion-color-primary, #3880ff);
   --indicator-box-shadow: none;
   --indicator-color: var(--color-checked);
   --indicator-height: 2px;
@@ -425,7 +425,7 @@ ion-ripple-effect {
   --background: var(--ion-toolbar-segment-background, none);
   --background-checked: var(--ion-toolbar-segment-background-checked, none);
   --color: var(--ion-toolbar-segment-color, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6));
-  --color-checked: var(--ion-toolbar-segment-color-checked, var(--ion-color-primary, #0054e9));
+  --color-checked: var(--ion-toolbar-segment-color-checked, var(--ion-color-primary, #3880ff));
   --indicator-color: var(--ion-toolbar-segment-color-checked, var(--color-checked));
 }
 

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

@@ -83,9 +83,9 @@
   --placeholder-opacity: 0.6;
   --background: transparent;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -183,10 +183,28 @@
   align-items: center;
   opacity: 0;
 }
-:host(.legacy-select) label {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.legacy-select) label {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.legacy-select) label {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.legacy-select) label, :host-context([dir=rtl]).legacy-select label {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.legacy-select:dir(rtl)) label {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 :host(.legacy-select) label::-moz-focus-inner {
   border: 0;
 }

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

@@ -83,9 +83,9 @@
   --placeholder-opacity: 0.6;
   --background: transparent;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -183,10 +183,28 @@
   align-items: center;
   opacity: 0;
 }
-:host(.legacy-select) label {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.legacy-select) label {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.legacy-select) label {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.legacy-select) label, :host-context([dir=rtl]).legacy-select label {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.legacy-select:dir(rtl)) label {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
-
 :host(.legacy-select) label::-moz-focus-inner {
   border: 0;
 }
@@ -1212,8 +1230,32 @@ button {
   transition: transform 200ms;
   background: var(--highlight-color);
 }
-.select-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .select-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .select-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .select-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .select-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .select-highlight:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host(.select-expanded) .select-highlight,
@@ -1229,8 +1271,27 @@ button {
 :host(.in-item) .select-highlight {
   bottom: 0;
 }
-:host(.in-item) .select-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.in-item) .select-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.in-item) .select-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.in-item) .select-highlight, :host-context([dir=rtl]).in-item .select-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.in-item:dir(rtl)) .select-highlight {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 /**

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

@@ -4,74 +4,10 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
-    test.describe(title('textarea: a11y'), () => {
-        test('default layout should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <main>
-          <ion-select label="Label" placeholder="Placeholder"></ion-select>
-          <ion-select placeholder="Placeholder">
-            <div slot="label">Label</div>
-          </ion-select>
-          <ion-select label="Label" value="a">
-            <ion-select-option value="a">Apple</ion-select-option>
-          </ion-select>
-          <ion-select aria-label="Label"></ion-select>
-          <ion-item>
-            <ion-select label="My Label" value="apples">
-              <ion-select-option value="apples">Apples</ion-select-option>
-              <ion-select-option value="bananas">Bananas</ion-select-option>
-              <ion-select-option value="oranges">Oranges</ion-select-option>
-            </ion-select>
-          </ion-item>
-          <ion-select id="multiple" multiple="true" label="My Label">
-            <ion-select-option value="apples">Apples</ion-select-option>
-            <ion-select-option value="bananas">Bananas</ion-select-option>
-            <ion-select-option value="oranges">Oranges</ion-select-option>
-          </ion-select>
-          <ion-select label="My Label" label-placement="floating">
-            <ion-icon slot="start" name="pizza" aria-hidden="true"></ion-icon>
-            <ion-select-option value="apples">Apples</ion-select-option>
-            <ion-select-option value="bananas">Bananas</ion-select-option>
-            <ion-select-option value="oranges">Oranges</ion-select-option>
-            <ion-button slot="end" aria-label="button">
-              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
-            </ion-button>
-          </ion-select>
-
-          <script>
-            const multiple = document.querySelector('#multiple');
-            multiple.value = ['apples', 'bananas'];
-          </script>
-        </main>
-      `, config);
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-        test('focused state should not have accessibility violations', async ({ page }) => {
-            /**
-             * The primary color against the focus background
-             * when using fill="solid" does not meet AA
-             * contrast guidelines so it excluded from the test.
-             * The contrast here is a significant improvement
-             * over what Ionic has had in the past, so the team
-             * has decided that this tradeoff is acceptable since
-             * the scope of the problem is limited to the focus
-             * state with the primary color when fill="solid".
-             */
-            await page.setContent(`
-        <main>
-          <ion-select class="has-focus" label="Label" value="a">
-            <ion-select-option value="a">Apple</ion-select-option>
-          </ion-select>
-          <ion-select class="has-focus" label-placement="floating" label="Label" value="a">
-            <ion-select-option value="a">Apple</ion-select-option>
-          </ion-select>
-          <ion-select class="has-focus" fill="outline" label-placement="floating" label="Label" value="a">
-            <ion-select-option value="a">Apple</ion-select-option>
-          </ion-select>
-        </main>
-      `, config);
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('select: a11y'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.goto(`/src/components/select/test/a11y`, config);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });

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

@@ -10,7 +10,7 @@ export class SelectOption {
         this.value = undefined;
     }
     render() {
-        return h(Host, { key: '31b0bd4d8a1dad5df942a5dc9a7a767796dbb151', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: 'fe62f2d62ede6866e20969a2e7ae25453648fcef', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -102,7 +102,7 @@ export class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: 'b8a359fd054428d0d8331899043d2af7aaa747c6', class: getIonMode(this) }, h("ion-list", { key: '866d67292b30232c8ba21cc70fd540a24fe47997' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
+        return (h(Host, { key: '9d3995131364d4f1d282e0a1fc34e778e94c9f98', class: getIonMode(this) }, h("ion-list", { key: '14244dcd6375eb61d65f3a9450d42a5d7b2d6541' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

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

@@ -197,10 +197,10 @@ ion-item {
 }
 
 .item-radio-checked {
-  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);
-  --background-focused: var(--ion-color-primary, #0054e9);
+  --background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08);
+  --background-focused: var(--ion-color-primary, #3880ff);
   --background-focused-opacity: 0.2;
-  --background-hover: var(--ion-color-primary, #0054e9);
+  --background-hover: var(--ion-color-primary, #3880ff);
   --background-hover-opacity: 0.12;
 }
 
@@ -208,5 +208,5 @@ ion-item {
   --background-activated: var(--ion-item-color, var(--ion-text-color, #000));
   --background-focused: var(--ion-item-color, var(--ion-text-color, #000));
   --background-hover: var(--ion-item-color, var(--ion-text-color, #000));
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
 }

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

@@ -25,11 +25,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ccf0197ee0c5024cac2d3d67979a716317326c7a', class: {
+        return (h(Host, { key: 'ee3cd9a5448fb69c8ddfc88a993f9968e1a381ff', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '8ed2bf29c02490de13e138e5d087b1a94821b264' }, "\u00A0")));
+            } }, h("span", { key: '8aa792724a3b77877062e9aae838d9e1572b576f' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,7 +39,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '261f0280d74caaf1a9a824dcb1453a8df07f9741', class: createColorClasses(self.color, {
+        return (h(Host, { key: '47cd6cd98e36e5b99fbe263a6a102610cae240c3', class: createColorClasses(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

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

@@ -127,14 +127,31 @@
   contain: strict;
 }
 
+/**
+ * Do not pass CSS Variables down on larger
+ * screens as we want them to affect the outer
+ * `ion-menu` rather than the inner content
+ */
+::slotted(ion-menu.menu-pane-visible) {
+  flex: 0 1 auto;
+  width: var(--side-width);
+  min-width: var(--side-min-width);
+  max-width: var(--side-max-width);
+}
+
+:host(.split-pane-visible) ::slotted(.split-pane-side),
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   position: relative;
-  flex: 1;
   box-shadow: none;
+  z-index: 0;
+}
+
+:host(.split-pane-visible) ::slotted(.split-pane-main) {
+  flex: 1;
   /**
    * Content can overflow outside of a router outlet
    * or a nav container to allow for the translucent
@@ -144,13 +161,26 @@
    * we disable the overflow when that is the case.
    */
   overflow: hidden;
-  z-index: 0;
+}
+
+:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),
+:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled) {
+  display: flex;
+  flex-shrink: 0;
 }
 
 ::slotted(.split-pane-side:not(ion-menu)) {
   display: none;
 }
 
+:host(.split-pane-visible) ::slotted(.split-pane-side) {
+  order: -1;
+}
+
+:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) {
+  order: 1;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -210,4 +240,26 @@
   --border: 0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
   --side-min-width: 270px;
   --side-max-width: 28%;
+}
+
+:host(.split-pane-visible) ::slotted(.split-pane-side) {
+  -webkit-border-start: 0;
+  border-inline-start: 0;
+  -webkit-border-end: var(--border);
+  border-inline-end: var(--border);
+  border-top: 0;
+  border-bottom: 0;
+  min-width: var(--side-min-width);
+  max-width: var(--side-max-width);
+}
+
+:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]) {
+  -webkit-border-start: var(--border);
+  border-inline-start: var(--border);
+  -webkit-border-end: 0;
+  border-inline-end: 0;
+  border-top: 0;
+  border-bottom: 0;
+  min-width: var(--side-min-width);
+  max-width: var(--side-max-width);
 }