voyager-ionic-core 7.7.2 → 8.0.0-beta.1

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: 0.6;
+  --placeholder-opacity: var(--ion-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, #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
@@ -102,6 +102,7 @@
   display: block;
   position: relative;
   width: 100%;
+  min-height: 44px;
   /* stylelint-disable-next-line all */
   padding: 0 !important;
   color: var(--color);
@@ -109,44 +110,15 @@
   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
@@ -219,32 +191,8 @@
   position: absolute;
   pointer-events: none;
 }
-@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;
-    }
-  }
+.cloned-input {
+  inset-inline-start: 0;
 }
 
 /**
@@ -256,13 +204,6 @@
   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;
@@ -284,7 +225,7 @@
   outline: none;
   background-color: transparent;
   background-repeat: no-repeat;
-  color: var(--ion-color-step-600, #666666);
+  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
   visibility: hidden;
   appearance: none;
 }
@@ -308,25 +249,6 @@
   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);
@@ -417,7 +339,7 @@
 
 .input-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -436,7 +358,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -840,8 +762,8 @@
  * }
  */
 :host(.input-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;
@@ -877,8 +799,8 @@
  */
 @media (any-hover: hover) {
   :host(.input-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));
   }
 }
 /**
@@ -886,8 +808,8 @@
  * much darker on focus.
  */
 :host(.input-fill-solid.has-focus) {
-  --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(.input-fill-solid) .input-wrapper {
@@ -895,25 +817,10 @@
    * 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(.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;
-  }
+  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.input-fill-solid.input-label-placement-floating) .label-text-wrapper {
@@ -980,7 +887,7 @@
  * }
  */
 :host(.input-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;
@@ -1008,7 +915,7 @@
  */
 @media (any-hover: hover) {
   :host(.input-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));
   }
 }
 /**
@@ -1164,10 +1071,10 @@
 }
 
 :host(.input-fill-outline) .input-outline-start {
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: var(--border-radius);
+  border-start-start-radius: var(--border-radius);
+  border-start-end-radius: 0px;
+  border-end-end-radius: 0px;
+  border-end-start-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);
   /**
@@ -1180,50 +1087,20 @@
    */
   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-top-left-radius: 0px;
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: 0px;
+  border-start-start-radius: 0px;
+  border-start-end-radius: var(--border-radius);
+  border-end-end-radius: var(--border-radius);
+  border-end-start-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,
@@ -1292,30 +1169,15 @@
  */
 :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))));
+  --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)))));
   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;
 }
@@ -1359,32 +1221,8 @@
   transition: transform 200ms;
   background: var(--highlight-color);
 }
-@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;
-    }
-  }
+.input-highlight {
+  inset-inline-start: 0;
 }
 
 :host(.has-focus) .input-highlight {
@@ -1399,27 +1237,8 @@
 :host(.in-item) .input-highlight {
   bottom: 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(.in-item) .input-highlight {
+  inset-inline-start: 0;
 }
 
 :host(.input-shape-round) {

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

@@ -4,14 +4,52 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('input: a11y'), () => {
-        test('should not have accessibility violations', async ({ page }) => {
-            await page.goto(`/src/components/input/test/a11y`, config);
+        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);
             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.e2e.js

@@ -41,3 +41,24 @@ configs().forEach(({ title, screenshot, config }) => {
         });
     });
 });
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('input: item functionality'), () => {
+        test('clicking padded space within item should focus the input', async ({ page }) => {
+            await page.setContent(`
+        <ion-item>
+          <ion-input label="Input"></ion-input>
+        </ion-item>
+      `, config);
+            const itemNative = page.locator('.item-native');
+            const input = page.locator('ion-input input');
+            // Clicks the padded space within the item
+            await itemNative.click({
+                position: {
+                    x: 5,
+                    y: 5,
+                },
+            });
+            await expect(input).toBeFocused();
+        });
+    });
+});

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

@@ -189,7 +189,7 @@
     background: var(--ion-color-contrast);
   }
 }
-:host(.item-has-interactive-control) {
+:host(.item-control-needs-pointer-cursor) {
   cursor: pointer;
 }
 
@@ -508,21 +508,6 @@ button, a {
   display: block;
 }
 
-:host(:not(.item-label)) ::slotted(ion-select.legacy-select) {
-  --padding-start: 0;
-  max-width: none;
-}
-
-:host(.item-label-stacked) ::slotted(ion-select.legacy-select),
-:host(.item-label-floating) ::slotted(ion-select.legacy-select) {
-  --padding-top: 8px;
-  --padding-bottom: 8px;
-  --padding-start: 0;
-  align-self: stretch;
-  width: 100%;
-  max-width: 100%;
-}
-
 :host(:not(.item-label)) ::slotted(ion-datetime) {
   --padding-start: 0;
 }
@@ -535,8 +520,7 @@ button, a {
 
 :host(.item-multiple-inputs) ::slotted(ion-checkbox),
 :host(.item-multiple-inputs) ::slotted(ion-datetime),
-:host(.item-multiple-inputs) ::slotted(ion-radio),
-:host(.item-multiple-inputs) ::slotted(ion-select.legacy-select) {
+:host(.item-multiple-inputs) ::slotted(ion-radio) {
   position: relative;
 }
 
@@ -571,7 +555,7 @@ ion-ripple-effect {
 .item-counter {
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, #737373);
+  color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -660,12 +644,12 @@ ion-ripple-effect {
   --background-activated-opacity: .12;
   --background-focused-opacity: .15;
   --background-hover-opacity: .04;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
   --color: var(--ion-item-color, var(--ion-text-color, #000));
   --highlight-height: 0px;
-  --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);
   --bottom-padding-start: 0px;
   font-size: 1rem;
 }
@@ -802,14 +786,6 @@ ion-ripple-effect {
   --min-height: 68px;
 }
 
-:host(.item-label-stacked) ::slotted(ion-select.legacy-select),
-:host(.item-label-floating) ::slotted(ion-select.legacy-select) {
-  --padding-top: 8px;
-  --padding-bottom: 8px;
-  --padding-start: 0px;
-}
-
-:host(.item-label-fixed) ::slotted(ion-select.legacy-select),
 :host(.item-label-fixed) ::slotted(ion-datetime) {
   --padding-start: 0;
 }

package/dist/collection/components/item/item.js

@@ -199,7 +199,7 @@ export class Item {
         }
     }
     getFirstInteractive() {
-        const controls = this.el.querySelectorAll('ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled])');
+        const controls = this.el.querySelectorAll('ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled]), ion-input:not([disabled]), ion-textarea:not([disabled])');
         return controls[0];
     }
     render() {
@@ -241,7 +241,17 @@ export class Item {
                              */
                             const clickedWithinShadowRoot = this.el.shadowRoot.contains(target);
                             if (clickedWithinShadowRoot) {
-                                firstInteractive.click();
+                                /**
+                                 * For input/textarea clicking the padding should focus the
+                                 * text field (thus making it editable). For everything else,
+                                 * we want to click the control so it activates.
+                                 */
+                                if (firstInteractive.tagName === 'ION-INPUT' || firstInteractive.tagName === 'ION-TEXTAREA') {
+                                    firstInteractive.setFocus();
+                                }
+                                else {
+                                    firstInteractive.click();
+                                }
                             }
                         }
                     }
@@ -255,21 +265,26 @@ export class Item {
         const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null;
         const fillValue = fill || 'none';
         const inList = hostContext('ion-list', this.el) && !hostContext('ion-radio-group', this.el);
-        return (h(Host, { key: 'd614b53347383fd36db2044ef605060a496cf0e3', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
+        /**
+         * Inputs and textareas do not need to show a cursor pointer.
+         * However, other form controls such as checkboxes and radios do.
+         */
+        const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
+        return (h(Host, { key: 'cea10ae44ddc3ac8ebcee481f2696bae900a3a34', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
                 item: true,
                 [mode]: true,
                 'item-lines-default': lines === undefined,
                 [`item-lines-${lines}`]: lines !== undefined,
                 [`item-fill-${fillValue}`]: true,
                 [`item-shape-${shape}`]: shape !== undefined,
-                'item-has-interactive-control': firstInteractive !== undefined,
+                'item-control-needs-pointer-cursor': firstInteractiveNeedsPointerCursor,
                 'item-disabled': disabled,
                 'in-list': inList,
                 'item-multiple-inputs': this.multipleInputs,
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: '1f9e61b627fc94d646cccbfd8be24df745080c2c' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: '6690445e14e6f0614beae23b6cc2a2b9cd668934', name: "start" }), h("div", { key: 'cc36ee6ad3f3c04b7fe907f7c63e81fa43938b28', class: "item-inner" }, h("div", { key: '502eff7a3d237fa5658e505b3d2f74cdfdef16af', class: "input-wrapper" }, h("slot", { key: '750d23dcab6844acb92c9636f21dff04c91d2b22' })), h("slot", { key: 'ed16f6bce4ea5a76a181597b879f9bb55c909612', name: "end" }), showDetail && (h("ion-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward })), h("div", { key: '29f89d1996f99a0d600c710e1b4bcd6975db7caf', class: "item-inner-highlight" })), canActivate && mode === 'md' && h("ion-ripple-effect", null), h("div", { key: '111ccb2ab79b9975d6f66714866ff4cc20a7b4da', class: "item-highlight" })), h("div", { key: 'd2ea55be7686ffdd95f0b53d7e8e386983cd0c8e', class: "item-bottom" }, h("slot", { key: '20adbe497dd62b23a169a5194947513a32f5c3a0', name: "error" }), h("slot", { key: '52587f1f2b9056e76ad9be8ccd7754cbeaefdc71', name: "helper" }), counterString && h("ion-note", { class: "item-counter" }, counterString))));
+            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: '48fd3c900652d21d364c738ceb328101dfce6260' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'd6f1e007a969f60977789f4cca3d2a8a3f52dd70', name: "start" }), h("div", { key: '0a8fafdaf5171ab073890532d65dd96aa9d2aa86', class: "item-inner" }, h("div", { key: '063bd8f3d87b8efee1f97582cb212db8dc502bf4', class: "input-wrapper" }, h("slot", { key: '18276aad72ef4e91c1a5d6f368729589f9b50205' })), h("slot", { key: '39e365fbd888084b54b58811a44c6ae019801d92', name: "end" }), showDetail && (h("ion-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward })), h("div", { key: '96daef747b2ba84fe8206c332624a90640ecc448', class: "item-inner-highlight" })), canActivate && mode === 'md' && h("ion-ripple-effect", null), h("div", { key: 'e6d77ef9da1b7a6e530ba37e37f51aa8e1102460', class: "item-highlight" })), h("div", { key: '20223b90730b563bb38edd5f3769b2b7607d8097', class: "item-bottom" }, h("slot", { key: '4657f1f0a57ddc5e136473d98a93e91eed00ec19', name: "error" }), h("slot", { key: '37a5acffe53d3e6a472cc2fac1548362b236cad8', name: "helper" }), counterString && h("ion-note", { class: "item-counter" }, counterString))));
     }
     static get is() { return "ion-item"; }
     static get encapsulation() { return "shadow"; }