@ionic/core 7.7.2-dev.11707926434.1affaed4 → 7.7.2-dev.11707932366.16baf005

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

@@ -80,12 +80,12 @@
   --padding-bottom: 0px;
   --padding-start: 0px;
   --placeholder-color: currentColor;
-  --placeholder-opacity: 0.6;
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   --background: transparent;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #3880ff);
-  --highlight-color-valid: var(--ion-color-success, #2dd36f);
-  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
+  --highlight-color-focused: var(--ion-color-primary, #0054e9);
+  --highlight-color-valid: var(--ion-color-success, #2dd55b);
+  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -95,17 +95,14 @@
   --highlight-color: var(--highlight-color-focused);
   display: block;
   position: relative;
+  width: 100%;
+  min-height: 44px;
   font-family: var(--ion-font-family, inherit);
   white-space: nowrap;
   cursor: pointer;
   z-index: 2;
 }
 
-:host(:not(.legacy-select)) {
-  width: 100%;
-  min-height: 44px;
-}
-
 /**
  * Since the label sits on top of the element,
  * the component needs to be taller otherwise the
@@ -120,27 +117,10 @@
   --highlight-color-focused: var(--ion-color-base);
 }
 
-:host(.legacy-select) {
-  -webkit-padding-start: var(--padding-start);
-  padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-}
-
-:host(.in-item:not(.legacy-select)) {
+:host(.in-item) {
   flex: 1 1 0;
 }
 
-:host(.in-item.legacy-select) {
-  position: static;
-  max-width: 45%;
-}
-
 :host(.select-disabled) {
   pointer-events: none;
 }
@@ -155,8 +135,8 @@
  * toolbar which is why we do not
  * limit the below behavior to just ion-item.
  */
-:host([slot=start]:not(.legacy-select)),
-:host([slot=end]:not(.legacy-select)) {
+:host([slot=start]),
+:host([slot=end]) {
   width: auto;
 }
 
@@ -165,50 +145,6 @@
   opacity: var(--placeholder-opacity);
 }
 
-:host(.legacy-select) label {
-  top: 0;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  appearance: none;
-  outline: none;
-  display: flex;
-  align-items: center;
-  opacity: 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;
-}
-
 button {
   position: absolute;
   top: 0;
@@ -802,8 +738,8 @@ button {
  * }
  */
 :host(.select-fill-solid) {
-  --background: var(--ion-color-step-50, #f2f2f2);
-  --border-color: var(--ion-color-step-500, gray);
+  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
+  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -839,8 +775,8 @@ button {
  */
 @media (any-hover: hover) {
   :host(.select-fill-solid:hover) {
-    --background: var(--ion-color-step-100, #e6e6e6);
-    --border-color: var(--ion-color-step-750, #404040);
+    --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
   }
 }
 /**
@@ -849,8 +785,8 @@ button {
  */
 :host(.select-fill-solid.select-expanded),
 :host(.select-fill-solid.ion-focused) {
-  --background: var(--ion-color-step-150, #d9d9d9);
-  --border-color: var(--ion-color-step-750, #404040);
+  --background: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
+  --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
 }
 
 :host(.select-fill-solid) .select-wrapper {
@@ -858,25 +794,10 @@ button {
    * Only the top left and top right borders should.
    * have a radius when using a solid fill.
    */
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-:host-context([dir=rtl]):host(.select-fill-solid) .select-wrapper, :host-context([dir=rtl]).select-fill-solid .select-wrapper {
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.select-fill-solid:dir(rtl)) .select-wrapper {
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: var(--border-radius);
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: 0px;
-  }
+  border-start-start-radius: var(--border-radius);
+  border-start-end-radius: var(--border-radius);
+  border-end-end-radius: 0px;
+  border-end-start-radius: 0px;
 }
 
 :host(.label-floating.select-fill-solid) .label-text-wrapper {
@@ -943,7 +864,7 @@ button {
  * }
  */
 :host(.select-fill-outline) {
-  --border-color: var(--ion-color-step-300, #b3b3b3);
+  --border-color: var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -971,7 +892,7 @@ button {
  */
 @media (any-hover: hover) {
   :host(.select-fill-outline:hover) {
-    --border-color: var(--ion-color-step-750, #404040);
+    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
   }
 }
 /**
@@ -1133,12 +1054,11 @@ button {
   border-inline-start: var(--border-width) var(--border-style) var(--border-color);
 }
 
-:host(.select-ltr.select-fill-outline) .select-outline-start {
-  border-radius: var(--border-radius) 0px 0px var(--border-radius);
-}
-
-:host(.select-rtl.select-fill-outline) .select-outline-start {
-  border-radius: 0px var(--border-radius) var(--border-radius) 0px;
+:host(.select-fill-outline) .select-outline-start {
+  border-start-start-radius: var(--border-radius);
+  border-start-end-radius: 0px;
+  border-end-end-radius: 0px;
+  border-end-start-radius: var(--border-radius);
 }
 
 :host(.select-fill-outline) .select-outline-start {
@@ -1158,12 +1078,11 @@ button {
   border-inline-end: var(--border-width) var(--border-style) var(--border-color);
 }
 
-:host(.select-ltr.select-fill-outline) .select-outline-end {
-  border-radius: 0px var(--border-radius) var(--border-radius) 0px;
-}
-
-:host(.select-rtl.select-fill-outline) .select-outline-end {
-  border-radius: var(--border-radius) 0px 0px var(--border-radius);
+:host(.select-fill-outline) .select-outline-end {
+  border-start-start-radius: 0px;
+  border-start-end-radius: var(--border-radius);
+  border-end-end-radius: var(--border-radius);
+  border-end-start-radius: 0px;
 }
 
 :host(.select-fill-outline) .select-outline-end {
@@ -1186,20 +1105,13 @@ button {
 
 :host {
   --border-width: 1px;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
-}
-
-:host(.legacy-select) {
-  --padding-top: 10px;
-  --padding-end: 0;
-  --padding-bottom: 10px;
-  --padding-start: 16px;
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
 }
 
 .select-icon {
   width: 0.8125rem;
   transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--ion-color-step-500, gray);
+  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
 }
 
 /**
@@ -1230,32 +1142,8 @@ button {
   transition: transform 200ms;
   background: var(--highlight-color);
 }
-@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;
-    }
-  }
+.select-highlight {
+  inset-inline-start: 0;
 }
 
 :host(.select-expanded) .select-highlight,
@@ -1271,27 +1159,8 @@ button {
 :host(.in-item) .select-highlight {
   bottom: 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;
-    }
-  }
+:host(.in-item) .select-highlight {
+  inset-inline-start: 0;
 }
 
 /**
@@ -1299,7 +1168,7 @@ button {
  * when the select is activated.
  * This should only happen on MD.
  */
-:host(.select-expanded:not(.legacy-select):not(.has-expanded-icon)) .select-icon {
+:host(.select-expanded:not(.has-expanded-icon)) .select-icon {
   transform: rotate(180deg);
 }
 

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

@@ -4,10 +4,74 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-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);
+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);
             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: 'fe62f2d62ede6866e20969a2e7ae25453648fcef', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: '6edad0b52da16621ce55335d732bac1e27e485dc', 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: '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))));
+        return (h(Host, { key: '4ef1871f74e2ba6a5bd16d2c407d73edffb87f1f', class: getIonMode(this) }, h("ion-list", { key: '7e8e5f1e129be79f0bcd09bcaca6c09606ea0195' }, 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, 56, 128, 255), 0.08);
-  --background-focused: var(--ion-color-primary, #3880ff);
+  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);
+  --background-focused: var(--ion-color-primary, #0054e9);
   --background-focused-opacity: 0.2;
-  --background-hover: var(--ion-color-primary, #3880ff);
+  --background-hover: var(--ion-color-primary, #0054e9);
   --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, #3880ff);
+  --color: var(--ion-color-primary, #0054e9);
 }

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

@@ -0,0 +1,32 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import AxeBuilder from "@axe-core/playwright";
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ config, title }) => {
+    test.describe(title('select-popover: a11y'), () => {
+        test('should not have accessibility violations when header is defined', async ({ page }) => {
+            await page.setContent(`
+          <ion-popover is-open="true">
+            <ion-select-popover multiple="false"></ion-select-popover>
+          </ion-popover>
+
+          <script>
+            const selectPopover = document.querySelector('ion-select-popover');
+            selectPopover.options = [
+              { value: 'apple', text: 'Apple', disabled: false, checked: true },
+              { value: 'banana', text: 'Banana', disabled: false, checked: false },
+            ];
+          </script>
+        `, config);
+            const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+            const popover = page.locator('ion-popover');
+            await popover.evaluate((el) => el.present());
+            await ionPopoverDidPresent.next();
+            // TODO(FW-5698): remove withRules() call and resolve Axe errors
+            const results = await new AxeBuilder({ page }).withRules('color-contrast').analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});

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: 'ee3cd9a5448fb69c8ddfc88a993f9968e1a381ff', class: {
+        return (h(Host, { key: '8e398fb1d49ec076737c3c7cac58765fee3267b1', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '8aa792724a3b77877062e9aae838d9e1572b576f' }, "\u00A0")));
+            } }, h("span", { key: '1fff010f1dfdc2c0985f419299a89cd4d498c340' }, "\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: '47cd6cd98e36e5b99fbe263a6a102610cae240c3', class: createColorClasses(self.color, {
+        return (h(Host, { key: '93010f0f8636c369faa896a36b47779c7f9aa363', 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,31 +127,14 @@
   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;
-  box-shadow: none;
-  z-index: 0;
-}
-
-:host(.split-pane-visible) ::slotted(.split-pane-main) {
   flex: 1;
+  box-shadow: none;
   /**
    * Content can overflow outside of a router outlet
    * or a nav container to allow for the translucent
@@ -161,26 +144,13 @@
    * we disable the overflow when that is the case.
    */
   overflow: hidden;
-}
-
-: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;
+  z-index: 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
@@ -237,29 +207,7 @@
  * }
  */
 :host {
-  --border: 0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
+  --border: 0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-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);
 }