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

package/dist/md3/p-c38e1473.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as a,h as t,H as n,g as o}from"./p-DUZ-GXnb.js";import{t as e}from"./p-DYBUr7K_.js";import{r as s,a as r,g as l,s as d}from"./p-BTQOOQYQ.js";import{s as c,S as m}from"./p-BdEoSBtL.js";const h=()=>`:host{--_icon-color:var(     --md-navigation-rail-tab-icon-color,     var(--md-sys-color-on-surface-variant, #49454F)   );--_active-icon-color:var(     --md-navigation-rail-tab-active-icon-color,     var(--md-sys-color-on-secondary-container, #4A4458)   );--_label-color:var(     --md-navigation-rail-tab-label-color,     var(--md-sys-color-on-surface-variant, #49454F)   );--_active-label-color:var(     --md-navigation-rail-tab-active-label-color,     var(--md-sys-color-secondary, #625B71)   );--_indicator-color:var(     --md-navigation-rail-tab-indicator-color,     var(--md-sys-color-secondary-container, #E8DEF8)   );--_indicator-shape:var(     --md-navigation-rail-tab-indicator-shape,     var(--md-sys-shape-corner-full, 9999px)   );--_indicator-width:var(--md-navigation-rail-tab-indicator-width, max(40px, calc(56px + var(--md-sys-density-scale, 0) * 4px)));--_indicator-height:var(--md-navigation-rail-tab-indicator-height, max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));--_icon-size:var(--md-navigation-rail-tab-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));--_min-height:var(--md-navigation-rail-tab-min-height, 56px);--_badge-color:var(     --md-navigation-rail-tab-badge-color,     var(--md-sys-color-error, #B3261E)   );--_badge-content-color:var(     --md-navigation-rail-tab-badge-content-color,     var(--md-sys-color-on-error, #FFFFFF)   );--_focus-ring-color:var(     --md-navigation-rail-tab-focus-ring-color,     var(--md-sys-color-secondary, #625B71)   );--_state-layer-color:var(     --md-navigation-rail-tab-state-layer-color,     var(--md-sys-color-on-secondary-container, #4A4458)   );--_motion-duration:var(--md-sys-motion-spring-effects-fast-duration, 150ms);--_motion-easing:var(     --md-sys-motion-spring-effects-fast-easing,     cubic-bezier(0.31, 0.94, 0.34, 1)   );--_hover-opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08);--_focus-opacity:var(--md-navigation-rail-tab-focus-state-layer-opacity, 0.10);--_press-opacity:var(--md-navigation-rail-tab-press-state-layer-opacity, 0.10);--_disabled-opacity:var(--md-sys-state-disabled-content-opacity, 0.38);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:max(2px, calc(4px + var(--md-sys-density-scale, 0) * 1px));inline-size:100%;min-block-size:max(48px, calc(var(--_min-height) + var(--md-sys-density-scale, 0) * 4px));padding-block:max(0px, calc(2px + var(--md-sys-density-scale, 0) * 0.5px));padding-inline:0;box-sizing:border-box;cursor:pointer;user-select:none;position:relative;outline:none;-webkit-tap-highlight-color:transparent;color:var(--_icon-color);transition:color var(--_motion-duration) var(--_motion-easing)}:host(.md-navigation-rail-tab--active){color:var(--_active-icon-color)}:host(.md-navigation-rail-tab--disabled){cursor:default;pointer-events:none;color:color-mix(     in srgb,     var(--md-sys-color-on-surface, #1C1B1F) calc(var(--_disabled-opacity) * 100%),     transparent   )}:host(:focus-visible){outline:none}:host(:focus-visible) .md-navigation-rail-tab__indicator{outline:3px solid var(--_focus-ring-color);outline-offset:2px}:host(.md-navigation-rail-tab--expanded:focus-visible) .md-navigation-rail-tab__indicator{outline-offset:-3px}md-ripple{border-radius:inherit}.md-navigation-rail-tab__indicator{position:absolute;inset-block-start:max(2px, calc(2px + var(--md-sys-density-scale, 0) * -0.5px));inset-inline:0;margin-inline:auto;inline-size:var(--_indicator-width);block-size:var(--_indicator-height);border-radius:var(--_indicator-shape);background-color:transparent;pointer-events:none;overflow:hidden;transition:background-color var(--_motion-duration) var(--_motion-easing);z-index:0}:host(.md-navigation-rail-tab--active) .md-navigation-rail-tab__indicator{background-color:var(--_indicator-color)}:host(.md-navigation-rail-tab--labels-none:not(.md-navigation-rail-tab--expanded)) .md-navigation-rail-tab__indicator,:host(.md-navigation-rail-tab--labels-selected:not(.md-navigation-rail-tab--active):not(.md-navigation-rail-tab--expanded)) .md-navigation-rail-tab__indicator{inset-block:0;margin-block:auto}.md-navigation-rail-tab__state-layer{position:absolute;inset:0;background-color:var(--_state-layer-color);opacity:0;pointer-events:none;transition:opacity var(--_motion-duration) var(--_motion-easing);border-radius:inherit}:host(:hover:not(.md-navigation-rail-tab--disabled)) .md-navigation-rail-tab__state-layer{opacity:var(--_hover-opacity)}:host(:focus-visible:not(.md-navigation-rail-tab--disabled)) .md-navigation-rail-tab__state-layer{opacity:var(--_focus-opacity)}:host(:active:not(.md-navigation-rail-tab--disabled)) .md-navigation-rail-tab__state-layer{opacity:var(--_press-opacity)}.md-navigation-rail-tab__icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;inline-size:var(--_indicator-width);block-size:var(--_indicator-height);z-index:1;pointer-events:none}.md-navigation-rail-tab__icon-box{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_icon-size);block-size:var(--_icon-size)}.md-navigation-rail-tab__icon{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size);line-height:1;font-weight:normal;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;overflow-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;display:inline-flex;align-items:center;justify-content:center;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;transition:font-variation-settings var(--_motion-duration) var(--_motion-easing);color:inherit}:host(.md-navigation-rail-tab--active) .md-navigation-rail-tab__icon{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24}::slotted([slot='icon']){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_icon-size);block-size:var(--_icon-size);font-size:var(--_icon-size);color:currentColor;fill:currentColor;pointer-events:none}.md-navigation-rail-tab__label{position:relative;z-index:1;font-family:var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif);font-size:max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-label-medium-font-weight, 500);line-height:max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));letter-spacing:var(--md-sys-typescale-label-medium-letter-spacing, 0.5px);text-align:center;color:var(--_label-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%;transition:color var(--_motion-duration) var(--_motion-easing),     font-weight var(--_motion-duration) var(--_motion-easing),     opacity var(--_motion-duration) var(--_motion-easing);padding-inline:var(--md-sys-spacing-inset-xs, 4px);box-sizing:border-box}:host(.md-navigation-rail-tab--active) .md-navigation-rail-tab__label{color:var(--_active-label-color);font-weight:var(--md-sys-typescale-label-medium-prominent-font-weight, 700)}:host(.md-navigation-rail-tab--labels-none) .md-navigation-rail-tab__label{display:none}:host(.md-navigation-rail-tab--labels-selected:not(.md-navigation-rail-tab--expanded)) .md-navigation-rail-tab__label{max-block-size:1.25rem;transition:color var(--_motion-duration) var(--_motion-easing),     font-weight var(--_motion-duration) var(--_motion-easing),     opacity var(--_motion-duration) var(--_motion-easing),     max-block-size var(--_motion-duration) var(--_motion-easing),     margin-block-start var(--_motion-duration) var(--_motion-easing)}:host(.md-navigation-rail-tab--labels-selected:not(.md-navigation-rail-tab--active):not(.md-navigation-rail-tab--expanded)) .md-navigation-rail-tab__label{opacity:0;max-block-size:0;margin-block-start:-4px}:host(.md-navigation-rail-tab--labels-selected.md-navigation-rail-tab--expanded:not(.md-navigation-rail-tab--active)) .md-navigation-rail-tab__label{display:none}:host(.md-navigation-rail-tab--expanded){flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--md-sys-spacing-gap-sm, 8px);padding-inline:var(--md-sys-spacing-inset-lg, 16px);padding-inline-start:calc(var(--_rail-icon-axis, calc(var(--md-sys-spacing-inset-lg, 16px) + var(--_icon-size) / 2)) - var(--_icon-size) / 2);padding-block:0;inline-size:fit-content;min-block-size:max(48px, calc(56px + var(--md-sys-density-scale, 0) * 4px));border-radius:var(--_indicator-shape)}:host(.md-navigation-rail-tab--expanded) .md-navigation-rail-tab__indicator{position:absolute;inset:0;transform:none;inline-size:auto;block-size:auto;border-radius:var(--_indicator-shape)}:host(.md-navigation-rail-tab--expanded) .md-navigation-rail-tab__icon-wrapper{inline-size:var(--_icon-size);block-size:var(--_icon-size);flex:0 0 auto}:host(.md-navigation-rail-tab--expanded) .md-navigation-rail-tab__label{text-align:start;flex:1 1 auto;min-inline-size:0;display:inline-block;font-family:var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-large-font-size, 14px);font-weight:var(--md-sys-typescale-label-large-font-weight, 500);line-height:var(--md-sys-typescale-label-large-line-height, 20px);letter-spacing:var(--md-sys-typescale-label-large-letter-spacing, 0.1px)}:host(.md-navigation-rail-tab--expanded.md-navigation-rail-tab--active) .md-navigation-rail-tab__label{font-weight:var(--md-sys-typescale-label-large-prominent-font-weight, 700)}:host(.md-navigation-rail-tab--expanded.md-navigation-rail-tab--labels-none) .md-navigation-rail-tab__label{display:none}.md-navigation-rail-tab__badge{position:absolute;background-color:var(--_badge-color);color:var(--_badge-content-color);border-radius:var(--md-sys-shape-corner-full, 9999px);line-height:1;box-sizing:border-box;pointer-events:none;z-index:2}.md-navigation-rail-tab__badge--dot{inline-size:6px;block-size:6px;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%)}.md-navigation-rail-tab__badge--large{min-inline-size:16px;block-size:16px;padding-inline:4px;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%);font-family:var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);font-size:11px;font-weight:500;display:flex;align-items:center;justify-content:center}.md-navigation-rail-tab__anchor{display:contents;color:inherit;text-decoration:none;border-radius:inherit}.md-navigation-rail-tab__anchor::after{content:'';position:absolute;inset:0;z-index:0}@media (prefers-reduced-motion: reduce){:host,.md-navigation-rail-tab__indicator,.md-navigation-rail-tab__state-layer,.md-navigation-rail-tab__icon,.md-navigation-rail-tab__label{transition:none}}@media (forced-colors: active){:host(.md-navigation-rail-tab--active) .md-navigation-rail-tab__indicator{background-color:Highlight;forced-color-adjust:none}:host(.md-navigation-rail-tab--active){color:HighlightText}:host(:focus-visible) .md-navigation-rail-tab__indicator{outline:3px solid CanvasText}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}:host([data-orientation='horizontal']){block-size:100%}:host([data-orientation='horizontal']) .md-navigation-rail-tab__indicator,:host([data-orientation='horizontal']) .md-navigation-rail-tab__state-layer{display:none}:host([data-orientation='horizontal']) .md-navigation-rail-tab__icon-wrapper{border-radius:var(--_indicator-shape);background-color:transparent;transition:background-color var(--_motion-duration) var(--_motion-easing)}:host([data-orientation='horizontal'].md-navigation-rail-tab--active) .md-navigation-rail-tab__icon-wrapper{background-color:var(--_indicator-color)}:host([data-orientation='horizontal']) .md-navigation-rail-tab__icon-wrapper::after{content:'';position:absolute;inset:0;border-radius:inherit;background-color:var(--_state-layer-color);opacity:0;pointer-events:none;transition:opacity var(--_motion-duration) var(--_motion-easing)}:host([data-orientation='horizontal']:hover:not(.md-navigation-rail-tab--disabled)) .md-navigation-rail-tab__icon-wrapper::after{opacity:var(--_hover-opacity)}:host([data-orientation='horizontal']:active:not(.md-navigation-rail-tab--disabled)) .md-navigation-rail-tab__icon-wrapper::after{opacity:var(--_press-opacity)}:host([data-orientation='horizontal']:focus-visible) .md-navigation-rail-tab__icon-wrapper{outline:3px solid var(--_focus-ring-color);outline-offset:2px}.md-navigation-rail-tab__caret{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px));line-height:1;vertical-align:middle;margin-inline-start:2px;transition:transform     var(--md-navigation-rail-tab-caret-duration, var(--md-sys-motion-duration-medium2, 300ms))     var(       --md-sys-motion-easing-emphasized,       cubic-bezier(0.2, 0, 0, 1)     )}:host([aria-expanded='true']) .md-navigation-rail-tab__caret{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.md-navigation-rail-tab__caret{transition-duration:1ms}}:host(.md-navigation-rail-tab--child-selected) .md-navigation-rail-tab__indicator{background-color:var(--_indicator-color)}:host(.md-navigation-rail-tab--child-selected[data-orientation='horizontal']) .md-navigation-rail-tab__icon-wrapper{background-color:var(--_indicator-color)}:host(.md-navigation-rail-tab--child-selected) .md-navigation-rail-tab__icon,:host(.md-navigation-rail-tab--child-selected) .md-navigation-rail-tab__label{color:var(--_active-icon-color)}:host([hidden]){display:none !important}`;const b=class{constructor(t){i(this,t);this.mdTabClick=a(this,"mdTabClick",7);this.mdSubmenuToggle=a(this,"mdSubmenuToggle",7);this.icon="";this.label="";this.active=false;this.disabled=false;this.badge=false;this.badgeValue="";this.href="";this.target="";this.value="";this.labelVisibility="all";this.expanded=false;this.density=0;this.iconFirst=null;this.indicatorFirst=null;this.labelFirst=null;this.pendingTransition=false;this.transitionPrepared=false;this.submenuOpen=false;this.hasSubmenu=false;this.submenuHasSelection=false;this.handleSubmenuClick=i=>{const a=i.target?.closest?.("md-menu-item");const t=this.submenu;if(!a||!t||!t.contains(a))return;t.querySelectorAll("md-menu-item[selected]").forEach((i=>{if(i!==a)i.removeAttribute("selected")}));a.setAttribute("selected","");this.syncSubmenuSelection();this.mdTabClick.emit({value:this.value})};this.handleClick=i=>{if(this.disabled){i.preventDefault();i.stopImmediatePropagation();return}if(this.submenu){i.preventDefault();this.toggleSubmenu();return}this.mdTabClick.emit({value:this.value})};this.handleKeyDown=i=>{if(this.disabled)return;if(i.key==="Enter"||i.key===" "){i.preventDefault();e(this.el);if(this.submenu){this.toggleSubmenu();return}this.mdTabClick.emit({value:this.value});if(this.href){const i=this.el.shadowRoot?.querySelector("a.md-navigation-rail-tab__anchor");i?.click()}}}}connectedCallback(){this.unregisterTransition=s(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}componentDidLoad(){if(typeof window!=="undefined"&&window.__STENCIL_DEV_MODE__!==false){this.warnMissingAccessibleName()}this.ensureSubmenuAnchor();const i=this.submenu;this.hasSubmenu=!!i;if(i){i.addEventListener("mdOpen",(()=>{this.submenuOpen=true;this.mdSubmenuToggle.emit({open:true})}));i.addEventListener("mdClose",(()=>{this.submenuOpen=false;this.syncSubmenuSelection();this.mdSubmenuToggle.emit({open:false})}));i.addEventListener("mdClick",(i=>this.handleSubmenuClick(i)));this.syncSubmenuSelection()}}onExpandedChange(){if(!this.transitionPrepared)this.captureTransition();this.transitionPrepared=false}captureTransition(){const i=this.el.shadowRoot;const a=i?.querySelector('[part="indicator"]');const t=i?.querySelector('[part="label"]');this.iconFirst=this.iconCentre();this.indicatorFirst=a?.getBoundingClientRect()??null;const n=t?getComputedStyle(t):null;this.labelFirst=t&&n?{rect:t.getBoundingClientRect(),opacity:Number.parseFloat(n.opacity)||0,visible:n.display!=="none"&&n.visibility!=="hidden",fontFamily:n.fontFamily,fontSize:n.fontSize,fontWeight:n.fontWeight,lineHeight:n.lineHeight,letterSpacing:n.letterSpacing,paddingTop:n.paddingTop,paddingRight:n.paddingRight,paddingBottom:n.paddingBottom,paddingLeft:n.paddingLeft,textAlign:n.textAlign,boxSizing:n.boxSizing}:null;this.cancelAnimations();this.pendingTransition=!this.prefersReducedMotion();if(!this.pendingTransition){this.iconFirst=null;this.indicatorFirst=null;this.labelFirst=null}}cancelAnimations(){this.iconAnimation?.cancel();this.indicatorAnimation?.cancel();this.labelAnimation?.cancel();this.iconAnimation=undefined;this.indicatorAnimation=undefined;this.labelAnimation=undefined;this.restoreLabelOverlay()}restoreLabelOverlay(){if(!this.labelOverlay)return;const{element:i,styles:a}=this.labelOverlay;for(const[t,n]of a){if(n.value)i.style.setProperty(t,n.value,n.priority);else i.style.removeProperty(t)}this.labelOverlay=undefined}retainOutgoingLabel(i,a){const t=this.el.getBoundingClientRect();const n=new Map;const o={display:"inline-block",position:"absolute",left:`${a.rect.left-t.left-this.el.clientLeft+this.el.scrollLeft}px`,top:`${a.rect.top-t.top-this.el.clientTop+this.el.scrollTop}px`,width:`${a.rect.width}px`,height:`${a.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(a.opacity),visibility:"visible","pointer-events":"none","transition-property":"none","font-family":a.fontFamily,"font-size":a.fontSize,"font-weight":a.fontWeight,"line-height":a.lineHeight,"letter-spacing":a.letterSpacing,"padding-top":a.paddingTop,"padding-right":a.paddingRight,"padding-bottom":a.paddingBottom,"padding-left":a.paddingLeft,"text-align":a.textAlign,"box-sizing":a.boxSizing};for(const[a,t]of Object.entries(o)){if(!t)continue;n.set(a,{value:i.style.getPropertyValue(a),priority:i.style.getPropertyPriority(a)});i.style.setProperty(a,t)}this.labelOverlay={element:i,styles:n}}componentDidRender(){if(!this.pendingTransition)return;this.pendingTransition=false;this.playTransition()}prefersReducedMotion(){return typeof window!=="undefined"&&!!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches}iconCentre(){const i=this.el.shadowRoot?.querySelector(".md-navigation-rail-tab__icon-wrapper");if(!i)return null;const a=i.getBoundingClientRect();return{cx:a.left+a.width/2,cy:a.top+a.height/2}}motionDuration(){const i=getComputedStyle(this.el).getPropertyValue("--md-sys-motion-duration-short4").trim();return r(i)}playTransition(){const i=this.el.shadowRoot;if(!i)return;const a=getComputedStyle(this.el).getPropertyValue("--md-sys-motion-easing-standard").trim()||"cubic-bezier(0.2, 0, 0, 1)";const{duration:t,easing:n,source:o}=l(this.el,{duration:this.motionDuration(),easing:a});if(t===0){this.iconFirst=null;this.indicatorFirst=null;this.labelFirst=null;return}const e={duration:t,easing:n,fill:"none"};const s=i.querySelector('[part="icon-wrapper"]');if(s&&this.iconFirst){const i=s.getBoundingClientRect();const a=this.iconFirst.cx-(i.left+i.width/2);const t=this.iconFirst.cy-(i.top+i.height/2);if(Math.abs(a)>.5||Math.abs(t)>.5){this.iconAnimation=s.animate([{transform:`translate(${a}px, ${t}px)`},{transform:"translate(0, 0)"}],e);const i=this.iconAnimation;d(i,o,(()=>this.iconAnimation===i))}}this.iconFirst=null;const r=i.querySelector('[part="indicator"]');if(r&&this.indicatorFirst){const i=this.indicatorFirst;const a=r.getBoundingClientRect();if(i.width>0&&i.height>0&&a.width>0&&a.height>0){this.indicatorAnimation=r.animate([{transform:`translate(${i.left-a.left}px, ${i.top-a.top}px) scale(${i.width/a.width}, ${i.height/a.height})`,transformOrigin:"top left"},{transform:"translate(0, 0) scale(1, 1)",transformOrigin:"top left"}],e);const t=this.indicatorAnimation;d(t,o,(()=>this.indicatorAnimation===t))}}this.indicatorFirst=null;const c=i.querySelector('[part="label"]');const m=this.labelFirst;this.labelFirst=null;if(c&&m){const i=getComputedStyle(c);const a=Number.parseFloat(i.opacity)||0;const t=i.display!=="none"&&i.visibility!=="hidden"&&a>0;if(!t&&m.visible&&m.opacity>0&&m.rect.width>0&&m.rect.height>0){this.retainOutgoingLabel(c,m);this.labelAnimation=c.animate([{opacity:m.opacity},{opacity:0}],{...e,fill:"forwards"});const i=this.labelAnimation;d(i,o,(()=>this.labelAnimation===i));void i.finished.then((()=>{if(this.labelAnimation!==i)return;this.restoreLabelOverlay();this.labelAnimation=undefined;i.cancel()}),(()=>undefined))}else if(t){const i=c.getBoundingClientRect();const t=m.visible?m.rect.left-i.left:0;const n=m.visible?m.rect.top-i.top:0;const s=m.visible?m.opacity:0;if(Math.abs(t)>.5||Math.abs(n)>.5||Math.abs(s-a)>.01){this.labelAnimation=c.animate([{transform:`translate(${t}px, ${n}px)`,opacity:s},{transform:"translate(0, 0)",opacity:a}],e);const i=this.labelAnimation;d(i,o,(()=>this.labelAnimation===i))}}}}warnMissingAccessibleName(){const i=this.el.hasAttribute("aria-label")||this.el.hasAttribute("aria-labelledby");if(!this.label&&!i){console.warn("[md-navigation-rail-tab] WCAG 1.1.1 / 2.4.4: destination is missing a label. "+"Add a `label` attribute or aria-label.",this.el)}}get submenu(){return this.el.querySelector('[slot="submenu"]')}ensureSubmenuAnchor(){const i=this.submenu;if(!i)return;if(!this.el.id){this.generatedId=this.generatedId??`md-rail-tab-${Math.random().toString(36).slice(2,9)}`;this.el.id=this.generatedId}if(i.getAttribute("anchor")!==this.el.id)i.setAttribute("anchor",this.el.id);if(!i.hasAttribute("placement"))i.setAttribute("placement","bottom-start")}async clearSubmenuSelection(){const i=this.submenu;i?.querySelectorAll("md-menu-item[selected]").forEach((i=>{i.removeAttribute("selected")}));this.submenuHasSelection=false}syncSubmenuSelection(){const i=this.submenu;this.submenuHasSelection=!!i?.querySelector('md-menu-item[selected], md-menu-item[aria-checked="true"]')}toggleSubmenu(){const i=this.submenu;if(!i)return;if(i.open)void i.close();else void i.show()}get displayBadgeValue(){if(!this.badgeValue)return"";const i=Number(this.badgeValue);if(Number.isFinite(i)&&i>999)return"999+";return this.badgeValue}renderIcon(){const i=!!this.icon;return t("slot",{name:"icon"},i&&t("span",{class:"md-navigation-rail-tab__icon material-symbols-outlined",part:"icon","aria-hidden":"true"},this.icon))}renderBadge(){const i=!!this.badgeValue;const a=this.badge&&!i;if(!i&&!a)return null;return t("span",{class:{"md-navigation-rail-tab__badge":true,"md-navigation-rail-tab__badge--dot":a,"md-navigation-rail-tab__badge--large":i},part:a?"badge badge-dot":"badge badge-large",role:"status","aria-label":i?`${this.displayBadgeValue} new notifications`:"new notifications"},i&&this.displayBadgeValue)}renderInner(){return[t("span",{class:"md-navigation-rail-tab__indicator",part:"indicator","aria-hidden":"true"},t("span",{class:"md-navigation-rail-tab__state-layer",part:"state-layer","aria-hidden":"true"})),t("md-ripple",{disabled:this.disabled}),t("span",{class:"md-navigation-rail-tab__icon-wrapper",part:"icon-wrapper"},t("span",{class:"md-navigation-rail-tab__icon-box"},this.renderIcon(),this.renderBadge())),this.label&&t("span",{class:"md-navigation-rail-tab__label",part:"label"},this.label,this.hasSubmenu&&t("span",{class:"md-navigation-rail-tab__caret material-symbols-outlined",part:"caret","aria-hidden":"true"},"arrow_drop_down")),t("slot",{name:"submenu"})]}render(){const i=c(this.href);const a=!!i&&!this.disabled;const o=this.disabled?"true":null;const e=this.active&&a?"page":null;const s=a?null:this.active?"true":"false";const r=a?"link":"tab";const l=this.el.getAttribute("aria-label")??undefined;const d=a?this.label||l:!this.label?l:undefined;return t(n,{key:"8b029c97fbf564f9faf7926965bce751f1161ff5",class:{"md-navigation-rail-tab":true,"md-navigation-rail-tab--active":this.active,"md-navigation-rail-tab--child-selected":this.submenuHasSelection&&!this.active,"md-navigation-rail-tab--disabled":this.disabled,"md-navigation-rail-tab--has-label":!!this.label,[`md-navigation-rail-tab--labels-${this.labelVisibility}`]:true,"md-navigation-rail-tab--expanded":this.expanded},role:r,"aria-selected":s,"aria-current":e,"aria-disabled":o,"aria-label":d,tabindex:this.disabled?"-1":this.active?"0":"-1","aria-haspopup":this.submenu?"menu":undefined,"aria-expanded":this.submenu?this.submenuOpen?"true":"false":undefined,onClick:this.handleClick,onKeyDown:this.handleKeyDown},a?t("a",{class:"md-navigation-rail-tab__anchor",href:i,target:this.target||undefined,rel:this.target?m:undefined,tabIndex:-1,"aria-hidden":"true",part:"anchor"},this.renderInner()):this.renderInner())}get el(){return o(this)}static get watchers(){return{expanded:[{onExpandedChange:0}]}}};b.style=h();export{b as md_navigation_rail_tab};
+//# sourceMappingURL=p-c38e1473.entry.js.map

package/dist/md3/p-c38e1473.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdNavigationRailTabCss","MdNavigationRailTab","constructor","hostRef","this","icon","label","active","disabled","badge","badgeValue","href","target","value","labelVisibility","expanded","density","iconFirst","indicatorFirst","labelFirst","pendingTransition","transitionPrepared","submenuOpen","hasSubmenu","submenuHasSelection","handleSubmenuClick","e","row","closest","menu","submenu","contains","querySelectorAll","forEach","other","removeAttribute","setAttribute","syncSubmenuSelection","mdTabClick","emit","handleClick","preventDefault","stopImmediatePropagation","toggleSubmenu","handleKeyDown","key","triggerRipple","el","anchor","shadowRoot","querySelector","click","connectedCallback","unregisterTransition","registerRailTabTransition","captureTransition","disconnectedCallback","cancelAnimations","componentDidLoad","window","__STENCIL_DEV_MODE__","warnMissingAccessibleName","ensureSubmenuAnchor","addEventListener","mdSubmenuToggle","open","onExpandedChange","sr","indicator","iconCentre","getBoundingClientRect","labelCss","getComputedStyle","rect","opacity","Number","parseFloat","visible","display","visibility","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","paddingTop","paddingRight","paddingBottom","paddingLeft","textAlign","boxSizing","prefersReducedMotion","iconAnimation","cancel","indicatorAnimation","labelAnimation","undefined","restoreLabelOverlay","labelOverlay","element","styles","name","previous","style","setProperty","priority","removeProperty","retainOutgoingLabel","first","host","Map","overlay","position","left","clientLeft","scrollLeft","top","clientTop","scrollTop","width","height","transform","String","Object","entries","set","getPropertyValue","getPropertyPriority","componentDidRender","playTransition","matchMedia","matches","r","cx","cy","motionDuration","raw","trim","parseRailMotionDuration","fallbackEasing","duration","easing","source","getRailTransitionTiming","timing","fill","dx","dy","Math","abs","animate","animation","synchronizeRailAnimation","last","transformOrigin","css","targetOpacity","finished","then","hasAriaLabel","hasAttribute","console","warn","id","generatedId","random","toString","slice","getAttribute","clearSubmenuSelection","close","show","displayBadgeValue","num","isFinite","renderIcon","hasIcon","h","class","part","renderBadge","hasLargeBadge","hasDotBadge","role","renderInner","render","sanitizeHref","isLink","ariaDisabled","ariaCurrent","ariaSelected","authorAriaLabel","hostAriaLabel","Host","tabindex","onClick","onKeyDown","rel","SAFE_LINK_REL","tabIndex"],"sources":["../sources/67e302a0ddf9f68ba82638d32533a0e69408184931f9f1268243f7246c714ae8/md-navigation-rail-tab.css_tag_md-navigation-rail-tab_encapsulation_shadow","../sources/b3d606320b653bcbde553e6d61569edd0fc6cbdb1cb179f4d36ad796e76b133c/md-navigation-rail-tab.tsx"],"mappings":"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","ignoreList":[]}

package/dist/sources/{20812305a6a9bf6e0ac3bcaa49cf729c7e1f1d944f6467cc179222ebbfe7c036 → 0ff3480d9a3ad4d643358cd2d23546b2045fcacf8afbea2e0280ca4d1d7c2d09}/md-navigation-rail.tsx

@@ -11,6 +11,7 @@ import {
   Listen,
   Method,
 } from '@stencil/core';
+import { prepareRailTabTransition } from '../../utils/navigation-rail-motion';
 
 /**
  * Material Design 3 — Navigation Rail
@@ -141,11 +142,9 @@ export class MdNavigationRail {
   @State() private submenuOpen = false;
 
   /**
-   * 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.
    */
   @State() private tabsExpanded = false;
 
@@ -231,17 +230,18 @@ export class MdNavigationRail {
   @Watch('variant')
   onVariantChange(newVal: 'standard' | 'expanded', oldVal: 'standard' | 'expanded') {
     if (newVal === oldVal) return;
-    if (newVal === 'expanded') this.mdExpand.emit();
-    else this.mdCollapse.emit();
 
-    // Switch the destination layout immediately in both directions (modal and
-    // standard alike). Each tab glides its icon + label to the new layout, the
-    // FAB morphs, and — for modal — the overlay container grows/shrinks and the
-    // scrim fades, all driven by CSS transitions on the same spring (see the
-    // modal section of the stylesheet). No JS deferral needed.
+    // Capture destinations before the rail's padding or target layout changes.
+    // A child watcher alone can run after the parent has already moved its icon.
+    this.getTabs().forEach(prepareRailTabTransition);
     this.tabsExpanded = newVal === 'expanded';
     this.syncTabs();
     this.syncFab();
+
+    // Consumers can synchronously update label visibility in these listeners;
+    // publish only after every destination and the FAB have the target state.
+    if (newVal === 'expanded') this.mdExpand.emit();
+    else this.mdCollapse.emit();
   }
 
   /**

package/dist/sources/{6c14a0a0c65f2aec64d62332f49f228b81d0cbbb288795543716266e9f70f444 → 2f4b6a7ed1aaf6a2a7b0e44123a4b5d30a18047aa5c2121896389bd6d11fcc66}/md-navigation-rail.css_tag_md-navigation-rail_encapsulation_shadow

@@ -54,9 +54,8 @@
   );
   /* Spec: collapsed container = 80px (the collapsed-rail maximum width). */
   --_container-width: var(--md-navigation-rail-container-width, max(56px, calc(80px + var(--md-sys-density-scale, 0) * 4px)));
-  /* The collapsed footprint of the slotted FAB, used to centre it on the rail's
-     icon axis. 56px is the M3 FAB and what an extended FAB collapses to; raise
-     it for a `size="medium"` / `size="large"` icon-only FAB. */
+  /* Reserved collapsed footprint for a labelled FAB. Icon-only FABs use their
+     actual rendered size, including the component's size and density props. */
   --_fab-size: var(--md-navigation-rail-fab-size, 56px);
   /* Spec: expanded container = 220px minimum, 360px maximum. */
   --_expanded-width: var(--md-navigation-rail-expanded-width, max(140px, calc(220px + var(--md-sys-density-scale, 0) * 20px)));
@@ -65,6 +64,11 @@
   --_container-elevation: var(--md-navigation-rail-container-elevation, none);
   --_padding-block: var(--md-navigation-rail-padding-block, max(24px, calc(44px + var(--md-sys-density-scale, 0) * 4px)));
   --_padding-inline: var(--md-navigation-rail-padding-inline, 0px);
+  /* Resolve on the rail before inheritance: slotted controls can define their
+     own --_container-width, so they must consume this computed coordinate. */
+  --_rail-slot-axis: calc(var(--_container-width) / 2 - var(--_padding-inline));
+  --_rail-slot-center-shift: -50%;
+  --_rail-fab-size: var(--_fab-size);
   --_gap: var(--md-navigation-rail-gap, var(--md-sys-spacing-gap-md, 12px));
   --_header-space: var(--md-navigation-rail-header-space, max(20px, calc(40px + var(--md-sys-density-scale, 0) * 4px)));
   --_destinations-gap: var(--md-navigation-rail-destinations-gap, max(0px, calc(8px + var(--md-sys-density-scale, 0) * 2px)));
@@ -129,6 +133,10 @@
   font-family: var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif);
 }
 
+:host(:dir(rtl)) {
+  --_rail-slot-center-shift: 50%;
+}
+
 /* ---------- Full-height (opt-in via `full-height`) ----------
    Span the whole viewport instead of just the parent. `dvh` tracks the dynamic
    viewport (mobile browser chrome show/hide); `vh` is the fallback for engines
@@ -143,12 +151,8 @@
   inline-size: var(--_expanded-width);
   min-inline-size: var(--_expanded-width);
   max-inline-size: var(--_expanded-max-width);
-  /* Leading inset for expanded content. Spec is 16px, but we use 12px so each
-     control's icon lands back on the rail's centre axis (x=40) — exactly where
-     it sits while collapsed — giving ZERO horizontal icon movement during the
-     expand/collapse spring. A 24px icon centred in the 80px collapsed rail is at
-     x=28; with this 12px inset the expanded icons (toggle 12+8 button inset,
-     destinations 12+16 pill inset, etc.) also resolve to x=28. */
+  /* Expanded content gains an inset. Controls compensate this value against
+     the collapsed width, so their icon axis also holds at compact densities. */
   --_padding-inline: var(--md-sys-spacing-inset-md, 12px);
 }
 
@@ -303,19 +307,12 @@
   justify-content: flex-start;
   /* Anchor the leading glyph on the rail's centre axis (x=40 in the 80px rail).
      This padding is leading-edge based (NOT justify-content: center, which would
-     track the animating host width and drift). Identical in both states — the
-     expanded rule below cancels the host padding — so the logo NEVER moves. */
+     track the animating host width and drift). The margin compensates the
+     current host inset in both states, preserving the same leading position. */
   padding-inline-start: calc((var(--_container-width) - var(--_logo-icon-size)) / 2);
-  transition: opacity var(--_motion-effects-duration) var(--_motion-effects-easing);
-}
-
-/* Expanded: the in-flow logo wrapper is pushed right by the host's expanded
-   padding. Cancel exactly that, so the glyph stays on the same centre axis
-   (x=40) it holds while collapsed — zero horizontal movement. Both variants get
-   it, so the cross-fade happens perfectly in place. */
-:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-contracted,
-:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-expanded {
+  /* Compensate in both states, including a custom collapsed rail inset. */
   margin-inline-start: calc(-1 * var(--_padding-inline));
+  transition: opacity var(--_motion-duration) var(--_motion-easing);
 }
 
 .md-navigation-rail__logo-contracted {
@@ -359,15 +356,13 @@
      so the button never drifts during the spring transition. NOT transitioned on
      purpose: gliding it reads as an in-place drift, the rail-width spring
      carries the motion instead. */
-  padding-inline-start: calc((var(--_container-width) - 40px) / 2);
-}
-
-:host(.md-navigation-rail--expanded) .md-navigation-rail__toggle {
-  padding-inline-start: var(--md-sys-spacing-inset-sm, 8px);
+  padding-inline-start: calc((var(--_container-width) - 40px) / 2 - var(--_padding-inline));
 }
 
 /* ---------- Header (top group) ---------- */
 .md-navigation-rail__header {
+  --_header-padding-inline: 0px;
+  --_rail-slot-axis: calc(var(--_container-width) / 2 - var(--_padding-inline) - var(--_header-padding-inline));
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -378,8 +373,9 @@
 }
 
 :host(.md-navigation-rail--expanded) .md-navigation-rail__header {
+  --_header-padding-inline: var(--md-sys-spacing-inset-sm, 8px);
   align-items: flex-start;
-  padding-inline: var(--md-sys-spacing-inset-sm, 8px);
+  padding-inline: var(--_header-padding-inline);
 }
 
 .md-navigation-rail__header[hidden] {
@@ -387,65 +383,53 @@
 }
 
 /* ---------- FAB region ----------
-   LEADING-ANCHORED IN BOTH STATES, so the FAB's leading edge — and with it its
-   icon — never moves. This is the same idiom the logo and the toggle above use,
-   and it is here for the same reason plus a sharper one.
-
-   Centring was the problem. `justify-content: center` resolves against the
-   ANIMATING host width, and on collapse the state flips instantly while the rail
-   narrows 220→80 over 200ms and the FAB runs its own 500ms morph spring. The
-   three timelines are unrelated, so the centred FAB was dragged past its target:
-   measured, the icon left x=28, dipped to 16.67 — about 11px BELOW its resting
-   27.5 — and sprang back. A visible rubber-band on every collapse.
-
-   Anchoring removes the moving target entirely. Collapsed, the leading inset is
-   whatever centres the FAB, `(rail - fab) / 2` = (80 - 56) / 2 = 12px; expanded,
-   the host's own `--_padding-inline` is already 12px and the wrapper adds
-   nothing. Both put the leading edge at 12 and the icon at 28 — the rail's
-   documented axis — so across the whole transition the FAB only CHANGES WIDTH.
-   Nothing translates, in either direction.
-
-   The `- var(--_fab-size)` term is the one assumption, and it is exposed rather
-   than hidden: 56px is the M3 FAB and what an extended FAB collapses to, so it
-   is right for `size="standard"`, for a labelled FAB, and for every FAB in this
-   component's own stories. A consumer slotting a `size="medium"` or
-   `size="large"` icon-only FAB must set `--md-navigation-rail-fab-size` to that
-   width, or its icon lands off the axis by half the difference. `max(0px, …)`
-   keeps a FAB wider than the rail from producing a negative inset. */
+   A labelled FAB expands from a fixed icon axis. Its own label width, opacity,
+   and padding transitions use the rail's width clock instead of a second
+   spatial spring. Icon-only FABs are centred using their actual footprint. */
 .md-navigation-rail__fab {
+  /* Preserve the slot's legacy inset for wrappers and other custom content.
+     Direct FABs compensate it through the computed axis below. */
+  --_fab-padding-inline: max(0px, calc((var(--_container-width) - var(--_fab-size)) / 2));
+  --_rail-slot-axis: calc(var(--_container-width) / 2 - var(--_padding-inline) - var(--_fab-padding-inline));
+  --md-sys-motion-spring-spatial-default-duration: var(--_motion-duration);
+  --md-sys-motion-spring-spatial-default-easing: var(--_motion-easing);
+  --md-sys-motion-spring-effects-default-duration: var(--_motion-duration);
+  --md-sys-motion-spring-effects-default-easing: var(--_motion-easing);
   display: flex;
   align-items: center;
   justify-content: flex-start;
   inline-size: 100%;
-  padding-inline-start: max(0px, calc((var(--_container-width) - var(--_fab-size)) / 2));
+  padding-inline-start: var(--_fab-padding-inline);
   padding-block-end: var(--md-sys-spacing-inset-sm, 8px);
 }
 
-/*
- * NO extra leading padding here — the host's `--_padding-inline` has already
- * applied it, and a second copy double-counted it.
- *
- * The rail's whole expand promise is the x=28 icon axis documented at the top
- * of this file: a 24px icon centred in the 80px collapsed rail sits at 28, and
- * the 12px expanded inset is chosen so every expanded control lands back on 28
- * too — "ZERO horizontal icon movement". Every other control keeps that
- * promise; measured, a destination tab's glyph is at x=28.00 in BOTH states.
- * The FAB was the sole violator: host inset 12 + this padding 12 put its
- * leading edge at 24, and with the FAB's own 16px icon inset the "+" landed at
- * x=40 expanded against x=27.5 collapsed. It did not even glide — it jumped the
- * full 12.5px in one frame and then held while only the width animated, which
- * is what made it read as a jerk rather than a movement.
- *
- * `justify-content: flex-start` still earns its place: it anchors the FAB to
- * the leading edge instead of centring it, the same idiom the logo and toggle
- * above already use, and for the reason recorded there — centring resolves
- * against the ANIMATING host width and drifts.
- */
 :host(.md-navigation-rail--expanded) .md-navigation-rail__fab {
-  /* The host's `--_padding-inline` already puts the content box at 12px, so the
-     wrapper contributes nothing — adding its own copy on top is what used to
-     double-count it and shove the icon from x=28 to x=40. */
-  padding-inline-start: 0;
+  --_fab-padding-inline: 0px;
+}
+
+:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__fab ::slotted(md-fab) {
+  position: relative;
+  inset-inline-start: var(--_rail-slot-axis);
+  translate: var(--_rail-slot-center-shift) 0;
+}
+
+:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__fab ::slotted(md-fab.md-fab--extended),
+:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__fab ::slotted(md-fab.md-fab--collapsed) {
+  inset-inline-start: calc(var(--_rail-slot-axis) - var(--_rail-fab-size) / 2);
+  translate: none;
+}
+
+/* A labelled FAB's collapsed footprint is fixed, while its icon size and
+   inset tokens can change with density. Reserve half of that footprint before
+   the icon in both states so the shrinking label cannot displace it. */
+:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__fab ::slotted(md-fab.md-fab--extended.md-fab--with-icon),
+:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__fab ::slotted(md-fab.md-fab--collapsed.md-fab--with-icon) {
+  justify-content: flex-start;
+  padding-inline-start: calc((var(--_rail-fab-size) - var(--_icon-size)) / 2);
+}
+
+:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__fab ::slotted(md-fab.md-fab--collapsed.md-fab--with-icon) {
+  padding-inline-end: calc((var(--_rail-fab-size) - var(--_icon-size)) / 2);
 }
 
 .md-navigation-rail__fab[hidden] {
@@ -498,6 +482,7 @@
   flex-shrink: 0;
   box-sizing: border-box;
   --_footer-padding-inline: 0px;
+  --_rail-slot-axis: calc(var(--_container-width) / 2 - var(--_padding-inline) - var(--_footer-padding-inline));
   --_footer-leading-size: var(--md-navigation-rail-footer-leading-size, 32px);
   display: flex;
   flex-direction: column;
@@ -511,15 +496,7 @@
   margin-block-start: auto; /* push to bottom even with align=top */
 }
 
-/* Legacy footer content keeps its existing alignment. For an account that
-   stays anchored during expansion, use footer-leading + footer-content. */
-/* Centred with `align-self`, NOT a margin. A margin here has to be written
-   through `::slotted()`, and document-tree rules out-rank `::slotted()` at any
-   specificity — so a consumer's `* { margin: 0 }` reset (Starlight, Tailwind
-   preflight, any normalise) silently pushed the button to the rail's leading
-   edge. `align-self` is not a margin, so the reset cannot reach it, and the
-   expanded offset moves to padding on the footer itself (a shadow element the
-   reset never matches). */
+/* Preserve the existing alignment of horizontal and profile-slot controls. */
 .md-navigation-rail__footer ::slotted(md-icon-button) {
   align-self: center;
 }
@@ -528,6 +505,17 @@
   align-self: flex-start;
 }
 
+/* Known icon controls use their own rendered width instead of a fixed button
+   size. Relative logical positioning avoids margins that document resets can
+   override. Other custom header/footer content retains its existing layout. */
+:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__header ::slotted(md-icon-button[slot='header']),
+:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__footer ::slotted(md-icon-button[slot='footer']) {
+  align-self: flex-start;
+  position: relative;
+  inset-inline-start: var(--_rail-slot-axis);
+  translate: var(--_rail-slot-center-shift) 0;
+}
+
 :host(.md-navigation-rail--expanded) .md-navigation-rail__footer {
   --_footer-padding-inline: var(--md-sys-spacing-inset-sm, 8px);
   padding-inline-start: var(--_footer-padding-inline);
@@ -588,6 +576,15 @@
   inline-size: var(--_container-width);
 }
 
+:host(:not(.md-navigation-rail--horizontal)) ::slotted(md-navigation-rail-tab) {
+  /* Share the collapsed centre axis with the expanded destination. Density
+     changes both the rail width and glyph size; a fixed 16px leading inset
+     only aligns the two layouts at the default density. Subtract the rail's
+     insets from collapsed items so custom padding preserves the same axis. */
+  --_rail-icon-axis: calc(var(--_container-width) / 2 - var(--_padding-inline));
+  inline-size: calc(var(--_container-width) - 2 * var(--_padding-inline));
+}
+
 /* Expanded items hug their content (left-aligned pill per the spec's
    "Expanded layout" figure) instead of stretching the full rail width. */
 :host(.md-navigation-rail--tabs-expanded) ::slotted(md-navigation-rail-tab) {
@@ -636,11 +633,18 @@
   :host,
   .md-navigation-rail__toggle,
   .md-navigation-rail__fab,
+  .md-navigation-rail__logo-contracted,
+  .md-navigation-rail__logo-expanded,
   .md-navigation-rail__footer-content,
   .md-navigation-rail__scrim,
   :host(.md-navigation-rail--modal) .md-navigation-rail__container {
     transition: none;
   }
+
+  .md-navigation-rail__fab {
+    --md-sys-motion-spring-spatial-default-duration: 0ms;
+    --md-sys-motion-spring-effects-default-duration: 0ms;
+  }
 }
 
 /* ---------- Dark theme is fully covered by --md-sys-* tokens ---------- */
@@ -750,6 +754,7 @@
 :host(.md-navigation-rail--horizontal) .md-navigation-rail__logo-expanded {
   position: static;
   padding-inline: var(--md-sys-spacing-inset-sm, 8px);
+  margin-inline-start: 0;
 }
 
 :host(.md-navigation-rail--horizontal) .md-navigation-rail__logo-expanded {

package/dist/sources/{822acc654bb272fea6b5455c9869791448b125cae2c1eb1df0f97b27263a18f3 → 67e302a0ddf9f68ba82638d32533a0e69408184931f9f1268243f7246c714ae8}/md-navigation-rail-tab.css_tag_md-navigation-rail-tab_encapsulation_shadow

@@ -89,19 +89,13 @@
     --md-navigation-rail-tab-state-layer-color,
     var(--md-sys-color-on-secondary-container, #4A4458)
   );
-  /* M3 Expressive motion. Effects spring (fast) for color / opacity / icon-fill
-     micro-interactions; spatial spring (fast) for the active-indicator pill
-     size/shape morph. */
+  /* Effects motion for color, opacity and icon fill. Layout motion is owned
+     by the component so it can reverse from the currently rendered geometry. */
   --_motion-duration: var(--md-sys-motion-spring-effects-fast-duration, 150ms);
   --_motion-easing: var(
     --md-sys-motion-spring-effects-fast-easing,
     cubic-bezier(0.31, 0.94, 0.34, 1)
   );
-  --_motion-spatial-duration: var(--md-sys-motion-spring-spatial-fast-duration, 350ms);
-  --_motion-spatial-easing: var(
-    --md-sys-motion-spring-spatial-fast-easing,
-    cubic-bezier(0.42, 1.67, 0.21, 0.9)
-  );
   --_hover-opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
   /* Spec: focused and pressed state layer opacity = 0.10 for nav rail items. */
   --_focus-opacity: var(--md-navigation-rail-tab-focus-state-layer-opacity, 0.10);
@@ -194,9 +188,9 @@ md-ripple {
   background-color: transparent;
   pointer-events: none;
   overflow: hidden;
-  transition:
-    background-color var(--_motion-duration) var(--_motion-easing),
-    inline-size var(--_motion-spatial-duration) var(--_motion-spatial-easing);
+  /* Geometry is animated from measured bounds by the component: auto-sized
+     expanded pills cannot transition to fixed collapsed dimensions in CSS. */
+  transition: background-color var(--_motion-duration) var(--_motion-easing);
   z-index: 0;
 }
 
@@ -377,6 +371,9 @@ md-ripple {
   justify-content: flex-start;
   gap: var(--md-sys-spacing-gap-sm, 8px);
   padding-inline: var(--md-sys-spacing-inset-lg, 16px);
+  /* Keep the glyph on the rail's centre axis at every density, including when
+     a destination has a local icon-size override. Logical padding mirrors RTL. */
+  padding-inline-start: calc(var(--_rail-icon-axis, calc(var(--md-sys-spacing-inset-lg, 16px) + var(--_icon-size) / 2)) - var(--_icon-size) / 2);
   padding-block: 0;
   inline-size: fit-content;
   min-block-size: max(48px, calc(56px + var(--md-sys-density-scale, 0) * 4px));