@vielzeug/refine 26.10.6 → 26.10.9

package/dist/navbar.js

@@ -1,4 +1,4 @@
-import{coarsePointerMixin as e,reducedMotionMixin as t}from"./styles/mixins/accessibility.css.js";import{roundedVariantMixin as n}from"./styles/mixins/shape.css.js";import{colorThemeMixin as r,elevationMixin as i}from"./styles/mixins/theme.css.js";import{frostVariantMixin as a}from"./styles/mixins/variants.css.js";import{ICON_TAG as o}from"./icon.js";import{computeSafeRel as s}from"./utils/link.js";import{parseMaxWidthPx as c,readContainerWidth as l,resolveContainerElement as u}from"./layout/shared.js";import d from"./layout/navbar/navbar.css.js";import{computed as f,fromSubscribable as p,signal as m,untrack as h,watch as g}from"@vielzeug/ripple";import{SentinelUnavailableError as _,createElementSize as v,createMediaQuery as y}from"@vielzeug/sentinel";import{bind as b,createContext as x,define as S,getHost as C,html as w,inject as T,onCleanup as E,onMounted as D,prop as O,provide as k,useEmit as A,useSlots as j}from"@vielzeug/ore";var listen=(e,t,n,r)=>e?(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)):()=>{},hasElementContent=e=>!(e instanceof HTMLElement)||e.tagName.includes(`-`)||e.childElementCount>0?!0:(e.textContent??``).trim().length>0,findScrollContainer=e=>{let t=e.parentElement;for(;t;){let e=window.getComputedStyle(t).overflowY;if(e===`auto`||e===`scroll`||e===`overlay`)return t;t=t.parentElement}return null},M=x(`NavbarContext`),N=`ore-navbar`;S(N,{props:{breakpoint:O.string(`(max-width: 768px)`),color:O.string(),"container-breakpoints":O.bool(!1),elevation:O.number(),floating:O.bool(!1),label:O.string(`Main navigation`),"menu-close-icon":O.string(`x`),"menu-close-label":O.string(`Close navigation menu`),"menu-icon":O.string(`menu`),"menu-open-label":O.string(`Open navigation menu`),"mobile-sidebar":O.string(),rounded:O.string(),"scroll-threshold":O.number(80),sticky:O.bool(!1),variant:O.string()},setup(e){let t=C(),n=A(),r=j(),i=r.has(`logo`),a=r.has(`start`),o=r.has(),s=r.has(`end`),d=r.has(`persistent`),x=r.elements(`mobile-menu`),S=m(!1),T=m(null),O=m(!1),N=m(!1),P=m(!1),F=m(!1),I=m(!1),L=m(!1),R=m(0),z=m(!1),B=m(!1),V=m(c(e.breakpoint.value)),H=m(!1),getExternalSidebar=()=>{let n=String(e[`mobile-sidebar`].value??``).trim();if(!n)return null;let r=t.getRootNode();return(r instanceof ShadowRoot||r instanceof Document?r.querySelector(n):null)??document.querySelector(n)};k(M,{closeMobileMenu:()=>closeMobileMenu(),isMobile:f(()=>P.value),mobileMenuOpen:f(()=>F.value)});let computeMode=()=>{if(e.floating.value&&e.sticky.value)return L.value?`sticky`:`floating`;if(e.floating.value)return`floating`;if(e.sticky.value)return`sticky`},setMobileMenu=e=>{let t=!!e;if(!S.value){let e=T.value??getExternalSidebar();if(e){t?e.openDrawer?.():e.closeDrawer?.();return}}(!t||S.value)&&F.value!==t&&(F.value=t,n(`mobile-menu-change`,{open:t}))},closeMobileMenu=()=>setMobileMenu(!1),openMobileMenu=()=>setMobileMenu(!0),toggleMobileMenu=()=>{if(!S.value){let e=T.value??getExternalSidebar();if(e){typeof e.toggleDrawer==`function`?e.toggleDrawer():typeof e.openDrawer==`function`&&typeof e.closeDrawer==`function`&&(e.hasAttribute(`data-drawer-open`)?e.closeDrawer():e.openDrawer());return}}setMobileMenu(!F.value)},syncMobileMode=()=>{let t=(T.value&&!S.value?O.value:!1)||z.value||!!e[`container-breakpoints`].value&&B.value;P.value=t,t||closeMobileMenu()},readScrollOffset=e=>e?e.scrollTop||0:window.scrollY||document.documentElement.scrollTop||0,resetScrollBase=e=>{R.value=readScrollOffset(e)},updateScrolled=(t=null)=>{if(!(e.floating.value&&e.sticky.value)){L.value&&=!1;return}let n=Math.max(0,Number(e[`scroll-threshold`].value)||0),r=readScrollOffset(t)-R.value;L.value=r>n};return b({attr:{"data-mobile":()=>P.value?!0:void 0,"data-mobile-open":()=>P.value&&F.value?!0:void 0,"data-mode":()=>computeMode()??null,"data-mode-transitioning":()=>I.value?!0:void 0,"data-preview-mode":()=>H.value?!0:void 0,"data-scrolled":()=>e.floating.value&&e.sticky.value&&L.value?!0:void 0}}),D(()=>{let n=t,r=findScrollContainer(t);n.closeMobileMenu=closeMobileMenu,n.openMobileMenu=openMobileMenu,n.toggleMobileMenu=toggleMobileMenu;let i=listen(window,`scroll`,()=>{updateScrolled(r)},{passive:!0}),a=r?listen(r,`scroll`,()=>{updateScrolled(r)},{passive:!0}):void 0,o=listen(t,`keydown`,e=>{e.key===`Escape`&&F.value&&closeMobileMenu()}),mediaCleanup,mobileSidebarCleanup,s,d,resolveMobileSidebarTarget=()=>{if(mobileSidebarCleanup?.(),mobileSidebarCleanup=void 0,T.value=null,O.value=!1,N.value=!1,!String(e[`mobile-sidebar`].value??``).trim())return;let n=getExternalSidebar();if(!n){let e=t.getRootNode(),n=e instanceof Document||e instanceof ShadowRoot?e:document,r=new MutationObserver(()=>{getExternalSidebar()&&resolveMobileSidebarTarget()});r.observe(n,{childList:!0,subtree:!0}),mobileSidebarCleanup=()=>r.disconnect();return}let syncTargetState=e=>{let t=n.hasAttribute(`data-bottom-nav`),r=n.hasAttribute(`data-drawer-open`);O.value=t,N.value=e?.detail?e.detail.open:r,N.value&&!O.value&&(O.value=!0),syncMobileMode()},r=new MutationObserver(()=>{syncTargetState()});syncTargetState(),r.observe(n,{attributeFilter:[`data-bottom-nav`,`data-drawer-open`],attributes:!0}),n.addEventListener(`drawer-change`,syncTargetState),mobileSidebarCleanup=()=>{r.disconnect(),n.removeEventListener(`drawer-change`,syncTargetState)},T.value=n},triggerModeTransition=()=>{I.value=!0,s!=null&&clearTimeout(s),s=setTimeout(()=>{I.value=!1,s=void 0},220)},m=g(f(()=>e.floating.value&&e.sticky.value),e=>{if(!e){L.value&&=!1,I.value&&=!1,d=void 0,s!=null&&(clearTimeout(s),s=void 0);return}resetScrollBase(r),updateScrolled(r),d=computeMode()},{immediate:!0}),b=g(e[`mobile-sidebar`],()=>{resolveMobileSidebarTarget()},{immediate:!0}),C=g(f(()=>computeMode()),t=>{if(!(e.floating.value&&e.sticky.value)){d=t??void 0;return}let n=t??void 0;d&&n&&d!==n&&triggerModeTransition(),d=n},{immediate:!0}),w=g(S,e=>{!e&&F.value&&closeMobileMenu()},{immediate:!0}),syncMobileMenuContent=()=>{S.value=x.value.some(hasElementContent)},D=g(x,syncMobileMenuContent,{immediate:!0}),k=new MutationObserver(()=>{syncMobileMenuContent()});k.observe(t,{childList:!0,subtree:!0}),g(e.breakpoint,n=>{h(()=>{mediaCleanup?.(),mediaCleanup=void 0;let r=String(n??``).trim();V.value=c(r),z.value=!1;let i=l(t);if(B.value=i>0&&V.value!=null&&i<=V.value,syncMobileMode(),!(e[`container-breakpoints`].value&&V.value!=null)&&r)try{let e=y(r),syncMedia=e=>{e&&(z.value=e.matches,syncMobileMode())};syncMedia(e.getSnapshot());let t=g(p(e,{signal:e.disposalSignal}),syncMedia);mediaCleanup=()=>{t.dispose(),e.dispose()}}catch(e){if(!(e instanceof _))throw e}})},{immediate:!0});let A=typeof ResizeObserver==`function`?(()=>{let e=v(t);E(()=>e.dispose());let n=p(e,{signal:e.disposalSignal}),r=t.parentElement,i=u(t),a=r?v(r):void 0,o=i&&i!==r?v(i):void 0;a&&E(()=>a.dispose()),o&&E(()=>o.dispose());let s=a?p(a,{signal:a.disposalSignal}):void 0,c=o?p(o,{signal:o.disposalSignal}):void 0;return g(f(()=>[n.value?.width,n.value?.height,s?.value?.width,s?.value?.height,c?.value?.width,c?.value?.height]),()=>{let e=l(t),n=u(t)?.clientWidth??0;B.value=e>0&&V.value!=null&&e<=V.value,H.value=n>0&&n<window.innerWidth,syncMobileMode()})})():void 0;return()=>{o?.(),i?.(),a?.(),m?.dispose(),C?.dispose(),w?.dispose(),D?.dispose(),b?.dispose(),k.disconnect(),mediaCleanup?.(),mobileSidebarCleanup?.(),A?.dispose(),s!=null&&(clearTimeout(s),s=void 0)}}),w`
+import{coarsePointerMixin as e,reducedMotionMixin as t}from"./styles/mixins/accessibility.css.js";import{roundedVariantMixin as n}from"./styles/mixins/shape.css.js";import{colorThemeMixin as r,elevationMixin as i}from"./styles/mixins/theme.css.js";import{frostVariantMixin as a}from"./styles/mixins/variants.css.js";import{ELEVATION_LEVELS as o,ROUNDED_SIZES as s,THEME_COLORS as c}from"./shared/types.js";import{ICON_TAG as l}from"./icon.js";import{computeSafeRel as u}from"./utils/link.js";import{parseMaxWidthPx as d,readContainerWidth as f,resolveContainerElement as p}from"./layout/shared.js";import m from"./layout/navbar/navbar.css.js";import{computed as h,fromSubscribable as g,signal as _,untrack as v,watch as y}from"@vielzeug/ripple";import{SentinelUnavailableError as b,createElementSize as x,createMediaQuery as S}from"@vielzeug/sentinel";import{bind as C,createContext as w,define as T,getHost as E,html as D,inject as O,onCleanup as k,onMounted as A,prop as j,provide as M,useEmit as N,useSlots as P}from"@vielzeug/ore";var F=[`flat`,`solid`,`bordered`,`outline`,`frost`],listen=(e,t,n,r)=>e?(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)):()=>{},hasElementContent=e=>!(e instanceof HTMLElement)||e.tagName.includes(`-`)||e.childElementCount>0?!0:(e.textContent??``).trim().length>0,findScrollContainer=e=>{let t=e.parentElement;for(;t;){let e=window.getComputedStyle(t).overflowY;if(e===`auto`||e===`scroll`||e===`overlay`)return t;t=t.parentElement}return null},I=w(`NavbarContext`),L=`ore-navbar`;T(L,{props:{breakpoint:j.string(`(max-width: 768px)`),color:j.oneOf(c),"container-breakpoints":j.bool(!1),elevation:j.oneOf(o),floating:j.bool(!1),label:j.string(`Main navigation`),"menu-close-icon":j.string(`x`),"menu-close-label":j.string(`Close navigation menu`),"menu-icon":j.string(`menu`),"menu-open-label":j.string(`Open navigation menu`),"mobile-sidebar":j.string(),rounded:j.oneOf(s),"scroll-threshold":j.number(80),sticky:j.bool(!1),variant:j.oneOf(F)},setup(e){let t=E(),n=N(),r=P(),i=r.has(`logo`),a=r.has(`start`),o=r.has(),s=r.has(`end`),c=r.has(`persistent`),l=r.elements(`mobile-menu`),u=_(!1),m=_(null),w=_(!1),T=_(!1),O=_(!1),j=_(!1),F=_(!1),L=_(!1),R=_(0),z=_(!1),B=_(!1),V=_(d(e.breakpoint.value)),H=_(!1),getExternalSidebar=()=>{let n=String(e[`mobile-sidebar`].value??``).trim();if(!n)return null;let r=t.getRootNode();return(r instanceof ShadowRoot||r instanceof Document?r.querySelector(n):null)??document.querySelector(n)};M(I,{closeMobileMenu:()=>closeMobileMenu(),isMobile:h(()=>O.value),mobileMenuOpen:h(()=>j.value)});let computeMode=()=>{if(e.floating.value&&e.sticky.value)return L.value?`sticky`:`floating`;if(e.floating.value)return`floating`;if(e.sticky.value)return`sticky`},setMobileMenu=e=>{let t=!!e;if(!u.value){let e=m.value??getExternalSidebar();if(e){t?e.openDrawer?.():e.closeDrawer?.();return}}(!t||u.value)&&j.value!==t&&(j.value=t,n(`mobile-menu-change`,{open:t}))},closeMobileMenu=()=>setMobileMenu(!1),openMobileMenu=()=>setMobileMenu(!0),toggleMobileMenu=()=>{if(!u.value){let e=m.value??getExternalSidebar();if(e){typeof e.toggleDrawer==`function`?e.toggleDrawer():typeof e.openDrawer==`function`&&typeof e.closeDrawer==`function`&&(e.hasAttribute(`data-drawer-open`)?e.closeDrawer():e.openDrawer());return}}setMobileMenu(!j.value)},syncMobileMode=()=>{let t=(m.value&&!u.value?w.value:!1)||z.value||!!e[`container-breakpoints`].value&&B.value;O.value=t,t||closeMobileMenu()},readScrollOffset=e=>e?e.scrollTop||0:window.scrollY||document.documentElement.scrollTop||0,resetScrollBase=e=>{R.value=readScrollOffset(e)},updateScrolled=(t=null)=>{if(!(e.floating.value&&e.sticky.value)){L.value&&=!1;return}let n=Math.max(0,Number(e[`scroll-threshold`].value)||0),r=readScrollOffset(t)-R.value;L.value=r>n};return C({attr:{"data-mobile":()=>O.value?!0:void 0,"data-mobile-open":()=>O.value&&j.value?!0:void 0,"data-mode":()=>computeMode()??null,"data-mode-transitioning":()=>F.value?!0:void 0,"data-preview-mode":()=>H.value?!0:void 0,"data-scrolled":()=>e.floating.value&&e.sticky.value&&L.value?!0:void 0}}),A(()=>{let n=t,r=findScrollContainer(t);n.closeMobileMenu=closeMobileMenu,n.openMobileMenu=openMobileMenu,n.toggleMobileMenu=toggleMobileMenu;let i=listen(window,`scroll`,()=>{updateScrolled(r)},{passive:!0}),a=r?listen(r,`scroll`,()=>{updateScrolled(r)},{passive:!0}):void 0,o=listen(t,`keydown`,e=>{e.key===`Escape`&&j.value&&closeMobileMenu()}),mediaCleanup,mobileSidebarCleanup,s,c,resolveMobileSidebarTarget=()=>{if(mobileSidebarCleanup?.(),mobileSidebarCleanup=void 0,m.value=null,w.value=!1,T.value=!1,!String(e[`mobile-sidebar`].value??``).trim())return;let n=getExternalSidebar();if(!n){let e=t.getRootNode(),n=e instanceof Document||e instanceof ShadowRoot?e:document,r=new MutationObserver(()=>{getExternalSidebar()&&resolveMobileSidebarTarget()});r.observe(n,{childList:!0,subtree:!0}),mobileSidebarCleanup=()=>r.disconnect();return}let syncTargetState=e=>{let t=n.hasAttribute(`data-bottom-nav`),r=n.hasAttribute(`data-drawer-open`);w.value=t,T.value=e?.detail?e.detail.open:r,T.value&&!w.value&&(w.value=!0),syncMobileMode()},r=new MutationObserver(()=>{syncTargetState()});syncTargetState(),r.observe(n,{attributeFilter:[`data-bottom-nav`,`data-drawer-open`],attributes:!0}),n.addEventListener(`drawer-change`,syncTargetState),mobileSidebarCleanup=()=>{r.disconnect(),n.removeEventListener(`drawer-change`,syncTargetState)},m.value=n},triggerModeTransition=()=>{F.value=!0,s!=null&&clearTimeout(s),s=setTimeout(()=>{F.value=!1,s=void 0},220)},_=y(h(()=>e.floating.value&&e.sticky.value),e=>{if(!e){L.value&&=!1,F.value&&=!1,c=void 0,s!=null&&(clearTimeout(s),s=void 0);return}resetScrollBase(r),updateScrolled(r),c=computeMode()},{immediate:!0}),C=y(e[`mobile-sidebar`],()=>{resolveMobileSidebarTarget()},{immediate:!0}),E=y(h(()=>computeMode()),t=>{if(!(e.floating.value&&e.sticky.value)){c=t??void 0;return}let n=t??void 0;c&&n&&c!==n&&triggerModeTransition(),c=n},{immediate:!0}),D=y(u,e=>{!e&&j.value&&closeMobileMenu()},{immediate:!0}),syncMobileMenuContent=()=>{u.value=l.value.some(hasElementContent)},O=y(l,syncMobileMenuContent,{immediate:!0}),A=new MutationObserver(()=>{syncMobileMenuContent()});A.observe(t,{childList:!0,subtree:!0}),y(e.breakpoint,n=>{v(()=>{mediaCleanup?.(),mediaCleanup=void 0;let r=String(n??``).trim();V.value=d(r),z.value=!1;let i=f(t);if(B.value=i>0&&V.value!=null&&i<=V.value,syncMobileMode(),!(e[`container-breakpoints`].value&&V.value!=null)&&r)try{let e=S(r),syncMedia=e=>{e&&(z.value=e.matches,syncMobileMode())};syncMedia(e.getSnapshot());let t=y(g(e,{signal:e.disposalSignal}),syncMedia);mediaCleanup=()=>{t.dispose(),e.dispose()}}catch(e){if(!(e instanceof b))throw e}})},{immediate:!0});let M=typeof ResizeObserver==`function`?(()=>{let e=x(t);k(()=>e.dispose());let n=g(e,{signal:e.disposalSignal}),r=t.parentElement,i=p(t),a=r?x(r):void 0,o=i&&i!==r?x(i):void 0;a&&k(()=>a.dispose()),o&&k(()=>o.dispose());let s=a?g(a,{signal:a.disposalSignal}):void 0,c=o?g(o,{signal:o.disposalSignal}):void 0;return y(h(()=>[n.value?.width,n.value?.height,s?.value?.width,s?.value?.height,c?.value?.width,c?.value?.height]),()=>{let e=f(t),n=p(t)?.clientWidth??0;B.value=e>0&&V.value!=null&&e<=V.value,H.value=n>0&&n<window.innerWidth,syncMobileMode()})})():void 0;return()=>{o?.(),i?.(),a?.(),_?.dispose(),E?.dispose(),D?.dispose(),O?.dispose(),C?.dispose(),A.disconnect(),mediaCleanup?.(),mobileSidebarCleanup?.(),M?.dispose(),s!=null&&(clearTimeout(s),s=void 0)}}),D`
       <nav part="nav" aria-label="${e.label}">
         <div class="navbar" part="bar">
           <div class="navbar-logo" part="logo" ?hidden=${()=>!i.value}>
@@ -17,7 +17,7 @@ import{coarsePointerMixin as e,reducedMotionMixin as t}from"./styles/mixins/acce
             <slot name="end"></slot>
           </div>
 
-          <div class="navbar-persistent" part="persistent" ?hidden=${()=>!d.value}>
+          <div class="navbar-persistent" part="persistent" ?hidden=${()=>!c.value}>
             <slot name="persistent"></slot>
           </div>
 
@@ -25,13 +25,13 @@ import{coarsePointerMixin as e,reducedMotionMixin as t}from"./styles/mixins/acce
             class="mobile-toggle"
             part="mobile-toggle"
             type="button"
-            aria-label="${()=>(S.value?F.value:N.value)?e[`menu-close-label`].value:e[`menu-open-label`].value}"
+            aria-label="${()=>(u.value?j.value:T.value)?e[`menu-close-label`].value:e[`menu-open-label`].value}"
             aria-controls="mobile-menu-panel"
-            aria-expanded="${()=>String(S.value?F.value:N.value)}"
-            ?hidden=${()=>!P.value||!S.value&&!T.value}
+            aria-expanded="${()=>String(u.value?j.value:T.value)}"
+            ?hidden=${()=>!O.value||!u.value&&!m.value}
             @click="${toggleMobileMenu}">
             <ore-icon
-              name="${()=>(S.value?F.value:N.value)?e[`menu-close-icon`].value:e[`menu-icon`].value}"
+              name="${()=>(u.value?j.value:T.value)?e[`menu-close-icon`].value:e[`menu-icon`].value}"
               size="18"
               stroke-width="2.5"
               aria-hidden="true"></ore-icon>
@@ -44,11 +44,11 @@ import{coarsePointerMixin as e,reducedMotionMixin as t}from"./styles/mixins/acce
           part="mobile-menu"
           role="navigation"
           aria-label="${()=>`${e.label.value} mobile menu`}"
-          ?hidden=${()=>!P.value||!F.value||!S.value}>
+          ?hidden=${()=>!O.value||!j.value||!u.value}>
           <slot name="mobile-menu"></slot>
         </div>
       </nav>
-    `},styles:[r,i,n,e,t,a(`.navbar`),d]});var P=`ore-navbar-item`;S(P,{props:{active:O.bool(!1),ariaLabel:O.string(),disabled:O.bool(!1),href:O.string(),"icon-only":O.bool(!1),rel:O.string(),target:O.string()},setup(e){let t=j(),hasIcon=()=>t.has(`icon`).value,hasEnd=()=>t.has(`end`).value,n=T(M);b({attr:{"navbar-mobile":()=>n?.isMobile.value?!0:void 0,"navbar-mobile-open":()=>n?.mobileMenuOpen.value?!0:void 0}});let isLink=()=>!!e.href.value&&!e.disabled.value,r=f(()=>s(e.rel.value,e.target.value)),i=f(()=>{if(!e.active.value)return null;let t=e.href.value;return t!==void 0&&t.startsWith(`#`)?`location`:`page`}),closeMobileMenuIfOpen=()=>{n?.mobileMenuOpen.value&&n.closeMobileMenu()},renderItemContent=()=>w`
+    `},styles:[r,i,n,e,t,a(`.navbar`),m]});var R=`ore-navbar-item`;T(R,{props:{active:j.bool(!1),ariaLabel:j.string(),disabled:j.bool(!1),href:j.string(),"icon-only":j.bool(!1),rel:j.string(),target:j.string()},setup(e){let t=P(),hasIcon=()=>t.has(`icon`).value,hasEnd=()=>t.has(`end`).value,n=O(I);C({attr:{"navbar-mobile":()=>n?.isMobile.value?!0:void 0,"navbar-mobile-open":()=>n?.mobileMenuOpen.value?!0:void 0}});let isLink=()=>!!e.href.value&&!e.disabled.value,r=h(()=>u(e.rel.value,e.target.value)),i=h(()=>{if(!e.active.value)return null;let t=e.href.value;return t!==void 0&&t.startsWith(`#`)?`location`:`page`}),closeMobileMenuIfOpen=()=>{n?.mobileMenuOpen.value&&n.closeMobileMenu()},renderItemContent=()=>D`
       <span class="item-icon" part="item-icon" ?hidden=${()=>!hasIcon()} aria-hidden="true">
         <slot name="icon"></slot>
       </span>
@@ -56,8 +56,8 @@ import{coarsePointerMixin as e,reducedMotionMixin as t}from"./styles/mixins/acce
       <span class="item-end" part="item-end" ?hidden=${()=>!hasEnd()}>
         <slot name="end"></slot>
       </span>
-    `;return w`
-      ${()=>isLink()?w`
+    `;return D`
+      ${()=>isLink()?D`
             <a
               class="item"
               part="item"
@@ -69,14 +69,14 @@ import{coarsePointerMixin as e,reducedMotionMixin as t}from"./styles/mixins/acce
               @click=${closeMobileMenuIfOpen}>
               ${renderItemContent()}
             </a>
-          `:e.disabled.value?w`
+          `:e.disabled.value?D`
             <div
               class="item"
               part="item"
               tabindex="-1"
               aria-label="${()=>e.ariaLabel.value??null}"
               aria-disabled="true">${renderItemContent()}</div>
-          `:w`
+          `:D`
           <button
             class="item"
             part="item"
@@ -84,5 +84,5 @@ import{coarsePointerMixin as e,reducedMotionMixin as t}from"./styles/mixins/acce
             aria-label="${()=>e.ariaLabel.value??null}"
             @click=${closeMobileMenuIfOpen}>${renderItemContent()}</button>
         `}
-    `},styles:[e,d]});export{o as ICON_TAG,M as NAVBAR_CTX,P as NAVBAR_ITEM_TAG,N as NAVBAR_TAG};
+    `},styles:[e,m]});export{l as ICON_TAG,I as NAVBAR_CTX,R as NAVBAR_ITEM_TAG,L as NAVBAR_TAG};
 //# sourceMappingURL=navbar.js.map

package/dist/navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.js","names":[],"sources":["../src/layout/navbar/navbar.ts"],"sourcesContent":["import {\n  bind,\n  createContext,\n  define,\n  getHost,\n  html,\n  inject,\n  onCleanup,\n  onMounted,\n  prop,\n  provide,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { computed, fromSubscribable, type Readable, signal, untrack, watch } from '@vielzeug/ripple';\nimport { createElementSize, createMediaQuery, SentinelUnavailableError } from '@vielzeug/sentinel';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport type { ElevationLevel, RoundedSize, ThemeColor, VisualVariant } from '../../types';\nimport { computeSafeRel } from '../../utils';\nimport { parseMaxWidthPx, readContainerWidth, resolveContainerElement } from '../shared';\nimport navbarStyles from './navbar.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\n\nconst listen = <E extends Event = Event>(\n  el: EventTarget | null | undefined,\n  name: string,\n  handler: (e: E) => void,\n  options?: AddEventListenerOptions,\n): (() => void) => {\n  if (!el) return () => {};\n\n  el.addEventListener(name, handler as EventListener, options);\n\n  return () => el.removeEventListener(name, handler as EventListener, options);\n};\n\ntype NavbarMode = 'floating' | 'sticky';\n\nconst hasElementContent = (el: Element): boolean => {\n  if (!(el instanceof HTMLElement)) return true;\n\n  if (el.tagName.includes('-')) return true;\n\n  if (el.childElementCount > 0) return true;\n\n  return (el.textContent ?? '').trim().length > 0;\n};\n\nconst findScrollContainer = (start: HTMLElement): HTMLElement | null => {\n  let current: HTMLElement | null = start.parentElement;\n\n  while (current) {\n    const styles = window.getComputedStyle(current);\n    const overflowY = styles.overflowY;\n\n    if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {\n      return current;\n    }\n\n    current = current.parentElement;\n  }\n\n  return null;\n};\n\n/** Context provided by `ore-navbar` to `ore-navbar-item` children. */\nexport type NavbarContext = {\n  closeMobileMenu: () => void;\n  isMobile: Readable<boolean>;\n  mobileMenuOpen: Readable<boolean>;\n};\n\n/** Injection key for navbar context. */\nexport const NAVBAR_CTX = createContext<NavbarContext>('NavbarContext');\n\n/** Navbar component events */\nexport type OreNavbarEvents = {\n  'mobile-menu-change': { open: boolean };\n};\n\n/** Navbar component element interface */\nexport type NavbarElement = HTMLElement &\n  OreNavbarProps & {\n    closeMobileMenu(): void;\n    openMobileMenu(): void;\n    toggleMobileMenu(): void;\n  };\n\ntype MobileSidebarElement = HTMLElement & {\n  closeDrawer?: () => void;\n  openDrawer?: () => void;\n  toggleDrawer?: () => void;\n};\n\n/** Navbar component properties */\nexport type OreNavbarProps = {\n  /** CSS media query used for mobile layout switching */\n  breakpoint?: string;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Evaluate mobile breakpoint against container width only when possible. */\n  'container-breakpoints'?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Start as detached floating navbar */\n  floating?: boolean;\n  /** Accessible nav landmark label */\n  label?: string;\n  /** Icon shown while the mobile menu is open */\n  'menu-close-icon'?: string;\n  'menu-close-label'?: string;\n  /** Icon shown while the mobile menu is closed */\n  'menu-icon'?: string;\n  'menu-open-label'?: string;\n  /** CSS selector for an external sidebar toggled by the mobile button */\n  'mobile-sidebar'?: string;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Scroll threshold in px used by floating+sticky transition */\n  'scroll-threshold'?: number;\n  /** Stick to top of viewport */\n  sticky?: boolean;\n  /** Visual style variant */\n  variant?: Exclude<VisualVariant, 'ghost' | 'text'>;\n};\n\n/** Navbar item properties */\nexport type OreNavbarItemProps = {\n  /** Accessible name for icon-only items, forwarded to the internal button or anchor */\n  ariaLabel?: string;\n  /** Whether this item represents the current page */\n  active?: boolean;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Link target URL. Renders an anchor when provided. */\n  href?: string;\n  /**\n   * Icon-only mode: hides the (empty) label region and switches to compact, symmetric\n   * padding instead of the icon+label layout's wider horizontal padding. Set this whenever\n   * the default slot is intentionally left empty (name conveyed via `aria-label` instead),\n   * otherwise the empty label still reserves its inter-element gap and the item ends up\n   * with lopsided padding around the icon.\n   */\n  'icon-only'?: boolean;\n  /** Relationship of linked URL (anchor-only) */\n  rel?: string;\n  /** Browsing context for link (anchor-only) */\n  target?: string;\n};\n\n/**\n * `ore-navbar`: Responsive navigation with sticky/floating modes and a mobile overflow panel.\n *\n * @element ore-navbar\n * @element ore-navbar-item - Navigation link or button placed in the default or mobile-menu slot\n *\n * @attr {string} label - Accessible nav landmark label\n * @attr {string} menu-icon - Icon shown while the mobile menu is closed\n * @attr {string} menu-close-icon - Icon shown while the mobile menu is open\n * @attr {boolean} sticky - Makes navbar sticky at top\n * @attr {boolean} floating - Makes navbar detached and floating\n * @attr {number} scroll-threshold - Scroll threshold for floating+sticky transition\n * @attr {string} breakpoint - CSS media query used for mobile mode\n * @attr {boolean} container-breakpoints - Evaluates parseable max-width breakpoints against container width\n * @attr {string} variant - Visual variant: 'flat' | 'solid' | 'bordered' | 'outline' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n *\n * @fires mobile-menu-change - Emitted when mobile menu open state changes. detail: { open: boolean }\n *\n * @slot logo - Brand/logo content rendered at the leading edge\n * @slot start - Content rendered in the left/start region\n * @slot - Center navigation content rendered between the start and end regions\n * @slot end - Content rendered in the right/end region\n * @slot persistent - Trailing content that stays in the bar through the mobile collapse (global actions and status icons)\n * @slot mobile-menu - Controls and links rendered inside the mobile overflow panel\n *\n * @cssprop --navbar-height - Navbar bar height\n * @cssprop --navbar-width - Max width of the navbar content\n * @cssprop --navbar-offset - Horizontal offset for floating/sticky positioning\n * @cssprop --navbar-bg - Navbar background color\n * @cssprop --navbar-color - Navbar text color\n * @cssprop --navbar-border-color - Navbar border color\n * @cssprop --navbar-shadow - Navbar box shadow\n * @cssprop --navbar-radius - Border radius (floating/sticky modes)\n * @cssprop --navbar-backdrop-filter - Backdrop filter for blur effect\n * @cssprop --navbar-item-color - Nav item text color\n * @cssprop --navbar-item-hover-color - Nav item hover text color\n * @cssprop --navbar-item-hover-bg - Nav item hover background\n * @cssprop --navbar-item-active-color - Nav item active/current text color\n * @cssprop --navbar-item-active-bg - Nav item active/current background\n * @part nav - Outer navigation landmark\n * @part bar - Main navbar row container\n * @part logo - Logo slot container\n * @part start - Leading action/content region\n * @part center - Center content region\n * @part end - Trailing action/content region\n * @part persistent - Trailing region that survives the mobile collapse\n * @part mobile-toggle - Mobile menu toggle button\n * @part mobile-menu - Mobile overflow panel\n * @part item-icon - Leading icon inside navbar items\n * @part item-label - Label text inside navbar items\n * @part item-end - Trailing content inside navbar items\n * @part item - Clickable navbar item root\n * @example\n * ```html\n * <ore-navbar sticky elevation=\"1\">\n *   <a href=\"/\" slot=\"logo\"><strong>MyApp</strong></a>\n *   <ore-navbar-item href=\"/dashboard\">Dashboard</ore-navbar-item>\n *   <ore-navbar-item href=\"/docs\">Docs</ore-navbar-item>\n *   <ore-button slot=\"end\" variant=\"solid\" color=\"primary\" size=\"sm\">Sign in</ore-button>\n * </ore-navbar>\n * ```\n */\nexport const NAVBAR_TAG = 'ore-navbar' as const;\ndefine<OreNavbarProps>(NAVBAR_TAG, {\n  props: {\n    breakpoint: prop.string('(max-width: 768px)'),\n    color: prop.string<ThemeColor>(),\n    'container-breakpoints': prop.bool(false),\n    elevation: prop.number<ElevationLevel>(),\n    floating: prop.bool(false),\n    label: prop.string('Main navigation'),\n    'menu-close-icon': prop.string('x'),\n    'menu-close-label': prop.string('Close navigation menu'),\n    'menu-icon': prop.string('menu'),\n    'menu-open-label': prop.string('Open navigation menu'),\n    'mobile-sidebar': prop.string(),\n    rounded: prop.string<RoundedSize>(),\n    'scroll-threshold': prop.number(80),\n    sticky: prop.bool(false),\n    variant: prop.string<Exclude<VisualVariant, 'ghost' | 'text'>>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreNavbarEvents>();\n    const slots = useSlots();\n\n    const hasLogo = slots.has('logo');\n    const hasStart = slots.has('start');\n    const hasCenter = slots.has();\n    const hasEnd = slots.has('end');\n    const hasPersistent = slots.has('persistent');\n    const mobileMenuElements = slots.elements('mobile-menu');\n    const hasMobileMenu = signal(false);\n    const mobileSidebarTarget = signal<MobileSidebarElement | null>(null);\n    const isExternalMobileMode = signal(false);\n    const isExternalMobileOpen = signal(false);\n    const isMobile = signal(false);\n    const isMobileMenuOpen = signal(false);\n    const isModeTransitioning = signal(false);\n    const isScrolled = signal(false);\n    const scrollBase = signal(0);\n    const mediaMatches = signal(false);\n    const sizeMatches = signal(false);\n    const maxWidthPx = signal<number | undefined>(parseMaxWidthPx(props.breakpoint.value));\n    const isPreviewMode = signal(false);\n\n    const getExternalSidebar = () => {\n      const selector = String(props['mobile-sidebar'].value ?? '').trim();\n\n      if (!selector) return null;\n\n      const root = el.getRootNode();\n      const scopedTarget =\n        root instanceof ShadowRoot || root instanceof Document\n          ? (root.querySelector(selector) as MobileSidebarElement | null)\n          : null;\n\n      return scopedTarget ?? (document.querySelector(selector) as MobileSidebarElement | null);\n    };\n\n    provide(NAVBAR_CTX, {\n      // Wrapped, not passed directly: `closeMobileMenu` (below) isn't defined yet at this point\n      // in `setup()`; by the time `ore-navbar-item` actually calls this (a later click), it is.\n      closeMobileMenu: () => closeMobileMenu(),\n      isMobile: computed(() => isMobile.value) as Readable<boolean>,\n      mobileMenuOpen: computed(() => isMobileMenuOpen.value) as Readable<boolean>,\n    });\n\n    const computeMode = (): NavbarMode | undefined => {\n      if (props.floating.value && props.sticky.value) {\n        return isScrolled.value ? 'sticky' : 'floating';\n      }\n\n      if (props.floating.value) return 'floating';\n\n      if (props.sticky.value) return 'sticky';\n\n      return undefined;\n    };\n\n    const setMobileMenu = (next: boolean) => {\n      const open = Boolean(next);\n\n      if (!hasMobileMenu.value) {\n        const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n        if (target) {\n          if (open) {\n            target.openDrawer?.();\n          } else {\n            target.closeDrawer?.();\n          }\n\n          return;\n        }\n      }\n\n      if (open && !hasMobileMenu.value) return;\n\n      if (isMobileMenuOpen.value === open) return;\n\n      isMobileMenuOpen.value = open;\n      emit('mobile-menu-change', { open });\n    };\n\n    const closeMobileMenu = () => setMobileMenu(false);\n    const openMobileMenu = () => setMobileMenu(true);\n    const toggleMobileMenu = () => {\n      if (!hasMobileMenu.value) {\n        const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n        if (target) {\n          if (typeof target.toggleDrawer === 'function') {\n            target.toggleDrawer();\n          } else if (typeof target.openDrawer === 'function' && typeof target.closeDrawer === 'function') {\n            const isOpen = target.hasAttribute('data-drawer-open');\n\n            if (isOpen) target.closeDrawer();\n            else target.openDrawer();\n          }\n\n          return;\n        }\n      }\n\n      setMobileMenu(!isMobileMenuOpen.value);\n    };\n\n    const syncMobileMode = () => {\n      const next =\n        (mobileSidebarTarget.value && !hasMobileMenu.value ? isExternalMobileMode.value : false) ||\n        mediaMatches.value ||\n        (Boolean(props['container-breakpoints'].value) && sizeMatches.value);\n\n      isMobile.value = next;\n\n      if (!next) closeMobileMenu();\n    };\n\n    const readScrollOffset = (scrollContainer: HTMLElement | null): number => {\n      if (scrollContainer) {\n        return scrollContainer.scrollTop || 0;\n      }\n\n      return window.scrollY || document.documentElement.scrollTop || 0;\n    };\n\n    const resetScrollBase = (scrollContainer: HTMLElement | null) => {\n      scrollBase.value = readScrollOffset(scrollContainer);\n    };\n\n    const updateScrolled = (scrollContainer: HTMLElement | null = null) => {\n      if (!(props.floating.value && props.sticky.value)) {\n        if (isScrolled.value) isScrolled.value = false;\n\n        return;\n      }\n\n      const threshold = Math.max(0, Number(props['scroll-threshold'].value) || 0);\n      const currentOffset = readScrollOffset(scrollContainer);\n      const delta = currentOffset - scrollBase.value;\n\n      isScrolled.value = delta > threshold;\n    };\n\n    bind({\n      attr: {\n        'data-mobile': () => (isMobile.value ? true : undefined),\n        'data-mobile-open': () => (isMobile.value && isMobileMenuOpen.value ? true : undefined),\n        'data-mode': () => computeMode() ?? null,\n        'data-mode-transitioning': () => (isModeTransitioning.value ? true : undefined),\n        'data-preview-mode': () => (isPreviewMode.value ? true : undefined),\n        'data-scrolled': () => (props.floating.value && props.sticky.value && isScrolled.value ? true : undefined),\n      },\n    });\n\n    onMounted(() => {\n      const navbarEl = el as NavbarElement;\n      const scrollContainer = findScrollContainer(el);\n\n      navbarEl.closeMobileMenu = closeMobileMenu;\n      navbarEl.openMobileMenu = openMobileMenu;\n      navbarEl.toggleMobileMenu = toggleMobileMenu;\n\n      const stopScroll = listen(\n        window,\n        'scroll',\n        () => {\n          updateScrolled(scrollContainer);\n        },\n        { passive: true },\n      );\n      const stopContainerScroll = scrollContainer\n        ? listen(\n            scrollContainer,\n            'scroll',\n            () => {\n              updateScrolled(scrollContainer);\n            },\n            { passive: true },\n          )\n        : undefined;\n      const stopEscape = listen(el, 'keydown', (event: KeyboardEvent) => {\n        if (event.key !== 'Escape' || !isMobileMenuOpen.value) return;\n\n        closeMobileMenu();\n      });\n\n      let mediaCleanup: (() => void) | undefined;\n      let mobileSidebarCleanup: (() => void) | undefined;\n      let modeTransitionTimeout: ReturnType<typeof setTimeout> | undefined;\n      let previousMode: NavbarMode | undefined;\n\n      const resolveMobileSidebarTarget = () => {\n        mobileSidebarCleanup?.();\n        mobileSidebarCleanup = undefined;\n        mobileSidebarTarget.value = null;\n        isExternalMobileMode.value = false;\n        isExternalMobileOpen.value = false;\n\n        if (!String(props['mobile-sidebar'].value ?? '').trim()) return;\n\n        const target = getExternalSidebar();\n\n        if (!target) {\n          const root = el.getRootNode();\n          const discoveryRoot = root instanceof Document || root instanceof ShadowRoot ? root : document;\n          const discoveryObserver = new MutationObserver(() => {\n            if (getExternalSidebar()) resolveMobileSidebarTarget();\n          });\n\n          discoveryObserver.observe(discoveryRoot, { childList: true, subtree: true });\n          mobileSidebarCleanup = () => discoveryObserver.disconnect();\n\n          return;\n        }\n\n        const syncTargetState = (event?: CustomEvent<{ open: boolean }>) => {\n          const hasBottomNav = target.hasAttribute('data-bottom-nav');\n          const hasDrawerOpen = target.hasAttribute('data-drawer-open');\n\n          isExternalMobileMode.value = hasBottomNav;\n          isExternalMobileOpen.value = event?.detail ? event.detail.open : hasDrawerOpen;\n\n          // If the sidebar is reporting it's open, it must be in bottom-nav mode\n          // (either natural or forced). We honor this to avoid race conditions\n          // where attributes haven't reflected yet.\n          if (isExternalMobileOpen.value && !isExternalMobileMode.value) {\n            isExternalMobileMode.value = true;\n          }\n\n          syncMobileMode();\n        };\n\n        const targetObserver = new MutationObserver(() => {\n          syncTargetState();\n        });\n\n        syncTargetState();\n        targetObserver.observe(target, {\n          attributeFilter: ['data-bottom-nav', 'data-drawer-open'],\n          attributes: true,\n        });\n        target.addEventListener('drawer-change', syncTargetState as EventListener);\n        mobileSidebarCleanup = () => {\n          targetObserver.disconnect();\n          target.removeEventListener('drawer-change', syncTargetState as EventListener);\n        };\n        mobileSidebarTarget.value = target;\n      };\n\n      const triggerModeTransition = () => {\n        isModeTransitioning.value = true;\n\n        if (modeTransitionTimeout != null) clearTimeout(modeTransitionTimeout);\n\n        modeTransitionTimeout = setTimeout(() => {\n          isModeTransitioning.value = false;\n          modeTransitionTimeout = undefined;\n        }, 220);\n      };\n\n      const stopModeWatch = watch(\n        computed(() => props.floating.value && props.sticky.value),\n        (enabled) => {\n          if (!enabled) {\n            if (isScrolled.value) isScrolled.value = false;\n\n            if (isModeTransitioning.value) isModeTransitioning.value = false;\n\n            previousMode = undefined;\n\n            if (modeTransitionTimeout != null) {\n              clearTimeout(modeTransitionTimeout);\n              modeTransitionTimeout = undefined;\n            }\n\n            return;\n          }\n\n          resetScrollBase(scrollContainer);\n          updateScrolled(scrollContainer);\n\n          const currentMode = computeMode();\n\n          previousMode = currentMode;\n        },\n        { immediate: true },\n      );\n\n      const stopMobileSidebarWatch = watch(\n        props['mobile-sidebar'],\n        () => {\n          resolveMobileSidebarTarget();\n        },\n        { immediate: true },\n      );\n\n      const stopModeTransitionWatch = watch(\n        computed(() => computeMode()),\n        (nextMode) => {\n          const comboEnabled = props.floating.value && props.sticky.value;\n\n          if (!comboEnabled) {\n            previousMode = nextMode ?? undefined;\n\n            return;\n          }\n\n          const next = nextMode ?? undefined;\n\n          if (previousMode && next && previousMode !== next) {\n            triggerModeTransition();\n          }\n\n          previousMode = next;\n        },\n        { immediate: true },\n      );\n\n      const stopMobileMenuSlotWatch = watch(\n        hasMobileMenu,\n        (hasContent) => {\n          if (!hasContent && isMobileMenuOpen.value) {\n            closeMobileMenu();\n          }\n        },\n        { immediate: true },\n      );\n      const syncMobileMenuContent = () => {\n        hasMobileMenu.value = mobileMenuElements.value.some(hasElementContent);\n      };\n      const stopMobileMenuElementsWatch = watch(mobileMenuElements, syncMobileMenuContent, { immediate: true });\n      const mobileMenuContentObserver = new MutationObserver(() => {\n        syncMobileMenuContent();\n      });\n\n      // Parser-created demo content can populate an already-assigned slot wrapper after this\n      // custom element connects; `slotchange` alone does not observe that nested content.\n      mobileMenuContentObserver.observe(el, { childList: true, subtree: true });\n\n      watch(\n        props.breakpoint,\n        (query) => {\n          // Untrack the callback body: the watch already tracks `props.breakpoint` via\n          // its internal `read()`. Without untrack, signals read inside (e.g.\n          // `mediaMatches` via `syncMobileMode()`) become dependencies of this watch\n          // effect. When the sentinel updates `mediaMatches` on a viewport change, the\n          // effect re-runs: `EffectNode.run()` disposes the previous scope (killing the\n          // mediaHandle and its MediaQueryList listener) but the callback is NOT invoked\n          // (source unchanged), so no new handle is created. The navbar is then deaf to\n          // further MQ changes and stays stuck in mobile mode after resizing back to\n          // desktop.\n          untrack(() => {\n            mediaCleanup?.();\n            mediaCleanup = undefined;\n\n            const mediaQuery = String(query ?? '').trim();\n\n            maxWidthPx.value = parseMaxWidthPx(mediaQuery);\n            mediaMatches.value = false;\n\n            const width = readContainerWidth(el);\n\n            sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n            syncMobileMode();\n\n            if (props['container-breakpoints'].value && maxWidthPx.value != null) {\n              return;\n            }\n\n            if (!mediaQuery) {\n              return;\n            }\n\n            try {\n              const mediaHandle = createMediaQuery(mediaQuery);\n              const syncMedia = (state: ReturnType<typeof mediaHandle.getSnapshot>) => {\n                if (state) {\n                  mediaMatches.value = state.matches;\n                  syncMobileMode();\n                }\n              };\n\n              syncMedia(mediaHandle.getSnapshot());\n\n              const mediaCleanupFn = watch(\n                fromSubscribable(mediaHandle, { signal: mediaHandle.disposalSignal }),\n                syncMedia,\n              );\n              mediaCleanup = () => {\n                mediaCleanupFn.dispose();\n                mediaHandle.dispose();\n              };\n            } catch (error) {\n              if (!(error instanceof SentinelUnavailableError)) throw error;\n            }\n          });\n        },\n        { immediate: true },\n      );\n\n      const stopResizeEffect =\n        typeof ResizeObserver === 'function'\n          ? (() => {\n              const hostSize = createElementSize(el);\n              onCleanup(() => hostSize.dispose());\n              const hostSizeSignal = fromSubscribable(hostSize, { signal: hostSize.disposalSignal });\n\n              const wrapperEl = el.parentElement;\n              const containerEl = resolveContainerElement(el);\n              const wrapperSize = wrapperEl ? createElementSize(wrapperEl) : undefined;\n              const parentSize = containerEl && containerEl !== wrapperEl ? createElementSize(containerEl) : undefined;\n\n              if (wrapperSize) {\n                onCleanup(() => wrapperSize.dispose());\n              }\n              if (parentSize) {\n                onCleanup(() => parentSize.dispose());\n              }\n\n              const wrapperSizeSignal = wrapperSize\n                ? fromSubscribable(wrapperSize, { signal: wrapperSize.disposalSignal })\n                : undefined;\n              const parentSizeSignal = parentSize\n                ? fromSubscribable(parentSize, { signal: parentSize.disposalSignal })\n                : undefined;\n\n              return watch(\n                computed(() => [\n                  hostSizeSignal.value?.width,\n                  hostSizeSignal.value?.height,\n                  wrapperSizeSignal?.value?.width,\n                  wrapperSizeSignal?.value?.height,\n                  parentSizeSignal?.value?.width,\n                  parentSizeSignal?.value?.height,\n                ]),\n                () => {\n                  const width = readContainerWidth(el);\n                  const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n                  sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n                  isPreviewMode.value = parentWidth > 0 && parentWidth < window.innerWidth;\n                  syncMobileMode();\n                },\n              );\n            })()\n          : undefined;\n\n      return () => {\n        stopEscape?.();\n        stopScroll?.();\n        stopContainerScroll?.();\n        stopModeWatch?.dispose();\n        stopModeTransitionWatch?.dispose();\n        stopMobileMenuSlotWatch?.dispose();\n        stopMobileMenuElementsWatch?.dispose();\n        stopMobileSidebarWatch?.dispose();\n        mobileMenuContentObserver.disconnect();\n        mediaCleanup?.();\n        mobileSidebarCleanup?.();\n        stopResizeEffect?.dispose();\n\n        if (modeTransitionTimeout != null) {\n          clearTimeout(modeTransitionTimeout);\n          modeTransitionTimeout = undefined;\n        }\n      };\n    });\n\n    return html`\n      <nav part=\"nav\" aria-label=\"${props.label}\">\n        <div class=\"navbar\" part=\"bar\">\n          <div class=\"navbar-logo\" part=\"logo\" ?hidden=${() => !hasLogo.value}>\n            <slot name=\"logo\"></slot>\n          </div>\n\n          <div class=\"navbar-start\" part=\"start\" ?hidden=${() => !hasStart.value}>\n            <slot name=\"start\"></slot>\n          </div>\n\n          <div class=\"navbar-center\" part=\"center\" ?hidden=${() => !hasCenter.value}>\n            <slot></slot>\n          </div>\n\n          <div class=\"navbar-end\" part=\"end\" ?hidden=${() => !hasEnd.value}>\n            <slot name=\"end\"></slot>\n          </div>\n\n          <div class=\"navbar-persistent\" part=\"persistent\" ?hidden=${() => !hasPersistent.value}>\n            <slot name=\"persistent\"></slot>\n          </div>\n\n          <button\n            class=\"mobile-toggle\"\n            part=\"mobile-toggle\"\n            type=\"button\"\n            aria-label=\"${() =>\n              (hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)\n                ? props['menu-close-label'].value\n                : props['menu-open-label'].value}\"\n            aria-controls=\"mobile-menu-panel\"\n            aria-expanded=\"${() => String(hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)}\"\n            ?hidden=${() => !isMobile.value || (!hasMobileMenu.value && !mobileSidebarTarget.value)}\n            @click=\"${toggleMobileMenu}\">\n            <ore-icon\n              name=\"${() =>\n                (hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)\n                  ? props['menu-close-icon'].value\n                  : props['menu-icon'].value}\"\n              size=\"18\"\n              stroke-width=\"2.5\"\n              aria-hidden=\"true\"></ore-icon>\n          </button>\n        </div>\n\n        <div\n          id=\"mobile-menu-panel\"\n          class=\"mobile-menu-panel\"\n          part=\"mobile-menu\"\n          role=\"navigation\"\n          aria-label=\"${() => `${props.label.value} mobile menu`}\"\n          ?hidden=${() => !isMobile.value || !isMobileMenuOpen.value || !hasMobileMenu.value}>\n          <slot name=\"mobile-menu\"></slot>\n        </div>\n      </nav>\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    elevationMixin,\n    roundedVariantMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    frostVariantMixin('.navbar'),\n    navbarStyles,\n  ],\n});\n\n/**\n * `ore-navbar-item`: Navigation item for navbar slots.\n *\n * Renders as an anchor when `href` is provided and item is not disabled.\n *\n * @element ore-navbar-item\n *\n * @attr {string} aria-label - Accessible name for icon-only items, forwarded to the internal control\n * @attr {boolean} active - Marks item as the current active route\n * @attr {boolean} disabled - Disables interaction\n * @attr {string} href - Link URL; renders as `<a>` when set\n * @attr {boolean} icon-only - Compact, symmetric padding for items with no visible label\n * @attr {string} rel - Anchor `rel` attribute (links only)\n * @attr {string} target - Anchor `target` attribute (links only)\n *\n * @slot - Item label\n * @slot icon - Optional icon before the label\n *\n * @part item - Root clickable element (anchor or button).\n * @part item-icon - Leading icon container.\n * @part item-label - Label text container.\n * @part item-end - Trailing content container.\n *\n * @example\n * ```html\n * <ore-navbar-item href=\"/home\">Home</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\" active>Docs</ore-navbar-item>\n * <ore-navbar-item href=\"/about\" target=\"_blank\" rel=\"noopener\">About</ore-navbar-item>\n * <ore-navbar-item disabled>Disabled</ore-navbar-item>\n * <ore-navbar-item icon-only aria-label=\"Search\"><ore-icon slot=\"icon\" name=\"search\"></ore-icon></ore-navbar-item>\n * ```\n */\nexport const NAVBAR_ITEM_TAG = 'ore-navbar-item' as const;\ndefine<OreNavbarItemProps>(NAVBAR_ITEM_TAG, {\n  props: {\n    active: prop.bool(false),\n    ariaLabel: prop.string(),\n    disabled: prop.bool(false),\n    href: prop.string(),\n    'icon-only': prop.bool(false),\n    rel: prop.string(),\n    target: prop.string(),\n  },\n  setup(props) {\n    const slots = useSlots();\n\n    const hasIcon = () => slots.has('icon').value;\n    const hasEnd = () => slots.has('end').value;\n    const navbarCtx = inject(NAVBAR_CTX);\n\n    bind({\n      attr: {\n        'navbar-mobile': () => (navbarCtx?.isMobile.value ? true : undefined),\n        'navbar-mobile-open': () => (navbarCtx?.mobileMenuOpen.value ? true : undefined),\n      },\n    });\n\n    const isLink = () => Boolean(props.href.value) && !props.disabled.value;\n\n    // Prevent reverse tabnapping: auto-inject noopener + noreferrer for _blank links.\n    const effectiveRel = computed(() => computeSafeRel(props.rel.value, props.target.value));\n\n    // The `aria-current` token: `location` for in-page anchors (the current position\n    // within this document), `page` for actual page routes. Announcing a section\n    // anchor as `page` would claim the section is the current document.\n    const ariaCurrent = computed<null | 'location' | 'page'>(() => {\n      if (!props.active.value) return null;\n      const href = props.href.value;\n      return href !== undefined && href.startsWith('#') ? 'location' : 'page';\n    });\n\n    // Closes the mobile overflow panel when one of its items is activated, otherwise picking a\n    // destination (or firing any other action placed in the `mobile-menu` slot) leaves the panel\n    // open over the page until the user separately taps the toggle again. Only matters while\n    // actually in mobile mode; on desktop `navbarCtx.mobileMenuOpen` is never true to begin with,\n    // so `closeMobileMenu()` (idempotent: see `setMobileMenu`'s equality check) is a no-op there.\n    const closeMobileMenuIfOpen = (): void => {\n      if (navbarCtx?.mobileMenuOpen.value) navbarCtx.closeMobileMenu();\n    };\n\n    const renderItemContent = () => html`\n      <span class=\"item-icon\" part=\"item-icon\" ?hidden=${() => !hasIcon()} aria-hidden=\"true\">\n        <slot name=\"icon\"></slot>\n      </span>\n      <span class=\"item-label\" part=\"item-label\"><slot></slot></span>\n      <span class=\"item-end\" part=\"item-end\" ?hidden=${() => !hasEnd()}>\n        <slot name=\"end\"></slot>\n      </span>\n    `;\n\n    return html`\n      ${() => {\n        if (isLink()) {\n          return html`\n            <a\n              class=\"item\"\n              part=\"item\"\n              href=\"${props.href}\"\n              rel=\"${effectiveRel}\"\n              target=\"${props.target}\"\n              aria-label=\"${() => props.ariaLabel.value ?? null}\"\n              aria-current=\"${ariaCurrent}\"\n              @click=${closeMobileMenuIfOpen}>\n              ${renderItemContent()}\n            </a>\n          `;\n        }\n\n        if (props.disabled.value) {\n          return html`\n            <div\n              class=\"item\"\n              part=\"item\"\n              tabindex=\"-1\"\n              aria-label=\"${() => props.ariaLabel.value ?? null}\"\n              aria-disabled=\"true\">${renderItemContent()}</div>\n          `;\n        }\n\n        return html`\n          <button\n            class=\"item\"\n            part=\"item\"\n            type=\"button\"\n            aria-label=\"${() => props.ariaLabel.value ?? null}\"\n            @click=${closeMobileMenuIfOpen}>${renderItemContent()}</button>\n        `;\n      }}\n    `;\n  },\n  styles: [coarsePointerMixin, navbarStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"navbar.js","names":[],"sources":["../src/layout/navbar/navbar.ts"],"sourcesContent":["import {\n  bind,\n  createContext,\n  define,\n  getHost,\n  html,\n  inject,\n  onCleanup,\n  onMounted,\n  prop,\n  provide,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { computed, fromSubscribable, type Readable, signal, untrack, watch } from '@vielzeug/ripple';\nimport { createElementSize, createMediaQuery, SentinelUnavailableError } from '@vielzeug/sentinel';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport {\n  ELEVATION_LEVELS,\n  type ElevationLevel,\n  ROUNDED_SIZES,\n  type RoundedSize,\n  THEME_COLORS,\n  type ThemeColor,\n} from '../../types';\nimport { computeSafeRel } from '../../utils';\nimport { parseMaxWidthPx, readContainerWidth, resolveContainerElement } from '../shared';\nimport navbarStyles from './navbar.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\n\nconst NAVBAR_VARIANTS = ['flat', 'solid', 'bordered', 'outline', 'frost'] as const;\ntype NavbarVariant = (typeof NAVBAR_VARIANTS)[number];\n\nconst listen = <E extends Event = Event>(\n  el: EventTarget | null | undefined,\n  name: string,\n  handler: (e: E) => void,\n  options?: AddEventListenerOptions,\n): (() => void) => {\n  if (!el) return () => {};\n\n  el.addEventListener(name, handler as EventListener, options);\n\n  return () => el.removeEventListener(name, handler as EventListener, options);\n};\n\ntype NavbarMode = 'floating' | 'sticky';\n\nconst hasElementContent = (el: Element): boolean => {\n  if (!(el instanceof HTMLElement)) return true;\n\n  if (el.tagName.includes('-')) return true;\n\n  if (el.childElementCount > 0) return true;\n\n  return (el.textContent ?? '').trim().length > 0;\n};\n\nconst findScrollContainer = (start: HTMLElement): HTMLElement | null => {\n  let current: HTMLElement | null = start.parentElement;\n\n  while (current) {\n    const styles = window.getComputedStyle(current);\n    const overflowY = styles.overflowY;\n\n    if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {\n      return current;\n    }\n\n    current = current.parentElement;\n  }\n\n  return null;\n};\n\n/** Context provided by `ore-navbar` to `ore-navbar-item` children. */\nexport type NavbarContext = {\n  closeMobileMenu: () => void;\n  isMobile: Readable<boolean>;\n  mobileMenuOpen: Readable<boolean>;\n};\n\n/** Injection key for navbar context. */\nexport const NAVBAR_CTX = createContext<NavbarContext>('NavbarContext');\n\n/** Navbar component events */\nexport type OreNavbarEvents = {\n  'mobile-menu-change': { open: boolean };\n};\n\n/** Navbar component element interface */\nexport type NavbarElement = HTMLElement &\n  OreNavbarProps & {\n    closeMobileMenu(): void;\n    openMobileMenu(): void;\n    toggleMobileMenu(): void;\n  };\n\ntype MobileSidebarElement = HTMLElement & {\n  closeDrawer?: () => void;\n  openDrawer?: () => void;\n  toggleDrawer?: () => void;\n};\n\n/** Navbar component properties */\nexport type OreNavbarProps = {\n  /** CSS media query used for mobile layout switching */\n  breakpoint?: string;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Evaluate mobile breakpoint against container width only when possible. */\n  'container-breakpoints'?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: ElevationLevel;\n  /** Start as detached floating navbar */\n  floating?: boolean;\n  /** Accessible nav landmark label */\n  label?: string;\n  /** Icon shown while the mobile menu is open */\n  'menu-close-icon'?: string;\n  'menu-close-label'?: string;\n  /** Icon shown while the mobile menu is closed */\n  'menu-icon'?: string;\n  'menu-open-label'?: string;\n  /** CSS selector for an external sidebar toggled by the mobile button */\n  'mobile-sidebar'?: string;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Scroll threshold in px used by floating+sticky transition */\n  'scroll-threshold'?: number;\n  /** Stick to top of viewport */\n  sticky?: boolean;\n  /** Visual style variant */\n  variant?: NavbarVariant;\n};\n\n/** Navbar item properties */\nexport type OreNavbarItemProps = {\n  /** Accessible name for icon-only items, forwarded to the internal button or anchor */\n  ariaLabel?: string;\n  /** Whether this item represents the current page */\n  active?: boolean;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Link target URL. Renders an anchor when provided. */\n  href?: string;\n  /**\n   * Icon-only mode: hides the (empty) label region and switches to compact, symmetric\n   * padding instead of the icon+label layout's wider horizontal padding. Set this whenever\n   * the default slot is intentionally left empty (name conveyed via `aria-label` instead),\n   * otherwise the empty label still reserves its inter-element gap and the item ends up\n   * with lopsided padding around the icon.\n   */\n  'icon-only'?: boolean;\n  /** Relationship of linked URL (anchor-only) */\n  rel?: string;\n  /** Browsing context for link (anchor-only) */\n  target?: string;\n};\n\n/**\n * `ore-navbar`: Responsive navigation with sticky/floating modes and a mobile overflow panel.\n *\n * @element ore-navbar\n * @element ore-navbar-item - Navigation link or button placed in the default or mobile-menu slot\n *\n * @attr {string} label - Accessible nav landmark label\n * @attr {string} menu-icon - Icon shown while the mobile menu is closed\n * @attr {string} menu-close-icon - Icon shown while the mobile menu is open\n * @attr {boolean} sticky - Makes navbar sticky at top\n * @attr {boolean} floating - Makes navbar detached and floating\n * @attr {number} scroll-threshold - Scroll threshold for floating+sticky transition\n * @attr {string} breakpoint - CSS media query used for mobile mode\n * @attr {boolean} container-breakpoints - Evaluates parseable max-width breakpoints against container width\n * @attr {string} variant - Visual variant: 'flat' | 'solid' | 'bordered' | 'outline' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n *\n * @fires mobile-menu-change - Emitted when mobile menu open state changes. detail: { open: boolean }\n *\n * @slot logo - Brand/logo content rendered at the leading edge\n * @slot start - Content rendered in the left/start region\n * @slot - Center navigation content rendered between the start and end regions\n * @slot end - Content rendered in the right/end region\n * @slot persistent - Trailing content that stays in the bar through the mobile collapse (global actions and status icons)\n * @slot mobile-menu - Controls and links rendered inside the mobile overflow panel\n *\n * @cssprop --navbar-height - Navbar bar height\n * @cssprop --navbar-width - Max width of the navbar content\n * @cssprop --navbar-offset - Horizontal offset for floating/sticky positioning\n * @cssprop --navbar-bg - Navbar background color\n * @cssprop --navbar-color - Navbar text color\n * @cssprop --navbar-border-color - Navbar border color\n * @cssprop --navbar-shadow - Navbar box shadow\n * @cssprop --navbar-radius - Border radius (floating/sticky modes)\n * @cssprop --navbar-backdrop-filter - Backdrop filter for blur effect\n * @cssprop --navbar-item-color - Nav item text color\n * @cssprop --navbar-item-hover-color - Nav item hover text color\n * @cssprop --navbar-item-hover-bg - Nav item hover background\n * @cssprop --navbar-item-active-color - Nav item active/current text color\n * @cssprop --navbar-item-active-bg - Nav item active/current background\n * @part nav - Outer navigation landmark\n * @part bar - Main navbar row container\n * @part logo - Logo slot container\n * @part start - Leading action/content region\n * @part center - Center content region\n * @part end - Trailing action/content region\n * @part persistent - Trailing region that survives the mobile collapse\n * @part mobile-toggle - Mobile menu toggle button\n * @part mobile-menu - Mobile overflow panel\n * @part item-icon - Leading icon inside navbar items\n * @part item-label - Label text inside navbar items\n * @part item-end - Trailing content inside navbar items\n * @part item - Clickable navbar item root\n * @example\n * ```html\n * <ore-navbar sticky elevation=\"1\">\n *   <a href=\"/\" slot=\"logo\"><strong>MyApp</strong></a>\n *   <ore-navbar-item href=\"/dashboard\">Dashboard</ore-navbar-item>\n *   <ore-navbar-item href=\"/docs\">Docs</ore-navbar-item>\n *   <ore-button slot=\"end\" variant=\"solid\" color=\"primary\" size=\"sm\">Sign in</ore-button>\n * </ore-navbar>\n * ```\n */\nexport const NAVBAR_TAG = 'ore-navbar' as const;\ndefine<OreNavbarProps>(NAVBAR_TAG, {\n  props: {\n    breakpoint: prop.string('(max-width: 768px)'),\n    color: prop.oneOf(THEME_COLORS),\n    'container-breakpoints': prop.bool(false),\n    elevation: prop.oneOf(ELEVATION_LEVELS),\n    floating: prop.bool(false),\n    label: prop.string('Main navigation'),\n    'menu-close-icon': prop.string('x'),\n    'menu-close-label': prop.string('Close navigation menu'),\n    'menu-icon': prop.string('menu'),\n    'menu-open-label': prop.string('Open navigation menu'),\n    'mobile-sidebar': prop.string(),\n    rounded: prop.oneOf(ROUNDED_SIZES),\n    'scroll-threshold': prop.number(80),\n    sticky: prop.bool(false),\n    variant: prop.oneOf(NAVBAR_VARIANTS),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreNavbarEvents>();\n    const slots = useSlots();\n\n    const hasLogo = slots.has('logo');\n    const hasStart = slots.has('start');\n    const hasCenter = slots.has();\n    const hasEnd = slots.has('end');\n    const hasPersistent = slots.has('persistent');\n    const mobileMenuElements = slots.elements('mobile-menu');\n    const hasMobileMenu = signal(false);\n    const mobileSidebarTarget = signal<MobileSidebarElement | null>(null);\n    const isExternalMobileMode = signal(false);\n    const isExternalMobileOpen = signal(false);\n    const isMobile = signal(false);\n    const isMobileMenuOpen = signal(false);\n    const isModeTransitioning = signal(false);\n    const isScrolled = signal(false);\n    const scrollBase = signal(0);\n    const mediaMatches = signal(false);\n    const sizeMatches = signal(false);\n    const maxWidthPx = signal<number | undefined>(parseMaxWidthPx(props.breakpoint.value));\n    const isPreviewMode = signal(false);\n\n    const getExternalSidebar = () => {\n      const selector = String(props['mobile-sidebar'].value ?? '').trim();\n\n      if (!selector) return null;\n\n      const root = el.getRootNode();\n      const scopedTarget =\n        root instanceof ShadowRoot || root instanceof Document\n          ? (root.querySelector(selector) as MobileSidebarElement | null)\n          : null;\n\n      return scopedTarget ?? (document.querySelector(selector) as MobileSidebarElement | null);\n    };\n\n    provide(NAVBAR_CTX, {\n      // Wrapped, not passed directly: `closeMobileMenu` (below) isn't defined yet at this point\n      // in `setup()`; by the time `ore-navbar-item` actually calls this (a later click), it is.\n      closeMobileMenu: () => closeMobileMenu(),\n      isMobile: computed(() => isMobile.value) as Readable<boolean>,\n      mobileMenuOpen: computed(() => isMobileMenuOpen.value) as Readable<boolean>,\n    });\n\n    const computeMode = (): NavbarMode | undefined => {\n      if (props.floating.value && props.sticky.value) {\n        return isScrolled.value ? 'sticky' : 'floating';\n      }\n\n      if (props.floating.value) return 'floating';\n\n      if (props.sticky.value) return 'sticky';\n\n      return undefined;\n    };\n\n    const setMobileMenu = (next: boolean) => {\n      const open = Boolean(next);\n\n      if (!hasMobileMenu.value) {\n        const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n        if (target) {\n          if (open) {\n            target.openDrawer?.();\n          } else {\n            target.closeDrawer?.();\n          }\n\n          return;\n        }\n      }\n\n      if (open && !hasMobileMenu.value) return;\n\n      if (isMobileMenuOpen.value === open) return;\n\n      isMobileMenuOpen.value = open;\n      emit('mobile-menu-change', { open });\n    };\n\n    const closeMobileMenu = () => setMobileMenu(false);\n    const openMobileMenu = () => setMobileMenu(true);\n    const toggleMobileMenu = () => {\n      if (!hasMobileMenu.value) {\n        const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n        if (target) {\n          if (typeof target.toggleDrawer === 'function') {\n            target.toggleDrawer();\n          } else if (typeof target.openDrawer === 'function' && typeof target.closeDrawer === 'function') {\n            const isOpen = target.hasAttribute('data-drawer-open');\n\n            if (isOpen) target.closeDrawer();\n            else target.openDrawer();\n          }\n\n          return;\n        }\n      }\n\n      setMobileMenu(!isMobileMenuOpen.value);\n    };\n\n    const syncMobileMode = () => {\n      const next =\n        (mobileSidebarTarget.value && !hasMobileMenu.value ? isExternalMobileMode.value : false) ||\n        mediaMatches.value ||\n        (Boolean(props['container-breakpoints'].value) && sizeMatches.value);\n\n      isMobile.value = next;\n\n      if (!next) closeMobileMenu();\n    };\n\n    const readScrollOffset = (scrollContainer: HTMLElement | null): number => {\n      if (scrollContainer) {\n        return scrollContainer.scrollTop || 0;\n      }\n\n      return window.scrollY || document.documentElement.scrollTop || 0;\n    };\n\n    const resetScrollBase = (scrollContainer: HTMLElement | null) => {\n      scrollBase.value = readScrollOffset(scrollContainer);\n    };\n\n    const updateScrolled = (scrollContainer: HTMLElement | null = null) => {\n      if (!(props.floating.value && props.sticky.value)) {\n        if (isScrolled.value) isScrolled.value = false;\n\n        return;\n      }\n\n      const threshold = Math.max(0, Number(props['scroll-threshold'].value) || 0);\n      const currentOffset = readScrollOffset(scrollContainer);\n      const delta = currentOffset - scrollBase.value;\n\n      isScrolled.value = delta > threshold;\n    };\n\n    bind({\n      attr: {\n        'data-mobile': () => (isMobile.value ? true : undefined),\n        'data-mobile-open': () => (isMobile.value && isMobileMenuOpen.value ? true : undefined),\n        'data-mode': () => computeMode() ?? null,\n        'data-mode-transitioning': () => (isModeTransitioning.value ? true : undefined),\n        'data-preview-mode': () => (isPreviewMode.value ? true : undefined),\n        'data-scrolled': () => (props.floating.value && props.sticky.value && isScrolled.value ? true : undefined),\n      },\n    });\n\n    onMounted(() => {\n      const navbarEl = el as NavbarElement;\n      const scrollContainer = findScrollContainer(el);\n\n      navbarEl.closeMobileMenu = closeMobileMenu;\n      navbarEl.openMobileMenu = openMobileMenu;\n      navbarEl.toggleMobileMenu = toggleMobileMenu;\n\n      const stopScroll = listen(\n        window,\n        'scroll',\n        () => {\n          updateScrolled(scrollContainer);\n        },\n        { passive: true },\n      );\n      const stopContainerScroll = scrollContainer\n        ? listen(\n            scrollContainer,\n            'scroll',\n            () => {\n              updateScrolled(scrollContainer);\n            },\n            { passive: true },\n          )\n        : undefined;\n      const stopEscape = listen(el, 'keydown', (event: KeyboardEvent) => {\n        if (event.key !== 'Escape' || !isMobileMenuOpen.value) return;\n\n        closeMobileMenu();\n      });\n\n      let mediaCleanup: (() => void) | undefined;\n      let mobileSidebarCleanup: (() => void) | undefined;\n      let modeTransitionTimeout: ReturnType<typeof setTimeout> | undefined;\n      let previousMode: NavbarMode | undefined;\n\n      const resolveMobileSidebarTarget = () => {\n        mobileSidebarCleanup?.();\n        mobileSidebarCleanup = undefined;\n        mobileSidebarTarget.value = null;\n        isExternalMobileMode.value = false;\n        isExternalMobileOpen.value = false;\n\n        if (!String(props['mobile-sidebar'].value ?? '').trim()) return;\n\n        const target = getExternalSidebar();\n\n        if (!target) {\n          const root = el.getRootNode();\n          const discoveryRoot = root instanceof Document || root instanceof ShadowRoot ? root : document;\n          const discoveryObserver = new MutationObserver(() => {\n            if (getExternalSidebar()) resolveMobileSidebarTarget();\n          });\n\n          discoveryObserver.observe(discoveryRoot, { childList: true, subtree: true });\n          mobileSidebarCleanup = () => discoveryObserver.disconnect();\n\n          return;\n        }\n\n        const syncTargetState = (event?: CustomEvent<{ open: boolean }>) => {\n          const hasBottomNav = target.hasAttribute('data-bottom-nav');\n          const hasDrawerOpen = target.hasAttribute('data-drawer-open');\n\n          isExternalMobileMode.value = hasBottomNav;\n          isExternalMobileOpen.value = event?.detail ? event.detail.open : hasDrawerOpen;\n\n          // If the sidebar is reporting it's open, it must be in bottom-nav mode\n          // (either natural or forced). We honor this to avoid race conditions\n          // where attributes haven't reflected yet.\n          if (isExternalMobileOpen.value && !isExternalMobileMode.value) {\n            isExternalMobileMode.value = true;\n          }\n\n          syncMobileMode();\n        };\n\n        const targetObserver = new MutationObserver(() => {\n          syncTargetState();\n        });\n\n        syncTargetState();\n        targetObserver.observe(target, {\n          attributeFilter: ['data-bottom-nav', 'data-drawer-open'],\n          attributes: true,\n        });\n        target.addEventListener('drawer-change', syncTargetState as EventListener);\n        mobileSidebarCleanup = () => {\n          targetObserver.disconnect();\n          target.removeEventListener('drawer-change', syncTargetState as EventListener);\n        };\n        mobileSidebarTarget.value = target;\n      };\n\n      const triggerModeTransition = () => {\n        isModeTransitioning.value = true;\n\n        if (modeTransitionTimeout != null) clearTimeout(modeTransitionTimeout);\n\n        modeTransitionTimeout = setTimeout(() => {\n          isModeTransitioning.value = false;\n          modeTransitionTimeout = undefined;\n        }, 220);\n      };\n\n      const stopModeWatch = watch(\n        computed(() => props.floating.value && props.sticky.value),\n        (enabled) => {\n          if (!enabled) {\n            if (isScrolled.value) isScrolled.value = false;\n\n            if (isModeTransitioning.value) isModeTransitioning.value = false;\n\n            previousMode = undefined;\n\n            if (modeTransitionTimeout != null) {\n              clearTimeout(modeTransitionTimeout);\n              modeTransitionTimeout = undefined;\n            }\n\n            return;\n          }\n\n          resetScrollBase(scrollContainer);\n          updateScrolled(scrollContainer);\n\n          const currentMode = computeMode();\n\n          previousMode = currentMode;\n        },\n        { immediate: true },\n      );\n\n      const stopMobileSidebarWatch = watch(\n        props['mobile-sidebar'],\n        () => {\n          resolveMobileSidebarTarget();\n        },\n        { immediate: true },\n      );\n\n      const stopModeTransitionWatch = watch(\n        computed(() => computeMode()),\n        (nextMode) => {\n          const comboEnabled = props.floating.value && props.sticky.value;\n\n          if (!comboEnabled) {\n            previousMode = nextMode ?? undefined;\n\n            return;\n          }\n\n          const next = nextMode ?? undefined;\n\n          if (previousMode && next && previousMode !== next) {\n            triggerModeTransition();\n          }\n\n          previousMode = next;\n        },\n        { immediate: true },\n      );\n\n      const stopMobileMenuSlotWatch = watch(\n        hasMobileMenu,\n        (hasContent) => {\n          if (!hasContent && isMobileMenuOpen.value) {\n            closeMobileMenu();\n          }\n        },\n        { immediate: true },\n      );\n      const syncMobileMenuContent = () => {\n        hasMobileMenu.value = mobileMenuElements.value.some(hasElementContent);\n      };\n      const stopMobileMenuElementsWatch = watch(mobileMenuElements, syncMobileMenuContent, { immediate: true });\n      const mobileMenuContentObserver = new MutationObserver(() => {\n        syncMobileMenuContent();\n      });\n\n      // Parser-created demo content can populate an already-assigned slot wrapper after this\n      // custom element connects; `slotchange` alone does not observe that nested content.\n      mobileMenuContentObserver.observe(el, { childList: true, subtree: true });\n\n      watch(\n        props.breakpoint,\n        (query) => {\n          // Untrack the callback body: the watch already tracks `props.breakpoint` via\n          // its internal `read()`. Without untrack, signals read inside (e.g.\n          // `mediaMatches` via `syncMobileMode()`) become dependencies of this watch\n          // effect. When the sentinel updates `mediaMatches` on a viewport change, the\n          // effect re-runs: `EffectNode.run()` disposes the previous scope (killing the\n          // mediaHandle and its MediaQueryList listener) but the callback is NOT invoked\n          // (source unchanged), so no new handle is created. The navbar is then deaf to\n          // further MQ changes and stays stuck in mobile mode after resizing back to\n          // desktop.\n          untrack(() => {\n            mediaCleanup?.();\n            mediaCleanup = undefined;\n\n            const mediaQuery = String(query ?? '').trim();\n\n            maxWidthPx.value = parseMaxWidthPx(mediaQuery);\n            mediaMatches.value = false;\n\n            const width = readContainerWidth(el);\n\n            sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n            syncMobileMode();\n\n            if (props['container-breakpoints'].value && maxWidthPx.value != null) {\n              return;\n            }\n\n            if (!mediaQuery) {\n              return;\n            }\n\n            try {\n              const mediaHandle = createMediaQuery(mediaQuery);\n              const syncMedia = (state: ReturnType<typeof mediaHandle.getSnapshot>) => {\n                if (state) {\n                  mediaMatches.value = state.matches;\n                  syncMobileMode();\n                }\n              };\n\n              syncMedia(mediaHandle.getSnapshot());\n\n              const mediaCleanupFn = watch(\n                fromSubscribable(mediaHandle, { signal: mediaHandle.disposalSignal }),\n                syncMedia,\n              );\n              mediaCleanup = () => {\n                mediaCleanupFn.dispose();\n                mediaHandle.dispose();\n              };\n            } catch (error) {\n              if (!(error instanceof SentinelUnavailableError)) throw error;\n            }\n          });\n        },\n        { immediate: true },\n      );\n\n      const stopResizeEffect =\n        typeof ResizeObserver === 'function'\n          ? (() => {\n              const hostSize = createElementSize(el);\n              onCleanup(() => hostSize.dispose());\n              const hostSizeSignal = fromSubscribable(hostSize, { signal: hostSize.disposalSignal });\n\n              const wrapperEl = el.parentElement;\n              const containerEl = resolveContainerElement(el);\n              const wrapperSize = wrapperEl ? createElementSize(wrapperEl) : undefined;\n              const parentSize = containerEl && containerEl !== wrapperEl ? createElementSize(containerEl) : undefined;\n\n              if (wrapperSize) {\n                onCleanup(() => wrapperSize.dispose());\n              }\n              if (parentSize) {\n                onCleanup(() => parentSize.dispose());\n              }\n\n              const wrapperSizeSignal = wrapperSize\n                ? fromSubscribable(wrapperSize, { signal: wrapperSize.disposalSignal })\n                : undefined;\n              const parentSizeSignal = parentSize\n                ? fromSubscribable(parentSize, { signal: parentSize.disposalSignal })\n                : undefined;\n\n              return watch(\n                computed(() => [\n                  hostSizeSignal.value?.width,\n                  hostSizeSignal.value?.height,\n                  wrapperSizeSignal?.value?.width,\n                  wrapperSizeSignal?.value?.height,\n                  parentSizeSignal?.value?.width,\n                  parentSizeSignal?.value?.height,\n                ]),\n                () => {\n                  const width = readContainerWidth(el);\n                  const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n                  sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n                  isPreviewMode.value = parentWidth > 0 && parentWidth < window.innerWidth;\n                  syncMobileMode();\n                },\n              );\n            })()\n          : undefined;\n\n      return () => {\n        stopEscape?.();\n        stopScroll?.();\n        stopContainerScroll?.();\n        stopModeWatch?.dispose();\n        stopModeTransitionWatch?.dispose();\n        stopMobileMenuSlotWatch?.dispose();\n        stopMobileMenuElementsWatch?.dispose();\n        stopMobileSidebarWatch?.dispose();\n        mobileMenuContentObserver.disconnect();\n        mediaCleanup?.();\n        mobileSidebarCleanup?.();\n        stopResizeEffect?.dispose();\n\n        if (modeTransitionTimeout != null) {\n          clearTimeout(modeTransitionTimeout);\n          modeTransitionTimeout = undefined;\n        }\n      };\n    });\n\n    return html`\n      <nav part=\"nav\" aria-label=\"${props.label}\">\n        <div class=\"navbar\" part=\"bar\">\n          <div class=\"navbar-logo\" part=\"logo\" ?hidden=${() => !hasLogo.value}>\n            <slot name=\"logo\"></slot>\n          </div>\n\n          <div class=\"navbar-start\" part=\"start\" ?hidden=${() => !hasStart.value}>\n            <slot name=\"start\"></slot>\n          </div>\n\n          <div class=\"navbar-center\" part=\"center\" ?hidden=${() => !hasCenter.value}>\n            <slot></slot>\n          </div>\n\n          <div class=\"navbar-end\" part=\"end\" ?hidden=${() => !hasEnd.value}>\n            <slot name=\"end\"></slot>\n          </div>\n\n          <div class=\"navbar-persistent\" part=\"persistent\" ?hidden=${() => !hasPersistent.value}>\n            <slot name=\"persistent\"></slot>\n          </div>\n\n          <button\n            class=\"mobile-toggle\"\n            part=\"mobile-toggle\"\n            type=\"button\"\n            aria-label=\"${() =>\n              (hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)\n                ? props['menu-close-label'].value\n                : props['menu-open-label'].value}\"\n            aria-controls=\"mobile-menu-panel\"\n            aria-expanded=\"${() => String(hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)}\"\n            ?hidden=${() => !isMobile.value || (!hasMobileMenu.value && !mobileSidebarTarget.value)}\n            @click=\"${toggleMobileMenu}\">\n            <ore-icon\n              name=\"${() =>\n                (hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)\n                  ? props['menu-close-icon'].value\n                  : props['menu-icon'].value}\"\n              size=\"18\"\n              stroke-width=\"2.5\"\n              aria-hidden=\"true\"></ore-icon>\n          </button>\n        </div>\n\n        <div\n          id=\"mobile-menu-panel\"\n          class=\"mobile-menu-panel\"\n          part=\"mobile-menu\"\n          role=\"navigation\"\n          aria-label=\"${() => `${props.label.value} mobile menu`}\"\n          ?hidden=${() => !isMobile.value || !isMobileMenuOpen.value || !hasMobileMenu.value}>\n          <slot name=\"mobile-menu\"></slot>\n        </div>\n      </nav>\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    elevationMixin,\n    roundedVariantMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    frostVariantMixin('.navbar'),\n    navbarStyles,\n  ],\n});\n\n/**\n * `ore-navbar-item`: Navigation item for navbar slots.\n *\n * Renders as an anchor when `href` is provided and item is not disabled.\n *\n * @element ore-navbar-item\n *\n * @attr {string} aria-label - Accessible name for icon-only items, forwarded to the internal control\n * @attr {boolean} active - Marks item as the current active route\n * @attr {boolean} disabled - Disables interaction\n * @attr {string} href - Link URL; renders as `<a>` when set\n * @attr {boolean} icon-only - Compact, symmetric padding for items with no visible label\n * @attr {string} rel - Anchor `rel` attribute (links only)\n * @attr {string} target - Anchor `target` attribute (links only)\n *\n * @slot - Item label\n * @slot icon - Optional icon before the label\n *\n * @part item - Root clickable element (anchor or button).\n * @part item-icon - Leading icon container.\n * @part item-label - Label text container.\n * @part item-end - Trailing content container.\n *\n * @example\n * ```html\n * <ore-navbar-item href=\"/home\">Home</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\" active>Docs</ore-navbar-item>\n * <ore-navbar-item href=\"/about\" target=\"_blank\" rel=\"noopener\">About</ore-navbar-item>\n * <ore-navbar-item disabled>Disabled</ore-navbar-item>\n * <ore-navbar-item icon-only aria-label=\"Search\"><ore-icon slot=\"icon\" name=\"search\"></ore-icon></ore-navbar-item>\n * ```\n */\nexport const NAVBAR_ITEM_TAG = 'ore-navbar-item' as const;\ndefine<OreNavbarItemProps>(NAVBAR_ITEM_TAG, {\n  props: {\n    active: prop.bool(false),\n    ariaLabel: prop.string(),\n    disabled: prop.bool(false),\n    href: prop.string(),\n    'icon-only': prop.bool(false),\n    rel: prop.string(),\n    target: prop.string(),\n  },\n  setup(props) {\n    const slots = useSlots();\n\n    const hasIcon = () => slots.has('icon').value;\n    const hasEnd = () => slots.has('end').value;\n    const navbarCtx = inject(NAVBAR_CTX);\n\n    bind({\n      attr: {\n        'navbar-mobile': () => (navbarCtx?.isMobile.value ? true : undefined),\n        'navbar-mobile-open': () => (navbarCtx?.mobileMenuOpen.value ? true : undefined),\n      },\n    });\n\n    const isLink = () => Boolean(props.href.value) && !props.disabled.value;\n\n    // Prevent reverse tabnapping: auto-inject noopener + noreferrer for _blank links.\n    const effectiveRel = computed(() => computeSafeRel(props.rel.value, props.target.value));\n\n    // The `aria-current` token: `location` for in-page anchors (the current position\n    // within this document), `page` for actual page routes. Announcing a section\n    // anchor as `page` would claim the section is the current document.\n    const ariaCurrent = computed<null | 'location' | 'page'>(() => {\n      if (!props.active.value) return null;\n      const href = props.href.value;\n      return href !== undefined && href.startsWith('#') ? 'location' : 'page';\n    });\n\n    // Closes the mobile overflow panel when one of its items is activated, otherwise picking a\n    // destination (or firing any other action placed in the `mobile-menu` slot) leaves the panel\n    // open over the page until the user separately taps the toggle again. Only matters while\n    // actually in mobile mode; on desktop `navbarCtx.mobileMenuOpen` is never true to begin with,\n    // so `closeMobileMenu()` (idempotent: see `setMobileMenu`'s equality check) is a no-op there.\n    const closeMobileMenuIfOpen = (): void => {\n      if (navbarCtx?.mobileMenuOpen.value) navbarCtx.closeMobileMenu();\n    };\n\n    const renderItemContent = () => html`\n      <span class=\"item-icon\" part=\"item-icon\" ?hidden=${() => !hasIcon()} aria-hidden=\"true\">\n        <slot name=\"icon\"></slot>\n      </span>\n      <span class=\"item-label\" part=\"item-label\"><slot></slot></span>\n      <span class=\"item-end\" part=\"item-end\" ?hidden=${() => !hasEnd()}>\n        <slot name=\"end\"></slot>\n      </span>\n    `;\n\n    return html`\n      ${() => {\n        if (isLink()) {\n          return html`\n            <a\n              class=\"item\"\n              part=\"item\"\n              href=\"${props.href}\"\n              rel=\"${effectiveRel}\"\n              target=\"${props.target}\"\n              aria-label=\"${() => props.ariaLabel.value ?? null}\"\n              aria-current=\"${ariaCurrent}\"\n              @click=${closeMobileMenuIfOpen}>\n              ${renderItemContent()}\n            </a>\n          `;\n        }\n\n        if (props.disabled.value) {\n          return html`\n            <div\n              class=\"item\"\n              part=\"item\"\n              tabindex=\"-1\"\n              aria-label=\"${() => props.ariaLabel.value ?? null}\"\n              aria-disabled=\"true\">${renderItemContent()}</div>\n          `;\n        }\n\n        return html`\n          <button\n            class=\"item\"\n            part=\"item\"\n            type=\"button\"\n            aria-label=\"${() => props.ariaLabel.value ?? null}\"\n            @click=${closeMobileMenuIfOpen}>${renderItemContent()}</button>\n        `;\n      }}\n    `;\n  },\n  styles: [coarsePointerMixin, navbarStyles],\n});\n"],"mappings":"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"}

package/dist/number-input.cjs

@@ -1,9 +1,9 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./inputs/shared/native-field-event.cjs"),t=require("./styles/mixins/states.css.cjs"),n=require("./core/spinner.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./icon.cjs"),a=require("./input.cjs"),o=require("./inputs/number-input/number-input.css.cjs");let s=require("@vielzeug/ripple"),c=require("@vielzeug/ore"),l=require("@vielzeug/arsenal");var u=`ore-number-input`;(0,c.define)(u,{formAssociated:!0,props:{...r.themableBundle,...r.sizableBundle,...r.disablableBundle,...r.roundableBundle,error:c.prop.string(),fullwidth:c.prop.bool(!1),helper:c.prop.string(),label:c.prop.string(),"label-placement":c.prop.oneOf([`inset`,`outside`],`inset`),"large-step":c.prop.json(void 0),loading:c.prop.bool(!1),max:c.prop.json(void 0),min:c.prop.json(void 0),name:c.prop.string(),placeholder:c.prop.string(),readonly:c.prop.bool(!1),ref:c.prop.data(),step:c.prop.number(1),success:c.prop.bool(!1),value:c.prop.json(void 0),variant:c.prop.string()},setup(t){let r=(0,c.getHost)(),i=c.watchEffect,a=(0,s.computed)(()=>t.disabled.value||t.loading.value),o=(0,s.computed)(()=>!!t.readonly.value),u=(0,s.signal)(t.value.value==null?``:String(t.value.value));e.defineFieldValue(r,()=>u.value,e=>{u.value=e}),(0,s.watch)(t.value,e=>{let t=e==null?``:String(e);u.value!==t&&(u.value=t)});function parseValue(){let e=u.value.trim();if(!e)return null;let t=Number.parseFloat(e);return Number.isNaN(t)?null:t}function commit(n,i){let a=t.min.value==null?void 0:Number(t.min.value),o=t.max.value==null?void 0:Number(t.max.value),s=n==null?null:(0,l.clamp)(n,a,o),c=s==null?``:String(s);u.value!==c&&(u.value=c),e.setFieldValue(r,c),e.dispatchNativeFieldEvent(r,`change`)}let d=n.createSpinnerControl({commit,disabled:a,largeStep:t[`large-step`],max:t.max,min:t.min,parse:parseValue,readonly:o,step:t.step}),f=(0,c.ref)(),p=null,detachListeners=null,m=null,handleFieldRef=n=>{if(!n){p?.(),detachListeners?.(),m?.dispose(),p=null,detachListeners=null,m=null,t.ref.value?.(null);return}n.setAttribute(`inputmode`,`decimal`),n.setAttribute(`role`,`spinbutton`);let handleChange=e=>{let t=e.target.value,n=t===``?null:Number.parseFloat(t);commit(Number.isNaN(n??NaN)?null:n,e)},handleInput=t=>{let n=t.target.value;u.value=n,e.setFieldValue(r,n),e.dispatchNativeFieldEvent(r,`input`)};n.addEventListener(`change`,handleChange),n.addEventListener(`input`,handleInput),detachListeners=()=>{n.removeEventListener(`change`,handleChange),n.removeEventListener(`input`,handleInput)},p=i(()=>{let e=parseValue();e==null?n.removeAttribute(`aria-valuenow`):n.setAttribute(`aria-valuenow`,String(e)),t.min.value==null?n.removeAttribute(`aria-valuemin`):n.setAttribute(`aria-valuemin`,String(t.min.value)),t.max.value==null?n.removeAttribute(`aria-valuemax`):n.setAttribute(`aria-valuemax`,String(t.max.value)),o.value?n.setAttribute(`aria-readonly`,`true`):n.removeAttribute(`aria-readonly`)}),t.ref.value?.(n),m=(0,s.watch)(t.ref,e=>{e?.(n)})};(0,c.onElement)(f,e=>{e.ref=handleFieldRef}),(0,c.bind)({attr:{size:t.size,value:()=>u.value||null,variant:t.variant}});let h=(0,s.computed)(()=>a.value||o.value);return c.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./inputs/shared/native-field-event.cjs"),t=require("./styles/mixins/states.css.cjs"),n=require("./core/spinner.cjs"),r=require("./shared/types.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./icon.cjs"),o=require("./input.cjs"),s=require("./inputs/number-input/number-input.css.cjs");let c=require("@vielzeug/ripple"),l=require("@vielzeug/ore"),u=require("@vielzeug/arsenal");var d=`ore-number-input`;(0,l.define)(d,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,...i.roundableBundle,error:l.prop.string(),fullwidth:l.prop.bool(!1),helper:l.prop.string(),label:l.prop.string(),"label-placement":l.prop.oneOf([`inset`,`outside`],`inset`),"large-step":l.prop.json(void 0),loading:l.prop.bool(!1),max:l.prop.json(void 0),min:l.prop.json(void 0),name:l.prop.string(),placeholder:l.prop.string(),readonly:l.prop.bool(!1),ref:l.prop.data(),step:l.prop.number(1),success:l.prop.bool(!1),value:l.prop.json(void 0),variant:l.prop.oneOf(r.VISUAL_VARIANTS)},setup(t){let r=(0,l.getHost)(),i=l.watchEffect,a=(0,c.computed)(()=>t.disabled.value||t.loading.value),o=(0,c.computed)(()=>!!t.readonly.value),s=(0,c.signal)(t.value.value==null?``:String(t.value.value));e.defineFieldValue(r,()=>s.value,e=>{s.value=e}),(0,c.watch)(t.value,e=>{let t=e==null?``:String(e);s.value!==t&&(s.value=t)});function parseValue(){let e=s.value.trim();if(!e)return null;let t=Number.parseFloat(e);return Number.isNaN(t)?null:t}function commit(n,i){let a=t.min.value==null?void 0:Number(t.min.value),o=t.max.value==null?void 0:Number(t.max.value),c=n==null?null:(0,u.clamp)(n,a,o),l=c==null?``:String(c);s.value!==l&&(s.value=l),e.setFieldValue(r,l),e.dispatchNativeFieldEvent(r,`change`)}let d=n.createSpinnerControl({commit,disabled:a,largeStep:t[`large-step`],max:t.max,min:t.min,parse:parseValue,readonly:o,step:t.step}),f=(0,l.ref)(),p=null,detachListeners=null,m=null,handleFieldRef=n=>{if(!n){p?.(),detachListeners?.(),m?.dispose(),p=null,detachListeners=null,m=null,t.ref.value?.(null);return}n.setAttribute(`inputmode`,`decimal`),n.setAttribute(`role`,`spinbutton`);let handleChange=e=>{let t=e.target.value,n=t===``?null:Number.parseFloat(t);commit(Number.isNaN(n??NaN)?null:n,e)},handleInput=t=>{let n=t.target.value;s.value=n,e.setFieldValue(r,n),e.dispatchNativeFieldEvent(r,`input`)};n.addEventListener(`change`,handleChange),n.addEventListener(`input`,handleInput),detachListeners=()=>{n.removeEventListener(`change`,handleChange),n.removeEventListener(`input`,handleInput)},p=i(()=>{let e=parseValue();e==null?n.removeAttribute(`aria-valuenow`):n.setAttribute(`aria-valuenow`,String(e)),t.min.value==null?n.removeAttribute(`aria-valuemin`):n.setAttribute(`aria-valuemin`,String(t.min.value)),t.max.value==null?n.removeAttribute(`aria-valuemax`):n.setAttribute(`aria-valuemax`,String(t.max.value)),o.value?n.setAttribute(`aria-readonly`,`true`):n.removeAttribute(`aria-readonly`)}),t.ref.value?.(n),m=(0,c.watch)(t.ref,e=>{e?.(n)})};(0,l.onElement)(f,e=>{e.ref=handleFieldRef}),(0,l.bind)({attr:{size:t.size,value:()=>s.value||null,variant:t.variant}});let h=(0,c.computed)(()=>a.value||o.value);return l.html`
       <ore-input
         class="field"
         part="field control"
         ref="${f}"
-        value="${()=>u.value??0}"
+        value="${()=>s.value??0}"
         label="${()=>t.label.value??``}"
         label-placement="${()=>t[`label-placement`].value??`inset`}"
         placeholder="${()=>t.placeholder.value??``}"
@@ -39,5 +39,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           <ore-icon name="plus" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>
         </button>
       </ore-input>
-    `},shadow:{delegatesFocus:!0},styles:[t.disabledLoadingMixin,o.default]}),exports.ICON_TAG=i.ICON_TAG,exports.INPUT_TAG=a.INPUT_TAG,exports.NUMBER_INPUT_TAG=u;
+    `},shadow:{delegatesFocus:!0},styles:[t.disabledLoadingMixin,s.default]}),exports.ICON_TAG=a.ICON_TAG,exports.INPUT_TAG=o.INPUT_TAG,exports.NUMBER_INPUT_TAG=d;
 //# sourceMappingURL=number-input.cjs.map

package/dist/number-input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.cjs","names":[],"sources":["../src/inputs/number-input/number-input.ts"],"sourcesContent":["import { clamp } from '@vielzeug/arsenal';\nimport { bind, define, getHost, html, onElement, prop, ref, watchEffect } from '@vielzeug/ore';\nimport { computed, watch as rippleWatch, signal } from '@vielzeug/ripple';\nimport { createSpinnerControl } from '../../core';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledLoadingMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './number-input.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport { INPUT_TAG } from '../input/input';\nexport type OreNumberInputEvents = {\n  change: Event;\n  input: InputEvent;\n};\n\n/** Number Input props */\nexport type OreNumberInputProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message */\n  error?: string;\n  /** Stretch to full width of container */\n  fullwidth?: boolean;\n  /** Helper text */\n  helper?: string;\n  /** Visible label */\n  label?: string;\n  /** Label placement: 'inset' renders the label inside the control box, 'outside' renders it above */\n  'label-placement'?: 'inset' | 'outside';\n  /** Large step (for Page Up/Down, default: 10 × step) */\n  'large-step'?: number;\n  /**\n   * Shows an inline spinner inside the field and forces the control into `disabled` for the\n   * duration: use while an async validation/submission request is in flight to prevent\n   * double-submits.\n   */\n  loading?: boolean;\n  /** Maximum allowed value */\n  max?: number;\n  /** Minimum allowed value */\n  min?: number;\n  /** Form field name */\n  name?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Make the input read-only */\n  readonly?: boolean;\n  /**\n   * JS-only callback fired with the inner `<input>` element when it mounts,\n   * and with `null` when it unmounts.\n   * Set as a JS property: `bitNumberInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\n  /** Border radius */\n  rounded?: string;\n  /** Component size */\n  size?: ComponentSize;\n  /** Step size for increment/decrement */\n  step?: number;\n  /**\n   * Shows an inline green check icon inside the field to confirm the value has\n   * passed validation. Ignored while `error` is set: an error always wins.\n   */\n  success?: boolean;\n  /** Current numeric value */\n  value?: number;\n  /** Visual variant */\n  variant?: VisualVariant;\n};\n\n/**\n * A numeric spin-button input with +/− controls, min/max clamping, and full keyboard support.\n *\n * @element ore-number-input\n *\n * @attr {number} value - Current value\n * @attr {number} min - Minimum value\n * @attr {number} max - Maximum value\n * @attr {number} step - Increment/decrement step (default: 1)\n * @attr {number} large-step - Step for Page Up/Down (default: 10)\n * @attr {boolean} disabled - Disables the control\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} loading - Show an inline spinner and force the control disabled\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n * @attr {string} label - Visible label\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} placeholder - Input placeholder\n *\n * @fires input - On every keystroke.\n * @fires change - On committed value change.\n *\n * @slot prefix - Content before the input (e.g. icon)\n * @slot suffix - Content after the input (e.g. unit label)\n * @slot label - Custom label content\n * @slot helper - Custom helper text content\n * @slot error - Custom error content\n *\n * @cssprop --number-input-height - Control height\n * @cssprop --number-input-border-color - Border color\n * @cssprop --number-input-radius - Border radius\n * @cssprop --number-input-bg - Background\n * @cssprop --number-input-btn-bg - Spin button background\n *\n * @part control - Control container.\n * @part decrement-btn - Decrement stepper button.\n * @part input - Input element.\n * @part increment-btn - Increment stepper button.\n * @example\n * ```html\n * <ore-number-input label=\"Quantity\" value=\"1\" min=\"1\" max=\"99\" step=\"1\"></ore-number-input>\n * <ore-number-input label=\"Quantity\" success></ore-number-input>\n * <ore-number-input label=\"Quantity\" loading></ore-number-input>\n * ```\n */\nexport const NUMBER_INPUT_TAG = 'ore-number-input' as const;\ndefine<OreNumberInputProps>(NUMBER_INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    'large-step': prop.json(undefined as number | undefined),\n    loading: prop.bool(false),\n    max: prop.json(undefined as number | undefined),\n    min: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLInputElement | null) => void) | null>(),\n    step: prop.number(1),\n    success: prop.bool(false),\n    value: prop.json(undefined as number | undefined),\n    variant: prop.string<VisualVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    // `loading` behaves like a temporary `disabled`: see ore-input's identical computation.\n    const isDisabled = computed(() => props.disabled.value || props.loading.value);\n    const isReadonly = computed(() => Boolean(props.readonly.value));\n\n    // Internal numeric value signal (string representation for the input)\n    const fieldValue = signal(props.value.value != null ? String(props.value.value) : '');\n\n    defineFieldValue(\n      el,\n      () => fieldValue.value,\n      (value) => {\n        fieldValue.value = value;\n      },\n    );\n\n    // Keep fieldValue in sync when props.value changes externally\n    rippleWatch(props.value, (v) => {\n      const next = v != null ? String(v) : '';\n\n      if (fieldValue.value !== next) fieldValue.value = next;\n    });\n\n    function parseValue(): number | null {\n      const v = fieldValue.value.trim();\n\n      if (!v) return null;\n\n      const n = Number.parseFloat(v);\n\n      return Number.isNaN(n) ? null : n;\n    }\n\n    function commit(val: number | null, _originalEvent?: Event) {\n      const min = props.min.value != null ? Number(props.min.value) : undefined;\n      const max = props.max.value != null ? Number(props.max.value) : undefined;\n      const clamped = val != null ? clamp(val, min, max) : null;\n      const nextValue = clamped != null ? String(clamped) : '';\n\n      if (fieldValue.value !== nextValue) fieldValue.value = nextValue;\n\n      setFieldValue(el, nextValue);\n      dispatchNativeFieldEvent(el, 'change');\n    }\n\n    const spinner = createSpinnerControl({\n      commit,\n      disabled: isDisabled,\n      largeStep: props['large-step'],\n      max: props.max,\n      min: props.min,\n      parse: parseValue,\n      readonly: isReadonly,\n      step: props.step,\n    });\n\n    // Composition uses ore-input's own documented `ref` prop (fired with the raw\n    // <input> on mount, `null` on unmount) instead of reaching into its shadow DOM :\n    // see `packages/refine/AGENTS.md` / input.ts's `ref` JSDoc for the supported contract.\n    // Set imperatively (rather than declared in the template) because ore's template\n    // engine treats a function-valued attr binding as a reactive getter to invoke, not\n    // a literal value to assign: a plain property assignment avoids that entirely.\n    const bitInputRef = ref<HTMLElementTagNameMap['ore-input']>();\n    let stopAriaWatch: (() => void) | null = null;\n    let detachListeners: (() => void) | null = null;\n    let refSub: { dispose(): void } | null = null;\n\n    const handleFieldRef = (rawInput: HTMLInputElement | null): void => {\n      if (!rawInput) {\n        stopAriaWatch?.();\n        detachListeners?.();\n        refSub?.dispose();\n        stopAriaWatch = null;\n        detachListeners = null;\n        refSub = null;\n        props.ref.value?.(null);\n\n        return;\n      }\n\n      rawInput.setAttribute('inputmode', 'decimal');\n      // The wrapper div is a plain layout container: WAI-ARIA spinbutton semantics\n      // live on the actually-focusable element (the raw <input> rendered by ore-input).\n      rawInput.setAttribute('role', 'spinbutton');\n\n      const handleChange = (e: Event) => {\n        const val = (e.target as HTMLInputElement).value;\n        const n = val !== '' ? Number.parseFloat(val) : null;\n\n        commit(Number.isNaN(n ?? NaN) ? null : n, e);\n      };\n\n      const handleInput = (e: Event) => {\n        const val = (e.target as HTMLInputElement).value;\n\n        fieldValue.value = val;\n        setFieldValue(el, val);\n        dispatchNativeFieldEvent(el, 'input');\n      };\n\n      rawInput.addEventListener('change', handleChange);\n      rawInput.addEventListener('input', handleInput);\n      detachListeners = () => {\n        rawInput.removeEventListener('change', handleChange);\n        rawInput.removeEventListener('input', handleInput);\n      };\n\n      stopAriaWatch = watch(() => {\n        const now = parseValue();\n\n        if (now == null) rawInput.removeAttribute('aria-valuenow');\n        else rawInput.setAttribute('aria-valuenow', String(now));\n\n        if (props.min.value != null) rawInput.setAttribute('aria-valuemin', String(props.min.value));\n        else rawInput.removeAttribute('aria-valuemin');\n\n        if (props.max.value != null) rawInput.setAttribute('aria-valuemax', String(props.max.value));\n        else rawInput.removeAttribute('aria-valuemax');\n\n        if (isReadonly.value) rawInput.setAttribute('aria-readonly', 'true');\n        else rawInput.removeAttribute('aria-readonly');\n      });\n\n      // Fire user ref callback\n      props.ref.value?.(rawInput);\n\n      refSub = rippleWatch(props.ref, (cb) => {\n        cb?.(rawInput);\n      });\n    };\n\n    // ore-input's own onElement/ref lifecycle calls this back with `null` when its\n    // inner <input> unmounts, so no explicit teardown is needed here.\n    onElement(bitInputRef, (bitInputEl) => {\n      bitInputEl.ref = handleFieldRef;\n    });\n\n    bind({\n      attr: {\n        size: props.size,\n        value: () => fieldValue.value || null,\n        variant: props.variant,\n      },\n    });\n\n    const isNonInteractive = computed(() => isDisabled.value || isReadonly.value);\n\n    // The stepper buttons are slotted *into* ore-input's own `prefix`/`suffix` slots instead of\n    // sitting outside it in a separate wrapper: they render inside ore-input's own bordered\n    // box (same as its built-in clear/password-toggle buttons), matching every other field's\n    // single-box look instead of floating as two detached icon buttons either side of a\n    // narrow field. `@keydown` moves to ore-input itself: native keyboard events are\n    // `composed: true` and bubble out past a shadow boundary, so it still sees keydowns\n    // originating from ore-input's internal <input> as well as from these slotted buttons.\n    return html`\n      <ore-input\n        class=\"field\"\n        part=\"field control\"\n        ref=\"${bitInputRef}\"\n        value=\"${() => fieldValue.value ?? 0}\"\n        label=\"${() => props.label.value ?? ''}\"\n        label-placement=\"${() => props['label-placement'].value ?? 'inset'}\"\n        placeholder=\"${() => props.placeholder.value ?? ''}\"\n        name=\"${() => props.name.value ?? ''}\"\n        helper=\"${() => props.helper.value ?? ''}\"\n        error=\"${() => props.error.value ?? ''}\"\n        size=\"${props.size}\"\n        color=\"${() => props.color.value ?? ''}\"\n        variant=\"${props.variant}\"\n        rounded=\"${() => props.rounded.value}\"\n        ?disabled=\"${props.disabled}\"\n        ?readonly=\"${isReadonly}\"\n        ?fullwidth=\"${() => props.fullwidth.value}\"\n        ?loading=\"${() => props.loading.value}\"\n        ?success=\"${() => props.success.value}\"\n        @keydown=\"${(e: KeyboardEvent) => spinner.handleKeydown(e)}\">\n        <button\n          slot=\"prefix\"\n          type=\"button\"\n          part=\"decrement-btn\"\n          aria-label=\"Decrease\"\n          ?disabled=\"${() => isNonInteractive.value || spinner.atMin()}\"\n          @click=\"${(e: Event) => spinner.incrementBy(-(Number(props.step.value) || 1), e)}\">\n          <ore-icon name=\"minus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n        <button\n          slot=\"suffix\"\n          type=\"button\"\n          part=\"increment-btn\"\n          aria-label=\"Increase\"\n          ?disabled=\"${() => isNonInteractive.value || spinner.atMax()}\"\n          @click=\"${(e: Event) => spinner.incrementBy(Number(props.step.value) || 1, e)}\">\n          <ore-icon name=\"plus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n      </ore-input>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [disabledLoadingMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"number-input.cjs","names":[],"sources":["../src/inputs/number-input/number-input.ts"],"sourcesContent":["import { clamp } from '@vielzeug/arsenal';\nimport { bind, define, getHost, html, onElement, prop, ref, watchEffect } from '@vielzeug/ore';\nimport { computed, watch as rippleWatch, signal } from '@vielzeug/ripple';\nimport { createSpinnerControl } from '../../core';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledLoadingMixin } from '../../styles';\nimport { type ComponentSize, type ThemeColor, VISUAL_VARIANTS, type VisualVariant } from '../../types';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './number-input.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport { INPUT_TAG } from '../input/input';\nexport type OreNumberInputEvents = {\n  change: Event;\n  input: InputEvent;\n};\n\n/** Number Input props */\nexport type OreNumberInputProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message */\n  error?: string;\n  /** Stretch to full width of container */\n  fullwidth?: boolean;\n  /** Helper text */\n  helper?: string;\n  /** Visible label */\n  label?: string;\n  /** Label placement: 'inset' renders the label inside the control box, 'outside' renders it above */\n  'label-placement'?: 'inset' | 'outside';\n  /** Large step (for Page Up/Down, default: 10 × step) */\n  'large-step'?: number;\n  /**\n   * Shows an inline spinner inside the field and forces the control into `disabled` for the\n   * duration: use while an async validation/submission request is in flight to prevent\n   * double-submits.\n   */\n  loading?: boolean;\n  /** Maximum allowed value */\n  max?: number;\n  /** Minimum allowed value */\n  min?: number;\n  /** Form field name */\n  name?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Make the input read-only */\n  readonly?: boolean;\n  /**\n   * JS-only callback fired with the inner `<input>` element when it mounts,\n   * and with `null` when it unmounts.\n   * Set as a JS property: `bitNumberInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\n  /** Border radius */\n  rounded?: string;\n  /** Component size */\n  size?: ComponentSize;\n  /** Step size for increment/decrement */\n  step?: number;\n  /**\n   * Shows an inline green check icon inside the field to confirm the value has\n   * passed validation. Ignored while `error` is set: an error always wins.\n   */\n  success?: boolean;\n  /** Current numeric value */\n  value?: number;\n  /** Visual variant */\n  variant?: VisualVariant;\n};\n\n/**\n * A numeric spin-button input with +/− controls, min/max clamping, and full keyboard support.\n *\n * @element ore-number-input\n *\n * @attr {number} value - Current value\n * @attr {number} min - Minimum value\n * @attr {number} max - Maximum value\n * @attr {number} step - Increment/decrement step (default: 1)\n * @attr {number} large-step - Step for Page Up/Down (default: 10)\n * @attr {boolean} disabled - Disables the control\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} loading - Show an inline spinner and force the control disabled\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n * @attr {string} label - Visible label\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} placeholder - Input placeholder\n *\n * @fires input - On every keystroke.\n * @fires change - On committed value change.\n *\n * @slot prefix - Content before the input (e.g. icon)\n * @slot suffix - Content after the input (e.g. unit label)\n * @slot label - Custom label content\n * @slot helper - Custom helper text content\n * @slot error - Custom error content\n *\n * @cssprop --number-input-height - Control height\n * @cssprop --number-input-border-color - Border color\n * @cssprop --number-input-radius - Border radius\n * @cssprop --number-input-bg - Background\n * @cssprop --number-input-btn-bg - Spin button background\n *\n * @part control - Control container.\n * @part decrement-btn - Decrement stepper button.\n * @part input - Input element.\n * @part increment-btn - Increment stepper button.\n * @example\n * ```html\n * <ore-number-input label=\"Quantity\" value=\"1\" min=\"1\" max=\"99\" step=\"1\"></ore-number-input>\n * <ore-number-input label=\"Quantity\" success></ore-number-input>\n * <ore-number-input label=\"Quantity\" loading></ore-number-input>\n * ```\n */\nexport const NUMBER_INPUT_TAG = 'ore-number-input' as const;\ndefine<OreNumberInputProps>(NUMBER_INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...roundableBundle,\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    'large-step': prop.json(undefined as number | undefined),\n    loading: prop.bool(false),\n    max: prop.json(undefined as number | undefined),\n    min: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.data<((el: HTMLInputElement | null) => void) | null>(),\n    step: prop.number(1),\n    success: prop.bool(false),\n    value: prop.json(undefined as number | undefined),\n    variant: prop.oneOf(VISUAL_VARIANTS),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    // `loading` behaves like a temporary `disabled`: see ore-input's identical computation.\n    const isDisabled = computed(() => props.disabled.value || props.loading.value);\n    const isReadonly = computed(() => Boolean(props.readonly.value));\n\n    // Internal numeric value signal (string representation for the input)\n    const fieldValue = signal(props.value.value != null ? String(props.value.value) : '');\n\n    defineFieldValue(\n      el,\n      () => fieldValue.value,\n      (value) => {\n        fieldValue.value = value;\n      },\n    );\n\n    // Keep fieldValue in sync when props.value changes externally\n    rippleWatch(props.value, (v) => {\n      const next = v != null ? String(v) : '';\n\n      if (fieldValue.value !== next) fieldValue.value = next;\n    });\n\n    function parseValue(): number | null {\n      const v = fieldValue.value.trim();\n\n      if (!v) return null;\n\n      const n = Number.parseFloat(v);\n\n      return Number.isNaN(n) ? null : n;\n    }\n\n    function commit(val: number | null, _originalEvent?: Event) {\n      const min = props.min.value != null ? Number(props.min.value) : undefined;\n      const max = props.max.value != null ? Number(props.max.value) : undefined;\n      const clamped = val != null ? clamp(val, min, max) : null;\n      const nextValue = clamped != null ? String(clamped) : '';\n\n      if (fieldValue.value !== nextValue) fieldValue.value = nextValue;\n\n      setFieldValue(el, nextValue);\n      dispatchNativeFieldEvent(el, 'change');\n    }\n\n    const spinner = createSpinnerControl({\n      commit,\n      disabled: isDisabled,\n      largeStep: props['large-step'],\n      max: props.max,\n      min: props.min,\n      parse: parseValue,\n      readonly: isReadonly,\n      step: props.step,\n    });\n\n    // Composition uses ore-input's own documented `ref` prop (fired with the raw\n    // <input> on mount, `null` on unmount) instead of reaching into its shadow DOM :\n    // see `packages/refine/AGENTS.md` / input.ts's `ref` JSDoc for the supported contract.\n    // Set imperatively (rather than declared in the template) because ore's template\n    // engine treats a function-valued attr binding as a reactive getter to invoke, not\n    // a literal value to assign: a plain property assignment avoids that entirely.\n    const bitInputRef = ref<HTMLElementTagNameMap['ore-input']>();\n    let stopAriaWatch: (() => void) | null = null;\n    let detachListeners: (() => void) | null = null;\n    let refSub: { dispose(): void } | null = null;\n\n    const handleFieldRef = (rawInput: HTMLInputElement | null): void => {\n      if (!rawInput) {\n        stopAriaWatch?.();\n        detachListeners?.();\n        refSub?.dispose();\n        stopAriaWatch = null;\n        detachListeners = null;\n        refSub = null;\n        props.ref.value?.(null);\n\n        return;\n      }\n\n      rawInput.setAttribute('inputmode', 'decimal');\n      // The wrapper div is a plain layout container: WAI-ARIA spinbutton semantics\n      // live on the actually-focusable element (the raw <input> rendered by ore-input).\n      rawInput.setAttribute('role', 'spinbutton');\n\n      const handleChange = (e: Event) => {\n        const val = (e.target as HTMLInputElement).value;\n        const n = val !== '' ? Number.parseFloat(val) : null;\n\n        commit(Number.isNaN(n ?? NaN) ? null : n, e);\n      };\n\n      const handleInput = (e: Event) => {\n        const val = (e.target as HTMLInputElement).value;\n\n        fieldValue.value = val;\n        setFieldValue(el, val);\n        dispatchNativeFieldEvent(el, 'input');\n      };\n\n      rawInput.addEventListener('change', handleChange);\n      rawInput.addEventListener('input', handleInput);\n      detachListeners = () => {\n        rawInput.removeEventListener('change', handleChange);\n        rawInput.removeEventListener('input', handleInput);\n      };\n\n      stopAriaWatch = watch(() => {\n        const now = parseValue();\n\n        if (now == null) rawInput.removeAttribute('aria-valuenow');\n        else rawInput.setAttribute('aria-valuenow', String(now));\n\n        if (props.min.value != null) rawInput.setAttribute('aria-valuemin', String(props.min.value));\n        else rawInput.removeAttribute('aria-valuemin');\n\n        if (props.max.value != null) rawInput.setAttribute('aria-valuemax', String(props.max.value));\n        else rawInput.removeAttribute('aria-valuemax');\n\n        if (isReadonly.value) rawInput.setAttribute('aria-readonly', 'true');\n        else rawInput.removeAttribute('aria-readonly');\n      });\n\n      // Fire user ref callback\n      props.ref.value?.(rawInput);\n\n      refSub = rippleWatch(props.ref, (cb) => {\n        cb?.(rawInput);\n      });\n    };\n\n    // ore-input's own onElement/ref lifecycle calls this back with `null` when its\n    // inner <input> unmounts, so no explicit teardown is needed here.\n    onElement(bitInputRef, (bitInputEl) => {\n      bitInputEl.ref = handleFieldRef;\n    });\n\n    bind({\n      attr: {\n        size: props.size,\n        value: () => fieldValue.value || null,\n        variant: props.variant,\n      },\n    });\n\n    const isNonInteractive = computed(() => isDisabled.value || isReadonly.value);\n\n    // The stepper buttons are slotted *into* ore-input's own `prefix`/`suffix` slots instead of\n    // sitting outside it in a separate wrapper: they render inside ore-input's own bordered\n    // box (same as its built-in clear/password-toggle buttons), matching every other field's\n    // single-box look instead of floating as two detached icon buttons either side of a\n    // narrow field. `@keydown` moves to ore-input itself: native keyboard events are\n    // `composed: true` and bubble out past a shadow boundary, so it still sees keydowns\n    // originating from ore-input's internal <input> as well as from these slotted buttons.\n    return html`\n      <ore-input\n        class=\"field\"\n        part=\"field control\"\n        ref=\"${bitInputRef}\"\n        value=\"${() => fieldValue.value ?? 0}\"\n        label=\"${() => props.label.value ?? ''}\"\n        label-placement=\"${() => props['label-placement'].value ?? 'inset'}\"\n        placeholder=\"${() => props.placeholder.value ?? ''}\"\n        name=\"${() => props.name.value ?? ''}\"\n        helper=\"${() => props.helper.value ?? ''}\"\n        error=\"${() => props.error.value ?? ''}\"\n        size=\"${props.size}\"\n        color=\"${() => props.color.value ?? ''}\"\n        variant=\"${props.variant}\"\n        rounded=\"${() => props.rounded.value}\"\n        ?disabled=\"${props.disabled}\"\n        ?readonly=\"${isReadonly}\"\n        ?fullwidth=\"${() => props.fullwidth.value}\"\n        ?loading=\"${() => props.loading.value}\"\n        ?success=\"${() => props.success.value}\"\n        @keydown=\"${(e: KeyboardEvent) => spinner.handleKeydown(e)}\">\n        <button\n          slot=\"prefix\"\n          type=\"button\"\n          part=\"decrement-btn\"\n          aria-label=\"Decrease\"\n          ?disabled=\"${() => isNonInteractive.value || spinner.atMin()}\"\n          @click=\"${(e: Event) => spinner.incrementBy(-(Number(props.step.value) || 1), e)}\">\n          <ore-icon name=\"minus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n        <button\n          slot=\"suffix\"\n          type=\"button\"\n          part=\"increment-btn\"\n          aria-label=\"Increase\"\n          ?disabled=\"${() => isNonInteractive.value || spinner.atMax()}\"\n          @click=\"${(e: Event) => spinner.incrementBy(Number(props.step.value) || 1, e)}\">\n          <ore-icon name=\"plus\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n      </ore-input>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [disabledLoadingMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/number-input.js

@@ -1,4 +1,4 @@
-import{defineFieldValue as e,dispatchNativeFieldEvent as t,setFieldValue as n}from"./inputs/shared/native-field-event.js";import{disabledLoadingMixin as r}from"./styles/mixins/states.css.js";import{createSpinnerControl as i}from"./core/spinner.js";import{disablableBundle as a,roundableBundle as o,sizableBundle as s,themableBundle as c}from"./shared/prop-bundles.js";import{ICON_TAG as l}from"./icon.js";import{INPUT_TAG as u}from"./input.js";import d from"./inputs/number-input/number-input.css.js";import{computed as f,signal as p,watch as m}from"@vielzeug/ripple";import{bind as h,define as g,getHost as _,html as v,onElement as y,prop as b,ref as x,watchEffect as S}from"@vielzeug/ore";import{clamp as C}from"@vielzeug/arsenal";var w=`ore-number-input`;g(w,{formAssociated:!0,props:{...c,...s,...a,...o,error:b.string(),fullwidth:b.bool(!1),helper:b.string(),label:b.string(),"label-placement":b.oneOf([`inset`,`outside`],`inset`),"large-step":b.json(void 0),loading:b.bool(!1),max:b.json(void 0),min:b.json(void 0),name:b.string(),placeholder:b.string(),readonly:b.bool(!1),ref:b.data(),step:b.number(1),success:b.bool(!1),value:b.json(void 0),variant:b.string()},setup(r){let a=_(),o=S,s=f(()=>r.disabled.value||r.loading.value),c=f(()=>!!r.readonly.value),l=p(r.value.value==null?``:String(r.value.value));e(a,()=>l.value,e=>{l.value=e}),m(r.value,e=>{let t=e==null?``:String(e);l.value!==t&&(l.value=t)});function parseValue(){let e=l.value.trim();if(!e)return null;let t=Number.parseFloat(e);return Number.isNaN(t)?null:t}function commit(e,i){let o=r.min.value==null?void 0:Number(r.min.value),s=r.max.value==null?void 0:Number(r.max.value),c=e==null?null:C(e,o,s),u=c==null?``:String(c);l.value!==u&&(l.value=u),n(a,u),t(a,`change`)}let u=i({commit,disabled:s,largeStep:r[`large-step`],max:r.max,min:r.min,parse:parseValue,readonly:c,step:r.step}),d=x(),g=null,detachListeners=null,b=null,handleFieldRef=e=>{if(!e){g?.(),detachListeners?.(),b?.dispose(),g=null,detachListeners=null,b=null,r.ref.value?.(null);return}e.setAttribute(`inputmode`,`decimal`),e.setAttribute(`role`,`spinbutton`);let handleChange=e=>{let t=e.target.value,n=t===``?null:Number.parseFloat(t);commit(Number.isNaN(n??NaN)?null:n,e)},handleInput=e=>{let r=e.target.value;l.value=r,n(a,r),t(a,`input`)};e.addEventListener(`change`,handleChange),e.addEventListener(`input`,handleInput),detachListeners=()=>{e.removeEventListener(`change`,handleChange),e.removeEventListener(`input`,handleInput)},g=o(()=>{let t=parseValue();t==null?e.removeAttribute(`aria-valuenow`):e.setAttribute(`aria-valuenow`,String(t)),r.min.value==null?e.removeAttribute(`aria-valuemin`):e.setAttribute(`aria-valuemin`,String(r.min.value)),r.max.value==null?e.removeAttribute(`aria-valuemax`):e.setAttribute(`aria-valuemax`,String(r.max.value)),c.value?e.setAttribute(`aria-readonly`,`true`):e.removeAttribute(`aria-readonly`)}),r.ref.value?.(e),b=m(r.ref,t=>{t?.(e)})};y(d,e=>{e.ref=handleFieldRef}),h({attr:{size:r.size,value:()=>l.value||null,variant:r.variant}});let w=f(()=>s.value||c.value);return v`
+import{defineFieldValue as e,dispatchNativeFieldEvent as t,setFieldValue as n}from"./inputs/shared/native-field-event.js";import{disabledLoadingMixin as r}from"./styles/mixins/states.css.js";import{createSpinnerControl as i}from"./core/spinner.js";import{VISUAL_VARIANTS as a}from"./shared/types.js";import{disablableBundle as o,roundableBundle as s,sizableBundle as c,themableBundle as l}from"./shared/prop-bundles.js";import{ICON_TAG as u}from"./icon.js";import{INPUT_TAG as d}from"./input.js";import f from"./inputs/number-input/number-input.css.js";import{computed as p,signal as m,watch as h}from"@vielzeug/ripple";import{bind as g,define as _,getHost as v,html as y,onElement as b,prop as x,ref as S,watchEffect as C}from"@vielzeug/ore";import{clamp as w}from"@vielzeug/arsenal";var T=`ore-number-input`;_(T,{formAssociated:!0,props:{...l,...c,...o,...s,error:x.string(),fullwidth:x.bool(!1),helper:x.string(),label:x.string(),"label-placement":x.oneOf([`inset`,`outside`],`inset`),"large-step":x.json(void 0),loading:x.bool(!1),max:x.json(void 0),min:x.json(void 0),name:x.string(),placeholder:x.string(),readonly:x.bool(!1),ref:x.data(),step:x.number(1),success:x.bool(!1),value:x.json(void 0),variant:x.oneOf(a)},setup(r){let a=v(),o=C,s=p(()=>r.disabled.value||r.loading.value),c=p(()=>!!r.readonly.value),l=m(r.value.value==null?``:String(r.value.value));e(a,()=>l.value,e=>{l.value=e}),h(r.value,e=>{let t=e==null?``:String(e);l.value!==t&&(l.value=t)});function parseValue(){let e=l.value.trim();if(!e)return null;let t=Number.parseFloat(e);return Number.isNaN(t)?null:t}function commit(e,i){let o=r.min.value==null?void 0:Number(r.min.value),s=r.max.value==null?void 0:Number(r.max.value),c=e==null?null:w(e,o,s),u=c==null?``:String(c);l.value!==u&&(l.value=u),n(a,u),t(a,`change`)}let u=i({commit,disabled:s,largeStep:r[`large-step`],max:r.max,min:r.min,parse:parseValue,readonly:c,step:r.step}),d=S(),f=null,detachListeners=null,_=null,handleFieldRef=e=>{if(!e){f?.(),detachListeners?.(),_?.dispose(),f=null,detachListeners=null,_=null,r.ref.value?.(null);return}e.setAttribute(`inputmode`,`decimal`),e.setAttribute(`role`,`spinbutton`);let handleChange=e=>{let t=e.target.value,n=t===``?null:Number.parseFloat(t);commit(Number.isNaN(n??NaN)?null:n,e)},handleInput=e=>{let r=e.target.value;l.value=r,n(a,r),t(a,`input`)};e.addEventListener(`change`,handleChange),e.addEventListener(`input`,handleInput),detachListeners=()=>{e.removeEventListener(`change`,handleChange),e.removeEventListener(`input`,handleInput)},f=o(()=>{let t=parseValue();t==null?e.removeAttribute(`aria-valuenow`):e.setAttribute(`aria-valuenow`,String(t)),r.min.value==null?e.removeAttribute(`aria-valuemin`):e.setAttribute(`aria-valuemin`,String(r.min.value)),r.max.value==null?e.removeAttribute(`aria-valuemax`):e.setAttribute(`aria-valuemax`,String(r.max.value)),c.value?e.setAttribute(`aria-readonly`,`true`):e.removeAttribute(`aria-readonly`)}),r.ref.value?.(e),_=h(r.ref,t=>{t?.(e)})};b(d,e=>{e.ref=handleFieldRef}),g({attr:{size:r.size,value:()=>l.value||null,variant:r.variant}});let x=p(()=>s.value||c.value);return y`
       <ore-input
         class="field"
         part="field control"
@@ -25,7 +25,7 @@ import{defineFieldValue as e,dispatchNativeFieldEvent as t,setFieldValue as n}fr
           type="button"
           part="decrement-btn"
           aria-label="Decrease"
-          ?disabled="${()=>w.value||u.atMin()}"
+          ?disabled="${()=>x.value||u.atMin()}"
           @click="${e=>u.incrementBy(-(Number(r.step.value)||1),e)}">
           <ore-icon name="minus" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>
         </button>
@@ -34,10 +34,10 @@ import{defineFieldValue as e,dispatchNativeFieldEvent as t,setFieldValue as n}fr
           type="button"
           part="increment-btn"
           aria-label="Increase"
-          ?disabled="${()=>w.value||u.atMax()}"
+          ?disabled="${()=>x.value||u.atMax()}"
           @click="${e=>u.incrementBy(Number(r.step.value)||1,e)}">
           <ore-icon name="plus" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>
         </button>
       </ore-input>
-    `},shadow:{delegatesFocus:!0},styles:[r,d]});export{l as ICON_TAG,u as INPUT_TAG,w as NUMBER_INPUT_TAG};
+    `},shadow:{delegatesFocus:!0},styles:[r,f]});export{u as ICON_TAG,d as INPUT_TAG,T as NUMBER_INPUT_TAG};
 //# sourceMappingURL=number-input.js.map