@rdlabo/ionic-theme-ios27 0.1.0-beta.pr154.shac3e35365120e → 0.1.0

package/src/styles/components/ion-list.scss

@@ -1,6 +1,8 @@
 @use '../utils/structured-list';
 
 ion-list.ios:not(.ios-theme-disabled, .ios26-disabled) {
+  --ion-border-color: var(--ion-color-step-100, var(--ion-background-color-step-100, #e8e8e8));
+
   @include structured-list.support-text;
   ion-item {
     --background-hover-opacity: 0;
@@ -9,7 +11,7 @@ ion-list.ios:not(.ios-theme-disabled, .ios26-disabled) {
 }
 
 ion-list.list-inset.ios:not(.ios-theme-disabled, .ios26-disabled) {
-  @include structured-list.layout(20px, 24px);
+  @include structured-list.layout(20px, 28px);
 
   ion-radio-group,
   ion-reorder-group {
@@ -31,6 +33,13 @@ ion-list.list-inset.ios:not(.ios-theme-disabled, .ios26-disabled) {
       }
 
       --min-height: 52px;
+      font-size: 1rem;
+      line-height: 1.29rem;
+
+      > ion-label:not([slot]) {
+        font-size: inherit;
+        line-height: inherit;
+      }
 
       & > ion-input[labelplacement='floating'] {
         transition: transform 200ms ease;
@@ -42,3 +51,7 @@ ion-list.list-inset.ios:not(.ios-theme-disabled, .ios26-disabled) {
     }
   }
 }
+
+ion-list.ios:not(.ios-theme-disabled, .ios26-disabled) {
+  @include structured-list.colors(0.75, 0.38);
+}

package/src/styles/components/ion-menu.scss

@@ -1,5 +1,3 @@
-@use '../utils/api';
-
 ion-split-pane.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --side-max-width: var(--ios-theme-menu-width, var(--ios26-menu-width));
 }
@@ -82,7 +80,8 @@ ion-split-pane.ios:not(.ios-theme-disabled, .ios26-disabled).split-pane-visible:
 
 ion-menu.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --border: none;
-  --background: transparent;
+  // Keep the surface nearly opaque while page transitions remain visible behind it.
+  --background: rgba(var(--ios-theme-menu-background-rgb), var(--ios-theme-menu-background-opacity, 0.96));
   --max-width: var(--ios-theme-menu-width, var(--ios26-menu-width));
   position: absolute;
   top: 0;
@@ -99,17 +98,30 @@ ion-menu.ios:not(.ios-theme-disabled, .ios26-disabled) {
     display: none;
   }
 
+  &::part(container) {
+    border-radius: 0;
+    box-shadow: none;
+    -webkit-backdrop-filter: blur(3px);
+    backdrop-filter: blur(3px);
+  }
+
+  ion-list:not(.ios-theme-disabled, .ios26-disabled, .ion-color) {
+    background: transparent;
+  }
+
+  ion-item:not(.ios-theme-disabled, .ios26-disabled, .ion-color) {
+    --background: transparent;
+  }
+
   ion-content {
     --background: transparent;
     --ios26-content-box-shadow-rgb: transparent;
     --ios-theme-content-box-shadow-rgb: var(--ios26-content-box-shadow-rgb);
 
     &::part(scroll) {
-      @include api.glass-background;
       margin: calc(var(--ios-theme-floating-safe-area-top, var(--ios26-floating-safe-area-top)) + 6px)
-        calc(16px + var(--ion-safe-area-right)) var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom))
-        calc(12px + var(--ion-safe-area-left));
-      border-radius: 24px;
+        calc(16px + var(--ion-safe-area-right, 0px)) var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom))
+        calc(12px + var(--ion-safe-area-left, 0px));
     }
   }
 }

package/src/styles/components/ion-modal.scss

@@ -1,10 +1,21 @@
 @use '../utils/api';
 
+@mixin sheet-glass {
+  &::part(content) {
+    @include api.glass-background($opacity: 1, $include-background: false);
+    box-sizing: border-box;
+  }
+}
+
 ion-modal.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --backdrop-opacity: 0.2;
 
   &::part(handle) {
-    width: 80px;
+    top: 6px;
+    width: 60px;
+    height: 4px;
+    border-radius: 2px;
+    background: var(--ion-background-color-step-250, var(--ion-color-step-250, #c8c7cc));
   }
 
   ion-toolbar {
@@ -12,19 +23,33 @@ ion-modal.ios:not(.ios-theme-disabled, .ios26-disabled) {
     padding-left: var(--ion-safe-area-left);
   }
 
+  &.modal-card,
   &.modal-sheet {
-    ion-toolbar {
-      padding-right: calc(var(--ion-safe-area-right) + 4px);
-      padding-left: calc(var(--ion-safe-area-left) + 4px);
-    }
+    --border-radius: 32px;
   }
 
-  &.modal-card {
-    /**
-     * IonicでCardModalのborder-radiusはハードコーディングされています。
-     * また、iOS27のドキュメントで見つからないため、サポートは行いません。
-     * https://github.com/ionic-team/ionic-framework/blob/3b80473f2fd5ad4da5a9f5d66f783a69909c8965/core/src/components/modal/animations/ios.enter.ts#L82-L83
-     */
+  // Match the iPad form and page presentations without changing phone fullscreen modals.
+  @media (min-width: 768px) and (min-height: 600px) {
+    --border-radius: 32px;
+    --width: 580px;
+    --height: min(660px, calc(100% - 64px));
+    --box-shadow: 0 24px 64px color-mix(in srgb, var(--ion-box-shadow-color, #000) 18%, transparent);
+
+    &:not(.modal-card, .modal-sheet)::part(content) {
+      // Keep translucent headers from sampling the shadow outside the rounded surface.
+      clip-path: inset(0 round var(--border-radius));
+    }
+
+    &.modal-card {
+      --width: min(936px, calc(100% - 40px));
+      --max-width: 936px;
+      --height: calc(100% - max(32px, var(--ion-safe-area-top, 0px)) * 2);
+    }
+
+    &.modal-sheet {
+      --width: min(936px, calc(100vw - 40px));
+      --height: calc(100% - max(32px, var(--ion-modal-offset-top, 0px)));
+    }
   }
 
   &:has(.ion-delegate-host):has(ion-datetime) {
@@ -33,10 +58,34 @@ ion-modal.ios:not(.ios-theme-disabled, .ios26-disabled) {
   }
 
   &.modal-sheet {
-    --border-radius: 30px;
     --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 1);
-    &::part(content) {
-      @include api.glass-background($opacity: 1, $include-background: false);
+    @media (max-width: 767px), (max-height: 599px) {
+      @include sheet-glass;
+    }
+  }
+
+  @media (min-width: 768px) and (min-height: 600px) {
+    &.modal-sheet:not(.modal-no-expand-scroll) {
+      @include sheet-glass;
+    }
+
+    // Ionic sizes the page at each breakpoint when expandToScroll is false.
+    &.modal-sheet.modal-no-expand-scroll {
+      --background: transparent;
+      --box-shadow: none;
+      --border-width: 0;
+      --overflow: visible;
+
+      &::part(content) {
+        bottom: 20px;
+      }
+
+      > .ion-page {
+        border-radius: var(--border-radius);
+        overflow: hidden;
+        background: var(--ion-background-color, #fff);
+        box-shadow: 0 24px 64px color-mix(in srgb, var(--ion-box-shadow-color, #000) 18%, transparent);
+      }
     }
   }
 }

package/src/styles/components/ion-popover.scss

@@ -1,22 +1,65 @@
 @use '../utils/api';
 
 ion-popover.ios:not(.ios-theme-disabled, .ios26-disabled) {
-  --backdrop-opacity: 0.2;
-  --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.72);
+  @include api.glass-overlay-variables;
+  --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.42);
+  --backdrop-opacity: 0;
   --box-shadow:
-    inset 0 0 8px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.2),
-    0 0 10px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.82);
+    inset 0 0.5px 1px rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.6),
+    0 4px 16px color-mix(in srgb, var(--ion-box-shadow-color, #000) 12%, transparent);
+
   &::part(arrow) {
-    display: none;
-    ::after {
-      //@include api.glass-background;
+    width: 34px;
+    height: 14px;
+
+    &::after {
+      width: 100%;
+      height: 100%;
+      top: 0;
+      inset-inline-start: 0;
+      border-radius: 0;
+      transform: none;
+      // Rounded tip and concave shoulders join the popover's straight edge.
+      clip-path: path('M 0 14 L 0 13 C 3 13 4.5 12 6.5 10 L 14.5 1.5 C 16 -0.5 18 -0.5 19.5 1.5 L 27.5 10 C 29.5 12 31 13 34 13 L 34 14 Z');
+      backdrop-filter: blur(12px) saturate(115%) brightness(1.35);
+      -webkit-backdrop-filter: blur(12px) saturate(115%) brightness(1.35);
     }
   }
+
   &::part(content) {
-    @include api.glass-background($include-background: false, $include-box-shadow: false);
-    border-radius: 24px;
+    @include api.glass-overlay-surface;
+    backdrop-filter: blur(12px) saturate(115%) brightness(1.35);
+    -webkit-backdrop-filter: blur(12px) saturate(115%) brightness(1.35);
+    border-radius: 34px;
     padding: 0;
   }
+
+  &.ios-theme-callout::part(content) {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  &.ios-theme-callout::part(arrow)::after {
+    display: none;
+  }
+
+  &::part(callout-glass) {
+    background: var(--background);
+    backdrop-filter: blur(12px) saturate(115%) brightness(1.35);
+    -webkit-backdrop-filter: blur(12px) saturate(115%) brightness(1.35);
+  }
+
+  &::part(callout-border) {
+    background: color-mix(in srgb, var(--border-color) 60%, transparent);
+  }
+
+  &::part(callout-shadow) {
+    background: color-mix(in srgb, var(--ion-box-shadow-color, #000) 8%, transparent);
+  }
+
   ion-select-popover {
     ion-list {
       background: transparent;

package/src/styles/components/ion-range.scss

@@ -1,14 +1,29 @@
-@use '../utils/api';
-
-@mixin scaled-transform($translate-x) {
-  transform: scale(1.56, 1.47) translateX(calc(#{$translate-x} * -0.1)) translateZ(0);
-  -webkit-transform: scale(1.56, 1.47) translateX(calc(#{$translate-x} * -0.1)) translateZ(0);
+@mixin pressed-knob($offset: 0px) {
+  // iPadOS 27: 38 × 24 at rest, approximately 58 × 38 while tracking.
+  transform: translateX($offset) scale(1.53, 1.58);
+  background: linear-gradient(
+    180deg,
+    rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04),
+    rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08) 35%,
+    rgba(255, 255, 255, 0.12) 65%,
+    rgba(255, 255, 255, 0.24)
+  );
+  box-shadow:
+    inset 0 0 0 0.65px rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.28),
+    inset 0 1px 1px rgba(255, 255, 255, 0.8),
+    0 4px 6px rgba(0, 0, 0, 0.14);
 }
 
 ion-range.ios:not(.ios-theme-disabled, .ios26-disabled) {
-  --knob-size: 20px;
+  --knob-size: 24px;
   --knob-width: 38px;
   --knob-border-radius: 24px;
+  --bar-height: 6px;
+  --bar-border-radius: 3px;
+
+  &.ion-color {
+    --bar-background-active: var(--ion-color-base);
+  }
 
   &.range-label-placement-start::part(label) {
     margin-inline: 0 24px;
@@ -27,64 +42,48 @@ ion-range.ios:not(.ios-theme-disabled, .ios26-disabled) {
   }
 
   &::part(knob) {
+    overflow: hidden;
     width: var(--knob-width);
-    margin-inline-start: -8px;
+    margin-inline-start: calc((var(--knob-size) - var(--knob-width)) / 2);
     transition:
-      transform 300ms ease,
-      margin 300ms ease,
+      transform 200ms ease,
       box-shadow 200ms ease;
   }
 
-  &:not(.range-dual-knobs).range-pressed {
-    --knob-background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.1);
-    --knob-box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 4px rgba(0, 0, 0, 0.05), inset 0.4px 0.4px 1px 0 var(--bar-background-active);
-
-    &::part(knob) {
-      @include api.glass-background(0.1, 0, 120%, $include-background: false, $include-box-shadow: false, $include-border: false);
-      @include scaled-transform(0px);
-    }
+  &:not(.range-dual-knobs).range-pressed::part(knob) {
+    @include pressed-knob;
+  }
 
-    &.range-value-min {
-      --knob-box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 4px rgba(0, 0, 0, 0.05);
+  // Ionic does not expose each dual thumb's endpoint state through parts.
+  // Keep its width fixed so either thumb can be pressed at coincident endpoints.
+  &.range-dual-knobs.range-pressed-a::part(knob-a),
+  &.range-dual-knobs.range-pressed-b::part(knob-b) {
+    @include pressed-knob;
+    transform: scaleY(1.58);
+  }
 
-      &::part(knob) {
-        @include scaled-transform(calc(var(--knob-width) * -2));
-      }
-    }
-    &.range-value-max {
-      --knob-box-shadow:
-        0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 4px rgba(0, 0, 0, 0.05), inset 0.4px 0.4px 1px 0.2px var(--bar-background-active);
+  // Keep the enlarged thumb inside the same outer edge at either endpoint.
+  &:not(.range-dual-knobs).range-pressed.range-value-min::part(knob) {
+    @include pressed-knob(calc(var(--knob-width) * 0.53 / 2));
+  }
 
-      &::part(knob) {
-        @include scaled-transform(calc(var(--knob-width) * 2));
-      }
-    }
+  &:not(.range-dual-knobs).range-pressed.range-value-max::part(knob) {
+    @include pressed-knob(calc(var(--knob-width) * -0.53 / 2));
   }
 
-  &.range-dual-knobs.range-pressed {
-    &.range-pressed-a::part(knob-a),
-    &.range-pressed-b::part(knob-b) {
-      @include api.glass-background(0.1, 0, 120%, $include-border: false);
-      @include scaled-transform(0px);
-      box-shadow:
-        0 0.5px 4px rgba(0, 0, 0, 0.12),
-        0 6px 4px rgba(0, 0, 0, 0.05),
-        inset 0.4px 0.4px 1px 0 var(--bar-background-active);
+  &:dir(rtl) {
+    &:not(.range-dual-knobs).range-pressed.range-value-min::part(knob) {
+      @include pressed-knob(calc(var(--knob-width) * -0.53 / 2));
     }
 
-    &.range-value-min.range-pressed-lower::part(knob-lower) {
-      @include scaled-transform(calc(var(--knob-width) * -2));
-      box-shadow:
-        0 0.5px 4px rgba(0, 0, 0, 0.12),
-        0 6px 4px rgba(0, 0, 0, 0.05);
+    &:not(.range-dual-knobs).range-pressed.range-value-max::part(knob) {
+      @include pressed-knob(calc(var(--knob-width) * 0.53 / 2));
     }
+  }
 
-    &.range-value-max.range-pressed-upper::part(knob-upper) {
-      @include scaled-transform(calc(var(--knob-width) * 2));
-      box-shadow:
-        0 0.5px 4px rgba(0, 0, 0, 0.12),
-        0 6px 4px rgba(0, 0, 0, 0.05),
-        inset 0.4px 0.4px 1px 0.2px var(--bar-background-active);
+  @media (prefers-reduced-motion: reduce) {
+    &::part(knob) {
+      transition: none;
     }
   }
 }

package/src/styles/components/ion-segment.scss

@@ -14,18 +14,8 @@ ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) {
 
   // UIKit uses a larger control in navigation bars, but not in content.
   &.in-toolbar:not(.segment-expand) {
-    @include api.glass-background($include-border: false);
     --border-radius: 24px;
     min-height: 48px;
-    // Draw the shared reflective rim without adding to the control's measured bounds.
-    &::before {
-      @include api.glass-background($include-background: false, $include-box-shadow: false, $blur: 0, $saturate: 100%);
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: inherit;
-      pointer-events: none;
-    }
     // UIKit's container spring: grow on press, then briefly shrink below rest on release.
     transition: transform 517ms
       linear(
@@ -67,9 +57,9 @@ ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) {
     }
 
     ion-segment-button {
-      min-height: 40px;
-      margin: 4px 2px;
-      font-size: 15px;
+      min-height: 44px;
+      margin: 2px 0;
+      font-size: 0.94rem;
     }
   }
 
@@ -161,9 +151,14 @@ ion-segment-button.ios:not(.ios-theme-disabled, .ios26-disabled) {
   min-width: 65px;
   min-height: 28px;
   margin: 2px 0;
-  font-size: 13px;
+  font-size: 0.81rem;
+  font-weight: 500;
   line-height: normal;
 
+  &.segment-button-disabled {
+    opacity: 0.2;
+  }
+
   &::part(indicator-background) {
     transition:
       var(--indicator-transition),
@@ -180,8 +175,12 @@ ion-segment-button.ios:not(.ios-theme-disabled, .ios26-disabled) {
 }
 
 // Public customization properties remain overridable by ordinary app selectors.
-:where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled).in-toolbar:not(.segment-expand) ion-segment-button) {
-  --indicator-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
+// The resting track is a flat system fill; only the moving lens has a glass rim.
+:where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled)) {
+  --background: rgba(var(--ion-color-medium-rgb, 99, 100, 105), 0.11);
+}
+:where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) ion-segment-button) {
+  --indicator-color: var(--ion-background-color, #fff);
 }
 :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled).ion-color ion-segment-button.in-segment-color) {
   --indicator-color: var(--ion-color-base);

package/src/styles/components/ion-tabs.scss

@@ -1,11 +1,30 @@
 @use '../utils/api';
 
 ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled) {
-  @include api.glass-background;
+  // Ionic forces content-box on the host. Keep the Glass border in a
+  // separate layer so its physical-pixel rounding cannot resize the bar.
+  border: 0;
+  background: transparent;
+  contain: size layout style;
   z-index: 2;
+  --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.53);
 
-  border-radius: 40px;
-  --color: rgb(var(--ion-text-color-rgb, 0, 0, 0));
+  &::before {
+    @include api.glass-control-background($include-background: false);
+    background-color: var(--background);
+    backdrop-filter: blur(6px) saturate(180%) brightness(1.05);
+    content: '';
+    position: absolute;
+    inset: 0;
+    box-sizing: border-box;
+    border-radius: inherit;
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  border-radius: 31px;
+  --ios-theme-tab-overlap: 20px;
+  --color: var(--ion-text-color-step-50, #0d0d0d);
 
   &[slot='top'] {
     position: absolute;
@@ -42,17 +61,41 @@ ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled) {
   /**
    * 100% - margin-left - margin-right - right-fab - margin-left-fab
    */
-  width: calc(100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-right, 0px)) - 60px - 12px);
-  max-width: 474px;
-  min-height: 56px;
+  width: calc(100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-right, 0px)) - 75px);
+  max-width: 471px;
+  height: 54px;
+  min-height: 54px;
   &:has(> ion-tab-button:nth-child(2):last-child) {
-    width: 184px; // 190px including padding and border
+    width: 180px; // 188px including the 4px inset on each side.
   }
   &:has(:nth-child(5)) {
-    width: calc(100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-right, 0px)));
-    max-width: 546px;
+    width: calc(100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-right, 0px)) - 3px);
+    max-width: 543px;
+  }
+  padding: 4px;
+
+  > ion-tab-button:not(.ion-cloned-element) ~ ion-tab-button:not(.ion-cloned-element) {
+    margin-inline-start: calc(-1 * var(--ios-theme-tab-overlap));
+  }
+
+  &:not(:has(> ion-tab-button:nth-child(4 of ion-tab-button:not(.ion-cloned-element)))) {
+    --ios-theme-tab-overlap: 8px;
+  }
+
+  // iPad's stacked UIKit tabs use a compact platter instead of filling the
+  // available width. Keep the phone sizing and constrain only roomy layouts.
+  @media (min-width: 768px) {
+    --ios-theme-tab-overlap: 16px;
+    @each $count, $width in (2: 188px, 3: 274px, 4: 336px, 5: 414px) {
+      &:has(
+        > ion-tab-button:nth-child(#{$count} of ion-tab-button:not(.ion-cloned-element)):nth-last-child(
+            1 of ion-tab-button:not(.ion-cloned-element)
+          )
+      ) {
+        max-width: $width - 8px;
+      }
+    }
   }
-  padding: 2px 2px;
 
   transition: transform var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease-out;
 
@@ -118,10 +161,28 @@ ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled) {
 
 ion-tab-button.ios:not(.ios-theme-disabled, .ios26-disabled) {
   transform-origin: center 65%;
+  font-size: 0.59rem;
+  border-radius: 27px;
 
   ion-icon {
     font-size: 26px;
   }
+  &.tab-layout-icon-top.tab-has-icon.tab-has-label {
+    --padding-top: 7px;
+    --padding-bottom: 7px;
+    justify-content: flex-start;
+
+    ion-icon {
+      flex-shrink: 0;
+      margin-block: 0 2px;
+    }
+    ion-label {
+      margin: 0;
+      font-size: inherit;
+      line-height: 1.2;
+      min-height: 0;
+    }
+  }
   ion-label,
   ion-icon {
     transition:
@@ -129,12 +190,11 @@ ion-tab-button.ios:not(.ios-theme-disabled, .ios26-disabled) {
       color var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease;
   }
   background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0);
-  height: auto;
+  height: 54px;
   transition: transform var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease;
   &::part(native) {
     overflow: visible;
-    min-height: 56px;
-    border-radius: 32px;
+    min-height: 54px;
   }
 
   &.ion-activated {

package/src/styles/components/ion-toast.scss

@@ -1,36 +1,27 @@
 @use '../utils/api';
 
 ion-toast.ios:not(.ios-theme-disabled, .ios26-disabled) {
-  --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.72);
-  --border-radius: 24px;
-  --border-style: solid;
-  --border-width: 0.5px;
-  --box-shadow:
-    inset 0 0 8px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.2),
-    0 0 10px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.82);
+  @include api.glass-overlay-variables($shadow-opacity: 0.06);
+  --border-radius: 28px;
+  --max-width: 560px;
   --start: 16px;
   --end: 16px;
+  font-size: 0.94rem;
 
   &::part(wrapper) {
-    @include api.glass-background($include-background: false, $include-box-shadow: false, $include-border: false);
-    border-top-color: rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 1);
-    border-right-color: rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.8);
-    border-bottom-color: rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 1);
-    border-left-color: rgba(var(--ios-theme-glass-border-color-rgb, var(--ios26-glass-border-color-rgb)), 0.6);
+    @include api.glass-overlay-surface($include-background: false, $include-frame: false);
   }
 
-  &.ion-color {
-    &::part(wrapper) {
-      @include api.glass-background(
-        $background-rgb: var(--ion-color-base-rgb),
-        $border-color-rgb: var(--ion-color-base-rgb),
-        $include-box-shadow: false,
-        $include-border: false
-      );
-      border-top-color: rgba(var(--ion-color-base-rgb), 1);
-      border-right-color: rgba(var(--ion-color-base-rgb), 0.8);
-      border-bottom-color: rgba(var(--ion-color-base-rgb), 1);
-      border-left-color: rgba(var(--ion-color-base-rgb), 0.6);
-    }
+  &::part(header) {
+    font-size: 0.94rem;
+    font-weight: 600;
+  }
+
+  &::part(message) {
+    line-height: 1.33;
+  }
+
+  &.ion-color::part(wrapper) {
+    background: rgba(var(--ion-color-base-rgb), 0.87);
   }
 }

package/src/styles/components/ion-toolbar.scss

@@ -13,7 +13,23 @@ ion-header.ios:not(.ios-theme-disabled, .ios26-disabled) ion-toolbar:not(.ios-th
 ion-modal.ios:not(.ios-theme-disabled, .ios26-disabled).modal-card,
 ion-modal.ios:not(.ios-theme-disabled, .ios26-disabled).modal-sheet {
   ion-header.ios:not(.ios-theme-disabled, .ios26-disabled) ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled):first-of-type {
-    padding-top: 6px;
+    padding-top: 0;
+    padding-bottom: 0;
+    --min-height: 64px;
+    --padding-start: 3px;
+    --padding-end: 3px;
+  }
+}
+
+@media (min-width: 768px) and (min-height: 600px) {
+  ion-modal.ios:not(.ios-theme-disabled, .ios26-disabled) {
+    ion-header.ios:not(.ios-theme-disabled, .ios26-disabled) ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled):first-of-type {
+      padding-top: 0;
+      padding-bottom: 0;
+      --min-height: 64px;
+      --padding-start: 3px;
+      --padding-end: 3px;
+    }
   }
 }