Merge branch 'main' into chore-update-next-from-main

core/src/components/item/item.ios.vars.scss

@@ -4,106 +4,106 @@
 // --------------------------------------------------
 
 /// @prop - Minimum height of the item
-$item-ios-min-height: 44px !default;
+$item-ios-min-height: 44px;
 
 /// @prop - Font size of the item
-$item-ios-font-size: dynamic-font(16px) !default;
+$item-ios-font-size: dynamic-font(16px);
 
 /// @prop - Margin top of the item paragraph
-$item-ios-paragraph-margin-top: 0 !default;
+$item-ios-paragraph-margin-top: 0;
 
 /// @prop - Margin end of the item paragraph
-$item-ios-paragraph-margin-end: 0 !default;
+$item-ios-paragraph-margin-end: 0;
 
 /// @prop - Margin bottom of the item paragraph
-$item-ios-paragraph-margin-bottom: 2px !default;
+$item-ios-paragraph-margin-bottom: 2px;
 
 /// @prop - Margin start of the item paragraph
-$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !default;
+$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end;
 
 /// @prop - Font size of the item paragraph
-$item-ios-paragraph-font-size: dynamic-font(14px) !default;
+$item-ios-paragraph-font-size: dynamic-font(14px);
 
 /// @prop - Color of the item paragraph
-$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3) !default;
+$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3);
 
 /// @prop - Width of the avatar in the item
-$item-ios-avatar-width: 36px !default;
+$item-ios-avatar-width: 36px;
 
 /// @prop - Height of the avatar in the item
-$item-ios-avatar-height: $item-ios-avatar-width !default;
+$item-ios-avatar-height: $item-ios-avatar-width;
 
 /// @prop - Size of the thumbnail in the item
-$item-ios-thumbnail-size: 56px !default;
+$item-ios-thumbnail-size: 56px;
 
 /// @prop - Padding top for the item content
-$item-ios-padding-top: 10px !default;
+$item-ios-padding-top: 10px;
 
 /// @prop - Padding end for the item content
-$item-ios-padding-end: 16px !default;
+$item-ios-padding-end: 16px;
 
 /// @prop - Padding bottom for the item content
-$item-ios-padding-bottom: 10px !default;
+$item-ios-padding-bottom: 10px;
 
 /// @prop - Padding start for the item content
-$item-ios-padding-start: 16px !default;
+$item-ios-padding-start: 16px;
 
 /// @prop - Border bottom width for the item when lines are displayed
-$item-ios-border-bottom-width: $hairlines-width !default;
+$item-ios-border-bottom-width: $hairlines-width;
 
 /// @prop - Border bottom style for the item when lines are displayed
-$item-ios-border-bottom-style: solid !default;
+$item-ios-border-bottom-style: solid;
 
 /// @prop - Border bottom color for the item when lines are displayed
-$item-ios-border-bottom-color: $item-ios-border-color !default;
+$item-ios-border-bottom-color: $item-ios-border-color;
 
 // Item Slots
 // --------------------------------------------------
 
 /// @prop - Margin top for the start slot
-$item-ios-slot-start-margin-top: 2px !default;
+$item-ios-slot-start-margin-top: 2px;
 
 /// @prop - Margin end for the start slot
-$item-ios-slot-start-margin-end: $item-ios-padding-end !default;
+$item-ios-slot-start-margin-end: $item-ios-padding-end;
 
 /// @prop - Margin bottom for the start slot
-$item-ios-slot-start-margin-bottom: $item-ios-slot-start-margin-top !default;
+$item-ios-slot-start-margin-bottom: $item-ios-slot-start-margin-top;
 
 /// @prop - Margin start for the start slot
-$item-ios-slot-start-margin-start: 0 !default;
+$item-ios-slot-start-margin-start: 0;
 
 /// @prop - Margin top for the end slot
-$item-ios-slot-end-margin-top: null !default;
+$item-ios-slot-end-margin-top: null;
 
 /// @prop - Margin end for the end slot
-$item-ios-slot-end-margin-end: null !default;
+$item-ios-slot-end-margin-end: null;
 
 /// @prop - Margin bottom for the end slot
-$item-ios-slot-end-margin-bottom: $item-ios-slot-end-margin-top !default;
+$item-ios-slot-end-margin-bottom: $item-ios-slot-end-margin-top;
 
 /// @prop - Margin start for the end slot
-$item-ios-slot-end-margin-start: null !default;
+$item-ios-slot-end-margin-start: null;
 
 /// @prop - Margin top for an icon in the start/end slot
-$item-ios-icon-slot-margin-top: 7px !default;
+$item-ios-icon-slot-margin-top: 7px;
 
 /// @prop - Margin end for an icon in the start/end slot
-$item-ios-icon-slot-margin-end: null !default;
+$item-ios-icon-slot-margin-end: null;
 
 /// @prop - Margin bottom for an icon in the start/end slot
-$item-ios-icon-slot-margin-bottom: 7px !default;
+$item-ios-icon-slot-margin-bottom: 7px;
 
 /// @prop - Margin start for an icon in the start/end slot
-$item-ios-icon-slot-margin-start: null !default;
+$item-ios-icon-slot-margin-start: null;
 
 /// @prop - Margin top for the end slot inside of a floating/stacked label
-$item-ios-label-slot-end-margin-top: 7px !default;
+$item-ios-label-slot-end-margin-top: 7px;
 
 /// @prop - Margin end for the end slot inside of a floating/stacked label
-$item-ios-label-slot-end-margin-end: null !default;
+$item-ios-label-slot-end-margin-end: null;
 
 /// @prop - Margin bottom for the end slot inside of a floating/stacked label
-$item-ios-label-slot-end-margin-bottom: $item-ios-label-slot-end-margin-top !default;
+$item-ios-label-slot-end-margin-bottom: $item-ios-label-slot-end-margin-top;
 
 /// @prop - Margin start for the end slot inside of a floating/stacked label
-$item-ios-label-slot-end-margin-start: $item-ios-label-slot-end-margin-end !default;
+$item-ios-label-slot-end-margin-start: $item-ios-label-slot-end-margin-end;

core/src/components/item/item.md.vars.scss

@@ -4,178 +4,178 @@
 // --------------------------------------------------
 
 /// @prop - Minimum height of the item
-$item-md-min-height: 48px !default;
+$item-md-min-height: 48px;
 
 /// @prop - Color of the item paragraph
-$item-md-paragraph-text-color: $text-color-step-400 !default;
+$item-md-paragraph-text-color: $text-color-step-400;
 
 /// @prop - Font size of the item
-$item-md-font-size: 16px !default;
+$item-md-font-size: 16px;
 
 /// @prop - Width of the avatar in the item
-$item-md-avatar-width: 40px !default;
+$item-md-avatar-width: 40px;
 
 /// @prop - Height of the avatar in the item
-$item-md-avatar-height: $item-md-avatar-width !default;
+$item-md-avatar-height: $item-md-avatar-width;
 
 /// @prop - Size of the thumbnail in the item
-$item-md-thumbnail-size: 56px !default;
+$item-md-thumbnail-size: 56px;
 
 /// @prop - Padding top for the item content
-$item-md-padding-top: 10px !default;
+$item-md-padding-top: 10px;
 
 /// @prop - Padding end for the item content
-$item-md-padding-end: 16px !default;
+$item-md-padding-end: 16px;
 
 /// @prop - Padding bottom for the item content
-$item-md-padding-bottom: 11px !default;
+$item-md-padding-bottom: 11px;
 
 /// @prop - Padding start for the item content
-$item-md-padding-start: 16px !default;
+$item-md-padding-start: 16px;
 
 /// @prop - Border bottom width for the item when lines are displayed
-$item-md-border-bottom-width: 1px !default;
+$item-md-border-bottom-width: 1px;
 
 /// @prop - Border bottom style for the item when lines are displayed
-$item-md-border-bottom-style: solid !default;
+$item-md-border-bottom-style: solid;
 
 /// @prop - Border bottom color for the item when lines are displayed
-$item-md-border-bottom-color: $item-md-border-color !default;
+$item-md-border-bottom-color: $item-md-border-color;
 
 // Item Label
 // --------------------------------------------------
 
 /// @prop - Margin top of the label
-$item-md-label-margin-top: 10px !default;
+$item-md-label-margin-top: 10px;
 
 /// @prop - Margin end of the label
-$item-md-label-margin-end: 0 !default;
+$item-md-label-margin-end: 0;
 
 /// @prop - Margin bottom of the label
-$item-md-label-margin-bottom: 10px !default;
+$item-md-label-margin-bottom: 10px;
 
 /// @prop - Margin start of the label
-$item-md-label-margin-start: 0 !default;
+$item-md-label-margin-start: 0;
 
 // Item Slots
 // --------------------------------------------------
 
 /// @prop - Margin start for the start slot
-$item-md-start-slot-margin-start: null !default;
+$item-md-start-slot-margin-start: null;
 
 /// @prop - Margin end for the start slot
-$item-md-start-slot-margin-end: 16px !default;
+$item-md-start-slot-margin-end: 16px;
 
 /// @prop - Margin start for the end slot
-$item-md-end-slot-margin-start: 16px !default;
+$item-md-end-slot-margin-start: 16px;
 
 /// @prop - Margin end for the end slot
-$item-md-end-slot-margin-end: null !default;
+$item-md-end-slot-margin-end: null;
 
 /// @prop - Margin top for content in the start/end slot in a multi-line item
-$item-md-multi-line-slot-margin-top: 16px !default;
+$item-md-multi-line-slot-margin-top: 16px;
 
 /// @prop - Margin end for content in the start/end slot in a multi-line item
-$item-md-multi-line-slot-margin-end: null !default;
+$item-md-multi-line-slot-margin-end: null;
 
 /// @prop - Margin bottom for content in the start/end slot in a multi-line item
-$item-md-multi-line-slot-margin-bottom: 16px !default;
+$item-md-multi-line-slot-margin-bottom: 16px;
 
 /// @prop - Margin start for content in the start/end slot in a multi-line item
-$item-md-multi-line-slot-margin-start: null !default;
+$item-md-multi-line-slot-margin-start: null;
 
 // Icon Slots
 // --------------------------------------------------
 
 /// @prop - Margin top for an icon in the start/end slot
-$item-md-icon-slot-margin-top: 12px !default;
+$item-md-icon-slot-margin-top: 12px;
 
 /// @prop - Margin end for an icon in the start/end slot
-$item-md-icon-slot-margin-end: null !default;
+$item-md-icon-slot-margin-end: null;
 
 /// @prop - Margin bottom for an icon in the start/end slot
-$item-md-icon-slot-margin-bottom: $item-md-icon-slot-margin-top !default;
+$item-md-icon-slot-margin-bottom: $item-md-icon-slot-margin-top;
 
 /// @prop - Margin start for an icon in the start/end slot
-$item-md-icon-slot-margin-start: null !default;
+$item-md-icon-slot-margin-start: null;
 
 /// @prop - Margin start for an icon in the start slot
-$item-md-icon-start-slot-margin-start: null !default;
+$item-md-icon-start-slot-margin-start: null;
 
 /// @prop - Margin end for an icon in the start slot
-$item-md-icon-start-slot-margin-end: 32px !default;
+$item-md-icon-start-slot-margin-end: 32px;
 
 /// @prop - Margin end for an icon in the start slot
-$item-md-input-icon-start-slot-margin-end: 8px !default;
+$item-md-input-icon-start-slot-margin-end: 8px;
 
 /// @prop - Margin start for an icon in the end slot
-$item-md-icon-end-slot-margin-start: 16px !default;
+$item-md-icon-end-slot-margin-start: 16px;
 
 /// @prop - Margin end for an icon in the end slot
-$item-md-icon-end-slot-margin-end: null !default;
+$item-md-icon-end-slot-margin-end: null;
 
 /// @prop - Color for an icon in the start/end slot
-$item-md-icon-slot-color: rgba($text-color-rgb, 0.54) !default;
+$item-md-icon-slot-color: rgba($text-color-rgb, 0.54);
 
 /// @prop - Font size of an icon in the start/end slot
-$item-md-icon-slot-font-size: 24px !default;
+$item-md-icon-slot-font-size: 24px;
 
 // Label Slots
 // --------------------------------------------------
 
 /// @prop - Margin top for the end slot inside of a floating/stacked label
-$item-md-label-slot-end-margin-top: 7px !default;
+$item-md-label-slot-end-margin-top: 7px;
 
 /// @prop - Margin end for the end slot inside of a floating/stacked label
-$item-md-label-slot-end-margin-end: null !default;
+$item-md-label-slot-end-margin-end: null;
 
 /// @prop - Margin bottom for the end slot inside of a floating/stacked label
-$item-md-label-slot-end-margin-bottom: $item-md-label-slot-end-margin-top !default;
+$item-md-label-slot-end-margin-bottom: $item-md-label-slot-end-margin-top;
 
 /// @prop - Margin start for the end slot inside of a floating/stacked label
-$item-md-label-slot-end-margin-start: $item-md-label-slot-end-margin-end !default;
+$item-md-label-slot-end-margin-start: $item-md-label-slot-end-margin-end;
 
 // Note Slots
 // --------------------------------------------------
 
 /// @prop - Font size of a note in the start/end slot
-$item-md-note-slot-font-size: dynamic-font(11px) !default;
+$item-md-note-slot-font-size: dynamic-font(11px);
 
 /// @prop - Padding top for a note in the start/end slot
-$item-md-note-slot-padding-top: 18px !default;
+$item-md-note-slot-padding-top: 18px;
 
 /// @prop - Padding end for a note in the start/end slot
-$item-md-note-slot-padding-end: 0 !default;
+$item-md-note-slot-padding-end: 0;
 
 /// @prop - Padding bottom for a note in the start/end slot
-$item-md-note-slot-padding-bottom: 10px !default;
+$item-md-note-slot-padding-bottom: 10px;
 
 /// @prop - Padding start for a note in the start/end slot
-$item-md-note-slot-padding-start: $item-md-note-slot-padding-end !default;
+$item-md-note-slot-padding-start: $item-md-note-slot-padding-end;
 
 // Avatar/Thumbnail Slots
 // --------------------------------------------------
 
 /// @prop - Margin top for an avatar/thumbnail in the start/end slot
-$item-md-media-slot-margin-top: 8px !default;
+$item-md-media-slot-margin-top: 8px;
 
 /// @prop - Margin end for an avatar/thumbnail in the start/end slot
-$item-md-media-slot-margin-end: null !default;
+$item-md-media-slot-margin-end: null;
 
 /// @prop - Margin bottom for an avatar/thumbnail in the start/end slot
-$item-md-media-slot-margin-bottom: 8px !default;
+$item-md-media-slot-margin-bottom: 8px;
 
 /// @prop - Margin start for an avatar/thumbnail in the start/end slot
-$item-md-media-slot-margin-start: $item-md-media-slot-margin-end !default;
+$item-md-media-slot-margin-start: $item-md-media-slot-margin-end;
 
 /// @prop - Margin start for an avatar/thumbnail in the start slot
-$item-md-media-start-slot-margin-start: null !default;
+$item-md-media-start-slot-margin-start: null;
 
 /// @prop - Margin end for an avatar/thumbnail in the start slot
-$item-md-media-start-slot-margin-end: 16px !default;
+$item-md-media-start-slot-margin-end: 16px;
 
 /// @prop - Margin start for an avatar/thumbnail in the end slot
-$item-md-media-end-slot-margin-start: 16px !default;
+$item-md-media-end-slot-margin-start: 16px;
 
 /// @prop - Margin end for an avatar/thumbnail in the end slot
-$item-md-media-end-slot-margin-end: null !default;
+$item-md-media-end-slot-margin-end: null;

core/src/components/item/test/a11y/item.e2e.ts

@@ -2,15 +2,41 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
+configs({ directions: ['ltr'], palettes: ['dark'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('item: dark palette'), () => {
+    /**
+     * This test was originally created to ensure the item border has sufficient
+     * contrast. We don't use an Axe test here because Axe not warn about color
+     * contrast on the item borders.
+     */
+    test('borders should have sufficient contrast', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/29386',
+      });
+      await page.setContent(
+        `
+        <ion-list>
+          <ion-item>Item</ion-item>
+          <ion-item>Item</ion-item>
+        </ion-list>
+      `,
+        config
+      );
+
+      const list = page.locator('ion-list');
+
+      await expect(list).toHaveScreenshot(screenshot(`item-dark`));
+    });
+  });
+});
+
 configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('item: axe'), () => {
     test('should not have accessibility violations', async ({ page }) => {
       await page.goto(`/src/components/item/test/a11y`, config);
 
-      const results = await new AxeBuilder({ page })
-        // TODO(FW-404): Re-enable rule once select is updated to avoid nested-interactive
-        .disableRules('nested-interactive')
-        .analyze();
+      const results = await new AxeBuilder({ page }).analyze();
       expect(results.violations).toEqual([]);
     });
 

core/src/components/item/test/groups/index.html

@@ -20,7 +20,7 @@
         <ion-toolbar>
           <ion-title>Item Groups</ion-title>
           <ion-buttons slot="primary">
-            <ion-button onclick="reload()"> Reload </ion-button>
+            <ion-button onclick="reload()">Reload</ion-button>
           </ion-buttons>
         </ion-toolbar>
       </ion-header>

core/src/components/item/test/inputs/index.html

@@ -80,9 +80,7 @@
             </ion-item>
           </ion-list>
 
-          <ion-button class="ion-padding-horizontal ion-margin-top" id="submit" type="submit" expand="block"
-            >Submit
-          </ion-button>
+          <button id="submit" type="submit" class="expand">Submit</button>
           <p id="form-result"></p>
         </form>
       </ion-content>