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

package/src/popover/animations/ios.enter.ts

@@ -2,6 +2,7 @@ import { createAnimation } from '@ionic/core';
 import type { Animation } from '@ionic/core';
 import { getElementRoot } from '../../utils';
 import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition } from '../utils';
+import { createCalloutSurface } from '../callout-surface';
 
 const POPOVER_IOS_BODY_PADDING = 5;
 export const POPOVER_IOS_BODY_MARGIN = 8;
@@ -19,12 +20,41 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
 
   const root = getElementRoot(baseEl);
   const contentEl = root.querySelector('.popover-content') as HTMLElement;
+  const arrowEl = root.querySelector<HTMLElement>('.popover-arrow');
 
   const referenceSizeEl = trigger || ev?.detail?.ionShadowTarget || ev?.target;
+  const anchorBounds = referenceSizeEl?.getBoundingClientRect();
+  // Overlays live outside the page, but must stay in the pane that opened them.
+  let paneAnchor = referenceSizeEl as HTMLElement | undefined;
+  let pane: HTMLElement | null = null;
+  while (paneAnchor && !pane) {
+    pane = paneAnchor.closest('ion-content, .ion-page, ion-menu');
+    paneAnchor = (paneAnchor.getRootNode() as ShadowRoot).host as HTMLElement | undefined;
+  }
+  const paneBounds = pane?.getBoundingClientRect();
+  const scroll = pane?.shadowRoot?.querySelector<HTMLElement>('[part="scroll"]');
+  const scrollStyle = scroll ? getComputedStyle(scroll) : null;
+  let paneLeft = Math.max(0, (paneBounds?.left ?? 0) + (parseFloat(scrollStyle?.paddingLeft ?? '0') || 0));
+  let paneRight = Math.min(bodyWidth, (paneBounds?.right ?? bodyWidth) - (parseFloat(scrollStyle?.paddingRight ?? '0') || 0));
+  // Toolbars may be siblings of ion-content; exclude the visible menu there too.
+  const splitPane = pane?.closest('ion-split-pane.split-pane-visible');
+  if (splitPane && pane?.closest('.split-pane-main')) {
+    for (const menu of Array.from(splitPane.querySelectorAll<HTMLElement>(':scope > ion-menu.menu-pane-visible'))) {
+      const rect = menu.getBoundingClientRect();
+      if (rect.left <= paneLeft && rect.right > paneLeft) paneLeft = rect.right;
+      if (rect.right >= paneRight && rect.left < paneRight) paneRight = rect.left;
+    }
+  }
+  const paneMargin = size === 'cover' ? 0 : POPOVER_IOS_BODY_MARGIN;
+  const availableWidth = Math.max(0, paneRight - paneLeft - paneMargin * 2);
+  if (pane && availableWidth > 0 && contentEl.getBoundingClientRect().width > availableWidth) {
+    contentEl.dataset['previousMaxWidth'] = contentEl.style.maxWidth;
+    contentEl.style.maxWidth = `${availableWidth}px`;
+  }
   const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
 
   const isReplace = ((): boolean => {
-    if (!['ion-button', 'ion-buttons'].includes(referenceSizeEl.localName)) {
+    if (reference === 'event' || !referenceSizeEl || !['ion-button', 'ion-buttons'].includes(referenceSizeEl.localName)) {
       return false;
     }
     if (referenceSizeEl.matches('.ios-theme-disabled, .ios26-disabled')) {
@@ -42,10 +72,22 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
 
   const results = getPopoverPosition(isRTL, contentWidth, contentHeight, reference, side, align, defaultPosition, trigger, ev);
 
+  // Use the same reference for placement, the callout and the animation origin.
+  const anchor = reference === 'event' ? results.referenceCoordinates : anchorBounds;
+
   const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
   const margin = size === 'cover' ? 0 : POPOVER_IOS_BODY_MARGIN;
 
-  const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, addPopoverBottomClass } = calculateWindowAdjustment(
+  const {
+    originX,
+    originY,
+    top,
+    left: windowLeft,
+    bottom,
+    checkSafeAreaLeft,
+    checkSafeAreaRight,
+    addPopoverBottomClass,
+  } = calculateWindowAdjustment(
     side,
     results.top,
     results.left,
@@ -58,14 +100,59 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     results.originX,
     results.originY,
     results.referenceCoordinates,
-    referenceSizeEl.getBoundingClientRect(),
+    referenceSizeEl?.getBoundingClientRect(),
     isReplace,
   );
+  // A replacing surface grows inward from the button's edge, not its center.
+  const preferredLeft =
+    isReplace && anchorBounds
+      ? anchorBounds.left + anchorBounds.width / 2 <= (paneLeft + paneRight) / 2
+        ? anchorBounds.left
+        : anchorBounds.right - contentWidth
+      : windowLeft;
+  const left = pane ? Math.max(paneLeft + paneMargin, Math.min(paneRight - paneMargin - contentWidth, preferredLeft)) : preferredLeft;
+  const physicalSide = side === 'start' ? (isRTL ? 'right' : 'left') : side === 'end' ? (isRTL ? 'left' : 'right') : side;
+  const horizontal = physicalSide === 'left' || physicalSide === 'right';
+  const above = addPopoverBottomClass || physicalSide === 'top';
+  const hasCallout = !!arrowEl && !isReplace && !!anchor && size !== 'cover' && bottom === undefined;
+  const surfaceTop = hasCallout && !horizontal ? top + (above ? -5 : 5) : top;
+  const contentOrigin = anchor
+    ? `${anchor.left + anchor.width / 2 - left}px ${anchor.top + anchor.height / 2 - surfaceTop}px`
+    : `${originX} ${originY}`;
 
   const baseAnimation = createAnimation();
   const backdropAnimation = createAnimation();
   const contentAnimation = createAnimation();
   const targetAnimation = createAnimation();
+  const arrowAnimation = createAnimation();
+  const surfaceAnimation = createAnimation();
+  if (arrowEl) {
+    arrowAnimation.addElement(arrowEl).delay(300).duration(200).fromTo('opacity', 0, 1);
+  }
+  if (hasCallout && anchor) {
+    const length = horizontal ? contentHeight : contentWidth;
+    const inset = Math.min(48, length / 2);
+    const center = Math.max(
+      inset,
+      Math.min(length - inset, horizontal ? anchor.top + anchor.height / 2 - top : anchor.left + anchor.width / 2 - left),
+    );
+    const arrowSide = horizontal ? (physicalSide === 'left' ? 'right' : 'left') : above ? 'bottom' : 'top';
+    const layers = createCalloutSurface(root, contentWidth, contentHeight, arrowSide, center);
+    baseEl.classList.add('ios-theme-callout');
+    for (const layer of layers) {
+      layer.style.left = `calc(${left - 32}px + var(--offset-x, 0))`;
+      layer.style.top = `calc(${surfaceTop - 32}px + var(--offset-y, 0))`;
+      const [originLeft, originTop] = contentOrigin.split(' ').map(parseFloat);
+      layer.style.transformOrigin = `${originLeft + 32}px ${originTop + 32}px`;
+    }
+    surfaceAnimation
+      .addElement(layers)
+      .delay(100)
+      .duration(400)
+      .easing('cubic-bezier(0, 1, 0.22, 1)')
+      .fromTo('transform', 'scale(0)', 'scale(1)')
+      .fromTo('opacity', 0.01, 1);
+  }
 
   backdropAnimation
     .delay(100)
@@ -86,12 +173,12 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     .delay(100)
     .duration(400)
     .addElement(root.querySelector('.popover-content')!)
-    .beforeStyles({ 'transform-origin': `${originY} ${originX}` })
+    .beforeStyles({ 'transform-origin': contentOrigin })
     .beforeAddWrite(() => {
       /**
        * 'transformOrigin' use for leave animation.
        */
-      root.querySelector<HTMLElement>('.popover-content')!.dataset['transformOrigin'] = `${originY} ${originX}`;
+      root.querySelector<HTMLElement>('.popover-content')!.dataset['transformOrigin'] = contentOrigin;
     })
     .fromTo('transform', 'scale(0)', 'scale(1)')
     .fromTo('opacity', 0.01, 1);
@@ -129,16 +216,42 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
 
       let leftValue = `${left}px`;
 
-      if (checkSafeAreaLeft) {
+      if (checkSafeAreaLeft && !pane) {
         leftValue = `${left}px${safeAreaLeft}`;
       }
-      if (checkSafeAreaRight) {
+      if (checkSafeAreaRight && !pane) {
         leftValue = `${left}px${safeAreaRight}`;
       }
 
-      contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
+      contentEl.style.setProperty('top', `calc(${surfaceTop}px + var(--offset-y, 0))`);
       contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
-      contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
+      contentEl.style.setProperty('transform-origin', contentOrigin);
+
+      // Morphing buttons replace their anchor; ordinary anchored popovers point to it.
+      if (arrowEl) {
+        arrowEl.style.display = 'none';
+        if (hasCallout && anchor) {
+          const inset = Math.min(48, (horizontal ? contentHeight : contentWidth) / 2);
+          const clamp = (value: number, length: number) => Math.max(inset, Math.min(length - inset, value));
+          let arrowLeft: number;
+          let arrowTop: number;
+          let rotation: number;
+          if (horizontal) {
+            arrowLeft = physicalSide === 'left' ? left + contentWidth - 10 : left - 24;
+            arrowTop = top + clamp(anchor.top + anchor.height / 2 - top, contentHeight) - 7;
+            rotation = physicalSide === 'left' ? 90 : -90;
+          } else {
+            arrowLeft = left + clamp(anchor.left + anchor.width / 2 - left, contentWidth) - 17;
+            arrowTop = above ? surfaceTop + contentHeight - 1 : surfaceTop - 13;
+            rotation = above ? 180 : 0;
+          }
+          arrowEl.style.setProperty('display', 'block');
+          arrowEl.style.setProperty('top', `calc(${arrowTop}px + var(--offset-y, 0))`);
+          arrowEl.style.setProperty('left', `calc(${arrowLeft}px + var(--offset-x, 0))`);
+          arrowEl.style.setProperty('bottom', 'auto');
+          arrowEl.style.setProperty('transform', `rotate(${rotation}deg)`);
+        }
+      }
     })
-    .addAnimation([backdropAnimation, contentAnimation, targetAnimation]);
+    .addAnimation([backdropAnimation, contentAnimation, targetAnimation, arrowAnimation, surfaceAnimation]);
 };

package/src/popover/animations/ios.leave.ts

@@ -15,6 +15,12 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
   const backdropAnimation = createAnimation();
   const contentAnimation = createAnimation();
   const targetAnimation = createAnimation();
+  const surfaceAnimation = createAnimation()
+    .addElement(Array.from(root.querySelectorAll<HTMLElement>('.ios-theme-callout-layer')))
+    .duration(400)
+    .easing('ease')
+    .fromTo('opacity', 0.99, 0)
+    .fromTo('transform', 'scale(1)', 'scale(0)');
 
   const doc = baseEl.ownerDocument as any;
   const replaceElement = doc.querySelector('.ios27-replace-element') as HTMLElement | null;
@@ -59,18 +65,26 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
     .afterAddWrite(() => {
       baseEl.style.removeProperty('--width');
       baseEl.classList.remove('popover-bottom');
+      baseEl.classList.remove('ios-theme-callout');
+      root.querySelectorAll('.ios-theme-callout-layer').forEach((layer) => layer.remove());
 
       contentEl.style.removeProperty('top');
       contentEl.style.removeProperty('left');
       contentEl.style.removeProperty('bottom');
       contentEl.style.removeProperty('transform-origin');
+      if (contentEl.dataset['previousMaxWidth'] !== undefined) {
+        contentEl.style.maxWidth = contentEl.dataset['previousMaxWidth'];
+        delete contentEl.dataset['previousMaxWidth'];
+      }
 
       if (arrowEl) {
         arrowEl.style.removeProperty('top');
         arrowEl.style.removeProperty('left');
         arrowEl.style.removeProperty('display');
+        arrowEl.style.removeProperty('bottom');
+        arrowEl.style.removeProperty('transform');
       }
     })
     .duration(300)
-    .addAnimation([backdropAnimation, contentAnimation, targetAnimation]);
+    .addAnimation([backdropAnimation, contentAnimation, targetAnimation, surfaceAnimation]);
 };

package/src/popover/callout-surface.ts

@@ -0,0 +1,54 @@
+/** Draw one glass silhouette so the arrow cannot sample the body's own border/shadow. */
+export const createCalloutSurface = (
+  root: ShadowRoot | HTMLElement,
+  width: number,
+  height: number,
+  side: 'top' | 'right' | 'bottom' | 'left',
+  center: number,
+): HTMLElement[] => {
+  const inset = 32;
+  const x = inset;
+  const y = inset;
+  const right = x + width;
+  const bottom = y + height;
+  const radius = Math.max(0, Math.min(34, width / 2, height / 2, (side === 'left' || side === 'right' ? height : width) / 2 - 17));
+  const point = (u: number, v: number): string => {
+    switch (side) {
+      case 'top':
+        return `${x + center - 17 + u} ${y - 13 + v}`;
+      case 'right':
+        return `${right + 13 - v} ${y + center - 17 + u}`;
+      case 'bottom':
+        return `${x + center + 17 - u} ${bottom + 13 - v}`;
+      case 'left':
+        return `${x - 13 + v} ${y + center + 17 - u}`;
+    }
+  };
+  const arrow = `L ${point(0, 13)} C ${point(3, 13)} ${point(4.5, 12)} ${point(6.5, 10)} L ${point(14.5, 1.5)} C ${point(16, -0.5)} ${point(18, -0.5)} ${point(19.5, 1.5)} L ${point(27.5, 10)} C ${point(29.5, 12)} ${point(31, 13)} ${point(34, 13)}`;
+  const path = `M ${x + radius} ${y} ${side === 'top' ? arrow : ''}
+    L ${right - radius} ${y} A ${radius} ${radius} 0 0 1 ${right} ${y + radius} ${side === 'right' ? arrow : ''}
+    L ${right} ${bottom - radius} A ${radius} ${radius} 0 0 1 ${right - radius} ${bottom} ${side === 'bottom' ? arrow : ''}
+    L ${x + radius} ${bottom} A ${radius} ${radius} 0 0 1 ${x} ${bottom - radius} ${side === 'left' ? arrow : ''}
+    L ${x} ${y + radius} A ${radius} ${radius} 0 0 1 ${x + radius} ${y} Z`;
+  const svg = (body: string) =>
+    `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="${width + inset * 2}" height="${height + inset * 2}">${body}</svg>`)}")`;
+  const fill = svg(`<path d="${path}" fill="white"/>`);
+  const stroke = svg(`<path d="${path}" fill="none" stroke="white" stroke-width="0.5"/>`);
+  const shadow = svg(
+    `<defs><filter id="s" x="-50%" y="-100%" width="200%" height="300%"><feGaussianBlur stdDeviation="4"/><feOffset dy="2"/><feComposite in2="SourceGraphic" operator="out"/></filter></defs><path d="${path}" fill="white" filter="url(#s)"/>`,
+  );
+  const wrapper = root.querySelector('.popover-wrapper')!;
+  return [
+    ['callout-shadow', shadow],
+    ['callout-glass', fill],
+    ['callout-border', stroke],
+  ].map(([part, mask]) => {
+    const element = document.createElement('div');
+    element.setAttribute('part', part);
+    element.className = 'ios-theme-callout-layer';
+    element.setAttribute('aria-hidden', 'true');
+    element.style.cssText = `position:absolute;pointer-events:none;z-index:9;width:${width + inset * 2}px;height:${height + inset * 2}px;mask-image:${mask};-webkit-mask-image:${mask};mask-repeat:no-repeat;`;
+    wrapper.append(element);
+    return element;
+  });
+};

package/src/sheets-of-glass/index.ts

@@ -307,14 +307,14 @@ export const registerEffect = (
       stopTabPress();
       moveAnimation.destroy();
       moveAnimation = undefined;
+      const tabs = Array.from(targetElement.querySelectorAll<HTMLElement>(effectTagName)).filter((tab) => tab.offsetWidth > 0);
       const releasing = createTabBarReleaseAnimation(
         effectElement,
         currentTouchedElement,
         tapElapsed !== undefined && tapElapsed < 200
           ? {
               elapsed: tapElapsed,
-              distance:
-                Math.abs(currentTouchedElement.offsetLeft - selectedElementBeforeGesture!.offsetLeft) / currentTouchedElement.offsetWidth,
+              distance: Math.abs(tabs.indexOf(currentTouchedElement) - tabs.indexOf(selectedElementBeforeGesture!)),
             }
           : undefined,
       );

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

@@ -1,6 +1,7 @@
 @use '../utils/api';
 
 ion-action-sheet.ios:not(.ios-theme-disabled, .ios26-disabled) {
+  @include api.glass-overlay-variables;
   --backdrop-opacity: 0.2;
   --color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 
@@ -10,52 +11,69 @@ ion-action-sheet.ios:not(.ios-theme-disabled, .ios26-disabled) {
   }
 
   .action-sheet-container {
-    @include api.glass-background-overlay;
-    transition: transform 200ms ease;
-    &:has(.ion-activated) {
-      transform: scale(1.016);
-      @include api.glass-background-overlay-activated;
-    }
+    @include api.glass-overlay-surface;
     margin: 0 12px;
-    border-radius: 32px;
+    border-radius: 36px;
+    padding: 16px;
 
     .action-sheet-title,
     .action-sheet-has-sub-title {
       background: none;
     }
     .action-sheet-title {
-      padding-top: 8px;
+      padding: 6px 14px 20px;
+      text-align: start;
+      font-size: 1rem;
+      line-height: 1.21;
+      font-weight: 600;
+      color: var(--ion-text-color, #000);
     }
-    .action-sheet-has-sub-title {
+    .action-sheet-sub-title {
+      padding-top: 8px;
+      font-size: 0.94rem;
+      line-height: 1.19;
+      color: var(--ion-text-color-step-600, var(--ion-color-step-400, #999999));
     }
 
     .action-sheet-group {
       background: transparent;
+      margin: 0;
+      border-radius: 0;
 
       button {
         @include api.glass-background-overlay-button-variable;
         &::after {
           content: none;
         }
-        &:not(.action-sheet-destructive):not(.action-sheet-selected) {
+        &:not(.action-sheet-destructive):not(.action-sheet-selected):not(.action-sheet-preferred) {
           --button-color: var(--ion-text-color, #000);
           --button-color-hover: var(--ion-text-color, #000);
           --button-color-activated: var(--ion-text-color, #000);
         }
+        &.action-sheet-preferred {
+          @include api.glass-overlay-preferred-button(--button-background, --button-color);
+        }
         &.action-sheet-destructive {
-          --button-color: var(--ion-color-danger, #c5000f);
-          --button-color-hover: var(--ion-color-danger, #c5000f);
+          --button-color: var(--ios-theme-destructive-color, var(--ion-color-danger, #ea292d));
+        }
+        &.action-sheet-destructive,
+        &.action-sheet-preferred {
+          color: var(--button-color);
+          --button-color-hover: var(--button-color);
+          --button-color-activated: var(--button-color);
+          --button-color-focused: var(--button-color);
         }
-        font-weight: 550;
+        font-weight: 500;
         &.action-sheet-cancel {
-          margin-top: 12px;
-          font-weight: 550;
+          margin-top: 8px;
+          font-weight: 600;
         }
-        border-radius: 32px;
+        border-radius: 24px;
         padding: 0 14px;
-        min-height: 52px;
+        min-height: 48px;
         span.action-sheet-button-inner {
           font-size: 1rem;
+          line-height: 1.19;
           ion-icon {
             font-size: 1.2rem;
           }

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

@@ -1,35 +1,43 @@
 @use '../utils/api';
 
 ion-alert.ios:not(.ios-theme-disabled, .ios26-disabled) {
+  @include api.glass-overlay-variables;
   --min-width: 280px;
+  --max-width: 320px;
   --backdrop-opacity: 0.2;
 
-  // --max-width: clamp(270px, 16.875rem, 324px);
-  --max-width: 322px;
+  .alert-wrapper {
+    @include api.glass-overlay-surface;
+    border-radius: 36px;
+    // The dialog receives programmatic focus; focus feedback belongs to its controls.
+    outline: none;
 
-  transition: transform 200ms ease;
-  &:has(.ion-activated) {
-    transform: scale(1.016);
-  }
+    .alert-head {
+      padding: 22px 30px 7px;
+      text-align: start;
+    }
 
-  .alert-wrapper {
-    @include api.glass-background-overlay;
-    &:has(.ion-activated) {
-      @include api.glass-background-overlay-activated;
+    .alert-title {
+      margin: 0;
+      font-size: 1rem;
+      line-height: 1.21;
+      font-weight: 600;
     }
-    border-radius: 32px;
 
-    .alert-head,
+    .alert-sub-title,
     .alert-message {
-      text-align: left;
-      margin-left: 14px;
-      margin-right: 14px;
+      font-size: 0.94rem;
+      line-height: 1.19;
+      color: var(--ion-text-color-step-600, var(--ion-color-step-400, #999999));
     }
 
     .alert-message {
-      font-size: 0.98rem;
-      line-height: 1.2rem;
-      color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+      padding: 0 30px 20px;
+      text-align: start;
+
+      &:empty {
+        padding: 0 0 12px;
+      }
     }
 
     .alert-radio-group {
@@ -41,26 +49,38 @@ ion-alert.ios:not(.ios-theme-disabled, .ios26-disabled) {
     }
 
     .alert-button-group {
-      padding: 0 8px 12px;
-      gap: 8px 0;
+      padding: 0 16px 16px;
+      gap: 8px;
       .alert-button {
         @include api.glass-background-overlay-button;
         border: none;
-        border-radius: 32px;
-        margin: 0 6px;
-        min-width: calc(50% - 12px);
-        // height: max(44px, 2.75rem);
-        height: 48px;
+        border-radius: 24px;
+        margin: 0;
+        min-width: calc(50% - 4px);
+        min-height: 48px;
+        height: auto;
+        padding: 12px;
+        font-size: 1rem;
+        line-height: 1.19;
+        font-weight: 600;
+
+        .alert-button-inner {
+          min-height: 0;
+          height: auto;
+        }
+
+        &.alert-button-role-destructive {
+          color: var(--ios-theme-destructive-color, var(--ion-color-danger, #ea292d));
+        }
 
-        &:not(.alert-button-role-destructive) {
+        &.alert-button-role-preferred {
+          @include api.glass-overlay-preferred-button;
+        }
+
+        &:not(.alert-button-role-destructive):not(.alert-button-role-preferred) {
           color: var(--ion-text-color, #000);
         }
-        font-weight: 550;
       }
     }
-
-    button.action-sheet-cancel {
-      margin-top: 12px;
-    }
   }
 }

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

@@ -1,4 +1,5 @@
 @use '../utils/api';
+@use '../utils/glass';
 
 /**
  * Note: ion-back-button should not put inner ion-button.
@@ -13,7 +14,7 @@ $scaleup-large: 1.12;
 $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
 
 @mixin theme-buttons {
-  @include api.glass-background($shadow-opacity: 0.08);
+  @include api.glass-control-background;
   border-radius: 25px;
   overflow: hidden;
   &:not(:has(.ion-activated)):hover {
@@ -299,11 +300,7 @@ $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
     --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.72);
     --background-hover: transparent;
     --background-activated: transparent;
-    @if not $is-back-button {
-      --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.5px 1px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.08);
-    }
+    @include glass.light-shadow('--box-shadow');
 
     &:not(.button-has-icon-only):not(.back-button-has-icon-only) {
       &:not(.button-small):not(.button-large) {
@@ -312,7 +309,7 @@ $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
     }
 
     &::part(native) {
-      @include api.glass-background($include-background: false, $include-box-shadow: $is-back-button, $shadow-opacity: 0.08);
+      @include api.glass-control-background($include-background: false, $shadow: var(--box-shadow));
     }
 
     &:not(.button-disabled) {

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

@@ -1,7 +1,68 @@
-ion-card.ios:not(.ios-theme-disabled, .ios26-disabled) {
-  border-radius: 24px;
+@use '../utils/group-heading';
 
-  ion-list ion-item {
+ion-card.ios:not(.ios-theme-disabled, .ios26-disabled) {
+  ion-list:not(.ios-theme-disabled, .ios26-disabled) ion-item:not(.ios-theme-disabled, .ios26-disabled) {
     --padding-start: 0;
   }
+
+  // A standalone grouped surface, aligned with an inset list.
+  &:not(.ion-color) {
+    --background: var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));
+    --color: var(--ion-card-color, var(--ion-text-color, #000));
+  }
+  border-radius: 28px;
+  margin: 16px;
+  box-shadow: none;
+  font-size: 1rem;
+  line-height: 1.29;
+
+  > ion-card-header:not(.ios-theme-disabled, .ios26-disabled) {
+    flex-direction: column;
+    gap: 4px;
+    padding: 16px 20px;
+
+    &:has(+ ion-card-content:not(.ios-theme-disabled, .ios26-disabled)) {
+      padding-bottom: 4px;
+    }
+
+    > ion-card-title:not(.ios-theme-disabled, .ios26-disabled) {
+      @include group-heading.typography;
+    }
+
+    > ion-card-subtitle:not(.ios-theme-disabled, .ios26-disabled) {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 400;
+      line-height: 1.29;
+      letter-spacing: normal;
+      text-transform: none;
+    }
+  }
+
+  > ion-card-content:not(.ios-theme-disabled, .ios26-disabled) {
+    padding: 16px 20px;
+    font-size: 1rem;
+    line-height: 1.29;
+
+    p {
+      font-size: inherit;
+    }
+
+    > ion-list:not(.ios-theme-disabled, .ios26-disabled) {
+      background: transparent;
+
+      ion-item:not(.ios-theme-disabled, .ios26-disabled):not(.ion-color) {
+        --background: transparent;
+      }
+    }
+  }
+
+  > ion-card-header:not(.ios-theme-disabled, .ios26-disabled) + ion-card-content:not(.ios-theme-disabled, .ios26-disabled) {
+    padding-top: 0;
+  }
+  &:not(.ion-color)
+    > ion-card-header:not(.ios-theme-disabled, .ios26-disabled)
+    > ion-card-subtitle:not(.ios-theme-disabled, .ios26-disabled):not(.ion-color) {
+    --color: rgba(var(--ion-color-medium-rgb, 146, 148, 156), 0.9);
+  }
 }

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

@@ -1,4 +1,5 @@
 @use '../utils/api';
+@use '../utils/glass';
 
 $scaleup-small-icon-only: api.$button-scaleup-small-icon-only;
 $scaleup-default-icon-only: api.$button-scaleup-default-icon-only;
@@ -12,9 +13,7 @@ ion-fab.ios:not(.ios-theme-disabled, .ios26-disabled) {
 
   ion-fab-button {
     --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.72);
-    --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.5px 1px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.08);
+    @include glass.light-shadow('--box-shadow');
     --transition:
       var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) transform
         cubic-bezier(0.25, 1.11, 0.78, 1.59),
@@ -62,8 +61,7 @@ ion-fab.ios:not(.ios-theme-disabled, .ios26-disabled) {
     }
 
     &::part(native) {
-      background-clip: border-box;
-      @include api.glass-background($include-background: false, $include-box-shadow: false);
+      @include api.glass-control-background($include-background: false, $shadow: var(--box-shadow));
     }
   }