@ionic/core 7.6.7-dev.11706625796.1b3c1ab2 → 7.6.7-dev.11706894781.1cd59fde

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.js

@@ -27,11 +27,11 @@ export class InfiniteScrollContent {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '8ffd8ff4c951be0c2b1f48fd4be3a2d7765a989f', class: {
+        return (h(Host, { class: {
                 [mode]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${mode}`]: true,
-            } }, h("div", { key: 'd7d03485501b5e2fde7c132309bb6358818eb0cd', class: "infinite-loading" }, this.loadingSpinner && (h("div", { class: "infinite-loading-spinner" }, h("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, h("div", { class: "infinite-loading" }, this.loadingSpinner && (h("div", { class: "infinite-loading-spinner" }, h("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get is() { return "ion-infinite-scroll-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.md.css

@@ -140,17 +140,17 @@ ion-infinite-scroll-content {
  * }
  */
 .infinite-scroll-content-md .infinite-loading-text {
-  color: var(--ion-color-step-600, #666666);
+  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }
 
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle {
-  stroke: var(--ion-color-step-600, #666666);
+  stroke: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }
 
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,
 .infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle {
-  fill: var(--ion-color-step-600, #666666);
+  fill: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 }

package/dist/collection/components/input/input.ios.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
@@ -284,7 +284,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;
 }
@@ -417,7 +417,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 +436,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;
 }
@@ -786,7 +786,7 @@
  */
 :host {
   --border-width: 0.55px;
-  --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))));
   font-size: inherit;
 }
 

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
@@ -284,7 +284,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;
 }
@@ -417,7 +417,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 +436,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 +840,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 +877,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 +886,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 {
@@ -980,7 +980,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 +1008,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));
   }
 }
 /**
@@ -1292,7 +1292,7 @@
  */
 :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;
 }
 

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/item/item.ios.css

@@ -100,6 +100,14 @@
    * @prop --highlight-color-valid: The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    * @prop --highlight-color-invalid: The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    */
+  /**
+   * We change the minimum width as the
+   * font size changes. Using a fixed minimum
+   * width means that fewer and fewer characters
+   * can be displayed in the same space as the
+   * text grows.
+   */
+  --inner-min-width: 4rem;
   --border-radius: 0px;
   --border-width: 0px;
   --border-style: solid;
@@ -230,6 +238,7 @@
   /* stylelint-enable */
   display: flex;
   position: relative;
+  flex-wrap: wrap;
   align-items: inherit;
   justify-content: inherit;
   width: 100%;
@@ -261,6 +270,10 @@
   }
 }
 
+:host(.item-legacy) .item-native {
+  flex-wrap: unset;
+}
+
 .item-native::-moz-focus-inner {
   border: 0;
 }
@@ -296,10 +309,20 @@ button, a {
   /* stylelint-enable */
   display: flex;
   position: relative;
-  flex: 1;
+  flex: 1 0 0;
   flex-direction: inherit;
+  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
+  /**
+   * The min-width defines when the
+   * content in the default slot should
+   * stop wrapping/truncating within its own
+   * container. At this point the entire
+   * container will wrap to the next line.
+   */
+  min-width: var(--inner-min-width);
+  max-width: 100%;
   min-height: inherit;
   border-width: var(--inner-border-width);
   border-style: var(--border-style);
@@ -325,6 +348,12 @@ button, a {
   }
 }
 
+:host(.item-legacy) .item-inner {
+  flex: 1;
+  flex-wrap: unset;
+  max-width: unset;
+}
+
 .item-bottom {
   margin-left: 0;
   margin-right: 0;
@@ -403,15 +432,23 @@ button, a {
 
 .input-wrapper {
   display: flex;
-  flex: 1;
+  flex: 1 0 auto;
   flex-direction: inherit;
+  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
+  max-width: 100%;
   text-overflow: ellipsis;
   overflow: inherit;
   box-sizing: border-box;
 }
 
+:host(.item-legacy) .input-wrapper {
+  flex: 1;
+  flex-wrap: unset;
+  max-width: unset;
+}
+
 :host(.item-label-stacked),
 :host(.item-label-floating) {
   align-items: start;
@@ -571,7 +608,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 +697,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;
 }

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

@@ -45,10 +45,6 @@ export class Item {
         this.counterFormatter = undefined;
         this.counterString = undefined;
     }
-    buttonChanged() {
-        // Update the focusable option when the button option is changed
-        this.focusable = this.isFocusable();
-    }
     counterFormatterChanged() {
         this.updateCounterOutput(this.getFirstInput());
     }
@@ -264,7 +260,7 @@ 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: '941d21ee0c46e9fbc566469708579f8871d19c73', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
+        return (h(Host, { "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
                 item: true,
                 [mode]: true,
                 'item-lines-default': lines === undefined,
@@ -278,7 +274,7 @@ export class Item {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'f0be78f964215caea21b54ffac6c2b2988967f7d' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: '255e76ba8f6b5c2d75103dcd787908132f1a84a4', name: "start" }), h("div", { key: '1dee3e342b4fc1703500a545e90ad681582c1292', class: "item-inner" }, h("div", { key: '045c1cf4f03687f41147144c9c714ec426b81829', class: "input-wrapper" }, h("slot", { key: '4f1edcce6cc918e521bb98e70602dfee2b492428' })), h("slot", { key: '2dd468bc4bed5e5dab4372133bcbf4a472e417a3', 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: '116b9c332c6e28f0eb9cb513c36aa3ac5ada17d0', class: "item-inner-highlight" })), canActivate && mode === 'md' && h("ion-ripple-effect", null), h("div", { key: '0bd92b2e3039c34b5d01d9361941af360d68a335', class: "item-highlight" })), h("div", { key: '9287c851c10b8438c787b34a2bf6d76c87af3c15', class: "item-bottom" }, h("slot", { key: '7db1f90077bbc63f3adbf873e0b1721e131d8d8d', name: "error" }), h("slot", { key: '6e90f564af916893a6a9fe6fe30dee15655a554e', name: "helper" }), counterString && h("ion-note", { class: "item-counter" }, counterString))));
+            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { name: "start" }), h("div", { class: "item-inner" }, h("div", { class: "input-wrapper" }, h("slot", null)), h("slot", { 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", { class: "item-inner-highlight" })), canActivate && mode === 'md' && h("ion-ripple-effect", null), h("div", { class: "item-highlight" })), h("div", { class: "item-bottom" }, h("slot", { name: "error" }), h("slot", { name: "helper" }), counterString && h("ion-note", { class: "item-counter" }, counterString))));
     }
     static get is() { return "ion-item"; }
     static get encapsulation() { return "shadow"; }
@@ -633,9 +629,6 @@ export class Item {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "button",
-                "methodName": "buttonChanged"
-            }, {
                 "propName": "counterFormatter",
                 "methodName": "counterFormatterChanged"
             }];

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

@@ -100,6 +100,14 @@
    * @prop --highlight-color-valid: The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    * @prop --highlight-color-invalid: The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    */
+  /**
+   * We change the minimum width as the
+   * font size changes. Using a fixed minimum
+   * width means that fewer and fewer characters
+   * can be displayed in the same space as the
+   * text grows.
+   */
+  --inner-min-width: 4rem;
   --border-radius: 0px;
   --border-width: 0px;
   --border-style: solid;
@@ -230,6 +238,7 @@
   /* stylelint-enable */
   display: flex;
   position: relative;
+  flex-wrap: wrap;
   align-items: inherit;
   justify-content: inherit;
   width: 100%;
@@ -261,6 +270,10 @@
   }
 }
 
+:host(.item-legacy) .item-native {
+  flex-wrap: unset;
+}
+
 .item-native::-moz-focus-inner {
   border: 0;
 }
@@ -296,10 +309,20 @@ button, a {
   /* stylelint-enable */
   display: flex;
   position: relative;
-  flex: 1;
+  flex: 1 0 0;
   flex-direction: inherit;
+  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
+  /**
+   * The min-width defines when the
+   * content in the default slot should
+   * stop wrapping/truncating within its own
+   * container. At this point the entire
+   * container will wrap to the next line.
+   */
+  min-width: var(--inner-min-width);
+  max-width: 100%;
   min-height: inherit;
   border-width: var(--inner-border-width);
   border-style: var(--border-style);
@@ -325,6 +348,12 @@ button, a {
   }
 }
 
+:host(.item-legacy) .item-inner {
+  flex: 1;
+  flex-wrap: unset;
+  max-width: unset;
+}
+
 .item-bottom {
   margin-left: 0;
   margin-right: 0;
@@ -403,15 +432,23 @@ button, a {
 
 .input-wrapper {
   display: flex;
-  flex: 1;
+  flex: 1 0 auto;
   flex-direction: inherit;
+  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
+  max-width: 100%;
   text-overflow: ellipsis;
   overflow: inherit;
   box-sizing: border-box;
 }
 
+:host(.item-legacy) .input-wrapper {
+  flex: 1;
+  flex-wrap: unset;
+  max-width: unset;
+}
+
 :host(.item-label-stacked),
 :host(.item-label-floating) {
   align-items: start;
@@ -571,7 +608,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;
 }
@@ -756,16 +793,16 @@ ion-ripple-effect {
   --background-activated-opacity: 0;
   --background-focused-opacity: .12;
   --background-hover-opacity: .04;
-  --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)))));
   --color: var(--ion-item-color, var(--ion-text-color, #000));
   --transition: opacity 15ms linear, background-color 15ms linear;
   --padding-start: 16px;
   --inner-padding-end: 16px;
   --inner-border-width: 0 0 1px 0;
   --highlight-height: 1px;
-  --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);
   font-size: 1rem;
   font-weight: normal;
   text-transform: none;
@@ -1063,7 +1100,7 @@ ion-ripple-effect {
 :host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),
 :host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),
 :host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating) {
-  color: var(--ion-color-primary, #3880ff);
+  color: var(--ion-color-primary, #0054e9);
 }
 
 :host(.ion-color) {
@@ -1080,9 +1117,9 @@ ion-ripple-effect {
 }
 
 :host(.item-fill-solid) {
-  --background: var(--ion-color-step-50, #f2f2f2);
-  --background-hover: var(--ion-color-step-100, #e6e6e6);
-  --background-focused: var(--ion-color-step-150, #d9d9d9);
+  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
+  --background-hover: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+  --background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
   --border-width: 0 0 1px 0;
   --inner-border-width: 0;
   border-top-left-radius: 4px;
@@ -1107,7 +1144,7 @@ ion-ripple-effect {
 }
 
 :host(.item-fill-solid) .item-native {
-  --border-color: var(--ion-color-step-500, gray);
+  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
 }
 
 :host(.item-fill-solid.ion-focused) .item-native,
@@ -1140,14 +1177,14 @@ ion-ripple-effect {
 @media (any-hover: hover) {
   :host(.item-fill-solid:hover) .item-native {
     --background: var(--background-hover);
-    --border-color: var(--ion-color-step-750, #404040);
+    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
   }
 }
 :host(.item-fill-outline) {
   --ripple-color: transparent;
   --background-focused: transparent;
   --background-hover: transparent;
-  --border-color: var(--ion-color-step-500, gray);
+  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
   --border-width: 1px;
   border: none;
   overflow: visible;
@@ -1179,7 +1216,7 @@ ion-ripple-effect {
 
 @media (any-hover: hover) {
   :host(.item-fill-outline:hover) .item-native {
-    --border-color: var(--ion-color-step-750, #404040);
+    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
   }
 }
 .item-counter {

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

@@ -280,8 +280,8 @@
  * }
  */
 :host {
-  --background: var(--ion-color-step-100, #e6e6e6);
-  --color: var(--ion-color-step-850, #262626);
+  --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   --padding-start: 16px;
   --inner-padding-end: 8px;
   border-radius: 0;
@@ -335,7 +335,7 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 2px;
-  color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.4);
+  color: var(--ion-text-color-step-550, #a3a3a3);
   font-size: 0.875rem;
   line-height: normal;
   text-overflow: inherit;

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

@@ -18,11 +18,11 @@ export class ItemDivider {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '8422b960dfcce4ff1370d9c185e285bb4a3688d5', class: createColorClasses(this.color, {
+        return (h(Host, { class: createColorClasses(this.color, {
                 [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, h("slot", { key: '240514b96ec48262040460775c8eb0a58d6acfa8', name: "start" }), h("div", { key: 'ec18c092c81cb96f8c49ed7d4dede96c9a3e3f97', class: "item-divider-inner" }, h("div", { key: '9c3f3dcb9b14fd1d37fb1104b3ba953dc9a3e894', class: "item-divider-wrapper" }, h("slot", { key: '6b8e51eb86a5567b80a91034b26228105796a82d' })), h("slot", { key: '7ccb661e1309c1ecca09a823f8e08b1cf90d95dd', name: "end" }))));
+            }) }, h("slot", { name: "start" }), h("div", { class: "item-divider-inner" }, h("div", { class: "item-divider-wrapper" }, h("slot", null)), h("slot", { name: "end" }))));
     }
     static get is() { return "ion-item-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/item-divider/item-divider.md.css

@@ -281,11 +281,11 @@
  */
 :host {
   --background: var(--ion-background-color, #fff);
-  --color: var(--ion-color-step-400, #999999);
+  --color: var(--ion-color-step-400, var(--ion-text-color-step-600, #999999));
   --padding-start: 16px;
   --inner-padding-end: 16px;
   min-height: 30px;
-  border-bottom: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
+  border-bottom: 1px solid 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: 0.875rem;
 }
 
@@ -409,7 +409,7 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 2px;
-  color: var(--ion-color-step-600, #666666);
+  color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
   font-size: 0.875rem;
   line-height: normal;
   text-overflow: inherit;

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

@@ -6,7 +6,7 @@ import { getIonMode } from "../../global/ionic-global";
 export class ItemGroup {
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'b33f23544ddeeeb61847b146b1dcb7a9ba30af18', role: "group", class: {
+        return (h(Host, { role: "group", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-group-${mode}`]: true,