chore: discovery

core/src/components/checkbox/checkbox.scss

@@ -80,6 +80,8 @@
   height: inherit;
 
   cursor: inherit;
+
+  @include padding(null, var(--item-inner-padding-end), null, var(--item-inner-padding-start));
 }
 
 .label-text-wrapper {
@@ -154,7 +156,6 @@ input {
   opacity: 0;
 }
 
-
 // Justify Content
 // ---------------------------------------------
 
@@ -170,7 +171,6 @@ input {
   justify-content: end;
 }
 
-
 // Label Placement - Start
 // ----------------------------------------------------------------
 
@@ -191,7 +191,6 @@ input {
   @include margin(0, 8px, 0, 0);
 }
 
-
 // Label Placement - End
 // ----------------------------------------------------------------
 
@@ -212,7 +211,6 @@ input {
   @include margin(0, 0, 0, 8px);
 }
 
-
 // Label Placement - Fixed
 // ----------------------------------------------------------------
 
@@ -237,7 +235,6 @@ input {
   max-width: 200px;
 }
 
-
 // Checked / Indeterminate Checkbox
 // ---------------------------------------------
 
@@ -253,7 +250,6 @@ input {
   opacity: 1;
 }
 
-
 // Disabled Checkbox
 // ---------------------------------------------
 

core/src/components/checkbox/checkbox.tsx

@@ -147,6 +147,14 @@ export class Checkbox implements ComponentInterface {
         ...inheritAriaAttributes(this.el),
       };
     }
+
+    // Get the nearest `ion-item`.
+    const item = this.el.closest('ion-item');
+    if (item) {
+      if (!item.classList.contains('item-has-modern-control') && !this.legacyFormController.hasLegacyControl()) {
+        item.classList.add('item-has-modern-control');
+      }
+    }
   }
 
   @Watch('checked')

core/src/components/item/item.scss

@@ -108,6 +108,12 @@
   border-color: current-color(shade);
 }
 
+// Testing
+
+:host(.item-has-modern-control) {
+  --item-inner-padding-end: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
+  --item-inner-padding-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+}
 
 // Item: Activated
 // --------------------------------------------------
@@ -126,7 +132,6 @@
   color: current-color(contrast);
 }
 
-
 // Item: Focused
 // --------------------------------------------------
 
@@ -148,7 +153,6 @@
   }
 }
 
-
 // Item: Hover
 // --------------------------------------------------
 
@@ -172,7 +176,6 @@
   }
 }
 
-
 // Item: Disabled
 // --------------------------------------------------
 
@@ -183,23 +186,27 @@
 
 :host(.item-disabled) {
   cursor: default;
-  opacity: .3;
+  opacity: 0.3;
   pointer-events: none;
 }
 
-
 // Native Item
 // --------------------------------------------------
 
+:host:not(.item-has-modern-control) {
+  .item-native {
+    @include padding(
+      var(--padding-top),
+      var(--padding-end),
+      var(--padding-bottom),
+      calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
+    );
+  }
+}
+
 .item-native {
   @include border-radius(var(--border-radius));
   @include margin(0);
-  @include padding(
-    var(--padding-top),
-    var(--padding-end),
-    var(--padding-bottom),
-    calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
-  );
   @include text-inherit();
 
   display: flex;
@@ -239,25 +246,28 @@
   z-index: -1;
 }
 
-button, a {
+button,
+a {
   cursor: pointer;
   user-select: none;
 
   -webkit-user-drag: none;
 }
 
-
 // Inner Item
 // --------------------------------------------------
 
-.item-inner {
+:host:not(.item-has-modern-control) {
-  @include margin(0);
   @include padding(
     var(--inner-padding-top),
     calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)),
     var(--inner-padding-bottom),
     var(--inner-padding-start)
   );
+}
+
+.item-inner {
+  @include margin(0);
 
   display: flex;
 
@@ -280,26 +290,18 @@ button, a {
   box-sizing: border-box;
 }
 
-
 // Item Bottom
 // --------------------------------------------------
 
 .item-bottom {
   @include margin(0);
-  @include padding(
+  @include padding(0, var(--inner-padding-end), 0, calc(var(--padding-start) + var(--ion-safe-area-left, 0px)));
-    0,
-    var(--inner-padding-end),
-    0,
-    calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
-  );
 
   display: flex;
 
   justify-content: space-between;
-
 }
 
-
 // Item Detail Icon
 // --------------------------------------------------
 
@@ -321,7 +323,6 @@ button, a {
   opacity: var(--detail-icon-opacity);
 }
 
-
 // Item Slots
 // --------------------------------------------------
 
@@ -375,7 +376,6 @@ button, a {
   flex-direction: column;
 }
 
-
 // Item Input Highlight
 // --------------------------------------------------
 
@@ -450,7 +450,6 @@ button, a {
   border-left: none;
 }
 
-
 // Item Input Focus
 // --------------------------------------------------
 
@@ -509,7 +508,6 @@ button, a {
   max-width: 100%;
 }
 
-
 // Item Datetime
 // --------------------------------------------------
 
@@ -524,7 +522,6 @@ button, a {
   width: 100%;
 }
 
-
 // Item w/ Multiple Inputs
 // --------------------------------------------------
 // Multiple inputs in an item should have the input
@@ -544,7 +541,6 @@ button, a {
   align-items: stretch;
 }
 
-
 // Item Reorder
 // --------------------------------------------------
 
@@ -552,7 +548,6 @@ button, a {
   @include margin(0, null);
 }
 
-
 // Item Button Ripple effect
 // --------------------------------------------------