@awc-ui/core 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/components-csr/md-navigation-rail.js

@@ -0,0 +1,2 @@
+import{p as i,H as a,c as n,h as t,d as e,t as o}from"./p-bSpXNc5J.js";import{d as s}from"./p-R_guULjT.js";import{d as r}from"./p-Bkt_X-6v.js";import{d}from"./p-CVMM-tdC.js";import{d as l}from"./p-C3vB0Hd9.js";const c=()=>`:host{--_container-color:var(     --md-navigation-rail-container-color,     var(--md-sys-color-surface, #FFFBFE)   );--_container-width:var(--md-navigation-rail-container-width, max(56px, calc(80px + var(--md-sys-density-scale, 0) * 4px)));--_expanded-width:var(--md-navigation-rail-expanded-width, max(140px, calc(220px + var(--md-sys-density-scale, 0) * 20px)));--_expanded-max-width:var(--md-navigation-rail-expanded-max-width, 360px);--_container-shape:var(--md-navigation-rail-container-shape, 0px);--_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);--_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)));--_content-color:var(     --md-navigation-rail-content-color,     var(--md-sys-color-on-surface-variant, #49454F)   );--_logo-icon-size:var(--md-navigation-rail-logo-icon-size, 24px);--_motion-duration:var(--md-sys-motion-duration-short4, 200ms);--_motion-easing:var(     --md-sys-motion-easing-standard,     cubic-bezier(0.2, 0, 0, 1)   );--_motion-effects-duration:var(--md-sys-motion-spring-effects-default-duration, 200ms);--_motion-effects-easing:var(     --md-sys-motion-spring-effects-default-easing,     cubic-bezier(0.34, 0.8, 0.34, 1)   );display:flex;flex-direction:column;box-sizing:border-box;inline-size:var(--_container-width);min-inline-size:var(--_container-width);max-inline-size:var(--_container-width);block-size:100%;min-block-size:100%;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);background-color:var(--_container-color);color:var(--_content-color);border-radius:var(--_container-shape);box-shadow:var(--_container-elevation);position:relative;isolation:isolate;transition:inline-size var(--_motion-duration) var(--_motion-easing),     min-inline-size var(--_motion-duration) var(--_motion-easing),     max-inline-size var(--_motion-duration) var(--_motion-easing),     background-color var(--_motion-effects-duration) var(--_motion-effects-easing);font-family:var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif)}:host(.md-navigation-rail--full-height){block-size:100dvh;min-block-size:100dvh}:host(.md-navigation-rail--expanded){inline-size:var(--_expanded-width);min-inline-size:var(--_expanded-width);max-inline-size:var(--_expanded-max-width);--_padding-inline:var(--md-sys-spacing-inset-md, 12px)}:host(.md-navigation-rail--modal){position:static;isolation:auto;background-color:transparent;box-shadow:none;padding:0}:host(.md-navigation-rail--modal.md-navigation-rail--expanded){--_container-color:var(     --md-navigation-rail-container-color,     var(--md-sys-color-surface-container, #F3EDF7)   );--_container-shape:var(     --md-navigation-rail-container-shape,     var(--md-sys-shape-corner-large, 16px)   );--_container-elevation:var(     --md-navigation-rail-container-elevation,     var(--md-sys-elevation-3, 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15))   );inline-size:var(--_container-width);min-inline-size:var(--_container-width);max-inline-size:var(--_container-width)}.md-navigation-rail__scrim{position:absolute;inset:0;background-color:var(--md-sys-color-scrim, #000000);opacity:0;pointer-events:none;z-index:2;transition:opacity var(--_motion-duration) var(--_motion-easing)}:host(.md-navigation-rail--modal.md-navigation-rail--expanded) .md-navigation-rail__scrim{opacity:0.32;pointer-events:auto}:host(.md-navigation-rail--modal) .md-navigation-rail__container{position:absolute;inset-block-start:0;inset-inline-start:0;box-sizing:border-box;inline-size:var(--_container-width);block-size:100%;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);background-color:var(--_container-color);box-shadow:var(--_container-elevation);border-start-end-radius:var(--_container-shape);border-end-end-radius:var(--_container-shape);z-index:3;overflow:hidden;transition:inline-size var(--_motion-duration) var(--_motion-easing),     inset-block-start var(--_motion-duration) var(--_motion-easing),     inset-inline-start var(--_motion-duration) var(--_motion-easing),     block-size var(--_motion-duration) var(--_motion-easing),     background-color var(--_motion-effects-duration) var(--_motion-effects-easing),     box-shadow var(--_motion-effects-duration) var(--_motion-effects-easing),     border-radius var(--_motion-effects-duration) var(--_motion-effects-easing)}:host(.md-navigation-rail--modal.md-navigation-rail--expanded) .md-navigation-rail__container{inline-size:var(--_expanded-width);max-inline-size:var(--_expanded-max-width);inset-block-start:16px;inset-inline-start:16px;block-size:calc(100% - 32px);border-radius:var(--_container-shape)}.md-navigation-rail__container{display:flex;flex-direction:column;block-size:100%;gap:var(--_gap);inline-size:100%}.md-navigation-rail__logo{position:relative;inline-size:100%;min-block-size:48px}.md-navigation-rail__logo[hidden]{display:none}.md-navigation-rail__logo-contracted,.md-navigation-rail__logo-expanded{position:absolute;inset-block:0;inset-inline-start:0;inset-inline-end:0;display:flex;align-items:center;justify-content:flex-start;padding-inline-start:calc((var(--_container-width) - var(--_logo-icon-size)) / 2);transition:opacity var(--_motion-effects-duration) var(--_motion-effects-easing)}:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-contracted,:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-expanded{margin-inline-start:calc(-1 * var(--_padding-inline))}.md-navigation-rail__logo-contracted{opacity:1}.md-navigation-rail__logo-expanded{opacity:0;pointer-events:none}:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-contracted{opacity:0;pointer-events:none}:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-expanded{opacity:1;pointer-events:auto}:host(.md-navigation-rail--expanded:not(.md-navigation-rail--with-logo-expanded)) .md-navigation-rail__logo-contracted{opacity:1;pointer-events:auto}.md-navigation-rail__toggle{display:flex;align-items:center;justify-content:flex-start;inline-size:100%;min-block-size:48px;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)}.md-navigation-rail__header{display:flex;flex-direction:column;align-items:center;justify-content:center;inline-size:100%;min-block-size:56px;padding-block-end:var(--md-sys-spacing-inset-xs, 4px)}:host(.md-navigation-rail--expanded) .md-navigation-rail__header{align-items:flex-start;padding-inline:var(--md-sys-spacing-inset-sm, 8px)}.md-navigation-rail__header[hidden]{display:none}.md-navigation-rail__fab{display:flex;align-items:center;justify-content:center;inline-size:100%;padding-block-end:var(--md-sys-spacing-inset-sm, 8px)}:host(.md-navigation-rail--expanded) .md-navigation-rail__fab{justify-content:flex-start;padding-inline-start:var(--md-sys-spacing-inset-md, 12px)}.md-navigation-rail__fab[hidden]{display:none}.md-navigation-rail__destinations{display:flex;flex-direction:column;gap:var(--_destinations-gap);inline-size:100%;flex:1 1 auto;min-block-size:0;overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;scrollbar-width:thin;padding-block:5px}:host(.md-navigation-rail--with-header) .md-navigation-rail__destinations,:host(.md-navigation-rail--with-fab) .md-navigation-rail__destinations{padding-block-start:calc(var(--_header-space) - var(--_gap))}:host(.md-navigation-rail--align-top) .md-navigation-rail__destinations{justify-content:flex-start}:host(.md-navigation-rail--align-middle) .md-navigation-rail__destinations{justify-content:center}:host(.md-navigation-rail--align-bottom) .md-navigation-rail__destinations{justify-content:flex-end}.md-navigation-rail__footer{display:flex;flex-direction:column;align-items:stretch;inline-size:100%;gap:var(--_destinations-gap);padding-block-start:var(--md-sys-spacing-inset-sm, 8px);margin-block-start:auto;}.md-navigation-rail__footer ::slotted(md-icon-button){align-self:center}:host(.md-navigation-rail--expanded) .md-navigation-rail__footer ::slotted(md-icon-button){align-self:flex-start}:host(.md-navigation-rail--expanded) .md-navigation-rail__footer{padding-inline-start:var(--md-sys-spacing-inset-sm, 8px)}.md-navigation-rail__footer[hidden]{display:none}::slotted(md-navigation-rail-tab){inline-size:var(--_container-width)}:host(.md-navigation-rail--tabs-expanded) ::slotted(md-navigation-rail-tab){inline-size:fit-content}::slotted(md-fab),::slotted(md-icon-button){flex:0 0 auto}::slotted(md-fab){box-shadow:none}::slotted([data-section-header]){display:none}:host(.md-navigation-rail--tabs-expanded) ::slotted([data-section-header]){display:block;flex:0 0 auto;padding-block:var(--md-sys-spacing-inset-md, 12px) var(--md-sys-spacing-inset-sm, 8px);padding-inline:var(--md-sys-spacing-inset-lg, 16px);margin:0;color:var(--md-sys-color-on-surface-variant, #49454F);font-family:var(--md-sys-typescale-title-small-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-title-small-font-size, 14px);font-weight:var(--md-sys-typescale-title-small-font-weight, 500);line-height:var(--md-sys-typescale-title-small-line-height, 20px);letter-spacing:var(--md-sys-typescale-title-small-letter-spacing, 0.1px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (prefers-reduced-motion: reduce){:host,.md-navigation-rail__toggle,.md-navigation-rail__fab,.md-navigation-rail__scrim,:host(.md-navigation-rail--modal) .md-navigation-rail__container{transition:none}}:host([data-theme='dark']),:host-context([data-theme='dark']){--_container-color:var(     --md-navigation-rail-container-color,     var(--md-sys-color-surface, #1C1B1F)   )}@media (forced-colors: active){:host{border-inline-end:1px 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(.md-navigation-rail--horizontal){flex-direction:row;inline-size:100%;min-inline-size:0;max-inline-size:none;block-size:auto;min-block-size:var(     --md-navigation-rail-horizontal-height,     max(64px, calc(72px + var(--md-sys-density-scale, 0) * 4px))   );padding-block:var(--md-navigation-rail-horizontal-padding-block, 0px);padding-inline:var(--md-navigation-rail-horizontal-padding-inline, var(--md-sys-spacing-inset-md, 12px))}:host(.md-navigation-rail--horizontal) .md-navigation-rail__container{flex-direction:row;align-items:stretch;block-size:auto}:host(.md-navigation-rail--horizontal) .md-navigation-rail__destinations{flex-direction:row;align-items:stretch;inline-size:auto;min-inline-size:0;block-size:auto;min-block-size:0;overflow-x:auto;overflow-y:clip;padding-block:0;padding-inline:5px;justify-content:center}:host(.md-navigation-rail--horizontal.md-navigation-rail--with-header) .md-navigation-rail__destinations,:host(.md-navigation-rail--horizontal.md-navigation-rail--with-fab) .md-navigation-rail__destinations{padding-block-start:0;padding-inline-start:calc(var(--_header-space) - var(--_gap))}:host(.md-navigation-rail--horizontal) ::slotted(md-navigation-rail-tab){inline-size:auto;min-inline-size:var(--_container-width);flex-shrink:0}:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo{inline-size:auto;min-block-size:0;flex:0 0 auto;display:flex;align-items:center}:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo-contracted,:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo-expanded{position:static;padding-inline:var(--md-sys-spacing-inset-sm, 8px)}:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo-expanded{display:none}:host(.md-navigation-rail--horizontal) .md-navigation-rail__fab{flex:0 0 auto}:host(.md-navigation-rail--horizontal) .md-navigation-rail__footer{flex-direction:row;align-items:center;inline-size:auto;padding-block-start:0;padding-inline-start:var(--md-sys-spacing-inset-sm, 8px);margin-block-start:0;margin-inline-start:auto}:host(.md-navigation-rail--horizontal) ::slotted([data-section-header]){display:none}:host(.md-navigation-rail--submenu-open){isolation:auto;z-index:3}::slotted(md-navigation-rail-tab[data-overflowed]){display:none}.md-navigation-rail__overflow{position:relative;display:flex;flex:0 0 auto;justify-content:center}.md-navigation-rail__overflow-trigger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;inline-size:100%;min-block-size:max(40px, calc(56px + var(--md-sys-density-scale, 0) * 2px));padding:0 var(--md-sys-spacing-inset-sm, 8px);border:none;background:none;color:var(--_content-color);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.md-navigation-rail__overflow-trigger:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:-3px;border-radius:var(--md-sys-shape-corner-small, 8px)}.md-navigation-rail__overflow-icon{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));line-height:1}.md-navigation-rail__overflow-label{font:var(--md-sys-typescale-label-medium, 500 12px/16px Roboto, sans-serif);white-space:nowrap}:host(.md-navigation-rail--label-visibility-none) .md-navigation-rail__overflow-label{display:none}:host(.md-navigation-rail--horizontal) .md-navigation-rail__overflow-trigger{inline-size:auto;min-inline-size:var(--_container-width)}.md-navigation-rail__overflow md-menu-item .material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));line-height:1;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}::slotted(md-menu[slot='submenu']){position:absolute}`;const m=i(class i extends a{constructor(i){super();if(i!==false){this.__registerHost()}this.__attachShadow();this.mdTabChange=n(this,"mdTabChange",7);this.mdExpand=n(this,"mdExpand",7);this.mdCollapse=n(this,"mdCollapse",7);this.variant="standard";this.modal=false;this.fullHeight=false;this.alignment="top";this.expandable=false;this.toggleLabel="Toggle navigation";this.labelVisibility="all";this.activeIndex=-1;this.label="Navigation";this.disableFocusManagement=false;this.density=0;this.hasLogo=false;this.hasLogoExpanded=false;this.hasHeader=false;this.hasFab=false;this.hasFooter=false;this.hasLinkDestinations=false;this.overflowCount=0;this.submenuOpen=false;this.tabsExpanded=false;this.orientation="vertical";this.overflowLabel="More";this.overflowIcon="more_horiz";this.wiredMenus=new WeakSet;this.handleSlottedMenuOpen=()=>{this.submenuOpen=true};this.handleSlottedMenuClose=()=>{this.submenuOpen=this.anyMenuOpen()};this.overflowId=`md-rail-overflow-${Math.random().toString(36).slice(2,9)}`;this.toggleOverflow=()=>{const i=this.overflowMenu();if(!i)return;if(i.open)void i.close();else void i.show()};this.handleKeyDown=i=>{if(i.key==="Escape"&&this.modal&&this.variant==="expanded"){i.preventDefault();this.collapse();this.focusToggle();return}if(this.disableFocusManagement)return;const n=this.getTabs().filter((i=>!this.isTabDisabled(i)));if(n.length===0)return;const t=i.composedPath().find((i=>i instanceof a&&n.includes(i)));const e=t?n.indexOf(t):-1;let o=null;const s=this.orientation==="horizontal"&&this.resolveDirection()==="rtl";const r=i=>i==="ArrowDown"||(s?i==="ArrowLeft":i==="ArrowRight");const d=i=>i==="ArrowUp"||(s?i==="ArrowRight":i==="ArrowLeft");switch(true){case r(i.key):o=e<0?0:(e+1)%n.length;break;case d(i.key):o=e<0?n.length-1:(e-1+n.length)%n.length;break;case i.key==="Home":o=0;break;case i.key==="End":o=n.length-1;break;default:return}i.preventDefault();const l=n[o];if(!l)return;const c=this.getTabs();this.setRovingTabindex(c.indexOf(l));l.focus()};this.handleToggleClick=()=>{this.toggle()};this.handleScrimClick=()=>{if(this.modal&&this.variant==="expanded"){this.collapse();this.focusToggle()}};this.handleSlotChange=()=>{this.syncTabs()};this.handleLogoSlotChange=i=>{this.hasLogo=i.target.assignedElements().length>0};this.handleLogoExpandedSlotChange=i=>{this.hasLogoExpanded=i.target.assignedElements().length>0};this.handleHeaderSlotChange=i=>{this.hasHeader=i.target.assignedElements().length>0};this.handleFabSlotChange=i=>{this.hasFab=i.target.assignedElements().length>0;this.syncFab()};this.handleFooterSlotChange=i=>{this.hasFooter=i.target.assignedElements().length>0;this.wireSlottedMenus()}}async expand(){if(this.variant!=="expanded"){this.variant="expanded"}}async collapse(){if(this.variant!=="standard"){this.variant="standard"}}async toggle(){this.variant=this.variant==="expanded"?"standard":"expanded"}async focusTab(i){const a=this.getTabs();const n=a[i];if(n){this.setRovingTabindex(i);n.focus()}}componentWillLoad(){this.tabsExpanded=this.variant==="expanded";if(this.activeIndex<0){const i=Array.from(this.el.children).filter((i=>i.tagName.toLowerCase()==="md-navigation-rail-tab"));const a=i.findIndex((i=>i.hasAttribute("active")));if(a>=0)this.activeIndex=a}}componentDidLoad(){this.syncTabs();this.syncFab();this.wireSlottedMenus()}onVariantChange(i,a){if(i===a)return;if(i==="expanded")this.mdExpand.emit();else this.mdCollapse.emit();this.tabsExpanded=i==="expanded";this.syncTabs();this.syncFab()}syncFab(){const i=this.el.shadowRoot?.querySelector('slot[name="fab"]');i?.assignedElements().forEach((i=>{this.setProp(i,"extended",this.variant==="expanded")}))}onLabelVisibilityChange(){this.syncTabs()}onActiveIndexChange(){this.syncTabs()}handleTabClick(i){const a=i.target;if(!a)return;const n=this.getTabs();const t=n.indexOf(a);if(t<0)return;if(this.isTabDisabled(a)){i.stopPropagation();return}const e=t!==this.activeIndex;this.activeIndex=t;this.setRovingTabindex(t);this.clearOtherSubmenuSelections(a);if(e){this.mdTabChange.emit({index:t,value:i.detail?.value??""})}}clearOtherSubmenuSelections(i){this.getTabs().forEach((a=>{if(a===i)return;const n=a.clearSubmenuSelection;if(typeof n==="function")void n.call(a)}))}isTabDisabled(i){return i.hasAttribute("disabled")||i.getAttribute("aria-disabled")==="true"||i.hasAttribute("data-overflowed")}getTabs(){const i=this.el.shadowRoot?.querySelector("slot:not([name])");if(!i)return[];return i.assignedElements().filter((i=>i.tagName.toLowerCase()==="md-navigation-rail-tab"))}syncTabs(){const i=this.getTabs();this.hasLinkDestinations=i.some((i=>!!i.href||!!i.getAttribute("href")));i.forEach(((a,n)=>{const t=n===this.activeIndex;this.setProp(a,"active",t);this.setProp(a,"labelVisibility",this.labelVisibility);this.setProp(a,"expanded",this.tabsExpanded);a.setAttribute("data-orientation",this.orientation);if(!this.disableFocusManagement){const e=!this.isTabDisabled(a);const o=this.activeIndex>=0&&t||this.activeIndex<0&&n===i.findIndex((i=>!this.isTabDisabled(i)));a.tabIndex=e&&o?0:-1}}));this.applyOverflow()}setProp(i,a,n){try{i[a]=n}catch{}}setRovingTabindex(i){if(this.disableFocusManagement)return;const a=this.getTabs();a.forEach(((a,n)=>{a.tabIndex=n===i&&!this.isTabDisabled(a)?0:-1}))}resolveDirection(){let i=this.el;while(i){const a=i.getAttribute?.("dir");if(a==="rtl"||a==="ltr")return a;i=i.parentElement}return"ltr"}onDescendantSubmenuToggle(i){this.submenuOpen=i.detail?.open?true:this.anyMenuOpen()}wireSlottedMenus(){this.el.querySelectorAll("md-menu").forEach((i=>{if(this.wiredMenus.has(i))return;this.wiredMenus.add(i);i.addEventListener("mdOpen",this.handleSlottedMenuOpen);i.addEventListener("mdClose",this.handleSlottedMenuClose)}))}anyMenuOpen(){return Array.from(this.el.querySelectorAll("md-menu")).some((i=>i.open))}get overflowedTabs(){const i=this.maxVisible;const a=this.getTabs();if(!i||i<1||a.length<=i)return[];return a.slice(i)}applyOverflow(){const i=this.overflowedTabs;const a=new Set(i);this.getTabs().forEach((i=>{if(a.has(i))i.setAttribute("data-overflowed","");else i.removeAttribute("data-overflowed")}));this.overflowCount=i.length}onMaxVisibleChange(){this.applyOverflow()}overflowMenu(){return this.el.shadowRoot?.querySelector("md-menu")}selectOverflowed(i){const a=this.getTabs().indexOf(i);if(a<0)return;const n=a!==this.activeIndex;this.activeIndex=a;this.setRovingTabindex(a);this.clearOtherSubmenuSelections(i);if(n){this.mdTabChange.emit({index:a,value:i.getAttribute("value")??""})}void this.overflowMenu()?.close()}focusToggle(){const i=this.el.shadowRoot?.querySelector(".md-navigation-rail__toggle-button");i?.focus()}render(){return t(e,{key:"3d3929306bacef8acfbd8f686a4b7c3a0a1c7d04",class:{"md-navigation-rail":true,[`md-navigation-rail--${this.variant}`]:true,"md-navigation-rail--tabs-expanded":this.tabsExpanded,"md-navigation-rail--horizontal":this.orientation==="horizontal","md-navigation-rail--submenu-open":this.submenuOpen,"md-navigation-rail--modal":this.modal,"md-navigation-rail--full-height":this.fullHeight,[`md-navigation-rail--align-${this.alignment}`]:true,[`md-navigation-rail--labels-${this.labelVisibility}`]:true,"md-navigation-rail--with-logo":this.hasLogo||this.hasLogoExpanded,"md-navigation-rail--with-logo-expanded":this.hasLogoExpanded,"md-navigation-rail--with-header":this.hasHeader,"md-navigation-rail--with-fab":this.hasFab,"md-navigation-rail--with-footer":this.hasFooter},role:"navigation","aria-label":this.label,onKeyDown:this.handleKeyDown},t("div",{key:"c92433602e7747f3302be5769ebcd491b48fc6a7",class:"md-navigation-rail__scrim",part:"scrim","aria-hidden":"true",onClick:this.handleScrimClick}),t("div",{key:"d70f14a5d4c57e49ce91818919765204277fb2b1",class:"md-navigation-rail__container",part:"container"},t("div",{key:"59344703c915d15a79e44e8c6287db111b3cc1e5",class:"md-navigation-rail__logo",part:"logo",hidden:!this.hasLogo&&!this.hasLogoExpanded},t("span",{key:"e1d8cee7cccd8ed977c980f998d77faa544b8ea3",class:"md-navigation-rail__logo-contracted",part:"logo-contracted"},t("slot",{key:"c92ecdf05c7ae1faac015ccc2b77011607ec2400",name:"logo",onSlotchange:this.handleLogoSlotChange})),t("span",{key:"059d6e0eadec6398d1626ed44667231ad65d846c",class:"md-navigation-rail__logo-expanded",part:"logo-expanded"},t("slot",{key:"7bf0cf2e55ef500ab9d7f1689c44faffd35a907b",name:"logo-expanded",onSlotchange:this.handleLogoExpandedSlotChange}))),this.expandable&&this.orientation==="vertical"&&t("div",{key:"573b13d0e600e20286a1cb77a0243661d5995443",class:"md-navigation-rail__toggle",part:"toggle"},t("md-icon-button",{key:"64ace22b44d1da34bb84c7114ed5977d0c7597a0",class:"md-navigation-rail__toggle-button",icon:this.variant==="expanded"?"menu_open":"menu","aria-label":this.toggleLabel,"aria-expanded":this.variant==="expanded"?"true":"false",onClick:this.handleToggleClick})),t("div",{key:"dc3991334f2711aa0ca7a56b7c51a5302b22577a",class:"md-navigation-rail__header",part:"header",hidden:!this.hasHeader},t("slot",{key:"f4d839f52101b0c6d7fda026763c6fc16e1d065b",name:"header",onSlotchange:this.handleHeaderSlotChange})),t("div",{key:"fa32e9e3b98308e9cb2c94a53a9b804565833a44",class:"md-navigation-rail__fab",part:"fab",hidden:!this.hasFab},t("slot",{key:"58ec6681efb826b3aa5e88c4f8dd07607b0d0e17",name:"fab",onSlotchange:this.handleFabSlotChange})),t("div",{key:"47ad4dcc7900c2dcc5b686db218492b44d783cc9",class:"md-navigation-rail__destinations",part:"destinations",role:this.hasLinkDestinations?undefined:"tablist","aria-orientation":this.hasLinkDestinations?undefined:this.orientation,"aria-label":this.hasLinkDestinations?undefined:this.label},t("slot",{key:"c7e9b32b3285e15d1fd5898b2e75e6c588abf434",onSlotchange:this.handleSlotChange})),this.overflowCount>0&&t("div",{key:"d9918f2d696971906868c0410a3ff7fa13b108bf",class:"md-navigation-rail__overflow",part:"overflow"},t("button",{key:"16a274e2898cea6e9c912ada3b811ea32d2c4d5a",id:this.overflowId,type:"button",class:"md-navigation-rail__overflow-trigger",part:"overflow-trigger","aria-haspopup":"menu","aria-label":this.overflowLabel,onClick:this.toggleOverflow},t("span",{key:"b52e99255604616dca34eed531c8d8b738e0a183",class:"material-symbols-outlined md-navigation-rail__overflow-icon","aria-hidden":"true"},this.overflowIcon),t("span",{key:"29c312daad50206e6cde02edd1f3d20025465823",class:"md-navigation-rail__overflow-label"},this.overflowLabel)),t("md-menu",{key:"4aeb58bb954bd30673330f7c3a9aa4e9111f3330",anchor:this.overflowId,placement:this.orientation==="horizontal"?"bottom-end":"top-start"},this.overflowedTabs.map((i=>t("md-menu-item",{key:i.getAttribute("value")||i.getAttribute("label")||"",headline:i.getAttribute("label")||"",onClick:()=>this.selectOverflowed(i)},i.getAttribute("icon")&&t("span",{slot:"leading-icon",class:"material-symbols-outlined"},i.getAttribute("icon"))))))),t("div",{key:"4a5edb00ca0ed470ded1aebf24fd43ba44f5a400",class:"md-navigation-rail__footer",part:"footer",hidden:!this.hasFooter},t("slot",{key:"47ef388857f60eab7941467abad8461ee0349387",name:"footer",onSlotchange:this.handleFooterSlotChange}))))}get el(){return this}static get watchers(){return{variant:[{onVariantChange:0}],labelVisibility:[{onLabelVisibilityChange:0}],activeIndex:[{onActiveIndexChange:0}],maxVisible:[{onMaxVisibleChange:0}]}}static get style(){return c()}},[257,"md-navigation-rail",{variant:[1537],modal:[516],fullHeight:[516,"full-height"],alignment:[513],expandable:[516],toggleLabel:[1,"toggle-label"],labelVisibility:[513,"label-visibility"],activeIndex:[1538,"active-index"],label:[1],disableFocusManagement:[4,"disable-focus-management"],density:[514],orientation:[513],maxVisible:[2,"max-visible"],overflowLabel:[1,"overflow-label"],overflowIcon:[1,"overflow-icon"],hasLogo:[32],hasLogoExpanded:[32],hasHeader:[32],hasFab:[32],hasFooter:[32],hasLinkDestinations:[32],overflowCount:[32],submenuOpen:[32],tabsExpanded:[32],expand:[64],collapse:[64],toggle:[64],focusTab:[64]},[[0,"mdTabClick","handleTabClick"],[0,"mdSubmenuToggle","onDescendantSubmenuToggle"]],{variant:[{onVariantChange:0}],labelVisibility:[{onLabelVisibilityChange:0}],activeIndex:[{onActiveIndexChange:0}],maxVisible:[{onMaxVisibleChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const i=["md-navigation-rail","md-icon-button","md-menu","md-menu-item","md-ripple"];i.forEach((i=>{switch(i){case"md-navigation-rail":if(!customElements.get(o(i))){customElements.define(o(i),m)}break;case"md-icon-button":if(!customElements.get(o(i))){s()}break;case"md-menu":if(!customElements.get(o(i))){r()}break;case"md-menu-item":if(!customElements.get(o(i))){d()}break;case"md-ripple":if(!customElements.get(o(i))){l()}break}}))}h();const g=m;const v=h;export{g as MdNavigationRail,v as defineCustomElement};
+//# sourceMappingURL=md-navigation-rail.js.map

package/dist/components-csr/md-navigation-rail.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdNavigationRailCss","MdNavigationRail","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","modal","fullHeight","alignment","expandable","toggleLabel","labelVisibility","activeIndex","label","disableFocusManagement","density","hasLogo","hasLogoExpanded","hasHeader","hasFab","hasFooter","hasLinkDestinations","overflowCount","submenuOpen","tabsExpanded","orientation","overflowLabel","overflowIcon","wiredMenus","WeakSet","handleSlottedMenuOpen","handleSlottedMenuClose","anyMenuOpen","overflowId","Math","random","toString","slice","toggleOverflow","menu","overflowMenu","open","close","show","handleKeyDown","e","key","preventDefault","collapse","focusToggle","tabs","getTabs","filter","t","isTabDisabled","length","current","composedPath","find","node","includes","currentIndex","indexOf","nextIndex","rtl","resolveDirection","forward","backward","target","allTabs","setRovingTabindex","focus","handleToggleClick","toggle","handleScrimClick","handleSlotChange","syncTabs","handleLogoSlotChange","assignedElements","handleLogoExpandedSlotChange","handleHeaderSlotChange","handleFabSlotChange","syncFab","handleFooterSlotChange","wireSlottedMenus","expand","focusTab","index","componentWillLoad","Array","from","el","children","tagName","toLowerCase","marked","findIndex","hasAttribute","componentDidLoad","onVariantChange","newVal","oldVal","mdExpand","emit","mdCollapse","slot","shadowRoot","querySelector","forEach","setProp","onLabelVisibilityChange","onActiveIndexChange","handleTabClick","stopPropagation","changed","clearOtherSubmenuSelections","mdTabChange","value","detail","active","tab","clear","clearSubmenuSelection","call","getAttribute","some","href","i","setAttribute","focusable","isRoving","tabIndex","applyOverflow","dir","parentElement","onDescendantSubmenuToggle","querySelectorAll","has","add","addEventListener","overflowedTabs","cap","maxVisible","overflowed","set","Set","removeAttribute","onMaxVisibleChange","selectOverflowed","render","h","Host","class","role","onKeyDown","part","onClick","hidden","name","onSlotchange","icon","undefined","id","type","anchor","placement","map","headline"],"sources":["src/components/md-navigation-rail/md-navigation-rail.css?tag=md-navigation-rail&encapsulation=shadow","src/components/md-navigation-rail/md-navigation-rail.tsx"],"sourcesContent":["/* ==========================================================\n   md-navigation-rail — Material Design 3 Navigation Rail\n   Spec:\n     https://m3.material.io/components/navigation-rail/overview\n     https://m3.material.io/components/navigation-rail/specs\n     https://m3.material.io/components/navigation-rail/guidelines\n     https://m3.material.io/components/navigation-rail/accessibility\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-navigation-rail-container-color       Rail background\n     --md-navigation-rail-container-width       Width when collapsed (default 80px,\n                                                the spec's collapsed-rail maximum)\n     --md-navigation-rail-expanded-width        Width when expanded (default 220px,\n                                                spec minimum; spec maximum is 360px)\n     --md-navigation-rail-expanded-max-width    Expanded width cap (default 360px)\n     --md-navigation-rail-container-shape       Border-radius\n     --md-navigation-rail-container-elevation   Box-shadow when free-floating\n     --md-navigation-rail-padding-block         Top/bottom padding (default 44px top space)\n     --md-navigation-rail-padding-inline        Start/end padding\n     --md-navigation-rail-gap                   Gap between rail sections\n     --md-navigation-rail-header-space          Min space between header/FAB group and\n                                                destinations (default 40px per spec)\n     --md-navigation-rail-destinations-gap      Gap between destinations (default 4px)\n     --md-navigation-rail-content-color         Default foreground color\n     --md-navigation-rail-logo-icon-size        Brand glyph footprint in the logo\n                                                slots; centres the logo on the rail\n                                                axis (default 24px)\n\n   CSS PARTS:\n     container       The flex column wrapping every section\n     logo            Logo/brand slot wrapper (topmost)\n     header          Header slot wrapper (top group)\n     fab             FAB slot wrapper\n     destinations    The role=tablist that holds destinations\n     footer          Footer slot wrapper (bottom group)\n\n   SLOTS:\n     logo            Optional brand/logo at the very top\n     header          Optional top group (menu button, etc.)\n     fab             Optional FAB above the destinations\n     (default)       Destinations (md-navigation-rail-tab elements, 3-7 recommended)\n     footer          Optional bottom group — settings, account / user menu, etc.\n\n   KEYBOARD:\n     Tab / Arrows    Navigate between interactive elements\n     Space / Enter   Activate the focused element\n   ========================================================== */\n\n:host {\n  /* Public theming API → internal vars */\n  --_container-color: var(\n    --md-navigation-rail-container-color,\n    var(--md-sys-color-surface, #FFFBFE)\n  );\n  /* Spec: collapsed container = 80dp (the collapsed-rail maximum width). */\n  --_container-width: var(--md-navigation-rail-container-width, max(56px, calc(80px + var(--md-sys-density-scale, 0) * 4px)));\n  /* Spec: expanded container = 220dp minimum, 360dp maximum. */\n  --_expanded-width: var(--md-navigation-rail-expanded-width, max(140px, calc(220px + var(--md-sys-density-scale, 0) * 20px)));\n  --_expanded-max-width: var(--md-navigation-rail-expanded-max-width, 360px);\n  --_container-shape: var(--md-navigation-rail-container-shape, 0px);\n  --_container-elevation: var(--md-navigation-rail-container-elevation, none);\n  --_padding-block: var(--md-navigation-rail-padding-block, max(24px, calc(44px + var(--md-sys-density-scale, 0) * 4px)));\n  --_padding-inline: var(--md-navigation-rail-padding-inline, 0px);\n  --_gap: var(--md-navigation-rail-gap, var(--md-sys-spacing-gap-md, 12px));\n  --_header-space: var(--md-navigation-rail-header-space, max(20px, calc(40px + var(--md-sys-density-scale, 0) * 4px)));\n  --_destinations-gap: var(--md-navigation-rail-destinations-gap, max(0px, calc(8px + var(--md-sys-density-scale, 0) * 2px)));\n  --_content-color: var(\n    --md-navigation-rail-content-color,\n    var(--md-sys-color-on-surface-variant, #49454F)\n  );\n  /* Footprint of the brand glyph in the `logo`/`logo-expanded` slots. Used to\n     centre the logo on the rail's axis (x=40) so it stays pixel-stationary\n     across expand/collapse. Defaults to the 24dp destination-icon size; set it\n     to match a larger brand glyph. */\n  --_logo-icon-size: var(--md-navigation-rail-logo-icon-size, 24px);\n  /* Motion — the rail width expand/collapse size/position morph. Tuned to match\n     the snappy button shape-morph (short4 / standard easing) rather than the\n     slower, overshooting spatial spring: it now drives in quick and settles with\n     no bounce. The JS that times the per-tab icon glide reads the same duration\n     (see md-navigation-rail-tab `motionDuration()`) so they stay in lockstep.\n     Effects spring drives non-spatial changes (color) which must NOT overshoot. */\n  --_motion-duration: var(--md-sys-motion-duration-short4, 200ms);\n  --_motion-easing: var(\n    --md-sys-motion-easing-standard,\n    cubic-bezier(0.2, 0, 0, 1)\n  );\n  --_motion-effects-duration: var(--md-sys-motion-spring-effects-default-duration, 200ms);\n  --_motion-effects-easing: var(\n    --md-sys-motion-spring-effects-default-easing,\n    cubic-bezier(0.34, 0.8, 0.34, 1)\n  );\n\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n\n  inline-size: var(--_container-width);\n  /* Lock min/max to the collapsed width so they don't snap the element to its\n     final size at frame 0 — min-inline-size overrides inline-size and is not\n     interpolatable from `auto`, so without concrete values here the width\n     transition is defeated and the expand/collapse looks jittery. */\n  min-inline-size: var(--_container-width);\n  max-inline-size: var(--_container-width);\n  block-size: 100%;\n  min-block-size: 100%;\n\n  padding-block: var(--_padding-block);\n  padding-inline: var(--_padding-inline);\n\n  background-color: var(--_container-color);\n  color: var(--_content-color);\n  border-radius: var(--_container-shape);\n  box-shadow: var(--_container-elevation);\n\n  position: relative;\n  isolation: isolate;\n\n  transition:\n    inline-size var(--_motion-duration) var(--_motion-easing),\n    min-inline-size var(--_motion-duration) var(--_motion-easing),\n    max-inline-size var(--_motion-duration) var(--_motion-easing),\n    background-color var(--_motion-effects-duration) var(--_motion-effects-easing);\n\n  /* M3 typography baseline */\n  font-family: var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif);\n}\n\n/* ---------- Full-height (opt-in via `full-height`) ----------\n   Span the whole viewport instead of just the parent. `dvh` tracks the dynamic\n   viewport (mobile browser chrome show/hide); `vh` is the fallback for engines\n   without `dvh`. */\n:host(.md-navigation-rail--full-height) {\n  block-size: 100dvh;\n  min-block-size: 100dvh;\n}\n\n/* ---------- Expanded variant ---------- */\n:host(.md-navigation-rail--expanded) {\n  inline-size: var(--_expanded-width);\n  min-inline-size: var(--_expanded-width);\n  max-inline-size: var(--_expanded-max-width);\n  /* Leading inset for expanded content. Spec is 16dp, but we use 12dp so each\n     control's icon lands back on the rail's centre axis (x=40) — exactly where\n     it sits while collapsed — giving ZERO horizontal icon movement during the\n     expand/collapse spring. A 24dp icon centred in the 80dp collapsed rail is at\n     x=28; with this 12dp inset the expanded icons (toggle 12+8 button inset,\n     destinations 12+16 pill inset, etc.) also resolve to x=28. */\n  --_padding-inline: var(--md-sys-spacing-inset-md, 12px);\n}\n\n/* ---------- Modal variant ----------\n   Collapsed, the modal rail is identical to the standard rail: a docked 80dp\n   surface that sits IN the content (no elevation/floating). Expanded, it\n   becomes a modal overlay — it floats over the content with a scrim behind it,\n   per the M3 spec (surface-container color, level-2 elevation, large corner\n   shape). The overlay + scrim are positioned against the rail's nearest\n   positioned ancestor, so the rail's content area should be `position: relative`\n   (a full-page app rail is already relative to the viewport).\n\n   The collapsed 80dp footprint is preserved while expanded so the page content\n   does not reflow when the modal opens. */\n/* The host is always an 80dp spacer for the modal variant — its surface lives on\n   the container overlay below. Dropping the stacking context + positioning lets\n   the overlay/scrim resolve to the content container (which must be\n   `position: relative`), and keeps the page from reflowing when the modal\n   opens (the footprint never changes width). */\n:host(.md-navigation-rail--modal) {\n  position: static;\n  isolation: auto;\n  background-color: transparent;\n  box-shadow: none;\n  padding: 0;\n}\n\n/* Keep the footprint collapsed even when expanded (override the expanded width). */\n:host(.md-navigation-rail--modal.md-navigation-rail--expanded) {\n  --_container-color: var(\n    --md-navigation-rail-container-color,\n    var(--md-sys-color-surface-container, #F3EDF7)\n  );\n  --_container-shape: var(\n    --md-navigation-rail-container-shape,\n    var(--md-sys-shape-corner-large, 16px)\n  );\n  /* Detached overlay → level-3 elevation, matching the detached side sheet. */\n  --_container-elevation: var(\n    --md-navigation-rail-container-elevation,\n    var(--md-sys-elevation-3, 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15))\n  );\n\n  inline-size: var(--_container-width);\n  min-inline-size: var(--_container-width);\n  max-inline-size: var(--_container-width);\n}\n\n/* ---------- Scrim (modal backdrop) ---------- */\n.md-navigation-rail__scrim {\n  position: absolute;\n  inset: 0;\n  background-color: var(--md-sys-color-scrim, #000000);\n  opacity: 0;\n  pointer-events: none;\n  z-index: 2;\n  transition: opacity var(--_motion-duration) var(--_motion-easing);\n}\n\n:host(.md-navigation-rail--modal.md-navigation-rail--expanded) .md-navigation-rail__scrim {\n  opacity: 0.32;\n  pointer-events: auto;\n}\n\n/* ---------- Modal surface (always the overlay container) ----------\n   For the modal variant the container is always an absolutely-positioned,\n   full-height surface at the leading edge. Collapsed it is 80dp, square, no\n   elevation — visually a docked rail sitting over its own spacer. Expanded it\n   grows to the expanded width, gains elevation + a large trailing corner, and\n   the scrim fades in. Because only width/shadow/colour/radius change (never the\n   `position`), the open AND close animate symmetrically as one smooth motion —\n   the overlay grows from / shrinks back to the docked rail, like the standard\n   rail's own width spring. */\n:host(.md-navigation-rail--modal) .md-navigation-rail__container {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  box-sizing: border-box;\n  inline-size: var(--_container-width);\n  block-size: 100%;\n  padding-block: var(--_padding-block);\n  padding-inline: var(--_padding-inline);\n  background-color: var(--_container-color);\n  box-shadow: var(--_container-elevation);\n  border-start-end-radius: var(--_container-shape);\n  border-end-end-radius: var(--_container-shape);\n  z-index: 3;\n  /* The surface clips to its rounded shape; the destinations list scrolls\n     inside it (so the toggle / FAB / footer stay fixed). */\n  overflow: hidden;\n  /* Width/position/size transition on the spatial spring; colour & surface on\n     the effects spring. padding-inline is NOT transitioned (it snaps, like the\n     docked rail's host padding) — otherwise it animates while the inner\n     toggle/FAB paddings, which compensate it to net zero movement, snap, making\n     those elements drift back and forth. */\n  transition:\n    inline-size var(--_motion-duration) var(--_motion-easing),\n    inset-block-start var(--_motion-duration) var(--_motion-easing),\n    inset-inline-start var(--_motion-duration) var(--_motion-easing),\n    block-size var(--_motion-duration) var(--_motion-easing),\n    background-color var(--_motion-effects-duration) var(--_motion-effects-easing),\n    box-shadow var(--_motion-effects-duration) var(--_motion-effects-easing),\n    border-radius var(--_motion-effects-duration) var(--_motion-effects-easing);\n}\n\n:host(.md-navigation-rail--modal.md-navigation-rail--expanded) .md-navigation-rail__container {\n  inline-size: var(--_expanded-width);\n  max-inline-size: var(--_expanded-max-width);\n  /* Detached overlay — same exterior insets as the detached side sheet: 16dp\n     from every edge, all corners rounded, full elevation. (Collapsed, the\n     container is flush at the leading edge as a docked rail; this lifts it off\n     all edges as it opens.) */\n  inset-block-start: 16px;\n  inset-inline-start: 16px;\n  block-size: calc(100% - 32px);\n  border-radius: var(--_container-shape);\n}\n\n/* ---------- Container layout ---------- */\n.md-navigation-rail__container {\n  display: flex;\n  flex-direction: column;\n  block-size: 100%;\n  gap: var(--_gap);\n  inline-size: 100%;\n}\n\n/* ---------- Logo / brand (topmost slot) ----------\n   Two variants overlap and CROSS-FADE in place — neither moves during the\n   expand/collapse. `logo` (contracted) is centred and shown collapsed;\n   `logo-expanded` is leading and shown expanded. */\n.md-navigation-rail__logo {\n  position: relative;\n  inline-size: 100%;\n  min-block-size: 48px;\n}\n\n.md-navigation-rail__logo[hidden] {\n  display: none;\n}\n\n.md-navigation-rail__logo-contracted,\n.md-navigation-rail__logo-expanded {\n  position: absolute;\n  inset-block: 0;\n  /* Span the full leading area (inset both edges) so the expanded variant's\n     wordmark has room; the leading icon is anchored by padding, not centring. */\n  inset-inline-start: 0;\n  inset-inline-end: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  /* Anchor the leading glyph on the rail's centre axis (x=40 in the 80dp rail).\n     This padding is leading-edge based (NOT justify-content: center, which would\n     track the animating host width and drift). Identical in both states — the\n     expanded rule below cancels the host padding — so the logo NEVER moves. */\n  padding-inline-start: calc((var(--_container-width) - var(--_logo-icon-size)) / 2);\n  transition: opacity var(--_motion-effects-duration) var(--_motion-effects-easing);\n}\n\n/* Expanded: the in-flow logo wrapper is pushed right by the host's expanded\n   padding. Cancel exactly that, so the glyph stays on the same centre axis\n   (x=40) it holds while collapsed — zero horizontal movement. Both variants get\n   it, so the cross-fade happens perfectly in place. */\n:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-contracted,\n:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-expanded {\n  margin-inline-start: calc(-1 * var(--_padding-inline));\n}\n\n.md-navigation-rail__logo-contracted {\n  opacity: 1;\n}\n\n.md-navigation-rail__logo-expanded {\n  opacity: 0;\n  pointer-events: none;\n}\n\n:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-contracted {\n  opacity: 0;\n  pointer-events: none;\n}\n\n:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-expanded {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Fallback: no expanded variant supplied → keep the contracted logo visible\n   when expanded (don't blank out). */\n:host(.md-navigation-rail--expanded:not(.md-navigation-rail--with-logo-expanded))\n  .md-navigation-rail__logo-contracted {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ---------- Toggle (built-in menu button) ----------\n   Spec figure: the menu button is the topmost element of the rail. Centered\n   while collapsed, it shifts to the leading edge when expanded. */\n.md-navigation-rail__toggle {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  inline-size: 100%;\n  min-block-size: 48px;\n  /* Centred while collapsed (40px = sm md-icon-button footprint), leading when\n     expanded. Static padding — uses the CSS var, NOT the animated inline-size —\n     so the button never drifts during the spring transition. NOT transitioned on\n     purpose: gliding it reads as an in-place drift, the rail-width spring\n     carries the motion instead. */\n  padding-inline-start: calc((var(--_container-width) - 40px) / 2);\n}\n\n:host(.md-navigation-rail--expanded) .md-navigation-rail__toggle {\n  padding-inline-start: var(--md-sys-spacing-inset-sm, 8px);\n}\n\n/* ---------- Header (top group) ---------- */\n.md-navigation-rail__header {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  inline-size: 100%;\n  min-block-size: 56px;\n  padding-block-end: var(--md-sys-spacing-inset-xs, 4px);\n}\n\n:host(.md-navigation-rail--expanded) .md-navigation-rail__header {\n  align-items: flex-start;\n  padding-inline: var(--md-sys-spacing-inset-sm, 8px);\n}\n\n.md-navigation-rail__header[hidden] {\n  display: none;\n}\n\n/* ---------- FAB region ---------- */\n.md-navigation-rail__fab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 100%;\n  padding-block-end: var(--md-sys-spacing-inset-sm, 8px);\n}\n\n:host(.md-navigation-rail--expanded) .md-navigation-rail__fab {\n  justify-content: flex-start;\n  padding-inline-start: var(--md-sys-spacing-inset-md, 12px);\n}\n\n.md-navigation-rail__fab[hidden] {\n  display: none;\n}\n\n/* ---------- Destinations (tablist) ---------- */\n.md-navigation-rail__destinations {\n  display: flex;\n  flex-direction: column;\n  gap: var(--_destinations-gap);\n  inline-size: 100%;\n  flex: 1 1 auto;\n  min-block-size: 0;\n  /* Fill the height and scroll vertically when the destinations overflow.\n     overflow-x is `clip` (not hidden/auto) so the collapsed OUTSET focus ring —\n     which is centred within the 80dp width and never exceeds it — isn't clipped\n     horizontally, while the expanded ring is INSET (inside the pill). A small\n     block padding gives the first/last rings vertical room within the scroll\n     viewport. */\n  overflow-y: auto;\n  overflow-x: clip;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n  padding-block: 5px;\n}\n\n/* Spec: keep ≥40dp between the header/FAB group and the first destination.\n   The container already contributes --_gap; pad the difference. */\n:host(.md-navigation-rail--with-header) .md-navigation-rail__destinations,\n:host(.md-navigation-rail--with-fab) .md-navigation-rail__destinations {\n  padding-block-start: calc(var(--_header-space) - var(--_gap));\n}\n\n:host(.md-navigation-rail--align-top) .md-navigation-rail__destinations {\n  justify-content: flex-start;\n}\n\n:host(.md-navigation-rail--align-middle) .md-navigation-rail__destinations {\n  justify-content: center;\n}\n\n:host(.md-navigation-rail--align-bottom) .md-navigation-rail__destinations {\n  justify-content: flex-end;\n}\n\n/* ---------- Footer (bottom group) ---------- */\n.md-navigation-rail__footer {\n  display: flex;\n  flex-direction: column;\n  /* `stretch` lets a slotted tab fill the width and render exactly like the\n     destinations above (full-width pill collapsed, leading row expanded). A\n     slotted icon button is pinned separately below so it doesn't drift. */\n  align-items: stretch;\n  inline-size: 100%;\n  gap: var(--_destinations-gap);\n  padding-block-start: var(--md-sys-spacing-inset-sm, 8px);\n  margin-block-start: auto; /* push to bottom even with align=top */\n}\n\n/* A slotted icon button (e.g. the account / user-menu trigger) is centred in\n   the collapsed rail and pinned to the SAME leading offset as the toggle + logo\n   when expanded — so it never drifts as the rail width / host padding change.\n   Scoped to the footer + icon button so slotted tabs are left untouched. */\n/* Centred with `align-self`, NOT a margin. A margin here has to be written\n   through `::slotted()`, and document-tree rules out-rank `::slotted()` at any\n   specificity — so a consumer's `* { margin: 0 }` reset (Starlight, Tailwind\n   preflight, any normalise) silently pushed the button to the rail's leading\n   edge. `align-self` is not a margin, so the reset cannot reach it, and the\n   expanded offset moves to padding on the footer itself (a shadow element the\n   reset never matches). */\n.md-navigation-rail__footer ::slotted(md-icon-button) {\n  align-self: center;\n}\n\n:host(.md-navigation-rail--expanded) .md-navigation-rail__footer ::slotted(md-icon-button) {\n  align-self: flex-start;\n}\n\n:host(.md-navigation-rail--expanded) .md-navigation-rail__footer {\n  padding-inline-start: var(--md-sys-spacing-inset-sm, 8px);\n}\n\n.md-navigation-rail__footer[hidden] {\n  display: none;\n}\n\n/* ---------- Slotted descendants ----------\n   Each tab is pinned to its FINAL width for the current state (not 100% of the\n   animating rail), so its internal layout is static while the rail width\n   springs. That gives the per-tab FLIP morph a stable target to animate the\n   icon + label toward (see md-navigation-rail-tab). */\n::slotted(md-navigation-rail-tab) {\n  inline-size: var(--_container-width);\n}\n\n/* Expanded items hug their content (left-aligned pill per the spec's\n   \"Expanded layout\" figure) instead of stretching the full rail width. */\n:host(.md-navigation-rail--tabs-expanded) ::slotted(md-navigation-rail-tab) {\n  inline-size: fit-content;\n}\n\n::slotted(md-fab),\n::slotted(md-icon-button) {\n  flex: 0 0 auto;\n}\n\n/* The FAB sits ON the rail surface, not floating over content, so it's flat —\n   no elevation/shadow in any state. */\n::slotted(md-fab) {\n  box-shadow: none;\n}\n\n/* ---------- Section header ----------\n   A slotted label that groups destinations in the EXPANDED rail (mark it with\n   `data-section-header`). Hidden while collapsed — the icon-only rail has no\n   room for it. Spec spacing: 12dp above, 8dp below. */\n::slotted([data-section-header]) {\n  display: none;\n}\n\n:host(.md-navigation-rail--tabs-expanded) ::slotted([data-section-header]) {\n  display: block;\n  /* Don't let the flex column compress the header (which would clip its text). */\n  flex: 0 0 auto;\n  padding-block: var(--md-sys-spacing-inset-md, 12px) var(--md-sys-spacing-inset-sm, 8px);\n  padding-inline: var(--md-sys-spacing-inset-lg, 16px);\n  margin: 0;\n  color: var(--md-sys-color-on-surface-variant, #49454F);\n  font-family: var(--md-sys-typescale-title-small-font-family, Roboto, sans-serif);\n  font-size: var(--md-sys-typescale-title-small-font-size, 14px);\n  font-weight: var(--md-sys-typescale-title-small-font-weight, 500);\n  line-height: var(--md-sys-typescale-title-small-line-height, 20px);\n  letter-spacing: var(--md-sys-typescale-title-small-letter-spacing, 0.1px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ---------- Reduced motion ---------- */\n@media (prefers-reduced-motion: reduce) {\n  :host,\n  .md-navigation-rail__toggle,\n  .md-navigation-rail__fab,\n  .md-navigation-rail__scrim,\n  :host(.md-navigation-rail--modal) .md-navigation-rail__container {\n    transition: none;\n  }\n}\n\n/* ---------- Dark theme is fully covered by --md-sys-* tokens ---------- */\n:host([data-theme='dark']),\n:host-context([data-theme='dark']) {\n  --_container-color: var(\n    --md-navigation-rail-container-color,\n    var(--md-sys-color-surface, #1C1B1F)\n  );\n}\n\n/* ---------- Forced colors ---------- */\n@media (forced-colors: active) {\n  :host {\n    border-inline-end: 1px solid CanvasText;\n  }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n\n/* ==========================================================\n   HORIZONTAL ORIENTATION — a top-of-page bar\n   Same parts, rotated onto the inline axis: logo leading, destinations in a\n   row, FAB + footer trailing. Every block-axis offset in the column becomes\n   inline-axis here, and the destinations scroll sideways instead of vertically.\n   The expand affordance is not rendered in this mode, so no `--tabs-expanded`\n   rule applies.\n   ========================================================== */\n:host(.md-navigation-rail--horizontal) {\n  flex-direction: row;\n  inline-size: 100%;\n  min-inline-size: 0;\n  max-inline-size: none;\n  block-size: auto;\n  /* Bar height. Taller than a destination's own 56dp so the row has some weight\n     — and because the destination stretches to fill it, the ripple still sweeps\n     edge to edge. Density-aware, and overridable in one place. */\n  min-block-size: var(\n    --md-navigation-rail-horizontal-height,\n    max(64px, calc(72px + var(--md-sys-density-scale, 0) * 4px))\n  );\n  /* No block gutter by default so the ripple reaches the bar's edges; set\n     --md-navigation-rail-horizontal-padding-block for the inset look. */\n  padding-block: var(--md-navigation-rail-horizontal-padding-block, 0px);\n  padding-inline: var(--md-navigation-rail-horizontal-padding-inline, var(--md-sys-spacing-inset-md, 12px));\n}\n\n:host(.md-navigation-rail--horizontal) .md-navigation-rail__container {\n  flex-direction: row;\n  align-items: stretch;\n  block-size: auto;\n}\n\n:host(.md-navigation-rail--horizontal) .md-navigation-rail__destinations {\n  flex-direction: row;\n  /* stretch, not center: a destination's box IS the ripple's clip surface, so\n     it must span the bar or the wave stops short of the edges. */\n  align-items: stretch;\n  inline-size: auto;\n  min-inline-size: 0;\n  block-size: auto;\n  min-block-size: 0;\n  overflow-x: auto;\n  overflow-y: clip;\n  padding-block: 0;\n  padding-inline: 5px;\n  justify-content: center;\n}\n\n/* The vertical rail pads the FAB/header gap on the block axis; here it is inline. */\n:host(.md-navigation-rail--horizontal.md-navigation-rail--with-header) .md-navigation-rail__destinations,\n:host(.md-navigation-rail--horizontal.md-navigation-rail--with-fab) .md-navigation-rail__destinations {\n  padding-block-start: 0;\n  padding-inline-start: calc(var(--_header-space) - var(--_gap));\n}\n\n/* Destinations hug their content instead of filling the rail's fixed width. */\n:host(.md-navigation-rail--horizontal) ::slotted(md-navigation-rail-tab) {\n  inline-size: auto;\n  min-inline-size: var(--_container-width);\n  flex-shrink: 0;\n}\n\n:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo {\n  inline-size: auto;\n  min-block-size: 0;\n  flex: 0 0 auto;\n  /* The wrapper stretches to the bar's full height (the container aligns its\n     children `stretch` so a destination's ripple can reach both edges), but the\n     brand mark itself is content-height — without this it hangs off the top\n     instead of sitting on the same centre line as the destinations. */\n  display: flex;\n  align-items: center;\n}\n\n:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo-contracted,\n:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo-expanded {\n  position: static;\n  padding-inline: var(--md-sys-spacing-inset-sm, 8px);\n}\n\n:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo-expanded {\n  display: none;\n}\n\n:host(.md-navigation-rail--horizontal) .md-navigation-rail__fab {\n  flex: 0 0 auto;\n}\n\n/* The footer trails on the inline axis instead of the block end. */\n:host(.md-navigation-rail--horizontal) .md-navigation-rail__footer {\n  flex-direction: row;\n  align-items: center;\n  inline-size: auto;\n  padding-block-start: 0;\n  padding-inline-start: var(--md-sys-spacing-inset-sm, 8px);\n  margin-block-start: 0;\n  margin-inline-start: auto;\n}\n\n/* A section header groups a column; a bar has no room for it. */\n:host(.md-navigation-rail--horizontal) ::slotted([data-section-header]) {\n  display: none;\n}\n\n/* A destination may host a dropdown (`md-menu` in its `submenu` slot). That menu\n   is `position: fixed; z-index: 1000`, but `isolation: isolate` on this host\n   confines it to the rail's stacking context — so anything later in the document\n   (in the docs, the code panel under the demo) painted straight over it. Drop\n   the isolation while a dropdown is open; nothing inside the rail depends on it\n   except keeping the modal scrim local, and a modal rail has no open dropdown. */\n:host(.md-navigation-rail--submenu-open) {\n  isolation: auto;\n  z-index: 3;\n}\n\n/* ==========================================================\n   OVERFLOW — destinations past `max-visible`\n   The trigger is styled to read as one more destination, but it is a button\n   with aria-haspopup, never a tab: the destinations region is a `tablist`, and\n   a tablist may only contain tabs.\n   ========================================================== */\n::slotted(md-navigation-rail-tab[data-overflowed]) {\n  display: none;\n}\n\n.md-navigation-rail__overflow {\n  position: relative;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: center;\n}\n\n.md-navigation-rail__overflow-trigger {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  inline-size: 100%;\n  min-block-size: max(40px, calc(56px + var(--md-sys-density-scale, 0) * 2px));\n  padding: 0 var(--md-sys-spacing-inset-sm, 8px);\n  border: none;\n  background: none;\n  color: var(--_content-color);\n  font: inherit;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.md-navigation-rail__overflow-trigger:focus-visible {\n  outline: 3px solid var(--md-sys-color-secondary, #625B71);\n  outline-offset: -3px;\n  border-radius: var(--md-sys-shape-corner-small, 8px);\n}\n\n.md-navigation-rail__overflow-icon {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n  line-height: 1;\n}\n\n.md-navigation-rail__overflow-label {\n  font: var(--md-sys-typescale-label-medium, 500 12px/16px Roboto, sans-serif);\n  white-space: nowrap;\n}\n\n:host(.md-navigation-rail--label-visibility-none) .md-navigation-rail__overflow-label {\n  display: none;\n}\n\n/* In a bar the trigger sits inline with the destinations, not full width. */\n:host(.md-navigation-rail--horizontal) .md-navigation-rail__overflow-trigger {\n  inline-size: auto;\n  min-inline-size: var(--_container-width);\n}\n\n/* The overflow menu's item icons live INSIDE this shadow root, so the page's\n   global `.material-symbols-outlined` rule cannot reach them — the ligature\n   would render as the literal word (\"drafts\"). Style them here, where the rule\n   does apply. */\n.md-navigation-rail__overflow md-menu-item .material-symbols-outlined {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n  line-height: 1;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n\n/* A slotted submenu is a popup md-menu positions against its tab — it must not\n   take part in the rail's own layout. */\n::slotted(md-menu[slot='submenu']) {\n  position: absolute;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n  Watch,\n  Listen,\n  Method,\n} from '@stencil/core';\n\n/**\n * Material Design 3 — Navigation Rail\n *\n * A vertical navigation surface for the left or right edge of medium / large\n * window sizes. Holds 3–7 top-level destinations and optionally a header\n * (menu / brand), a FAB, and a footer.\n *\n * Implements MD3 specs:\n *   - https://m3.material.io/components/navigation-rail/overview\n *   - https://m3.material.io/components/navigation-rail/specs\n *   - https://m3.material.io/components/navigation-rail/guidelines\n *   - https://m3.material.io/components/navigation-rail/accessibility\n */\n@Component({\n  tag: 'md-navigation-rail',\n  styleUrl: 'md-navigation-rail.css',\n  shadow: true,\n})\nexport class MdNavigationRail {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Visual variant — `standard` (the spec's *collapsed* rail: 80dp wide,\n   * stacked icon + label) or `expanded` (icons + label inline, 220–360dp wide).\n   */\n  @Prop({ mutable: true, reflect: true }) variant: 'standard' | 'expanded' = 'standard';\n\n  /**\n   * Modal styling for the expanded variant per spec: `surface-container`\n   * background, level-2 elevation, large corner shape. Use when the expanded\n   * rail floats over content instead of being docked; positioning and the\n   * scrim are the host app's responsibility. No effect while collapsed.\n   */\n  @Prop({ reflect: true }) modal: boolean = false;\n\n  /**\n   * Stretch the rail to the full viewport height (`100dvh`) instead of filling\n   * its parent container. Opt-in: by default the rail fills whatever height its\n   * container gives it (`100%`), which keeps it embeddable in split-pane /\n   * nested / modal-docked layouts. Set this when the rail is the app's\n   * top-level side navigation and should always span the screen.\n   */\n  @Prop({ reflect: true, attribute: 'full-height' }) fullHeight: boolean = false;\n\n  /** Vertical alignment of destinations relative to the rail. */\n  @Prop({ reflect: true }) alignment: 'top' | 'middle' | 'bottom' = 'top';\n\n  /**\n   * Render a built-in leading menu button that toggles between the collapsed\n   * (`standard`) and `expanded` variants. The icon animates between `menu`\n   * (collapsed) and `menu_open` (expanded) per the MD3 navigation rail figure.\n   * When you'd rather supply your own control, leave this `false` and place a\n   * button in the `header` slot wired to the `expand()` / `collapse()` /\n   * `toggle()` methods.\n   */\n  @Prop({ reflect: true }) expandable: boolean = false;\n\n  /**\n   * Accessible label for the built-in toggle button (only rendered when\n   * `expandable` is set). Announced to assistive tech as the button's name.\n   */\n  @Prop({ attribute: 'toggle-label' }) toggleLabel: string = 'Toggle navigation';\n\n  /**\n   * Controls whether destination labels are shown.\n   *  - `all`: every destination shows its label (default — recommended by MD3 for 3–7 destinations)\n   *  - `selected`: only the active destination shows its label\n   *  - `none`: icons only\n   */\n  @Prop({ reflect: true, attribute: 'label-visibility' })\n  labelVisibility: 'all' | 'selected' | 'none' = 'all';\n\n  /**\n   * Index of the currently active destination. -1 means no destination is\n   * active. Two-way bound: updates when the user selects a destination and\n   * can be set externally to programmatically change the active destination.\n   */\n  @Prop({ mutable: true, reflect: true, attribute: 'active-index' })\n  activeIndex: number = -1;\n\n  /**\n   * Accessible name announced for the rail's `navigation` landmark.\n   * Required for screen reader users (WAI-ARIA APG / WCAG 2.4.1).\n   */\n  @Prop() label: string = 'Navigation';\n\n  /**\n   * Set to `true` to disable focus management (roving tabindex + arrow keys).\n   * Use when embedding inside a custom focus management system.\n   */\n  @Prop() disableFocusManagement: boolean = false;\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  /** Emitted when the user selects a destination. */\n  @Event() mdTabChange: EventEmitter<{ index: number; value: string }>;\n\n  /** Emitted when the rail transitions from collapsed → expanded. */\n  @Event() mdExpand: EventEmitter<void>;\n\n  /** Emitted when the rail transitions from expanded → collapsed. */\n  @Event() mdCollapse: EventEmitter<void>;\n\n  @State() private hasLogo = false;\n  @State() private hasLogoExpanded = false;\n  @State() private hasHeader = false;\n  @State() private hasFab = false;\n  @State() private hasFooter = false;\n\n  /**\n   * True when one or more destinations render as links (`href` set). A `tablist`\n   * may only contain `tab` children per ARIA, so when destinations are links the\n   * container drops its `tablist` semantics and is just a grouping element inside\n   * the `navigation` landmark.\n   */\n  @State() private hasLinkDestinations = false;\n  @State() private overflowCount = 0;\n  /** True while any destination's dropdown is open — lifts the rail's stacking\n   *  context so the fixed-position menu is not trapped inside it. */\n  @State() private submenuOpen = false;\n\n  /**\n   * Drives the *destination layout* (stacked vs. inline) independently of the\n   * rail's own width. On expand it flips with the width so labels reveal as the\n   * rail grows; on collapse it lingers in the inline layout until the width\n   * animation has finished, then drops to the stacked resting layout — keeping\n   * the label reveal/conceal in sync with the width instead of snapping.\n   */\n  @State() private tabsExpanded = false;\n\n  /** Programmatically expand the rail (shows labels inline with icons). */\n  @Method()\n  async expand(): Promise<void> {\n    if (this.variant !== 'expanded') {\n      this.variant = 'expanded';\n    }\n  }\n\n  /** Programmatically collapse the rail (standard 80dp width). */\n  @Method()\n  async collapse(): Promise<void> {\n    if (this.variant !== 'standard') {\n      this.variant = 'standard';\n    }\n  }\n\n  /** Toggle between expanded and standard. */\n  @Method()\n  async toggle(): Promise<void> {\n    this.variant = this.variant === 'expanded' ? 'standard' : 'expanded';\n  }\n\n  /** Move keyboard focus to the destination at `index`. */\n  @Method()\n  async focusTab(index: number): Promise<void> {\n    const tabs = this.getTabs();\n    const target = tabs[index];\n    if (target) {\n      this.setRovingTabindex(index);\n      target.focus();\n    }\n  }\n\n  componentWillLoad() {\n    this.tabsExpanded = this.variant === 'expanded';\n    // Adopt a pre-marked destination: authors can write `active` directly on a\n    // child tab instead of `active-index` on the rail. This MUST run before the\n    // first slotchange-driven syncTabs(), which (with activeIndex still -1)\n    // would clear the child's `active` attribute before we could read it. Read\n    // the light-DOM children directly since the shadow slot isn't assigned yet.\n    if (this.activeIndex < 0) {\n      const tabs = Array.from(this.el.children).filter(\n        (el) => el.tagName.toLowerCase() === 'md-navigation-rail-tab',\n      );\n      const marked = tabs.findIndex((t) => t.hasAttribute('active'));\n      if (marked >= 0) this.activeIndex = marked;\n    }\n  }\n\n  componentDidLoad() {\n    this.syncTabs();\n    this.syncFab();\n    this.wireSlottedMenus();\n  }\n\n  @Watch('variant')\n  onVariantChange(newVal: 'standard' | 'expanded', oldVal: 'standard' | 'expanded') {\n    if (newVal === oldVal) return;\n    if (newVal === 'expanded') this.mdExpand.emit();\n    else this.mdCollapse.emit();\n\n    // Switch the destination layout immediately in both directions (modal and\n    // standard alike). Each tab glides its icon + label to the new layout, the\n    // FAB morphs, and — for modal — the overlay container grows/shrinks and the\n    // scrim fades, all driven by CSS transitions on the same spring (see the\n    // modal section of the stylesheet). No JS deferral needed.\n    this.tabsExpanded = newVal === 'expanded';\n    this.syncTabs();\n    this.syncFab();\n  }\n\n  /**\n   * Mirror the rail's expanded state onto a slotted FAB's `extended` prop so it\n   * morphs between the extended (icon + label) and icon-only forms. No-op for\n   * slotted content that doesn't expose `extended`.\n   */\n  private syncFab() {\n    const slot = this.el.shadowRoot?.querySelector(\n      'slot[name=\"fab\"]',\n    ) as HTMLSlotElement | null;\n    slot?.assignedElements().forEach((el) => {\n      this.setProp(el as HTMLElement, 'extended', this.variant === 'expanded');\n    });\n  }\n\n  @Watch('labelVisibility')\n  onLabelVisibilityChange() {\n    this.syncTabs();\n  }\n\n  @Watch('activeIndex')\n  onActiveIndexChange() {\n    this.syncTabs();\n  }\n\n  @Listen('mdTabClick')\n  handleTabClick(e: CustomEvent<{ value: string }>) {\n    const target = e.target as HTMLElement | null;\n    if (!target) return;\n    const tabs = this.getTabs();\n    const index = tabs.indexOf(target);\n    if (index < 0) return;\n\n    if (this.isTabDisabled(target)) {\n      e.stopPropagation();\n      return;\n    }\n\n    // `mdTabClick` (from the tab) fires on every activation — including\n    // re-clicking the already-active destination (which replays the ripple).\n    // `mdTabChange` is the higher-level *selection changed* event, so only\n    // emit it when the active index actually moves.\n    const changed = index !== this.activeIndex;\n    this.activeIndex = index;\n    this.setRovingTabindex(index);\n    this.clearOtherSubmenuSelections(target);\n    if (changed) {\n      this.mdTabChange.emit({ index, value: e.detail?.value ?? '' });\n    }\n  }\n\n  /**\n   * A destination whose dropdown row is chosen wears the same pill as the\n   * active one, so a stale selection in *another* dropdown reads as a second\n   * active destination. Only one destination can be current, so activating any\n   * of them clears the rest.\n   */\n  private clearOtherSubmenuSelections(active: HTMLElement | null) {\n    this.getTabs().forEach((tab) => {\n      if (tab === active) return;\n      const clear = (tab as HTMLMdNavigationRailTabElement).clearSubmenuSelection;\n      if (typeof clear === 'function') void clear.call(tab);\n    });\n  }\n\n  private isTabDisabled(tab: HTMLElement): boolean {\n    // A destination collapsed into the overflow menu is no longer in the rail,\n    // so arrow keys must skip it exactly as they skip a disabled one.\n    return (\n      tab.hasAttribute('disabled') ||\n      tab.getAttribute('aria-disabled') === 'true' ||\n      tab.hasAttribute('data-overflowed')\n    );\n  }\n\n  private getTabs(): HTMLElement[] {\n    const slot = this.el.shadowRoot?.querySelector(\n      'slot:not([name])',\n    ) as HTMLSlotElement | null;\n    if (!slot) return [];\n    return slot\n      .assignedElements()\n      .filter((el) => el.tagName.toLowerCase() === 'md-navigation-rail-tab') as HTMLElement[];\n  }\n\n  private syncTabs() {\n    const tabs = this.getTabs();\n    // Detect link-style destinations so the container can shed its invalid\n    // `tablist` role (a tablist must only contain `tab` children).\n    this.hasLinkDestinations = tabs.some(\n      (tab) => !!(tab as HTMLElement & { href?: string }).href || !!tab.getAttribute('href'),\n    );\n    tabs.forEach((tab, i) => {\n      const active = i === this.activeIndex;\n      this.setProp(tab, 'active', active);\n      this.setProp(tab, 'labelVisibility', this.labelVisibility);\n      this.setProp(tab, 'expanded', this.tabsExpanded);\n      // The tab styles its own indicator, and shadow DOM keeps the rail out of\n      // it — so hand the axis down as an attribute it can key off.\n      tab.setAttribute('data-orientation', this.orientation);\n\n      if (!this.disableFocusManagement) {\n        const focusable = !this.isTabDisabled(tab);\n        const isRoving =\n          (this.activeIndex >= 0 && active) ||\n          (this.activeIndex < 0 && i === tabs.findIndex((t) => !this.isTabDisabled(t)));\n        tab.tabIndex = focusable && isRoving ? 0 : -1;\n      }\n    });\n\n    // Recompute the overflow set from every sync path, not just slotchange.\n    this.applyOverflow();\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private setProp(el: HTMLElement, key: string, value: any) {\n    try {\n      (el as any)[key] = value;\n    } catch {\n      /* property may not be defined yet */\n    }\n  }\n\n  private setRovingTabindex(index: number) {\n    if (this.disableFocusManagement) return;\n    const tabs = this.getTabs();\n    tabs.forEach((tab, i) => {\n      tab.tabIndex = i === index && !this.isTabDisabled(tab) ? 0 : -1;\n    });\n  }\n\n  /**\n   * Layout axis.\n   *\n   * - `vertical` (default) — the MD3 rail: a fixed-width column on the leading\n   *   edge.\n   * - `horizontal` — the same parts laid out as a top-of-page bar: logo\n   *   leading, destinations in a row, FAB and footer trailing. For wide layouts\n   *   where a side rail would spend width the content wants.\n   *\n   * The expand/collapse affordance is vertical-only — a bar has nowhere to grow\n   * — so `expandable` is ignored while horizontal.\n   */\n  @Prop({ reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Cap on how many destinations stay in the rail. Any beyond it collapse into\n   * an overflow trigger that opens a menu of the rest; choosing one activates\n   * that destination. Leave unset for no overflow.\n   *\n   * The trigger is a `button` with `aria-haspopup=\"menu\"`, deliberately OUTSIDE\n   * the `tablist` — a tablist may only contain tabs.\n   */\n  @Prop({ attribute: 'max-visible' }) maxVisible?: number;\n\n  /** Accessible name and label for the overflow trigger. Localize per page. */\n  @Prop({ attribute: 'overflow-label' }) overflowLabel: string = 'More';\n\n  /** Material Symbols ligature for the overflow trigger. */\n  @Prop({ attribute: 'overflow-icon' }) overflowIcon: string = 'more_horiz';\n\n  /** Nearest explicit `dir`, matching md-button-group / md-sub-menu-item. */\n  private resolveDirection(): 'ltr' | 'rtl' {\n    let node: HTMLElement | null = this.el;\n    while (node) {\n      const dir = node.getAttribute?.('dir');\n      if (dir === 'rtl' || dir === 'ltr') return dir;\n      node = node.parentElement;\n    }\n    return 'ltr';\n  }\n\n  // md-menu's own mdOpen/mdClose are non-bubbling and non-composed, so the rail\n  // listens for the destination's re-announcement instead.\n  @Listen('mdSubmenuToggle')\n  onDescendantSubmenuToggle(e: CustomEvent<{ open: boolean }>) {\n    this.submenuOpen = e.detail?.open ? true : this.anyMenuOpen();\n  }\n\n  /**\n   * A menu can also be slotted straight into the rail — an account avatar in\n   * the `footer` that opens a dropdown, say. That menu is not owned by a\n   * destination, so it never emits `mdSubmenuToggle`, and without this the\n   * rail keeps its `isolation: isolate` and the page paints straight over the\n   * open menu. Listening on the element itself is the only option: md-menu's\n   * own events are non-bubbling and non-composed.\n   */\n  private wiredMenus = new WeakSet<Element>();\n\n  private wireSlottedMenus() {\n    this.el.querySelectorAll('md-menu').forEach((menu) => {\n      if (this.wiredMenus.has(menu)) return;\n      this.wiredMenus.add(menu);\n      menu.addEventListener('mdOpen', this.handleSlottedMenuOpen);\n      menu.addEventListener('mdClose', this.handleSlottedMenuClose);\n    });\n  }\n\n  private handleSlottedMenuOpen = () => {\n    this.submenuOpen = true;\n  };\n\n  private handleSlottedMenuClose = () => {\n    this.submenuOpen = this.anyMenuOpen();\n  };\n\n  /**\n   * Read the `open` *property*, never the `[open]` attribute: reflection lands\n   * a tick after the menu emits `mdOpen`, so an attribute query run from that\n   * handler reports every menu closed and stamps the rail shut again.\n   */\n  private anyMenuOpen(): boolean {\n    return Array.from(this.el.querySelectorAll('md-menu')).some(\n      (menu) => (menu as HTMLMdMenuElement).open,\n    );\n  }\n\n  private overflowId = `md-rail-overflow-${Math.random().toString(36).slice(2, 9)}`;\n\n  /** Destinations pushed past `max-visible`, in author order. */\n  private get overflowedTabs(): HTMLElement[] {\n    const cap = this.maxVisible;\n    const tabs = this.getTabs();\n    if (!cap || cap < 1 || tabs.length <= cap) return [];\n    return tabs.slice(cap);\n  }\n\n  /** Mark the collapsed destinations so CSS hides them and nav skips them. */\n  private applyOverflow() {\n    const overflowed = this.overflowedTabs;\n    const set = new Set(overflowed);\n    this.getTabs().forEach((tab) => {\n      if (set.has(tab)) tab.setAttribute('data-overflowed', '');\n      else tab.removeAttribute('data-overflowed');\n    });\n    this.overflowCount = overflowed.length;\n  }\n\n  @Watch('maxVisible')\n  onMaxVisibleChange() {\n    this.applyOverflow();\n  }\n\n  private overflowMenu(): (HTMLElement & { show(): Promise<void>; close(): Promise<void>; open: boolean }) | null {\n    return this.el.shadowRoot?.querySelector('md-menu') as never;\n  }\n\n  private toggleOverflow = () => {\n    const menu = this.overflowMenu();\n    if (!menu) return;\n    if (menu.open) void menu.close();\n    else void menu.show();\n  };\n\n  private selectOverflowed(tab: HTMLElement) {\n    // NOT by re-dispatching mdTabClick: a collapsed destination reads as\n    // disabled (so arrow keys skip it), and handleTabClick drops clicks from\n    // disabled tabs. Drive the selection directly instead.\n    const index = this.getTabs().indexOf(tab);\n    if (index < 0) return;\n    const changed = index !== this.activeIndex;\n    this.activeIndex = index;\n    this.setRovingTabindex(index);\n    this.clearOtherSubmenuSelections(tab);\n    if (changed) {\n      this.mdTabChange.emit({ index, value: tab.getAttribute('value') ?? '' });\n    }\n    void this.overflowMenu()?.close();\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    // Escape dismisses the modal overlay (standard modal behaviour).\n    if (e.key === 'Escape' && this.modal && this.variant === 'expanded') {\n      e.preventDefault();\n      this.collapse();\n      this.focusToggle();\n      return;\n    }\n    if (this.disableFocusManagement) return;\n    const tabs = this.getTabs().filter((t) => !this.isTabDisabled(t));\n    if (tabs.length === 0) return;\n\n    const current = e.composedPath().find((node) => {\n      return node instanceof HTMLElement && tabs.includes(node);\n    }) as HTMLElement | undefined;\n    const currentIndex = current ? tabs.indexOf(current) : -1;\n\n    let nextIndex: number | null = null;\n\n    // A horizontal rail reads along the inline axis, so Left/Right must follow\n    // the writing direction — in RTL, ArrowRight moves toward the START.\n    const rtl = this.orientation === 'horizontal' && this.resolveDirection() === 'rtl';\n    const forward = (key: string) =>\n      key === 'ArrowDown' || (rtl ? key === 'ArrowLeft' : key === 'ArrowRight');\n    const backward = (key: string) =>\n      key === 'ArrowUp' || (rtl ? key === 'ArrowRight' : key === 'ArrowLeft');\n\n    switch (true) {\n      case forward(e.key):\n        nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % tabs.length;\n        break;\n      case backward(e.key):\n        nextIndex = currentIndex < 0 ? tabs.length - 1 : (currentIndex - 1 + tabs.length) % tabs.length;\n        break;\n      case e.key === 'Home':\n        nextIndex = 0;\n        break;\n      case e.key === 'End':\n        nextIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    e.preventDefault();\n    const target = tabs[nextIndex!];\n    if (!target) return;\n    const allTabs = this.getTabs();\n    this.setRovingTabindex(allTabs.indexOf(target));\n    target.focus();\n  };\n\n  private handleToggleClick = () => {\n    this.toggle();\n  };\n\n  /** Dismiss the modal overlay when its scrim is clicked. */\n  private handleScrimClick = () => {\n    if (this.modal && this.variant === 'expanded') {\n      this.collapse();\n      this.focusToggle();\n    }\n  };\n\n  /** Return focus to the built-in toggle after a modal dismiss (a11y). */\n  private focusToggle() {\n    const toggle = this.el.shadowRoot?.querySelector(\n      '.md-navigation-rail__toggle-button',\n    ) as HTMLElement | null;\n    toggle?.focus();\n  }\n\n  private handleSlotChange = () => {\n    this.syncTabs();\n  };\n\n  private handleLogoSlotChange = (e: Event) => {\n    this.hasLogo = (e.target as HTMLSlotElement).assignedElements().length > 0;\n  };\n\n  private handleLogoExpandedSlotChange = (e: Event) => {\n    this.hasLogoExpanded = (e.target as HTMLSlotElement).assignedElements().length > 0;\n  };\n\n  private handleHeaderSlotChange = (e: Event) => {\n    this.hasHeader = (e.target as HTMLSlotElement).assignedElements().length > 0;\n  };\n\n  private handleFabSlotChange = (e: Event) => {\n    this.hasFab = (e.target as HTMLSlotElement).assignedElements().length > 0;\n    this.syncFab();\n  };\n\n  private handleFooterSlotChange = (e: Event) => {\n    this.hasFooter = (e.target as HTMLSlotElement).assignedElements().length > 0;\n    this.wireSlottedMenus();\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          'md-navigation-rail': true,\n          [`md-navigation-rail--${this.variant}`]: true,\n          'md-navigation-rail--tabs-expanded': this.tabsExpanded,\n          'md-navigation-rail--horizontal': this.orientation === 'horizontal',\n          'md-navigation-rail--submenu-open': this.submenuOpen,\n          'md-navigation-rail--modal': this.modal,\n          'md-navigation-rail--full-height': this.fullHeight,\n          [`md-navigation-rail--align-${this.alignment}`]: true,\n          [`md-navigation-rail--labels-${this.labelVisibility}`]: true,\n          'md-navigation-rail--with-logo': this.hasLogo || this.hasLogoExpanded,\n          'md-navigation-rail--with-logo-expanded': this.hasLogoExpanded,\n          'md-navigation-rail--with-header': this.hasHeader,\n          'md-navigation-rail--with-fab': this.hasFab,\n          'md-navigation-rail--with-footer': this.hasFooter,\n        }}\n        role=\"navigation\"\n        aria-label={this.label}\n        onKeyDown={this.handleKeyDown}\n      >\n        {/* Scrim — only interactive/visible when the rail is a modal overlay\n            (modal + expanded). Clicking it collapses the rail. */}\n        <div\n          class=\"md-navigation-rail__scrim\"\n          part=\"scrim\"\n          aria-hidden=\"true\"\n          onClick={this.handleScrimClick}\n        ></div>\n\n        <div class=\"md-navigation-rail__container\" part=\"container\">\n          {/* Logo / brand — topmost slot. Two variants cross-fade IN PLACE (no\n              drift): `logo` is the contracted mark (centred, shown collapsed),\n              `logo-expanded` is the full mark (leading, shown expanded). If only\n              `logo` is provided it shows in both states. */}\n          <div\n            class=\"md-navigation-rail__logo\"\n            part=\"logo\"\n            hidden={!this.hasLogo && !this.hasLogoExpanded}\n          >\n            <span class=\"md-navigation-rail__logo-contracted\" part=\"logo-contracted\">\n              <slot name=\"logo\" onSlotchange={this.handleLogoSlotChange} />\n            </span>\n            <span class=\"md-navigation-rail__logo-expanded\" part=\"logo-expanded\">\n              <slot name=\"logo-expanded\" onSlotchange={this.handleLogoExpandedSlotChange} />\n            </span>\n          </div>\n\n          {this.expandable && this.orientation === 'vertical' && (\n            <div class=\"md-navigation-rail__toggle\" part=\"toggle\">\n              <md-icon-button\n                class=\"md-navigation-rail__toggle-button\"\n                icon={this.variant === 'expanded' ? 'menu_open' : 'menu'}\n                aria-label={this.toggleLabel}\n                aria-expanded={this.variant === 'expanded' ? 'true' : 'false'}\n                onClick={this.handleToggleClick}\n              ></md-icon-button>\n            </div>\n          )}\n\n          <div class=\"md-navigation-rail__header\" part=\"header\" hidden={!this.hasHeader}>\n            <slot name=\"header\" onSlotchange={this.handleHeaderSlotChange} />\n          </div>\n\n          <div class=\"md-navigation-rail__fab\" part=\"fab\" hidden={!this.hasFab}>\n            <slot name=\"fab\" onSlotchange={this.handleFabSlotChange} />\n          </div>\n\n          <div\n            class=\"md-navigation-rail__destinations\"\n            part=\"destinations\"\n            role={this.hasLinkDestinations ? undefined : 'tablist'}\n            aria-orientation={this.hasLinkDestinations ? undefined : this.orientation}\n            aria-label={this.hasLinkDestinations ? undefined : this.label}\n          >\n            <slot onSlotchange={this.handleSlotChange} />\n          </div>\n\n          {this.overflowCount > 0 && (\n            <div class=\"md-navigation-rail__overflow\" part=\"overflow\">\n              <button\n                id={this.overflowId}\n                type=\"button\"\n                class=\"md-navigation-rail__overflow-trigger\"\n                part=\"overflow-trigger\"\n                aria-haspopup=\"menu\"\n                aria-label={this.overflowLabel}\n                onClick={this.toggleOverflow}\n              >\n                <span class=\"material-symbols-outlined md-navigation-rail__overflow-icon\" aria-hidden=\"true\">\n                  {this.overflowIcon}\n                </span>\n                <span class=\"md-navigation-rail__overflow-label\">{this.overflowLabel}</span>\n              </button>\n              {/* md-menu resolves `anchor` against its own root first, so an id\n                  inside this shadow root is enough. */}\n              {/* The trigger sits at the END of the destinations, so a vertical\n                  rail opens UPWARD — downward would run off the bottom of a\n                  bounded rail and be clipped. */}\n              <md-menu\n                anchor={this.overflowId}\n                placement={this.orientation === 'horizontal' ? 'bottom-end' : 'top-start'}\n              >\n                {this.overflowedTabs.map((tab) => (\n                  <md-menu-item\n                    key={tab.getAttribute('value') || tab.getAttribute('label') || ''}\n                    headline={tab.getAttribute('label') || ''}\n                    onClick={() => this.selectOverflowed(tab)}\n                  >\n                    {tab.getAttribute('icon') && (\n                      <span slot=\"leading-icon\" class=\"material-symbols-outlined\">\n                        {tab.getAttribute('icon')}\n                      </span>\n                    )}\n                  </md-menu-item>\n                ))}\n              </md-menu>\n            </div>\n          )}\n\n          <div class=\"md-navigation-rail__footer\" part=\"footer\" hidden={!this.hasFooter}>\n            <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components-csr/md-navigation-tab.js

@@ -0,0 +1,2 @@
+import{p as a,H as i,c as t,h as e,d as n,t as o}from"./p-bSpXNc5J.js";import{t as s}from"./p-DYBUr7K_.js";import{s as r,a as l}from"./p-BdEoSBtL.js";import{d}from"./p-C3vB0Hd9.js";const c=()=>`:host{--_indicator-color:var(     --md-navigation-tab-active-indicator-color,     var(--md-sys-color-secondary-container, #E8DEF8)   );--_indicator-w:var(--md-navigation-tab-active-indicator-width, max(40px, calc(56px + var(--md-sys-density-scale, 0) * 4px)));--_indicator-h:var(--md-navigation-tab-active-indicator-height, max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));--_indicator-shape:var(     --md-navigation-tab-active-indicator-shape,     var(--md-sys-shape-corner-full, 9999px)   );--_active-icon-color:var(     --md-navigation-tab-active-icon-color,     var(--md-sys-color-on-secondary-container, #1E192B)   );--_inactive-icon-color:var(     --md-navigation-tab-inactive-icon-color,     var(--md-sys-color-on-surface-variant, #49454F)   );--_active-label-color:var(     --md-navigation-tab-active-label-color,     var(--md-sys-color-on-surface, #1C1B1F)   );--_inactive-label-color:var(     --md-navigation-tab-inactive-label-color,     var(--md-sys-color-on-surface-variant, #49454F)   );--_icon-size:var(--md-navigation-tab-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));--_pad-top:var(--md-navigation-tab-padding-block-start, calc(5px + var(--md-sys-density-scale, 0) * 1px));--_pad-bottom:var(--md-navigation-tab-padding-block-end, calc(5px + var(--md-sys-density-scale, 0) * 1px));--_hover-color:var(     --md-navigation-tab-hover-state-layer-color,     var(--md-sys-color-on-surface, #1C1B1F)   );--_focus-color:var(     --md-navigation-tab-focus-state-layer-color,     var(--md-sys-color-on-surface, #1C1B1F)   );--_pressed-color:var(     --md-navigation-tab-pressed-state-layer-color,     var(--md-sys-color-on-surface, #1C1B1F)   );--_badge-color:var(     --md-navigation-tab-badge-color,     var(--md-sys-color-error, #B3261E)   );--_badge-on-color:var(     --md-navigation-tab-badge-on-color,     var(--md-sys-color-on-error, #FFFFFF)   );--_disabled-opacity:var(--md-navigation-tab-disabled-opacity, 0.38);--_label-font:var(     --md-navigation-tab-label-font,     var(--md-sys-typescale-label-medium-font, 500 12px/16px Roboto, sans-serif)   );--_label-size:var(--md-navigation-tab-label-font-size, max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px)));--_label-weight-active:var(--md-navigation-tab-label-font-weight, 600);--_motion-duration:var(--md-sys-motion-duration-short4, 200ms);--_motion-easing:var(     --md-sys-motion-easing-emphasized-decelerate,     cubic-bezier(0.05, 0.7, 0.1, 1)   );display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;inline-size:100%;min-inline-size:48px;block-size:100%;padding-block:var(--_pad-top) var(--_pad-bottom);box-sizing:border-box;cursor:pointer;position:relative;outline:none;user-select:none;-webkit-tap-highlight-color:transparent;color:var(--_inactive-icon-color);transition:color var(--_motion-duration) var(--_motion-easing)}:host(.md-navigation-tab--active){color:var(--_active-icon-color)}:host(.md-navigation-tab--disabled),:host(.md-navigation-tab--soft-disabled){cursor:not-allowed;opacity:var(--_disabled-opacity)}:host(.md-navigation-tab--disabled){pointer-events:none}.md-navigation-tab__state-layer{position:absolute;inset:0;background-color:currentColor;opacity:0;border-radius:inherit;pointer-events:none;transition:opacity var(--md-sys-motion-duration-short2, 100ms) ease}:host(:hover:not(.md-navigation-tab--disabled):not(.md-navigation-tab--soft-disabled)) .md-navigation-tab__state-layer{background-color:var(--_hover-color);opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}:host(:active:not(.md-navigation-tab--disabled):not(.md-navigation-tab--soft-disabled)) .md-navigation-tab__state-layer{background-color:var(--_pressed-color);opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}:host(:focus-visible:not(.md-navigation-tab--disabled)) .md-navigation-tab__state-layer{background-color:var(--_focus-color);opacity:var(--md-navigation-tab-focus-state-layer-opacity, 0.1)}:host(:focus-visible:not(.md-navigation-tab--disabled)) .md-navigation-tab__icon-container::after{content:'';position:absolute;inset:-4px;border:3px solid var(--md-sys-color-secondary, #625B71);border-radius:var(--_indicator-shape, 9999px);box-sizing:border-box;pointer-events:none}.md-navigation-tab__container{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:max(2px, calc(6px + var(--md-sys-density-scale, 0) * 1px));inline-size:100%;pointer-events:none;}.md-navigation-tab__indicator{position:absolute;inset-block-start:0;inline-size:var(--_indicator-w);block-size:var(--_indicator-h);border-radius:var(--_indicator-shape);background-color:var(--_indicator-color);transform:scale(0, 1);transform-origin:center center;opacity:0;transition:transform var(--_motion-duration) var(--_motion-easing),     opacity var(--md-sys-motion-duration-short2, 100ms) ease;pointer-events:none}.md-navigation-tab__indicator--active{transform:scale(1, 1);opacity:1}.md-navigation-tab__icon-container{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_indicator-w);block-size:var(--_indicator-h);pointer-events:none}.md-navigation-tab__icon{position:relative;display:inline-flex;align-items:center;justify-content:center;font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size);line-height:1;color:inherit;z-index:1;transition:font-variation-settings var(--md-sys-motion-duration-short2, 100ms) ease}.md-navigation-tab__icon ::slotted(*){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_icon-size);block-size:var(--_icon-size);font-size:var(--_icon-size);line-height:1;font-family:var(--md-navigation-tab-slotted-icon-font, system-ui, sans-serif);color:inherit;object-fit:contain}.md-navigation-tab__icon--filled{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24}.material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons'), sans-serif;font-weight:normal;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}.md-navigation-tab__badge{position:absolute;z-index:2;background-color:var(--_badge-color);color:var(--_badge-on-color);border-radius:var(--md-sys-shape-corner-full, 9999px);box-sizing:border-box;pointer-events:none;display:inline-flex;align-items:center;justify-content:center}.md-navigation-tab__badge--small{inset-block-start:2px;inset-inline-end:14px;inline-size:6px;block-size:6px}.md-navigation-tab__badge--large{inset-block-start:-2px;inset-inline-start:50%;margin-inline-start:4px;min-inline-size:16px;block-size:16px;padding-inline:4px;font:var(     --md-sys-typescale-label-small-font,     500 11px/16px Roboto, sans-serif   );letter-spacing:var(     --md-sys-typescale-label-small-letter-spacing,     0.5px   )}.md-navigation-tab__label{font:var(--_label-font);font-size:var(--_label-size);letter-spacing:var(     --md-sys-typescale-label-medium-letter-spacing,     0.5px   );color:var(--_inactive-label-color);max-inline-size:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;pointer-events:none;transition:color var(--md-sys-motion-duration-short2, 100ms) ease,     opacity var(--md-sys-motion-duration-short2, 100ms) ease}:host(.md-navigation-tab--active) .md-navigation-tab__label{color:var(--_active-label-color);font-weight:var(--_label-weight-active)}.md-navigation-tab__label--hidden{opacity:0;visibility:hidden}:host(.md-navigation-tab--label-hidden){--_pad-top:var(--md-sys-spacing-inset-lg, 16px);--_pad-bottom:var(--md-sys-spacing-inset-lg, 16px);justify-content:center}:host(.md-navigation-tab--label-hidden) .md-navigation-tab__container{justify-content:center}@media (forced-colors: active){:host{--_indicator-color:Highlight;--_active-icon-color:HighlightText;--_active-label-color:HighlightText;--_inactive-icon-color:ButtonText;--_inactive-label-color:ButtonText}:host(:focus-visible:not(.md-navigation-tab--disabled)){outline:2px solid CanvasText}}@media (prefers-reduced-motion: reduce){:host,.md-navigation-tab__state-layer,.md-navigation-tab__indicator,.md-navigation-tab__icon,.md-navigation-tab__label{transition:none !important}}: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}`;const b=a(class a extends i{constructor(a){super();if(a!==false){this.__registerHost()}this.__attachShadow();this.mdTabClick=t(this,"mdTabClick",7);this.active=false;this.disabled=false;this.softDisabled=false;this.label="";this.icon="";this.activeIcon="";this.badge=false;this.badgeValue="";this.badgeMax=999;this.href="";this.target="";this.labelBehavior="always";this.density=0;this.focusVisible=false;this.handleClick=a=>{if(this.interactionDisabled){a.preventDefault();a.stopPropagation();return}if(a.defaultPrevented)return;this.emitActivation();this.maybeFollowHref()};this.handleKeyDown=a=>{if(this.interactionDisabled)return;if(a.key==="Enter"||a.key===" "||a.key==="Spacebar"){a.preventDefault();s(this.el);this.el.click()}};this.handleFocus=()=>{this.focusVisible=this.el.matches(":focus-visible")};this.handleBlur=()=>{this.focusVisible=false}}onActiveChange(a){this.el.setAttribute("aria-selected",String(a))}onDisabledChange(){this.syncAriaDisabled()}onSoftDisabledChange(){this.syncAriaDisabled()}get interactionDisabled(){return this.disabled||this.softDisabled}syncAriaDisabled(){this.el.setAttribute("aria-disabled",String(this.interactionDisabled))}connectedCallback(){if(!this.el.hasAttribute("role"))this.el.setAttribute("role","tab");this.el.setAttribute("aria-selected",String(this.active));if(this.interactionDisabled)this.el.setAttribute("aria-disabled","true");if(!this.el.hasAttribute("tabindex")){this.el.setAttribute("tabindex",this.active?"0":"-1")}}async focusEl(){if(this.disabled)return;this.el.focus()}resolveIndex(){const a=this.el.parentElement;if(!a)return-1;const i=[];for(const t of Array.from(a.children)){if(t.tagName==="MD-NAVIGATION-TAB"){i.push(t)}}return i.indexOf(this.el)}emitActivation(){const a=this.resolveIndex();this.mdTabClick.emit({index:a})}maybeFollowHref(){const a=r(this.href);if(!a)return;if(typeof window==="undefined")return;if(this.target==="_blank"){window.open(a,"_blank",l)}else if(this.target){window.open(a,this.target,l)}else{window.location.assign(a)}}resolveLabelVisibility(){return this.labelBehavior}formatBadgeValue(){const a=(this.badgeValue??"").trim();if(!a)return"";if(this.badgeMax>0){const i=Number(a);if(!Number.isNaN(i)&&Number.isFinite(i)&&i>this.badgeMax){return`${this.badgeMax}+`}}return a}renderIcon(){const a=this.active&&(this.activeIcon||this.icon);const i=this.active;const t=a?this.activeIcon||this.icon:this.icon;return e("span",{class:"md-navigation-tab__icon-container",part:"icon-container"},e("span",{class:{"md-navigation-tab__icon":true,"material-symbols-outlined":true,"md-navigation-tab__icon--filled":i},part:"icon","aria-hidden":"true"},this.active?e("slot",{name:"active-icon"},t):e("slot",{name:"icon"},t)),this.renderBadge())}renderBadge(){if(!this.badge&&!this.badgeValue)return null;const a=this.formatBadgeValue();const i=a.length>0;return e("span",{class:{"md-navigation-tab__badge":true,"md-navigation-tab__badge--small":!i,"md-navigation-tab__badge--large":i},part:"badge",role:"status","aria-label":i?`${a} new`:"New"},i?a:"")}renderLabel(){const a=this.resolveLabelVisibility();if(a==="none")return null;return e("span",{class:{"md-navigation-tab__label":true,"md-navigation-tab__label--hidden":a==="selected"&&!this.active},part:"label"},e("slot",null,this.label))}render(){const a=this.label||undefined;const i=this.resolveLabelVisibility();const t=i==="none"?a:undefined;return e(n,{key:"1e813ec1dff85462d7936f43f4cb6b8063b21a9d",class:{"md-navigation-tab":true,"md-navigation-tab--active":this.active,"md-navigation-tab--disabled":this.disabled,"md-navigation-tab--soft-disabled":this.softDisabled&&!this.disabled,"md-navigation-tab--label-hidden":i==="none"},"aria-label":t,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur},e("md-ripple",{key:"e82500d6252f6396ab2df765552c3d7f99d03ef6",disabled:this.interactionDisabled}),e("span",{key:"e8a2a889a6cabfaea71d8867ebba3596a5c71936",class:"md-navigation-tab__state-layer",part:"state-layer","aria-hidden":"true","data-focus-visible":this.focusVisible?"true":null}),e("span",{key:"823780d7fc34e8527e8c83604d9659e1299427a3",class:"md-navigation-tab__container",part:"container"},e("span",{key:"a86bd4d59cf9597e971a3a72faa35d9313d61d45",class:{"md-navigation-tab__indicator":true,"md-navigation-tab__indicator--active":this.active},part:"indicator","aria-hidden":"true"}),this.renderIcon(),this.renderLabel()))}get el(){return this}static get watchers(){return{active:[{onActiveChange:0}],disabled:[{onDisabledChange:0}],softDisabled:[{onSoftDisabledChange:0}]}}static get style(){return c()}},[257,"md-navigation-tab",{active:[1540],disabled:[516],softDisabled:[516,"soft-disabled"],label:[1],icon:[1],activeIcon:[1,"active-icon"],badge:[516],badgeValue:[1,"badge-value"],badgeMax:[2,"badge-max"],href:[1],target:[1],labelBehavior:[1025,"label-behavior"],density:[514],focusVisible:[32],focusEl:[64]},undefined,{active:[{onActiveChange:0}],disabled:[{onDisabledChange:0}],softDisabled:[{onSoftDisabledChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const a=["md-navigation-tab","md-ripple"];a.forEach((a=>{switch(a){case"md-navigation-tab":if(!customElements.get(o(a))){customElements.define(o(a),b)}break;case"md-ripple":if(!customElements.get(o(a))){d()}break}}))}v();const m=b;const h=v;export{m as MdNavigationTab,h as defineCustomElement};
+//# sourceMappingURL=md-navigation-tab.js.map

package/dist/components-csr/md-navigation-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdNavigationTabCss","MdNavigationTab","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","active","disabled","softDisabled","label","icon","activeIcon","badge","badgeValue","badgeMax","href","target","labelBehavior","density","focusVisible","handleClick","e","interactionDisabled","preventDefault","stopPropagation","defaultPrevented","emitActivation","maybeFollowHref","handleKeyDown","key","triggerRipple","el","click","handleFocus","matches","handleBlur","onActiveChange","setAttribute","String","onDisabledChange","syncAriaDisabled","onSoftDisabledChange","connectedCallback","hasAttribute","focusEl","focus","resolveIndex","parent","parentElement","siblings","child","Array","from","children","tagName","push","indexOf","index","mdTabClick","emit","sanitizeHref","window","open","SAFE_WINDOW_FEATURES","location","assign","resolveLabelVisibility","formatBadgeValue","raw","trim","num","Number","isNaN","isFinite","renderIcon","useActive","filled","glyph","h","class","part","name","renderBadge","value","isLarge","length","role","renderLabel","visibility","render","accessibleLabel","undefined","ariaLabel","Host","onClick","onKeyDown","onFocus","onBlur"],"sources":["src/components/md-navigation-tab/md-navigation-tab.css?tag=md-navigation-tab&encapsulation=shadow","src/components/md-navigation-tab/md-navigation-tab.tsx"],"sourcesContent":["/* ==========================================================\n   md-navigation-tab — Material Design 3 Navigation Bar Item\n   Spec:  https://m3.material.io/components/navigation-bar/specs\n   A11y:  https://m3.material.io/components/navigation-bar/accessibility\n\n   Anatomy:\n     - State layer       (hover / focus / pressed tint)\n     - Active indicator  (56×32 secondary-container pill)\n     - Icon              (outlined inactive, filled active)\n     - Label             (label-medium type)\n     - Badge             (small dot or large numeric capsule)\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-navigation-tab-active-indicator-color\n     --md-navigation-tab-active-indicator-width   (default 56px)\n     --md-navigation-tab-active-indicator-height  (default 32px)\n     --md-navigation-tab-active-indicator-shape   (default full-rounded)\n     --md-navigation-tab-active-icon-color\n     --md-navigation-tab-inactive-icon-color\n     --md-navigation-tab-active-label-color\n     --md-navigation-tab-inactive-label-color\n     --md-navigation-tab-label-font            (label-medium font shorthand)\n     --md-navigation-tab-label-font-weight     (active label weight; defaults 600)\n     --md-navigation-tab-icon-size             (default 24px)\n     --md-navigation-tab-padding-block-start   (default 5px — centers 54px content in 64dp bar)\n     --md-navigation-tab-padding-block-end     (default 5px)\n     --md-navigation-tab-hover-state-layer-color\n     --md-navigation-tab-focus-state-layer-color\n     --md-navigation-tab-pressed-state-layer-color\n     --md-navigation-tab-badge-color\n     --md-navigation-tab-badge-on-color\n     --md-navigation-tab-disabled-opacity      (default 0.38)\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST — base layout, sizing, focus\n   ========================================================== */\n:host {\n  --_indicator-color: var(\n    --md-navigation-tab-active-indicator-color,\n    var(--md-sys-color-secondary-container, #E8DEF8)\n  );\n  --_indicator-w: var(--md-navigation-tab-active-indicator-width, max(40px, calc(56px + var(--md-sys-density-scale, 0) * 4px)));\n  --_indicator-h: var(--md-navigation-tab-active-indicator-height, max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));\n  --_indicator-shape: var(\n    --md-navigation-tab-active-indicator-shape,\n    var(--md-sys-shape-corner-full, 9999px)\n  );\n\n  --_active-icon-color: var(\n    --md-navigation-tab-active-icon-color,\n    var(--md-sys-color-on-secondary-container, #1E192B)\n  );\n  --_inactive-icon-color: var(\n    --md-navigation-tab-inactive-icon-color,\n    var(--md-sys-color-on-surface-variant, #49454F)\n  );\n\n  --_active-label-color: var(\n    --md-navigation-tab-active-label-color,\n    var(--md-sys-color-on-surface, #1C1B1F)\n  );\n  --_inactive-label-color: var(\n    --md-navigation-tab-inactive-label-color,\n    var(--md-sys-color-on-surface-variant, #49454F)\n  );\n\n  --_icon-size: var(--md-navigation-tab-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  --_pad-top: var(--md-navigation-tab-padding-block-start, calc(5px + var(--md-sys-density-scale, 0) * 1px));\n  --_pad-bottom: var(--md-navigation-tab-padding-block-end, calc(5px + var(--md-sys-density-scale, 0) * 1px));\n\n  --_hover-color: var(\n    --md-navigation-tab-hover-state-layer-color,\n    var(--md-sys-color-on-surface, #1C1B1F)\n  );\n  --_focus-color: var(\n    --md-navigation-tab-focus-state-layer-color,\n    var(--md-sys-color-on-surface, #1C1B1F)\n  );\n  --_pressed-color: var(\n    --md-navigation-tab-pressed-state-layer-color,\n    var(--md-sys-color-on-surface, #1C1B1F)\n  );\n\n  --_badge-color: var(\n    --md-navigation-tab-badge-color,\n    var(--md-sys-color-error, #B3261E)\n  );\n  --_badge-on-color: var(\n    --md-navigation-tab-badge-on-color,\n    var(--md-sys-color-on-error, #FFFFFF)\n  );\n\n  --_disabled-opacity: var(--md-navigation-tab-disabled-opacity, 0.38);\n\n  --_label-font: var(\n    --md-navigation-tab-label-font,\n    var(--md-sys-typescale-label-medium-font, 500 12px/16px Roboto, sans-serif)\n  );\n  --_label-size: var(--md-navigation-tab-label-font-size, max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px)));\n  --_label-weight-active: var(--md-navigation-tab-label-font-weight, 600);\n\n  --_motion-duration: var(--md-sys-motion-duration-short4, 200ms);\n  --_motion-easing: var(\n    --md-sys-motion-easing-emphasized-decelerate,\n    cubic-bezier(0.05, 0.7, 0.1, 1)\n  );\n\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  inline-size: 100%;\n  min-inline-size: 48px; /* M3 minimum touch target */\n  block-size: 100%;\n  padding-block: var(--_pad-top) var(--_pad-bottom);\n  box-sizing: border-box;\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  color: var(--_inactive-icon-color);\n  /* Color transitions are quick and additive — they don't trigger layout. */\n  transition:\n    color var(--_motion-duration) var(--_motion-easing);\n}\n\n:host(.md-navigation-tab--active) {\n  color: var(--_active-icon-color);\n}\n\n/* ==========================================================\n   2. DISABLED STATE\n   M3 nav-bar doesn't formally define disabled, but our API\n   needs one — match the global disabled-content opacity.\n   `--soft-disabled` shares the dim but stays keyboard-focusable\n   (it keeps pointer-events + the focus ring) so screen-reader\n   users can discover a temporarily-unavailable destination.\n   ========================================================== */\n:host(.md-navigation-tab--disabled),\n:host(.md-navigation-tab--soft-disabled) {\n  cursor: not-allowed;\n  opacity: var(--_disabled-opacity);\n}\n\n:host(.md-navigation-tab--disabled) {\n  pointer-events: none;\n}\n\n/* ==========================================================\n   3. STATE LAYER\n   Spans the full hit-area so hover/focus/pressed feedback\n   covers the whole tab — not just the active-indicator pill.\n   Opacities come from the M3 state-layer tokens.\n   ========================================================== */\n.md-navigation-tab__state-layer {\n  position: absolute;\n  inset: 0;\n  background-color: currentColor;\n  opacity: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  transition: opacity var(--md-sys-motion-duration-short2, 100ms) ease;\n}\n\n:host(:hover:not(.md-navigation-tab--disabled):not(.md-navigation-tab--soft-disabled)) .md-navigation-tab__state-layer {\n  background-color: var(--_hover-color);\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n\n:host(:active:not(.md-navigation-tab--disabled):not(.md-navigation-tab--soft-disabled)) .md-navigation-tab__state-layer {\n  background-color: var(--_pressed-color);\n  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);\n}\n\n:host(:focus-visible:not(.md-navigation-tab--disabled)) .md-navigation-tab__state-layer {\n  background-color: var(--_focus-color);\n  /* M3 nav-bar focus state-layer opacity is 0.10 (the global sys token is 0.12);\n     keep a component override so it matches the spec regardless of the sys value. */\n  opacity: var(--md-navigation-tab-focus-state-layer-opacity, 0.1);\n}\n\n/* Visible 3dp focus ring per M3 accessibility guidance.\n   Wraps the active-indicator pill (centered, rounded) rather than the whole\n   tab: a full-tab inset outline gets clipped at the navigation bar's rounded\n   corners, and `secondary` matches the focus-ring color used library-wide\n   (the old full-tab ring used `primary`, which stood out from every other\n   component). */\n:host(:focus-visible:not(.md-navigation-tab--disabled)) .md-navigation-tab__icon-container::after {\n  content: '';\n  position: absolute;\n  inset: -4px;\n  border: 3px solid var(--md-sys-color-secondary, #625B71);\n  border-radius: var(--_indicator-shape, 9999px);\n  box-sizing: border-box;\n  pointer-events: none;\n}\n\n/* ==========================================================\n   4. STACK CONTAINER\n   The icon-container + indicator + label are stacked centered\n   so the visual layout matches MD3 even when extra width is\n   available.\n   ========================================================== */\n.md-navigation-tab__container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  /* M3 vertical item: active-indicator → label \"container between space\" = 6dp.\n     (The 24dp icon centered in the 32dp indicator yields the 4dp icon inset.) */\n  gap: max(2px, calc(6px + var(--md-sys-density-scale, 0) * 1px));\n  inline-size: 100%;\n  pointer-events: none; /* Click goes through to host. */\n}\n\n/* ==========================================================\n   5. ACTIVE INDICATOR PILL\n   Animates from a vertically-collapsed shape into the full\n   56×32dp pill — per M3's emphasized-decelerate spec.\n   ========================================================== */\n.md-navigation-tab__indicator {\n  position: absolute;\n  /* Aligned to the icon-container vertical box. */\n  inset-block-start: 0;\n  inline-size: var(--_indicator-w);\n  block-size: var(--_indicator-h);\n  border-radius: var(--_indicator-shape);\n  background-color: var(--_indicator-color);\n  /* Start collapsed; grow on activation. */\n  transform: scale(0, 1);\n  transform-origin: center center;\n  opacity: 0;\n  transition:\n    transform var(--_motion-duration) var(--_motion-easing),\n    opacity var(--md-sys-motion-duration-short2, 100ms) ease;\n  pointer-events: none;\n}\n\n.md-navigation-tab__indicator--active {\n  transform: scale(1, 1);\n  opacity: 1;\n}\n\n/* ==========================================================\n   6. ICON CONTAINER & ICON\n   The container is exactly the size of the active indicator\n   so the indicator sits behind the icon at 100% coverage.\n   ========================================================== */\n.md-navigation-tab__icon-container {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--_indicator-w);\n  block-size: var(--_indicator-h);\n  pointer-events: none;\n}\n\n.md-navigation-tab__icon {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--_icon-size);\n  inline-size: var(--_icon-size);\n  block-size: var(--_icon-size);\n  line-height: 1;\n  color: inherit;\n  z-index: 1;\n  transition: font-variation-settings var(--md-sys-motion-duration-short2, 100ms) ease;\n}\n\n/* Custom icons via slot=\"icon\" / \"active-icon\" (SVG, emoji, custom font):\n   slotted light-DOM nodes don't inherit the shadow icon-span's sizing, so a\n   bare <span>★</span> would render at the host font-size. Pin them to the 24dp\n   Material Symbols footprint, inherit the active/inactive icon color (so SVGs\n   using currentColor tint correctly), and center within the box. */\n.md-navigation-tab__icon ::slotted(*) {\n  /* Fixed 24dp flex box so text glyphs (★, emoji) and SVGs share one footprint\n     and center identically — a bare inline glyph otherwise gets a taller line\n     box and rides off-center against an SVG's box. */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--_icon-size);\n  block-size: var(--_icon-size);\n  font-size: var(--_icon-size);\n  line-height: 1;\n  /* Reset the icon span's Material Symbols font: slotted text/emoji inherit it\n     through the flattened tree, but that icon font has no ★/emoji glyph and its\n     line metrics drop the fallback glyph ~5px below center. A normal UI font\n     centers them; authors slotting a custom icon font override this from light DOM. */\n  font-family: var(--md-navigation-tab-slotted-icon-font, system-ui, sans-serif);\n  color: inherit;\n  object-fit: contain;\n}\n\n/* Material Symbols variable-font: flip the FILL axis on active. */\n.md-navigation-tab__icon--filled {\n  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n\n/* When Material Symbols is the icon font, the outlined font already\n   gives us the inactive look. When Material Icons (legacy) is used,\n   we still get the inactive look via the font family. */\n.material-symbols-outlined {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons'), sans-serif;\n  font-weight: normal;\n  font-style: normal;\n  letter-spacing: normal;\n  text-transform: none;\n  /* No `display` here: the element is also `.md-navigation-tab__icon`, which must\n     stay an `inline-flex` centering box (this class is later in source with equal\n     specificity, so an inline-block here would silently win and break centering of\n     slotted custom icons — they'd sit on the text baseline ~5px low). */\n  white-space: nowrap;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n\n/* ==========================================================\n   7. BADGES\n   Two flavors per M3 spec:\n     - small  → 6dp dot\n     - large  → numeric / textual capsule (16dp min height)\n   Both anchor to the top-right of the icon container.\n   ========================================================== */\n.md-navigation-tab__badge {\n  position: absolute;\n  /* Above the icon — the icon glyph has z-index:1, so without this the SVG\n     strokes paint over the badge (\"polluted\" badge). */\n  z-index: 2;\n  background-color: var(--_badge-color);\n  color: var(--_badge-on-color);\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  box-sizing: border-box;\n  pointer-events: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.md-navigation-tab__badge--small {\n  inset-block-start: 2px;\n  inset-inline-end: 14px;\n  inline-size: 6px;\n  block-size: 6px;\n}\n\n.md-navigation-tab__badge--large {\n  inset-block-start: -2px;\n  inset-inline-start: 50%;\n  margin-inline-start: 4px;\n  min-inline-size: 16px;\n  block-size: 16px;\n  padding-inline: 4px;\n  font: var(\n    --md-sys-typescale-label-small-font,\n    500 11px/16px Roboto, sans-serif\n  );\n  letter-spacing: var(\n    --md-sys-typescale-label-small-letter-spacing,\n    0.5px\n  );\n}\n\n/* ==========================================================\n   8. LABEL\n   label-medium typography per M3. Active label gains a\n   slightly heavier weight to convey selection.\n   ========================================================== */\n.md-navigation-tab__label {\n  font: var(--_label-font);\n  font-size: var(--_label-size);\n  letter-spacing: var(\n    --md-sys-typescale-label-medium-letter-spacing,\n    0.5px\n  );\n  color: var(--_inactive-label-color);\n  max-inline-size: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: center;\n  pointer-events: none;\n  transition:\n    color var(--md-sys-motion-duration-short2, 100ms) ease,\n    opacity var(--md-sys-motion-duration-short2, 100ms) ease;\n}\n\n:host(.md-navigation-tab--active) .md-navigation-tab__label {\n  color: var(--_active-label-color);\n  font-weight: var(--_label-weight-active);\n}\n\n/* When `labelBehavior=\"selected\"` keep the label slot in the layout\n   but hide it visually for inactive tabs so heights stay constant. */\n.md-navigation-tab__label--hidden {\n  opacity: 0;\n  visibility: hidden;\n}\n\n/* When `labelBehavior=\"none\"` is applied on the host the label is\n   not rendered at all — collapse the vertical padding so the icon\n   sits centered in the row. */\n:host(.md-navigation-tab--label-hidden) {\n  /* No label: center the 32dp icon-container in the 64dp bar → 16dp each side. */\n  --_pad-top: var(--md-sys-spacing-inset-lg, 16px);\n  --_pad-bottom: var(--md-sys-spacing-inset-lg, 16px);\n  justify-content: center;\n}\n\n:host(.md-navigation-tab--label-hidden) .md-navigation-tab__container {\n  justify-content: center;\n}\n\n/* ==========================================================\n   9. FORCED COLORS / REDUCED MOTION\n   ========================================================== */\n@media (forced-colors: active) {\n  :host {\n    --_indicator-color: Highlight;\n    --_active-icon-color: HighlightText;\n    --_active-label-color: HighlightText;\n    --_inactive-icon-color: ButtonText;\n    --_inactive-label-color: ButtonText;\n  }\n  :host(:focus-visible:not(.md-navigation-tab--disabled)) {\n    outline: 2px solid CanvasText;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host,\n  .md-navigation-tab__state-layer,\n  .md-navigation-tab__indicator,\n  .md-navigation-tab__icon,\n  .md-navigation-tab__label {\n    transition: none !important;\n  }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { triggerRipple } from '../../utils/ripple';\nimport { sanitizeHref, SAFE_WINDOW_FEATURES } from '../../utils/url';\n\nexport type MdNavigationTabLabelBehavior = 'always' | 'selected' | 'none';\n\n/**\n * `md-navigation-tab` — a single destination inside `md-navigation-bar`.\n *\n * Renders an icon, an optional label, and an optional badge. Selecting\n * the tab swaps the icon to a filled variant (per M3 spec) and reveals\n * an \"active indicator\" pill behind the icon.\n *\n * References:\n *   - {@link https://m3.material.io/components/navigation-bar/specs Specs}\n *   - {@link https://m3.material.io/components/navigation-bar/accessibility Accessibility}\n *\n * @slot icon         - Custom icon for the inactive state\n *                       (replaces the `icon` attribute).\n * @slot active-icon  - Custom icon for the active state\n *                       (replaces the `active-icon` attribute).\n * @slot              - Default slot for a custom label\n *                       (replaces the `label` attribute).\n *\n * @part container      - The full tab hit-area / touch target.\n * @part indicator      - The 56×32 pill that highlights the active icon.\n * @part state-layer    - The hover/focus/pressed tint overlay.\n * @part icon-container - The 56×32 wrapper around the icon (badge anchor).\n * @part icon           - The rendered icon glyph.\n * @part badge          - The badge dot or text capsule (when present).\n * @part label          - The destination label text.\n */\n@Component({\n  tag: 'md-navigation-tab',\n  styleUrl: 'md-navigation-tab.css',\n  shadow: true,\n})\nexport class MdNavigationTab {\n  @Element() el!: HTMLElement;\n\n  /** Whether this destination is currently selected. */\n  @Prop({ mutable: true, reflect: true }) active: boolean = false;\n\n  /** Disable interaction. Disabled tabs are skipped by keyboard nav. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Soft-disable the destination: it cannot be activated or selected and is\n   * announced as `aria-disabled`, but — unlike `disabled` — it stays\n   * keyboard-reachable (the bar's arrow-key tour still lands on it) so\n   * screen-reader users can discover a temporarily-unavailable destination.\n   */\n  @Prop({ reflect: true, attribute: 'soft-disabled' }) softDisabled: boolean = false;\n\n  /** Destination label rendered below the icon. */\n  @Prop() label: string = '';\n\n  /**\n   * Material Symbols / Material Icons name shown when inactive.\n   * Per M3 spec, inactive destinations use the outlined variant.\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Material Symbols / Material Icons name shown when active.\n   * Per M3 spec, active destinations use the filled variant.\n   * Defaults to `icon` when empty (the same glyph in both states).\n   */\n  @Prop({ attribute: 'active-icon' }) activeIcon: string = '';\n\n  /**\n   * Show a small \"notification dot\" badge in the top-right of the icon.\n   * Use when there are new items but no count is needed.\n   */\n  @Prop({ reflect: true }) badge: boolean = false;\n\n  /**\n   * Numeric / textual badge value (e.g. `\"3\"`, `\"99+\"`, `\"New\"`).\n   * When set, the badge expands to a pill that accommodates the value\n   * (M3 calls this the \"large badge\" variant).\n   */\n  @Prop({ attribute: 'badge-value' }) badgeValue: string = '';\n\n  /**\n   * Maximum value rendered when `badgeValue` is purely numeric. Values\n   * greater than this render as `\"{max}+\"` (e.g. `99+`). Set to `0` to\n   * disable the cap.\n   */\n  @Prop({ attribute: 'badge-max' }) badgeMax: number = 999;\n\n  /**\n   * When set, activating the tab also navigates to the URL — useful when\n   * each destination is a full route. For SPA routing, intercept the native\n   * `click` (call `preventDefault()`) or listen to the bar's `mdChange`;\n   * navigation only occurs when `href` is truthy and the click isn't prevented.\n   */\n  @Prop() href: string = '';\n\n  /** Link target (forwarded only when `href` is set). */\n  @Prop() target: string = '';\n\n  /**\n   * Label visibility for this tab. Inherits from the parent\n   * `md-navigation-bar`'s `label-behavior` when not set.\n   *\n   * Not reflected as an attribute — the parent bar uses\n   * `getAttribute('label-behavior')` to detect *explicit* author\n   * overrides, so reflecting the default would defeat that signal.\n   */\n  @Prop({ mutable: true, attribute: 'label-behavior' })\n  labelBehavior: MdNavigationTabLabelBehavior = 'always';\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  /**\n   * Fired when the tab is activated (click, Enter, or Space) and the tab is\n   * not disabled. The parent `md-navigation-bar` listens for this to drive\n   * selection; external code may also listen to detect per-tab activation\n   * (including a re-click of the already-active tab, which does not emit\n   * `mdChange` on the bar).\n   */\n  @Event() mdTabClick: EventEmitter<{ index: number }>;\n\n  /** Internal — track focus-visible for the state layer + a11y. */\n  @State() private focusVisible: boolean = false;\n\n  // ─── Watchers ────────────────────────────────────────────────────\n\n  @Watch('active')\n  onActiveChange(active: boolean) {\n    // Mirror the active state into aria-selected so the parent isn't\n    // the sole writer (works in detached usage / docs without a bar).\n    this.el.setAttribute('aria-selected', String(active));\n  }\n\n  @Watch('disabled')\n  onDisabledChange() {\n    this.syncAriaDisabled();\n  }\n\n  @Watch('softDisabled')\n  onSoftDisabledChange() {\n    this.syncAriaDisabled();\n  }\n\n  /** Activation/selection is blocked when either disabled flag is set. */\n  private get interactionDisabled(): boolean {\n    return this.disabled || this.softDisabled;\n  }\n\n  private syncAriaDisabled() {\n    this.el.setAttribute('aria-disabled', String(this.interactionDisabled));\n  }\n\n  // ─── Lifecycle ───────────────────────────────────────────────────\n\n  connectedCallback() {\n    // Defaults — the bar may override these on mount.\n    if (!this.el.hasAttribute('role')) this.el.setAttribute('role', 'tab');\n    this.el.setAttribute('aria-selected', String(this.active));\n    if (this.interactionDisabled) this.el.setAttribute('aria-disabled', 'true');\n    if (!this.el.hasAttribute('tabindex')) {\n      this.el.setAttribute('tabindex', this.active ? '0' : '-1');\n    }\n  }\n\n  // ─── Public API ──────────────────────────────────────────────────\n\n  /** Focus the tab programmatically (skip when disabled). */\n  @Method()\n  async focusEl(): Promise<void> {\n    if (this.disabled) return;\n    this.el.focus();\n  }\n\n  // ─── Internal helpers ────────────────────────────────────────────\n\n  /** Locate this tab's index inside its parent navigation bar. */\n  private resolveIndex(): number {\n    const parent = this.el.parentElement;\n    if (!parent) return -1;\n    // Walk direct children rather than using `:scope > md-navigation-tab`\n    // — the latter is unsupported by Stencil's mock-doc in spec tests.\n    const siblings: HTMLElement[] = [];\n    for (const child of Array.from(parent.children)) {\n      if ((child as HTMLElement).tagName === 'MD-NAVIGATION-TAB') {\n        siblings.push(child as HTMLElement);\n      }\n    }\n    return siblings.indexOf(this.el);\n  }\n\n  private emitActivation() {\n    const index = this.resolveIndex();\n    this.mdTabClick.emit({ index });\n  }\n\n  private handleClick = (e: MouseEvent) => {\n    if (this.interactionDisabled) {\n      // Block activation and stop the click from reaching the bar.\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    if (e.defaultPrevented) return; // SPA routers call preventDefault()\n    this.emitActivation();\n    this.maybeFollowHref();\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.interactionDisabled) return;\n    if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {\n      e.preventDefault();\n      triggerRipple(this.el);\n      // Synthesize a native click so keyboard and pointer activation share one\n      // path (bubbles to the bar + follows href).\n      this.el.click();\n    }\n  };\n\n  private maybeFollowHref() {\n    const href = sanitizeHref(this.href);\n    if (!href) return;\n    if (typeof window === 'undefined') return;\n    if (this.target === '_blank') {\n      window.open(href, '_blank', SAFE_WINDOW_FEATURES);\n    } else if (this.target) {\n      /* A named target opens a new browsing context just like `_blank` does,\n         so it needs the same opener severing. */\n      window.open(href, this.target, SAFE_WINDOW_FEATURES);\n    } else {\n      window.location.assign(href);\n    }\n  }\n\n  private handleFocus = () => {\n    this.focusVisible = this.el.matches(':focus-visible');\n  };\n\n  private handleBlur = () => {\n    this.focusVisible = false;\n  };\n\n  // ─── Rendering helpers ───────────────────────────────────────────\n\n  private resolveLabelVisibility(): MdNavigationTabLabelBehavior {\n    return this.labelBehavior;\n  }\n\n  private formatBadgeValue(): string {\n    const raw = (this.badgeValue ?? '').trim();\n    if (!raw) return '';\n    if (this.badgeMax > 0) {\n      const num = Number(raw);\n      if (!Number.isNaN(num) && Number.isFinite(num) && num > this.badgeMax) {\n        return `${this.badgeMax}+`;\n      }\n    }\n    return raw;\n  }\n\n  private renderIcon() {\n    const useActive = this.active && (this.activeIcon || this.icon);\n    const filled = this.active;\n    const glyph = useActive ? (this.activeIcon || this.icon) : this.icon;\n\n    return (\n      <span class=\"md-navigation-tab__icon-container\" part=\"icon-container\">\n        <span\n          class={{\n            'md-navigation-tab__icon': true,\n            'material-symbols-outlined': true,\n            'md-navigation-tab__icon--filled': filled,\n          }}\n          part=\"icon\"\n          aria-hidden=\"true\"\n        >\n          {/* Custom-icon slots win over the icon attribute. */}\n          {this.active ? <slot name=\"active-icon\">{glyph}</slot> : <slot name=\"icon\">{glyph}</slot>}\n        </span>\n        {this.renderBadge()}\n      </span>\n    );\n  }\n\n  private renderBadge() {\n    if (!this.badge && !this.badgeValue) return null;\n    const value = this.formatBadgeValue();\n    const isLarge = value.length > 0;\n\n    return (\n      <span\n        class={{\n          'md-navigation-tab__badge': true,\n          'md-navigation-tab__badge--small': !isLarge,\n          'md-navigation-tab__badge--large': isLarge,\n        }}\n        part=\"badge\"\n        role=\"status\"\n        aria-label={isLarge ? `${value} new` : 'New'}\n      >\n        {isLarge ? value : ''}\n      </span>\n    );\n  }\n\n  private renderLabel() {\n    const visibility = this.resolveLabelVisibility();\n    if (visibility === 'none') return null;\n\n    // CSS handles hiding the label when visibility === 'selected' && !active,\n    // so we still render it (preserves space + keeps accessible name stable).\n    return (\n      <span\n        class={{\n          'md-navigation-tab__label': true,\n          'md-navigation-tab__label--hidden':\n            visibility === 'selected' && !this.active,\n        }}\n        part=\"label\"\n      >\n        <slot>{this.label}</slot>\n      </span>\n    );\n  }\n\n  // ─── Render ──────────────────────────────────────────────────────\n\n  render() {\n    // Accessible name resolution: the host carries the label so the\n    // `tab` role gets a stable accessible name. Icon-only mode still\n    // exposes the textual `label` via aria-label.\n    const accessibleLabel = this.label || undefined;\n    const visibility = this.resolveLabelVisibility();\n    const ariaLabel = visibility === 'none' ? accessibleLabel : undefined;\n\n    return (\n      <Host\n        class={{\n          'md-navigation-tab': true,\n          'md-navigation-tab--active': this.active,\n          'md-navigation-tab--disabled': this.disabled,\n          'md-navigation-tab--soft-disabled': this.softDisabled && !this.disabled,\n          'md-navigation-tab--label-hidden': visibility === 'none',\n        }}\n        aria-label={ariaLabel}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n      >\n        <md-ripple disabled={this.interactionDisabled}></md-ripple>\n        <span\n          class=\"md-navigation-tab__state-layer\"\n          part=\"state-layer\"\n          aria-hidden=\"true\"\n          data-focus-visible={this.focusVisible ? 'true' : null}\n        ></span>\n        <span\n          class=\"md-navigation-tab__container\"\n          part=\"container\"\n        >\n          <span\n            class={{\n              'md-navigation-tab__indicator': true,\n              'md-navigation-tab__indicator--active': this.active,\n            }}\n            part=\"indicator\"\n            aria-hidden=\"true\"\n          ></span>\n          {this.renderIcon()}\n          {this.renderLabel()}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components-csr/md-number-field.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,c as i,h as s,d as n,t as r}from"./p-bSpXNc5J.js";import{g as l,c as h,r as o,s as a}from"./p-DWxN44zD.js";import{d as u}from"./p-R_guULjT.js";import{d as c}from"./p-C3vB0Hd9.js";import{d}from"./p-CF7mq5T7.js";const f=()=>`:host{--_stepper-icon-size:var(--md-number-field-stepper-icon-size, max(14px, calc(20px + var(--md-sys-density-scale, 0) * 1px)));--_stepper-color:var(--md-number-field-stepper-color, var(--md-sys-color-on-surface-variant, #49454f));--_inline-stepper-size:max(20px, calc(28px + var(--md-sys-density-scale, 0) * 2px));--_split-stepper-size:var(--md-number-field-split-stepper-size, max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px)));--_field-box-height:max(40px, calc(56px + var(--md-sys-density-scale, 0) * 4px));display:inline-flex;flex-direction:column;inline-size:var(--md-number-field-width, 100%);min-inline-size:var(--md-number-field-min-width, 200px);box-sizing:border-box;vertical-align:bottom;position:relative}.md-number-field__field{display:block;inline-size:100%}:host(.md-number-field--inline){--md-text-field-padding-inline-end:var(--md-sys-spacing-inset-sm, 8px)}.md-number-field__stepper{--md-icon-button-icon-size:var(--_stepper-icon-size);--md-icon-button-icon-color:var(--_stepper-color);flex:none}.md-number-field__stepper--inline{--md-icon-button-container-width:var(--_inline-stepper-size);--md-icon-button-container-height:var(--_inline-stepper-size)}.md-number-field__stepper--inline+.md-number-field__stepper--inline{margin-inline-start:var(--md-sys-spacing-gap-xs, 4px)}:host(.md-number-field--split){flex-direction:row;align-items:flex-start;gap:var(--md-sys-spacing-gap-sm, 8px)}:host(.md-number-field--split) .md-number-field__field{flex:1 1 auto;inline-size:auto;min-inline-size:0}.md-number-field__stepper--split{--md-icon-button-container-width:var(--_split-stepper-size);--md-icon-button-container-height:var(--_split-stepper-size);margin-block-start:calc((var(--_field-box-height) - var(--_split-stepper-size)) / 2)}:host(.md-number-field--disabled){pointer-events:none}@media (forced-colors: active){.md-number-field__stepper{--md-icon-button-icon-color:ButtonText}}: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}`;const m=400;const p=60;const b=/[\u061c\u200b\u200e\u200f\u202a-\u202e\u2066-\u2069]/g;const y=/[\s\u00a0\u2009\u202f]/;const g=/[\s\u00a0\u2009\u202f]/g;function w(t,e){const i=t||undefined;let s;try{s=new Intl.NumberFormat(i,e)}catch{s=new Intl.NumberFormat(i)}let n="";let r="";let l="-";let h="+";let o="";let a="";const u=new Intl.NumberFormat(i);for(const t of u.formatToParts(-12345678.9)){if(t.type==="group")n=t.value;else if(t.type==="decimal")r=t.value;else if(t.type==="minusSign")l=t.value}for(const t of s.formatToParts(-12345678.9)){switch(t.type){case"group":n=t.value;break;case"decimal":r=t.value;break;case"minusSign":l=t.value;break;case"plusSign":h=t.value;break;case"percentSign":o=t.value;break;case"currency":case"unit":case"literal":a+=t.value;break}}const c=new Map;const d=new Intl.NumberFormat(i,{useGrouping:false});for(let t=0;t<=9;t++){const e=d.format(t);if(e!==String(t))c.set(e,String(t))}let f=false;try{f=s.resolvedOptions().style==="percent"}catch{}const m=new Set;for(let t=0;t<=9;t++)m.add(String(t));for(const t of c.keys())m.add(t);for(const t of n+r+l+h+a)m.add(t);m.add("-");m.add("+");if(f){m.add("%");if(o)m.add(o)}if(y.test(n+a))m.add(" ");return{formatter:s,group:n,decimal:r,minus:l,plus:h,percent:o,symbolChars:a,digitMap:c,isPercent:f,allowed:m}}function v(t){if(!Number.isFinite(t))return t;const e=parseFloat(t.toPrecision(15));return Math.abs(e-t)<1e-10?e:t}const x=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdInput=i(this,"mdInput",7);this.mdChange=i(this,"mdChange",7);this.mdValidityChange=i(this,"mdValidityChange",5);this.internals=this.attachInternals();this.variant="filled";this.label="";this.placeholder="";this.supportingText="";this.error=false;this.errorText="";this.disabled=false;this.readOnly=false;this.required=false;this.name="";this.density=0;this.value=null;this.locale="";this.step=1;this.smallStep=.1;this.largeStep=10;this.snapOnStep=false;this.allowOutOfRange=false;this.allowWheelScrub=false;this.steppers="inline";this.incrementLabel="Increment";this.decrementLabel="Decrement";this.valueMissingLabel="Please enter a number.";this.reserveSupportingSpace=false;this.inputValue="";this.focused=false;this.formDisabled=false;this.defaultValue=null;this.lastCommitted=null;this.internalWrite=false;this.customValidityMessage="";this.lastValidityKey=null;this.holdDir=1;this.heldAlt=false;this.heldShift=false;this.trackHoldModifiers=t=>{this.heldAlt=t.altKey;this.heldShift=t.shiftKey};this.holdTick=()=>{const t=this.holdDir;if(this.atBound(t)){this.endHold();return}const e=this.heldShift?this.largeStep:this.heldAlt?this.smallStep:this.stepAmount;this.doStep(t,e,this.heldAlt,t>0?"increment-press":"decrement-press")};this.endHold=()=>{clearTimeout(this.holdTimer);clearInterval(this.holdInterval);this.holdTimer=undefined;this.holdInterval=undefined;if(typeof window!=="undefined"){window.removeEventListener("pointerup",this.endHold);window.removeEventListener("pointercancel",this.endHold);window.removeEventListener("contextmenu",this.endHold);window.removeEventListener("keydown",this.trackHoldModifiers);window.removeEventListener("keyup",this.trackHoldModifiers)}};this.handleFieldInput=t=>{t.stopPropagation();const e=t.detail??"";if(e.trim()===""){this.inputValue=e;if(this.value!==null){this.internalWrite=true;this.value=null;this.internalWrite=false;this.mdInput.emit({value:null,formattedValue:e,reason:"input-clear"})}return}if(!this.hasOnlyAllowedChars(e)){this.revertFieldText();return}this.inputValue=e;const i=this.parseNumber(e);if(i!==null&&i!==this.value){this.internalWrite=true;this.value=i;this.internalWrite=false;this.mdInput.emit({value:i,formattedValue:e,reason:"input-change"})}};this.handleFieldChange=t=>{t.stopPropagation()};this.handleFieldKeyDown=t=>{if(this.isDisabled)return;if(t.isComposing||t.keyCode===229)return;switch(t.key){case"ArrowUp":case"ArrowDown":{t.preventDefault();if(this.readOnly)return;const e=t.key==="ArrowUp"?1:-1;const i=t.shiftKey?this.largeStep:t.altKey?this.smallStep:this.stepAmount;this.doStep(e,i,t.altKey,"keyboard");return}case"Home":if(this.minBound!=null&&!this.readOnly){t.preventDefault();this.setAndCommit(this.minBound,"keyboard")}return;case"End":if(this.maxBound!=null&&!this.readOnly){t.preventDefault();this.setAndCommit(this.maxBound,"keyboard")}return;case"Enter":this.commitTyped("input-blur");this.requestSubmit();return}if(t.ctrlKey||t.metaKey||t.altKey)return;if(t.key.length!==1)return;if(this.readOnly)return;if(!this.formatInfo.allowed.has(t.key))t.preventDefault()};this.handleFieldFocus=()=>{this.focused=true};this.handleFieldBlur=()=>{this.focused=false;this.commitTyped("input-blur")};this.handleWheel=t=>{if(!this.allowWheelScrub||this.isDisabled||this.readOnly||!this.focused)return;if(t.ctrlKey)return;t.preventDefault();const e=t.deltaY>0?-1:1;const i=t.shiftKey?this.largeStep:t.altKey?this.smallStep:this.stepAmount;this.doStep(e,i,t.altKey,"wheel")}}get isDisabled(){return this.disabled||this.formDisabled}get formatOptionsObject(){const t=this.formatOptions;if(t==null)return undefined;if(typeof t!=="string")return t;const e=t.trim();if(!e)return undefined;if(this.parsedOptionsKey!==e){this.parsedOptionsKey=e;try{const i=JSON.parse(e);const s=!!i&&typeof i==="object"&&!Array.isArray(i);this.parsedOptionsCache=s?i:undefined;if(!s&&typeof console!=="undefined"){console.warn("[md-number-field] `format-options` must be a JSON object:",t)}}catch{this.parsedOptionsCache=undefined;if(typeof console!=="undefined"){console.warn("[md-number-field] `format-options` attribute is not valid JSON:",t)}}}return this.parsedOptionsCache}get formatInfo(){let t="null";try{t=JSON.stringify(this.formatOptions??null)??"null"}catch{t="opaque"}const e=`${this.locale}|${t}`;if(!this.formatInfoCache||this.formatInfoKey!==e){this.formatInfoCache=w(this.locale,this.formatOptionsObject);this.formatInfoKey=e}return this.formatInfoCache}get stepAmount(){const t=Number(this.step);return Number.isFinite(t)&&t>0?t:1}get minBound(){const t=this.min==null?NaN:Number(this.min);return Number.isFinite(t)?t:null}get maxBound(){const t=this.max==null?NaN:Number(this.max);return Number.isFinite(t)?t:null}get resolvedInputMode(){const t=this.formatOptionsObject;const e=!Number.isInteger(this.stepAmount)||t!=null&&((t.maximumFractionDigits??0)>0||(t.minimumFractionDigits??0)>0||t.style==="currency"||t.style==="percent");const i=this.minBound;return i!=null&&i>=0&&!e?"numeric":"decimal"}async setFocus(){this.focusField()}async select(){await(this.fieldEl?.select?.())}async stepUp(t=1){this.doStep(1,this.stepAmount*Math.max(1,t),false,"none")}async stepDown(t=1){this.doStep(-1,this.stepAmount*Math.max(1,t),false,"none")}async getValidity(){return l(this.internals)}async checkValidity(){return h(this.internals)}async reportValidity(){return o(this.internals)}async setCustomValidity(t){this.customValidityMessage=t;this.updateValidity()}componentWillLoad(){this.normalizeValueProp();this.defaultValue=this.value;this.lastCommitted=this.value;this.inputValue=this.formatValue(this.value);this.syncFormValue()}componentDidLoad(){this.updateValidity();if(typeof window==="undefined")return;this.el.addEventListener("wheel",this.handleWheel,{passive:false})}disconnectedCallback(){if(typeof window!=="undefined"){this.el.removeEventListener("wheel",this.handleWheel)}this.endHold()}formResetCallback(){this.internalWrite=false;this.customValidityMessage="";this.value=this.defaultValue;this.inputValue=this.formatValue(this.value);this.lastCommitted=this.value;this.syncFormValue()}formDisabledCallback(t){queueMicrotask((()=>{this.formDisabled=t}))}formStateRestoreCallback(t){if(typeof t==="string"){const e=t===""?NaN:Number(t);this.value=Number.isFinite(e)?e:null}}onValueChange(){this.normalizeValueProp();this.syncFormValue();if(!this.internalWrite){this.lastCommitted=this.value;const t=this.formatValue(this.value);if(this.inputValue!==t)this.inputValue=t}}onFormatChange(){this.formatInfoKey=undefined;this.inputValue=this.formatValue(this.value)}updateValidity(){if(!this.internals?.setValidity)return;if(this.customValidityMessage){this.internals.setValidity({customError:true},this.customValidityMessage,this.fieldEl??this.el)}else if(this.required&&this.value===null){this.internals.setValidity({valueMissing:true},this.errorText||this.valueMissingLabel,this.fieldEl??this.el)}else{this.internals.setValidity({})}this.emitValidityChange()}normalizeValueProp(){const t=this.value;if(t===null)return;if(typeof t==="number"){if(!Number.isFinite(t))this.value=null;return}const e=t===""||t==null?NaN:Number(t);this.value=Number.isFinite(e)?e:null}syncFormValue(){a(this.internals,this.value===null?null:String(this.value));this.updateValidity()}emitValidityChange(){const t=l(this.internals);const e=`${t.valid}|${t.validationMessage}`;if(this.lastValidityKey===e)return;const i=this.lastValidityKey!==null;this.lastValidityKey=e;if(i)this.mdValidityChange.emit(t)}formatValue(t){if(t===null)return"";try{return this.formatInfo.formatter.format(t)}catch{return String(t)}}parseNumber(t){if(!t)return null;const e=this.formatInfo;let i=t.replace(b,"");if(e.digitMap.size>0){let t="";for(const s of i)t+=e.digitMap.get(s)??s;i=t}for(const t of new Set(e.symbolChars))i=i.split(t).join("");i=i.replace(g,"");if(e.percent)i=i.split(e.percent).join("");i=i.split("%").join("");if(e.group)i=i.split(e.group).join("");if(e.decimal&&e.decimal!==".")i=i.split(e.decimal).join(".");if(e.minus&&e.minus!=="-")i=i.split(e.minus).join("-");if(e.plus&&e.plus!=="+")i=i.split(e.plus).join("+");i=i.replace(/[\u2012\u2013\u2212]/g,"-");if(i===""||i==="-"||i==="+")return null;const s=Number(i);if(!Number.isFinite(s))return null;return e.isPercent?s/100:s}hasOnlyAllowedChars(t){const e=this.formatInfo;for(const i of t.replace(b,"")){if(e.allowed.has(i))continue;if(y.test(i))continue;return false}return true}clamp(t){const e=this.minBound;const i=this.maxBound;if(e!=null&&t<e)t=e;if(i!=null&&t>i)t=i;return t}snap(t,e,i,s){const n=this.minBound??0;const r=t-n;const l=e*1e-10;let h;if(s)h=Math.round(r/e);else if(i>0)h=Math.floor(r/e+l);else h=Math.ceil(r/e-l);return v(n+h*e)}atBound(t){if(this.value===null)return false;if(t>0)return this.maxBound!=null&&this.value>=this.maxBound;return this.minBound!=null&&this.value<=this.minBound}makeDetail(t){return{value:this.value,formattedValue:this.inputValue,reason:t}}doStep(t,e,i,s){if(!(Number.isFinite(e)&&e>0))e=this.stepAmount;const n=this.parseNumber(this.inputValue);const r=n??this.value??0;let l=r+t*e;if(this.snapOnStep)l=this.snap(l,e,t,i);l=v(this.clamp(l));const h=this.value;this.internalWrite=true;this.value=l;this.internalWrite=false;this.inputValue=this.formatValue(l);const o=this.makeDetail(s);if(l!==h)this.mdInput.emit(o);if(l!==this.lastCommitted){this.lastCommitted=l;this.mdChange.emit(o)}}setAndCommit(t,e){const i=v(this.clamp(t));const s=this.value;this.internalWrite=true;this.value=i;this.internalWrite=false;this.inputValue=this.formatValue(i);const n=this.makeDetail(e);if(i!==s)this.mdInput.emit(n);if(i!==this.lastCommitted){this.lastCommitted=i;this.mdChange.emit(n)}}commitTyped(t){const e=this.parseNumber(this.inputValue);let i=e;if(i!==null&&!this.allowOutOfRange)i=this.clamp(i);const s=this.value;this.internalWrite=true;this.value=i;this.internalWrite=false;this.inputValue=this.formatValue(i);const n=this.makeDetail(t);if(i!==s)this.mdInput.emit(n);if(i!==this.lastCommitted){this.lastCommitted=i;this.mdChange.emit(n)}}focusField(){const t=this.fieldEl;if(!t)return;if(typeof t.setFocus==="function")void t.setFocus();else t.focus?.()}revertFieldText(){const t=this.fieldEl;if(t&&t.value!==this.inputValue){t.value=this.inputValue}}requestSubmit(){try{const t=this.internals?.form;const e=t?.querySelector('button[type="submit"], input[type="submit"], button:not([type])');t?.requestSubmit(e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e:undefined)}catch{}}beginHold(t,e){if(this.isDisabled||this.readOnly)return;if(e.pointerType!=="touch")this.focusField();this.endHold();this.holdDir=t;this.heldAlt=e.altKey===true;this.heldShift=e.shiftKey===true;this.holdTick();if(typeof window==="undefined")return;window.addEventListener("pointerup",this.endHold);window.addEventListener("pointercancel",this.endHold);window.addEventListener("contextmenu",this.endHold);window.addEventListener("keydown",this.trackHoldModifiers);window.addEventListener("keyup",this.trackHoldModifiers);this.holdTimer=setTimeout((()=>{this.holdInterval=setInterval(this.holdTick,p)}),m)}renderStepper(t){const e=this.steppers==="inline";const i=t==="increment"?1:-1;const n=this.isDisabled||this.readOnly||this.atBound(i);return s("md-icon-button",{key:t,class:{"md-number-field__stepper":true,[`md-number-field__stepper--${t}`]:true,"md-number-field__stepper--inline":e,"md-number-field__stepper--split":!e},slot:e?"trailing-icon":undefined,part:t,variant:e?"standard":"tonal",icon:t==="increment"?"add":"remove","aria-label":t==="increment"?this.incrementLabel:this.decrementLabel,disabled:n,groupTabindex:-1,onMouseDown:t=>t.preventDefault(),onPointerDown:t=>this.beginHold(i,t),onPointerLeave:this.endHold,onClick:t=>t.stopPropagation(),onMdClick:t=>t.stopPropagation()})}render(){const t=this.steppers==="split";return s(n,{key:"a5c75305c0b69a09e59c749fc8b9d2ff64089190",class:{"md-number-field":true,[`md-number-field--${this.variant}`]:true,"md-number-field--disabled":this.isDisabled,"md-number-field--split":t,"md-number-field--inline":this.steppers==="inline"}},t&&this.renderStepper("decrement"),s("md-text-field",{key:"0a6e19edf3250e05e6beb067bfbe1bb90fce9dc4",ref:t=>this.fieldEl=t,class:"md-number-field__field",part:"field",variant:this.variant,label:this.label,placeholder:this.placeholder,value:this.inputValue,disabled:this.isDisabled,readOnly:this.readOnly,required:this.required,error:this.error,errorText:this.errorText,supportingText:this.supportingText,reserveSupportingSpace:this.reserveSupportingSpace,density:this.density,inputMode:this.resolvedInputMode,autocomplete:"off",spellcheck:false,onMdInput:this.handleFieldInput,onMdChange:this.handleFieldChange,onKeyDown:this.handleFieldKeyDown,onFocus:this.handleFieldFocus,onBlur:this.handleFieldBlur},this.steppers==="inline"&&[this.renderStepper("decrement"),this.renderStepper("increment")]),t&&this.renderStepper("increment"))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],locale:[{onFormatChange:0}],formatOptions:[{onFormatChange:0}],required:[{updateValidity:0}],valueMissingLabel:[{updateValidity:0}]}}static get style(){return f()}},[65,"md-number-field",{variant:[513],label:[1],placeholder:[1],supportingText:[1,"supporting-text"],error:[516],errorText:[1,"error-text"],disabled:[516],readOnly:[4,"readonly"],required:[516],name:[513],density:[514],value:[1026],locale:[1],formatOptions:[1,"format-options"],min:[2],max:[2],step:[2],smallStep:[2,"small-step"],largeStep:[2,"large-step"],snapOnStep:[4,"snap-on-step"],allowOutOfRange:[4,"allow-out-of-range"],allowWheelScrub:[4,"allow-wheel-scrub"],steppers:[1],incrementLabel:[1,"increment-label"],decrementLabel:[1,"decrement-label"],valueMissingLabel:[1,"value-missing-label"],reserveSupportingSpace:[4,"reserve-supporting-space"],inputValue:[32],focused:[32],formDisabled:[32],setFocus:[64],select:[64],stepUp:[64],stepDown:[64],getValidity:[64],checkValidity:[64],reportValidity:[64],setCustomValidity:[64]},undefined,{value:[{onValueChange:0}],locale:[{onFormatChange:0}],formatOptions:[{onFormatChange:0}],required:[{updateValidity:0}],valueMissingLabel:[{updateValidity:0}]}]);function _(){if(typeof customElements==="undefined"){return}const t=["md-number-field","md-icon-button","md-ripple","md-text-field"];t.forEach((t=>{switch(t){case"md-number-field":if(!customElements.get(r(t))){customElements.define(r(t),x)}break;case"md-icon-button":if(!customElements.get(r(t))){u()}break;case"md-ripple":if(!customElements.get(r(t))){c()}break;case"md-text-field":if(!customElements.get(r(t))){d()}break}}))}_();const k=x;const N=_;export{k as MdNumberField,N as defineCustomElement};
+//# sourceMappingURL=md-number-field.js.map