@awc-ui/core 1.0.0-beta.10 → 1.0.0-beta.12

package/dist/sources/{4b1bf2d27bc87d12e416a1ae2bdc0f361033c40d13b252fe4c9f51a197ca95e1 → b3d606320b653bcbde553e6d61569edd0fc6cbdb1cb179f4d36ad796e76b133c}/md-navigation-rail-tab.tsx

@@ -11,6 +11,7 @@ import {
   Method,
 } from '@stencil/core';
 import { triggerRipple } from '../../utils/ripple';
+import { getRailTransitionTiming, parseRailMotionDuration, registerRailTabTransition, synchronizeRailAnimation } from '../../utils/navigation-rail-motion';
 import { sanitizeHref, SAFE_LINK_REL } from '../../utils/url';
 
 /**
@@ -92,9 +93,52 @@ export class MdNavigationRailTab {
    */
   @Event({ bubbles: true, composed: true }) mdSubmenuToggle: EventEmitter<{ open: boolean }>;
 
-  /** Icon-wrapper centre (host-relative) captured before the layout switch. */
+  /** Rendered geometry captured before the rail or destination changes layout. */
   private iconFirst: { cx: number; cy: number } | null = null;
+  private indicatorFirst: { left: number; top: number; width: number; height: number } | null = null;
+  private labelFirst: {
+    rect: DOMRect;
+    opacity: number;
+    visible: boolean;
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+    letterSpacing: string;
+    paddingTop: string;
+    paddingRight: string;
+    paddingBottom: string;
+    paddingLeft: string;
+    textAlign: string;
+    boxSizing: string;
+  } | null = null;
+  private labelOverlay?: {
+    element: HTMLElement;
+    styles: Map<string, { value: string; priority: string }>;
+  };
   private pendingTransition = false;
+  private transitionPrepared = false;
+  private iconAnimation?: Animation;
+  private indicatorAnimation?: Animation;
+  private labelAnimation?: Animation;
+  private unregisterTransition?: () => void;
+
+  connectedCallback() {
+    this.unregisterTransition = registerRailTabTransition(this.el, () => {
+      this.captureTransition();
+      this.transitionPrepared = true;
+    });
+  }
+
+  disconnectedCallback() {
+    this.unregisterTransition?.();
+    this.cancelAnimations();
+    this.iconFirst = null;
+    this.indicatorFirst = null;
+    this.labelFirst = null;
+    this.pendingTransition = false;
+    this.transitionPrepared = false;
+  }
 
   /** Mirrors the slotted submenu's open state for `aria-expanded`. */
   @State() private submenuOpen: boolean = false;
@@ -131,20 +175,95 @@ export class MdNavigationRailTab {
     }
   }
 
-  /**
-   * The stacked (collapsed) and inline (expanded) layouts place the icon at
-   * slightly different spots. To avoid an abrupt snap we FLIP it: capture the
-   * old centre before the layout flips, then (in componentDidRender) glide it
-   * to the new centre with a smooth DECELERATE curve — deliberately not the
-   * rail's springy/overshoot easing, which made the small move look like a
-   * floaty wobble. The label can't slide cleanly (its path cuts through the
-   * icon), so it cross-fades into its new position instead.
-   */
+  /** The rail prepares before its own padding changes. Direct prop changes
+   * still capture here, so a destination also behaves correctly in isolation. */
   @Watch('expanded')
   onExpandedChange() {
-    if (this.prefersReducedMotion()) return;
+    if (!this.transitionPrepared) this.captureTransition();
+    this.transitionPrepared = false;
+  }
+
+  private captureTransition() {
+    const sr = this.el.shadowRoot;
+    const indicator = sr?.querySelector<HTMLElement>('[part="indicator"]');
+    const label = sr?.querySelector<HTMLElement>('[part="label"]');
+    // Read the visible (possibly mid-animation) boxes BEFORE cancelling. A
+    // reversal then starts at the pixels on screen, not the previous target.
     this.iconFirst = this.iconCentre();
-    this.pendingTransition = true;
+    this.indicatorFirst = indicator?.getBoundingClientRect() ?? null;
+    const labelCss = label ? getComputedStyle(label) : null;
+    this.labelFirst = label && labelCss ? {
+      rect: label.getBoundingClientRect(),
+      opacity: Number.parseFloat(labelCss.opacity) || 0,
+      visible: labelCss.display !== 'none' && labelCss.visibility !== 'hidden',
+      fontFamily: labelCss.fontFamily,
+      fontSize: labelCss.fontSize,
+      fontWeight: labelCss.fontWeight,
+      lineHeight: labelCss.lineHeight,
+      letterSpacing: labelCss.letterSpacing,
+      paddingTop: labelCss.paddingTop,
+      paddingRight: labelCss.paddingRight,
+      paddingBottom: labelCss.paddingBottom,
+      paddingLeft: labelCss.paddingLeft,
+      textAlign: labelCss.textAlign,
+      boxSizing: labelCss.boxSizing,
+    } : null;
+    this.cancelAnimations();
+    this.pendingTransition = !this.prefersReducedMotion();
+    if (!this.pendingTransition) {
+      this.iconFirst = null;
+      this.indicatorFirst = null;
+      this.labelFirst = null;
+    }
+  }
+
+  private cancelAnimations() {
+    this.iconAnimation?.cancel();
+    this.indicatorAnimation?.cancel();
+    this.labelAnimation?.cancel();
+    this.iconAnimation = undefined;
+    this.indicatorAnimation = undefined;
+    this.labelAnimation = undefined;
+    this.restoreLabelOverlay();
+  }
+
+  private restoreLabelOverlay() {
+    if (!this.labelOverlay) return;
+    const { element, styles } = this.labelOverlay;
+    for (const [name, previous] of styles) {
+      if (previous.value) element.style.setProperty(name, previous.value, previous.priority);
+      else element.style.removeProperty(name);
+    }
+    this.labelOverlay = undefined;
+  }
+
+  private retainOutgoingLabel(label: HTMLElement, first: NonNullable<MdNavigationRailTab['labelFirst']>) {
+    const host = this.el.getBoundingClientRect();
+    const styles = new Map<string, { value: string; priority: string }>();
+    const overlay: Record<string, string> = {
+      display: 'inline-block', position: 'absolute',
+      left: `${first.rect.left - host.left - this.el.clientLeft + this.el.scrollLeft}px`,
+      top: `${first.rect.top - host.top - this.el.clientTop + this.el.scrollTop}px`,
+      width: `${first.rect.width}px`, height: `${first.rect.height}px`,
+      'max-inline-size': 'none', 'max-block-size': 'none',
+      'margin-top': '0', 'margin-right': '0', 'margin-bottom': '0', 'margin-left': '0',
+      transform: 'none', opacity: String(first.opacity), visibility: 'visible',
+      'pointer-events': 'none', 'transition-property': 'none',
+      // Longhands preserve authored font/margin/padding/transition values when
+      // cleanup restores each property; clearing a shorthand would erase them.
+      'font-family': first.fontFamily, 'font-size': first.fontSize,
+      'font-weight': first.fontWeight, 'line-height': first.lineHeight,
+      'letter-spacing': first.letterSpacing,
+      'padding-top': first.paddingTop, 'padding-right': first.paddingRight,
+      'padding-bottom': first.paddingBottom, 'padding-left': first.paddingLeft,
+      'text-align': first.textAlign, 'box-sizing': first.boxSizing,
+    };
+    for (const [name, value] of Object.entries(overlay)) {
+      if (!value) continue;
+      styles.set(name, { value: label.style.getPropertyValue(name), priority: label.style.getPropertyPriority(name) });
+      label.style.setProperty(name, value);
+    }
+    this.labelOverlay = { element: label, styles };
   }
 
   componentDidRender() {
@@ -180,54 +299,98 @@ export class MdNavigationRailTab {
     const raw = getComputedStyle(this.el)
       .getPropertyValue('--md-sys-motion-duration-short4')
       .trim();
-    if (raw.endsWith('ms')) return parseFloat(raw) || 200;
-    if (raw.endsWith('s')) return (parseFloat(raw) || 0.2) * 1000;
-    return 200;
+    return parseRailMotionDuration(raw);
   }
 
   private playTransition() {
     const sr = this.el.shadowRoot;
     if (!sr) return;
-    const duration = this.motionDuration();
+    const fallbackEasing = getComputedStyle(this.el)
+      .getPropertyValue('--md-sys-motion-easing-standard').trim()
+      || 'cubic-bezier(0.2, 0, 0, 1)';
+    const { duration, easing, source } = getRailTransitionTiming(this.el, {
+      duration: this.motionDuration(), easing: fallbackEasing,
+    });
+    if (duration === 0) {
+      this.iconFirst = null;
+      this.indicatorFirst = null;
+      this.labelFirst = null;
+      return;
+    }
+    const timing: KeyframeAnimationOptions = { duration, easing, fill: 'none' };
 
-    // Icon: glide from old centre to new with a smooth decelerate (no overshoot).
-    const icon = sr.querySelector(
-      '.md-navigation-rail-tab__icon-wrapper',
-    ) as HTMLElement | null;
+    const icon = sr.querySelector<HTMLElement>('[part="icon-wrapper"]');
     if (icon && this.iconFirst) {
       const r = icon.getBoundingClientRect();
       const dx = this.iconFirst.cx - (r.left + r.width / 2);
       const dy = this.iconFirst.cy - (r.top + r.height / 2);
       if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
-        icon.animate(
-          [
-            { transform: `translate(${dx}px, ${dy}px)` },
-            { transform: 'translate(0, 0)' },
-          ],
-          {
-            duration,
-            // Standard easing — quick in, snappy settle, no bounce — matching
-            // the rail width morph and the button shape-morph feel.
-            easing:
-              getComputedStyle(this.el)
-                .getPropertyValue('--md-sys-motion-easing-standard')
-                .trim() || 'cubic-bezier(0.2, 0, 0, 1)',
-            fill: 'none',
-          },
-        );
+        this.iconAnimation = icon.animate([
+          { transform: `translate(${dx}px, ${dy}px)` },
+          { transform: 'translate(0, 0)' },
+        ], timing);
+        const animation = this.iconAnimation;
+        synchronizeRailAnimation(animation, source, () => this.iconAnimation === animation);
       }
     }
     this.iconFirst = null;
 
-    // Label: cross-fade into its new layout position rather than sliding.
-    const label = sr.querySelector(
-      '.md-navigation-rail-tab__label',
-    ) as HTMLElement | null;
-    if (label) {
-      label.animate(
-        [{ opacity: 0 }, { opacity: 0, offset: 0.15 }, { opacity: 1 }],
-        { duration, easing: 'ease-out', fill: 'none' },
-      );
+    // CSS cannot interpolate a content-sized expanded pill to a fixed collapsed
+    // pill. Morph only its surface; scaling the whole destination distorts text.
+    const indicator = sr.querySelector<HTMLElement>('[part="indicator"]');
+    if (indicator && this.indicatorFirst) {
+      const first = this.indicatorFirst;
+      const last = indicator.getBoundingClientRect();
+      if (first.width > 0 && first.height > 0 && last.width > 0 && last.height > 0) {
+        this.indicatorAnimation = indicator.animate([
+          {
+            transform: `translate(${first.left - last.left}px, ${first.top - last.top}px) scale(${first.width / last.width}, ${first.height / last.height})`,
+            transformOrigin: 'top left',
+          },
+          { transform: 'translate(0, 0) scale(1, 1)', transformOrigin: 'top left' },
+        ], timing);
+        const animation = this.indicatorAnimation;
+        synchronizeRailAnimation(animation, source, () => this.indicatorAnimation === animation);
+      }
+    }
+    this.indicatorFirst = null;
+
+    const label = sr.querySelector<HTMLElement>('[part="label"]');
+    const first = this.labelFirst;
+    this.labelFirst = null;
+    if (label && first) {
+      const css = getComputedStyle(label);
+      const targetOpacity = Number.parseFloat(css.opacity) || 0;
+      const visible = css.display !== 'none' && css.visibility !== 'hidden' && targetOpacity > 0;
+      if (!visible && first.visible && first.opacity > 0 && first.rect.width > 0 && first.rect.height > 0) {
+        // Preserve only the outgoing label's painted box. It no longer takes
+        // layout space, so the collapsed icon and pill can reach their targets.
+        this.retainOutgoingLabel(label, first);
+        this.labelAnimation = label.animate([
+          { opacity: first.opacity }, { opacity: 0 },
+        ], { ...timing, fill: 'forwards' });
+        const animation = this.labelAnimation;
+        synchronizeRailAnimation(animation, source, () => this.labelAnimation === animation);
+        void animation.finished.then(() => {
+          if (this.labelAnimation !== animation) return;
+          this.restoreLabelOverlay();
+          this.labelAnimation = undefined;
+          animation.cancel();
+        }, () => undefined);
+      } else if (visible) {
+        const last = label.getBoundingClientRect();
+        const dx = first.visible ? first.rect.left - last.left : 0;
+        const dy = first.visible ? first.rect.top - last.top : 0;
+        const opacity = first.visible ? first.opacity : 0;
+        if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5 || Math.abs(opacity - targetOpacity) > 0.01) {
+          this.labelAnimation = label.animate([
+            { transform: `translate(${dx}px, ${dy}px)`, opacity },
+            { transform: 'translate(0, 0)', opacity: targetOpacity },
+          ], timing);
+          const animation = this.labelAnimation;
+          synchronizeRailAnimation(animation, source, () => this.labelAnimation === animation);
+        }
+      }
     }
   }
 

package/dist/sources/f41e60167e8f17a6297648047951ef2d3dd96a3652adecfbe959df57bdef48dd/navigation-rail-motion.ts

@@ -0,0 +1,97 @@
+/** Private bridge for capturing tab geometry before its rail changes layout. */
+const transitionPreparations = new WeakMap<HTMLElement, () => void>();
+
+export function registerRailTabTransition(
+  element: HTMLElement,
+  callback: () => void,
+): () => void {
+  transitionPreparations.set(element, callback);
+  return () => {
+    // A disconnected instance must not unregister a newer connection's callback.
+    if (transitionPreparations.get(element) === callback) {
+      transitionPreparations.delete(element);
+    }
+  };
+}
+
+export function prepareRailTabTransition(element: HTMLElement): void {
+  transitionPreparations.get(element)?.();
+}
+
+export interface RailTransitionTiming {
+  duration: number;
+  easing: string;
+  /** The actual width transition, including its shortened reversal clock. */
+  source?: Animation;
+}
+
+export function parseRailMotionDuration(raw: string, fallback = 200): number {
+  const value = raw.trim();
+  if (!/^(?:\d*\.)?\d+(?:ms|s)?$/.test(value)) return fallback;
+  const duration = Number.parseFloat(value) * (value.endsWith('s') && !value.endsWith('ms') ? 1000 : 1);
+  return Number.isFinite(duration) && duration >= 0 ? duration : fallback;
+}
+
+/**
+ * CSS shortens a transition when it reverses. Reading the authored token alone
+ * would restart a destination's animation for the full duration while its rail
+ * had already finished closing. Use the browser's actual width-animation clock.
+ */
+export function getRailTransitionTiming(
+  destination: HTMLElement,
+  fallback: RailTransitionTiming,
+): RailTransitionTiming {
+  const rail = destination.closest('md-navigation-rail') as HTMLElement | null;
+  if (!rail) return fallback;
+  const surface = rail.hasAttribute('modal')
+    ? rail.shadowRoot?.querySelector<HTMLElement>('[part="container"]') ?? rail
+    : rail;
+  // Flush the target layout before reading its generated CSS transitions.
+  surface.getBoundingClientRect();
+  const animations = typeof surface.getAnimations === 'function' ? surface.getAnimations() : [];
+  const source = animations.find((animation) => {
+    const property = (animation as Animation & { transitionProperty?: string }).transitionProperty;
+    return (property === 'width' || property === 'inline-size') && animation.playState !== 'finished';
+  });
+  if (source?.effect) {
+    const effect = source.effect as KeyframeEffect;
+    const timing = effect.getTiming();
+    const duration = effect.getComputedTiming().duration;
+    if (typeof duration === 'number' && Number.isFinite(duration) && duration >= 0) {
+      // CSS transitions may put their curve on the first keyframe instead of
+      // the effect; preserve that curve instead of silently substituting linear.
+      const keyframeEasing = effect.getKeyframes?.()[0]?.easing;
+      return {
+        duration,
+        easing: keyframeEasing && keyframeEasing !== 'linear'
+          ? keyframeEasing : timing.easing || fallback.easing,
+        source,
+      };
+    }
+  }
+  // A zero-duration transition does not appear in getAnimations().
+  const css = getComputedStyle(surface);
+  const properties = css.transitionProperty?.split(',').map((value) => value.trim()) ?? [];
+  const index = properties.findIndex((value) => ['all', 'width', 'inline-size'].includes(value));
+  const durations = css.transitionDuration?.split(',') ?? [];
+  if (properties.includes('none') || (index >= 0 && durations.length && parseRailMotionDuration(durations[index % durations.length]) === 0)) {
+    return { ...fallback, duration: 0 };
+  }
+  return fallback;
+}
+
+/** Align with a width transition that may still be waiting for its first frame. */
+export function synchronizeRailAnimation(
+  animation: Animation,
+  source: Animation | undefined,
+  isCurrent: () => boolean,
+): void {
+  if (!source) return;
+  const align = () => {
+    if (isCurrent() && typeof source.startTime === 'number') animation.startTime = source.startTime;
+  };
+  align();
+  if (source.startTime === null && source.ready) {
+    void source.ready.then(align, () => undefined);
+  }
+}

package/dist/types/components/md-navigation-rail/md-navigation-rail.d.ts

@@ -107,11 +107,9 @@ export declare class MdNavigationRail {
      *  context so the fixed-position menu is not trapped inside it. */
     private submenuOpen;
     /**
-     * Drives the *destination layout* (stacked vs. inline) independently of the
-     * rail's own width. On expand it flips with the width so labels reveal as the
-     * rail grows; on collapse it lingers in the inline layout until the width
-     * animation has finished, then drops to the stacked resting layout — keeping
-     * the label reveal/conceal in sync with the width instead of snapping.
+     * Destination target layout, synchronized with the variant before rendering.
+     * Tabs capture their current geometry before this changes, then animate to the
+     * new layout while the rail changes width.
      */
     private tabsExpanded;
     /** Programmatically expand the rail (shows labels inline with icons). */

package/dist/types/components/md-navigation-rail-tab/md-navigation-rail-tab.d.ts

@@ -61,9 +61,19 @@ export declare class MdNavigationRailTab {
     mdSubmenuToggle: EventEmitter<{
         open: boolean;
     }>;
-    /** Icon-wrapper centre (host-relative) captured before the layout switch. */
+    /** Rendered geometry captured before the rail or destination changes layout. */
     private iconFirst;
+    private indicatorFirst;
+    private labelFirst;
+    private labelOverlay?;
     private pendingTransition;
+    private transitionPrepared;
+    private iconAnimation?;
+    private indicatorAnimation?;
+    private labelAnimation?;
+    private unregisterTransition?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /** Mirrors the slotted submenu's open state for `aria-expanded`. */
     private submenuOpen;
     /** True when a dropdown is slotted, so the label can show a disclosure caret. */
@@ -72,16 +82,13 @@ export declare class MdNavigationRailTab {
      *  destination itself reads as the active one. */
     private submenuHasSelection;
     componentDidLoad(): void;
-    /**
-     * The stacked (collapsed) and inline (expanded) layouts place the icon at
-     * slightly different spots. To avoid an abrupt snap we FLIP it: capture the
-     * old centre before the layout flips, then (in componentDidRender) glide it
-     * to the new centre with a smooth DECELERATE curve — deliberately not the
-     * rail's springy/overshoot easing, which made the small move look like a
-     * floaty wobble. The label can't slide cleanly (its path cuts through the
-     * icon), so it cross-fades into its new position instead.
-     */
+    /** The rail prepares before its own padding changes. Direct prop changes
+     * still capture here, so a destination also behaves correctly in isolation. */
     onExpandedChange(): void;
+    private captureTransition;
+    private cancelAnimations;
+    private restoreLabelOverlay;
+    private retainOutgoingLabel;
     componentDidRender(): void;
     private prefersReducedMotion;
     private iconCentre;

package/dist/types/utils/navigation-rail-motion.d.ts

@@ -0,0 +1,17 @@
+export declare function registerRailTabTransition(element: HTMLElement, callback: () => void): () => void;
+export declare function prepareRailTabTransition(element: HTMLElement): void;
+export interface RailTransitionTiming {
+    duration: number;
+    easing: string;
+    /** The actual width transition, including its shortened reversal clock. */
+    source?: Animation;
+}
+export declare function parseRailMotionDuration(raw: string, fallback?: number): number;
+/**
+ * CSS shortens a transition when it reverses. Reading the authored token alone
+ * would restart a destination's animation for the full duration while its rail
+ * had already finished closing. Use the browser's actual width-animation clock.
+ */
+export declare function getRailTransitionTiming(destination: HTMLElement, fallback: RailTransitionTiming): RailTransitionTiming;
+/** Align with a width transition that may still be waiting for its first frame. */
+export declare function synchronizeRailAnimation(animation: Animation, source: Animation | undefined, isCurrent: () => boolean): void;