feat: Phase 1 MD3 token migration for all components

demo/e2e/rtl.spec.ts

@@ -7,6 +7,8 @@ for (const direction of ['ltr', 'rtl'] as const) {
       const fixture = document.createElement('div');
       fixture.id = 'rtl-range-probe';
       fixture.dir = dir;
+      fixture.style.width = '200px';
+      fixture.style.position = 'relative';
 
       const range = document.createElement('ion-range');
       range.id = 'single-range';
@@ -30,28 +32,22 @@ for (const direction of ['ltr', 'rtl'] as const) {
     await expect(page.locator('#single-range')).toHaveClass(/hydrated/);
     await expect(page.locator('#dual-range')).toHaveClass(/hydrated/);
 
-    const normalOffset = await page.locator('#single-range').evaluate((range) => {
-      const knob = range.shadowRoot!.querySelector<HTMLElement>('[part~="knob"]')!;
-      return new DOMMatrixReadOnly(getComputedStyle(knob).transform).e;
-    });
-    expect(normalOffset).toBeCloseTo(direction === 'ltr' ? 20 : -20, 1);
-
-    await page.locator('#single-range').evaluate((range) => range.classList.add('range-pressed'));
-    await expect
-      .poll(() =>
-        page.locator('#single-range').evaluate((range) => {
-          const knob = range.shadowRoot!.querySelector<HTMLElement>('[part~="knob"]')!;
-          return new DOMMatrixReadOnly(getComputedStyle(knob).transform).e;
-        }),
-      )
-      .toBeCloseTo(direction === 'ltr' ? 21 : -21, 1);
+    // The knob handle is positioned from the inline-start edge by the value
+    // ratio, so LTR uses left: 50% and RTL uses right: 50%.
+    const handleSide = direction === 'ltr' ? 'left' : 'right';
+    const handlePosition = await page.locator('#single-range').evaluate((range, side) => {
+      const handle = range.shadowRoot!.querySelector<HTMLElement>('[part~="knob-handle"]')!;
+      return getComputedStyle(handle)[side];
+    }, handleSide);
+    expect(handlePosition).toBe('100px');
 
+    // With the default Ionic range geometry the bar has no extra inline margins.
     const dualMargins = await page.locator('#dual-range').evaluate((range) => {
       const bar = range.shadowRoot!.querySelector<HTMLElement>('[part~="bar"]')!;
       const style = getComputedStyle(bar);
       return { start: style.marginInlineStart, end: style.marginInlineEnd };
     });
-    expect(dualMargins).toEqual({ start: '6px', end: '6px' });
+    expect(dualMargins).toEqual({ start: '0px', end: '0px' });
   });
 
   test(`${direction} mirrors Material forward and back transitions`, async ({ page }) => {

demo/src/app/index/pages/action-sheet/action-sheet.util.ts

@@ -10,6 +10,14 @@ export const actionSheetUtil = () => ({
         action: 'delete',
       },
     },
+    {
+      text: 'Confirm',
+      role: 'preferred',
+      icon: 'checkmark-outline',
+      data: {
+        action: 'confirm',
+      },
+    },
     {
       text: 'Share',
       icon: 'share-outline',

demo/src/app/index/pages/alert/alert.page.ts

@@ -75,12 +75,25 @@ export class AlertPage implements OnInit {
           subHeader: undefined,
           message: 'Removing from Home Screen will keep the app in your App Library',
           buttons: [
-            ...alertUtil().buttons,
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              handler: () => {
+                console.log('Alert canceled');
+              },
+            },
+            {
+              text: 'Keep',
+              role: 'preferred',
+              handler: () => {
+                console.log('Alert kept');
+              },
+            },
             {
               text: 'Remove from Home Screen',
-              role: 'confirm',
+              role: 'destructive',
               handler: () => {
-                console.log('Alert confirmed');
+                console.log('Alert removed');
               },
             },
           ],

demo/src/app/index/pages/alert/alert.util.ts

@@ -11,11 +11,18 @@ export const alertUtil = () => ({
       },
     },
     {
-      text: 'OK',
-      role: 'destructive',
+      text: 'Confirm',
+      role: 'preferred',
       handler: () => {
         console.log('Alert confirmed');
       },
     },
+    {
+      text: 'Delete',
+      role: 'destructive',
+      handler: () => {
+        console.log('Alert deleted');
+      },
+    },
   ],
 });

src/styles/components/ion-action-sheet.scss

@@ -1,5 +1,7 @@
 ion-action-sheet.md:not(.md3-disabled) {
   --max-width: 640px;
+  --background: var(--md-sys-color-surface-container-low);
+  --color: var(--md-sys-color-on-surface);
 
   .action-sheet-container {
     overflow: hidden;
@@ -12,6 +14,23 @@ ion-action-sheet.md:not(.md3-disabled) {
 
     .action-sheet-button {
       padding: 12px 24px;
+
+      &.action-sheet-destructive {
+        --button-color: var(--md-sys-color-error);
+        --color: var(--md-sys-color-error);
+      }
+
+      &.action-sheet-preferred {
+        --button-color: var(--md-sys-color-on-primary);
+        --color: var(--md-sys-color-on-primary);
+        --button-background: var(--md-sys-color-primary);
+        --button-background-activated: var(--md-sys-color-on-primary);
+        --button-background-activated-opacity: 0.12;
+        --button-background-hover: var(--md-sys-color-on-primary);
+        --button-background-hover-opacity: 0.08;
+        --button-background-focused: var(--md-sys-color-on-primary);
+        --button-background-focused-opacity: 0.12;
+      }
     }
   }
 }

src/styles/components/ion-alert.scss

@@ -2,11 +2,15 @@ ion-alert.md:not(.md3-disabled) {
   --backdrop-opacity: 0.2;
   --min-width: 280px;
   --max-width: min(560px, calc(100% - 48px * 2));
-  transition: transform 200ms ease;
+
+  transition: transform var(--md-sys-motion-duration-short-3) var(--md-sys-motion-easing-emphasized-decelerate);
 
   .alert-wrapper {
     border-radius: 24px;
     box-shadow: var(--token-elevation-3);
+    background: var(--md-sys-color-surface-container-highest);
+    color: var(--md-sys-color-on-surface);
+    outline: none;
 
     .alert-head {
       padding-top: 24px;
@@ -15,9 +19,42 @@ ion-alert.md:not(.md3-disabled) {
 
     .alert-message {
       padding-bottom: 24px;
+
       &:empty {
         padding-bottom: 0;
       }
     }
+
+    .alert-button {
+      color: var(--md-sys-color-primary);
+
+      &.alert-button-role-destructive {
+        color: var(--md-sys-color-error);
+      }
+
+      &.alert-button-role-preferred {
+        background: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
+        border-radius: 999px;
+        text-transform: none;
+
+        &:hover {
+          background: color-mix(
+            in srgb,
+            var(--md-sys-color-on-primary) var(--md-sys-state-hover-state-layer-opacity),
+            var(--md-sys-color-primary)
+          );
+        }
+
+        &.ion-activated,
+        &.ion-focused {
+          background: color-mix(
+            in srgb,
+            var(--md-sys-color-on-primary) var(--md-sys-state-pressed-state-layer-opacity),
+            var(--md-sys-color-primary)
+          );
+        }
+      }
+    }
   }
 }

src/styles/components/ion-button.scss

@@ -1,104 +1,176 @@
 @mixin theme-button() {
-  // Default is be round button
+  // Default is a round/pill button. Match the iOS/Ionic shape.
   --box-shadow: none;
   --padding-start: 16px;
   --padding-end: 16px;
   --border-radius: 999px;
 
+  // Keep both selectors so Ionic's :not(.button-round) rules don't override.
+  &,
   &:not(.button-round) {
-    /**
-     * for remove default style:
-     * .sc-ion-buttons-md-s ion-button:not(.button-round) {
-     *   --border-radius: 2px;
-     * }
-     */
     --border-radius: 999px;
   }
 
+  // Typography uses M3 label-large / sentence case.
+  font-size: var(--md-sys-typescale-label-large-size);
+  font-weight: var(--md-sys-typescale-label-large-weight);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  text-transform: none;
+
+  // Default fill is "solid" in Ionic, which maps to M3 "filled".
+  --background: var(--md-sys-color-primary);
+  --color: var(--md-sys-color-on-primary);
+  --background-hover: var(--md-sys-color-on-primary);
+  --background-hover-opacity: var(--md-sys-state-hover-state-layer-opacity);
+  --background-focused: var(--md-sys-color-on-primary);
+  --background-focused-opacity: var(--md-sys-state-focus-state-layer-opacity);
+  --background-activated: var(--md-sys-color-on-primary);
+  --background-activated-opacity: var(--md-sys-state-pressed-state-layer-opacity);
+
   &::part(native) {
     height: 40px;
   }
 
   ion-icon {
     font-size: 24px;
+
     &[slot='start'] {
       margin-inline-start: 0;
       margin-inline-end: 8px;
     }
+
     &[slot='end'] {
       margin-inline-start: 8px;
       margin-inline-end: 0;
     }
   }
 
+  // Small size (32dp)
   &.button-small {
     --padding-start: 12px;
     --padding-end: 12px;
+
+    font-size: var(--md-sys-typescale-label-medium-size);
+    font-weight: var(--md-sys-typescale-label-medium-weight);
+    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+
     &::part(native) {
       height: 32px;
     }
+
     &.button-has-icon-only {
       width: 32px;
       height: 32px;
     }
+
     &.button-has-icon-only::part(native) {
       width: 32px;
       height: 32px;
     }
+
     ion-icon {
       font-size: 20px;
+
       &[slot='start'] {
         margin-inline-start: 0;
         margin-inline-end: 4px;
       }
+
       &[slot='end'] {
         margin-inline-start: 4px;
         margin-inline-end: 0;
       }
     }
   }
 
+  // Large size (56dp)
   &.button-large {
     --padding-start: 24px;
     --padding-end: 24px;
 
     &::part(native) {
       height: 56px;
     }
+
     &.button-has-icon-only {
       width: 56px;
       height: 56px;
     }
+
     &.button-has-icon-only::part(native) {
       width: 56px;
       height: 56px;
     }
+
     ion-icon {
       font-size: 24px;
+
       &[slot='start'] {
         margin-inline-start: 0;
         margin-inline-end: 8px;
       }
+
       &[slot='end'] {
         margin-inline-start: 8px;
         margin-inline-end: 0;
       }
     }
   }
 
+  // Ionic "outline" maps to M3 "outlined".
+  &.button-outline {
+    --background: transparent;
+    --color: var(--md-sys-color-primary);
+    --border-width: 1px;
+    --border-style: solid;
+    --border-color: var(--md-sys-color-outline);
+    --background-hover: var(--md-sys-color-primary);
+    --background-focused: var(--md-sys-color-primary);
+    --background-activated: var(--md-sys-color-primary);
+  }
+
+  // Ionic "clear" maps to M3 "text".
+  &.button-clear {
+    --background: transparent;
+    --color: var(--md-sys-color-primary);
+    --border-width: 0;
+    --background-hover: var(--md-sys-color-primary);
+    --background-focused: var(--md-sys-color-primary);
+    --background-activated: var(--md-sys-color-primary);
+  }
+
+  // Icon-only buttons. Keep the iOS circular 40x40 with a 24dp icon.
   &.button-has-icon-only {
     &::part(native) {
       width: 40px;
       height: 40px;
     }
+
     --padding-start: 0;
     --padding-end: 0;
   }
 
+  // Square shape option. Match the iOS squared-button radius.
   &.button-square {
-    --border-radius: 8px;
-    &.button-square {
-      --border-radius: 12px;
+    --border-radius: 12px;
+  }
+
+  // Respect the Ionic `color` prop on any M3 variant.
+  &.ion-color {
+    --background: var(--ion-color-base);
+    --color: var(--ion-color-contrast);
+    --border-color: var(--ion-color-base);
+    --background-hover: var(--ion-color-contrast);
+    --background-focused: var(--ion-color-contrast);
+    --background-activated: var(--ion-color-contrast);
+
+    // Outlined / text buttons have a transparent background, so the state
+    // layer should be the user color itself, not its contrast.
+    &.button-outline,
+    &.button-clear {
+      --background-hover: var(--ion-color-base);
+      --background-focused: var(--ion-color-base);
+      --background-activated: var(--ion-color-base);
     }
   }
 }