@ionic/core 7.7.2-dev.11707932366.16baf005 → 7.7.2-dev.11707941206.120570b8

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

@@ -81,7 +81,7 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
+  --placeholder-opacity: 0.6;
   --padding-top: 0px;
   --padding-end: 0px;
   --padding-bottom: 0px;
@@ -89,9 +89,9 @@
   --background: transparent;
   --color: initial;
   --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
@@ -102,7 +102,6 @@
   display: block;
   position: relative;
   width: 100%;
-  min-height: 44px;
   /* stylelint-disable-next-line all */
   padding: 0 !important;
   color: var(--color);
@@ -110,15 +109,44 @@
   z-index: 2;
 }
 
+:host(.legacy-input) {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  background: var(--background);
+}
+
+:host(.legacy-input) .native-input {
+  -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);
+  border-radius: var(--border-radius);
+}
+
+:host-context(ion-item:not(.item-label):not(.item-has-modern-input)) {
+  --padding-start: 0;
+}
+
 :host-context(ion-item)[slot=start],
 :host-context(ion-item)[slot=end] {
   width: auto;
 }
 
+:host(.legacy-input.ion-color) {
+  color: var(--ion-color-base);
+}
+
 :host(.ion-color) {
   --highlight-color-focused: var(--ion-color-base);
 }
 
+:host(:not(.legacy-input)) {
+  min-height: 44px;
+}
+
 /**
  * Since the label sits on top of the element,
  * the component needs to be taller otherwise the
@@ -191,8 +219,32 @@
   position: absolute;
   pointer-events: none;
 }
-.cloned-input {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .cloned-input {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .cloned-input {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .cloned-input:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 /**
@@ -204,6 +256,13 @@
   opacity: 1;
 }
 
+:host(.legacy-input) .input-clear-icon {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 .input-clear-icon {
   -webkit-margin-start: auto;
   margin-inline-start: auto;
@@ -225,7 +284,7 @@
   outline: none;
   background-color: transparent;
   background-repeat: no-repeat;
-  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  color: var(--ion-color-step-600, #666666);
   visibility: hidden;
   appearance: none;
 }
@@ -249,6 +308,25 @@
   visibility: visible;
 }
 
+:host(.has-focus.legacy-input) {
+  pointer-events: none;
+}
+
+:host(.has-focus.legacy-input) input,
+:host(.has-focus.legacy-input) a,
+:host(.has-focus.legacy-input) button {
+  pointer-events: auto;
+}
+
+:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value)) {
+  opacity: 0;
+}
+
+:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus) {
+  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 1;
+}
+
 .input-wrapper {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);
@@ -339,7 +417,7 @@
 
 .input-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-550, #737373);
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -358,7 +436,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-550, #737373);
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -762,8 +840,8 @@
  * }
  */
 :host(.input-fill-solid) {
-  --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));
+  --background: var(--ion-color-step-50, #f2f2f2);
+  --border-color: var(--ion-color-step-500, gray);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -799,8 +877,8 @@
  */
 @media (any-hover: hover) {
   :host(.input-fill-solid:hover) {
-    --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));
+    --background: var(--ion-color-step-100, #e6e6e6);
+    --border-color: var(--ion-color-step-750, #404040);
   }
 }
 /**
@@ -808,8 +886,8 @@
  * much darker on focus.
  */
 :host(.input-fill-solid.has-focus) {
-  --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));
+  --background: var(--ion-color-step-150, #d9d9d9);
+  --border-color: var(--ion-color-step-750, #404040);
 }
 
 :host(.input-fill-solid) .input-wrapper {
@@ -817,10 +895,25 @@
    * Only the top left and top right borders should.
    * have a radius when using a solid fill.
    */
-  border-start-start-radius: var(--border-radius);
-  border-start-end-radius: var(--border-radius);
-  border-end-end-radius: 0px;
-  border-end-start-radius: 0px;
+  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(.input-fill-solid) .input-wrapper, :host-context([dir=rtl]).input-fill-solid .input-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(.input-fill-solid:dir(rtl)) .input-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;
+  }
 }
 
 :host(.label-floating.input-fill-solid.input-label-placement-floating) .label-text-wrapper {
@@ -887,7 +980,7 @@
  * }
  */
 :host(.input-fill-outline) {
-  --border-color: var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));
+  --border-color: var(--ion-color-step-300, #b3b3b3);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -915,7 +1008,7 @@
  */
 @media (any-hover: hover) {
   :host(.input-fill-outline:hover) {
-    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+    --border-color: var(--ion-color-step-750, #404040);
   }
 }
 /**
@@ -1071,10 +1164,10 @@
 }
 
 :host(.input-fill-outline) .input-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);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: var(--border-radius);
   -webkit-border-start: var(--border-width) var(--border-style) var(--border-color);
   border-inline-start: var(--border-width) var(--border-style) var(--border-color);
   /**
@@ -1087,20 +1180,50 @@
    */
   width: calc(var(--padding-start) - 4px);
 }
+:host-context([dir=rtl]):host(.input-fill-outline) .input-outline-start, :host-context([dir=rtl]).input-fill-outline .input-outline-start {
+  border-top-left-radius: 0px;
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+  border-bottom-left-radius: 0px;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.input-fill-outline:dir(rtl)) .input-outline-start {
+    border-top-left-radius: 0px;
+    border-top-right-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+    border-bottom-left-radius: 0px;
+  }
+}
 
 :host(.input-fill-outline) .input-outline-end {
   -webkit-border-end: var(--border-width) var(--border-style) var(--border-color);
   border-inline-end: var(--border-width) var(--border-style) var(--border-color);
-  border-start-start-radius: 0px;
-  border-start-end-radius: var(--border-radius);
-  border-end-end-radius: var(--border-radius);
-  border-end-start-radius: 0px;
+  border-top-left-radius: 0px;
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+  border-bottom-left-radius: 0px;
   /**
    * The ending outline fragment
    * should take up the remaining free space.
    */
   flex-grow: 1;
 }
+:host-context([dir=rtl]):host(.input-fill-outline) .input-outline-end, :host-context([dir=rtl]).input-fill-outline .input-outline-end {
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: var(--border-radius);
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.input-fill-outline:dir(rtl)) .input-outline-end {
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: var(--border-radius);
+  }
+}
 
 /**
  * When the input either has focus or a value,
@@ -1169,15 +1292,30 @@
  */
 :host {
   --border-width: 1px;
-  --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)))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
   font-size: inherit;
 }
 
+:host(.legacy-input) {
+  --padding-top: 10px;
+  --padding-end: 0;
+  --padding-bottom: 10px;
+  --padding-start: 8px;
+}
+
+:host-context(.item-label-stacked),
+:host-context(.item-label-floating) {
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  --padding-start: 0;
+}
+
 .input-clear-icon ion-icon {
   width: 22px;
   height: 22px;
 }
 
+:host(.legacy-input) .native-input[disabled],
 :host(.input-disabled) {
   opacity: 0.38;
 }
@@ -1221,8 +1359,32 @@
   transition: transform 200ms;
   background: var(--highlight-color);
 }
-.input-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .input-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .input-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .input-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .input-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .input-highlight:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host(.has-focus) .input-highlight {
@@ -1237,8 +1399,27 @@
 :host(.in-item) .input-highlight {
   bottom: 0;
 }
-:host(.in-item) .input-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.in-item) .input-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.in-item) .input-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.in-item) .input-highlight, :host-context([dir=rtl]).in-item .input-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.in-item:dir(rtl)) .input-highlight {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host(.input-shape-round) {

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

@@ -4,52 +4,14 @@
 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 }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
     test.describe(title('input: a11y'), () => {
-        test('default layout should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <main>
-          <ion-input label="Label" placeholder="Placeholder"></ion-input>
-          <ion-input placeholder="Placeholder">
-            <div slot="label">Label"></div>
-          </ion-input>
-          <ion-input label="Label" value="My Text"></ion-input>
-          <ion-input aria-label="Label"></ion-input>
-          <ion-input label="Email" fill="solid" value="hi@ionic.io">
-            <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
-            <ion-button slot="end" aria-label="button">
-              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
-            </ion-button>
-          </ion-input>
-        </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-input class="has-focus" label="Label" value="My Text"></ion-input>
-          <ion-input class="has-focus" label-placement="floating" label="Label" value="My Text"></ion-input>
-          <ion-input class="has-focus" fill="outline" label-placement="floating" label="Label" value="My Text"></ion-input>
-        </main>
-      `, config);
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.goto(`/src/components/input/test/a11y`, config);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });
     });
-});
-configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
     test.describe(title('input: font scaling'), () => {
         test('should scale text on larger font sizes', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/input/test/item/input.spec.js

@@ -0,0 +1,24 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Item } from "../../../item/item";
+import { Input } from "../../input";
+it('should render as modern when label is set asynchronously', async () => {
+    const page = await newSpecPage({
+        components: [Item, Input],
+        html: `
+      <ion-item>
+        <ion-input></ion-input>
+      </ion-item>
+    `,
+    });
+    const input = page.body.querySelector('ion-input');
+    // Template should be modern
+    expect(input.classList.contains('legacy-input')).toBe(false);
+    // Update the input label
+    input.label = 'New label';
+    await page.waitForChanges();
+    // Template should still be modern
+    expect(input.classList.contains('legacy-input')).toBe(false);
+});

package/dist/collection/components/input/test/legacy/a11y/input.e2e.js

@@ -0,0 +1,28 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('input: a11y'), () => {
+        test('does not set a default aria-labelledby when there is not a neighboring ion-label', async ({ page }) => {
+            await page.setContent('<ion-input legacy="true"></ion-input>', config);
+            const input = page.locator('ion-input > input');
+            const ariaLabelledBy = await input.getAttribute('aria-labelledby');
+            await expect(ariaLabelledBy).toBe(null);
+        });
+        test('set a default aria-labelledby when a neighboring ion-label exists', async ({ page }) => {
+            await page.setContent(`
+          <ion-item>
+            <ion-label>A11y Test</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+        `, config);
+            const label = page.locator('ion-label');
+            const input = page.locator('ion-input > input');
+            const ariaLabelledBy = await input.getAttribute('aria-labelledby');
+            const labelId = await label.getAttribute('id');
+            await expect(ariaLabelledBy).toBe(labelId);
+        });
+    });
+});