@vielzeug/refine 1.7.0 → 2.0.0

package/dist/navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.js","names":[],"sources":["../src/layout/navbar/navbar.ts"],"sourcesContent":["import {\n  createContext,\n  define,\n  html,\n  inject,\n  prop,\n  bind,\n  getHost,\n  onMounted,\n  provide,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { resizeObserver } from '@vielzeug/ore/observers';\nimport { computed, type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport type { ElevationLevel, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport { computeSafeRel } from '../../utils';\nimport navbarStyles from './navbar.css?inline';\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 parseMaxWidthPx = (query: string | undefined): number | undefined => {\n  const value = String(query ?? '').trim();\n\n  if (!value) return undefined;\n\n  const match = /max-width\\s*:\\s*([0-9]+(?:\\.[0-9]+)?)px/i.exec(value);\n\n  if (!match) return undefined;\n\n  const parsed = Number.parseFloat(match[1]);\n\n  return Number.isFinite(parsed) ? parsed : undefined;\n};\n\nconst resolveContainerElement = (el: HTMLElement): HTMLElement | null => {\n  let container = el.parentElement;\n\n  while (container?.tagName.toLowerCase() === 'ore-grid-item') {\n    container = container.parentElement;\n  }\n\n  return container;\n};\n\nconst readContainerWidth = (el: HTMLElement): number => {\n  const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n  if (parentWidth > 0) return parentWidth;\n\n  return el.offsetWidth;\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  closeMobile?: () => void;\n  openMobile?: () => void;\n  toggleMobile?: () => 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  /** 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  /** 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  /** 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 {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' | 'glass'\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 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 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    'mobile-sidebar': prop.string(),\n    rounded: prop.string<RoundedSize>(),\n    'scroll-threshold': prop.number(80),\n    sticky: prop.bool(false),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'frost'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreNavbarEvents>();\n    const slots = useSlots();\n\n    const hasLogo = () => slots.has('logo').value;\n    const hasMobileMenu = () => slots.elements('mobile-menu').value.some(hasElementContent);\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()) {\n        const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n        if (target) {\n          if (open) {\n            target.openMobile?.();\n          } else {\n            target.closeMobile?.();\n          }\n\n          return;\n        }\n      }\n\n      if (open && !hasMobileMenu()) 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()) {\n        const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n        if (target) {\n          if (typeof target.toggleMobile === 'function') {\n            target.toggleMobile();\n          } else if (typeof target.openMobile === 'function' && typeof target.closeMobile === 'function') {\n            const isOpen = target.hasAttribute('data-mobile-open');\n\n            if (isOpen) target.closeMobile();\n            else target.openMobile();\n          }\n\n          return;\n        }\n      }\n\n      setMobileMenu(!isMobileMenuOpen.value);\n    };\n\n    const syncMobileMode = () => {\n      const next =\n        (mobileSidebarTarget.value && !hasMobileMenu() ? isExternalMobileMode.value : false) ||\n        mediaMatches.value ||\n        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        const target = getExternalSidebar();\n\n        if (!target) return;\n\n        const syncTargetState = (event?: CustomEvent<{ open: boolean }>) => {\n          const hasBottomNav = target.hasAttribute('data-bottom-nav');\n          const hasMobileOpen = target.hasAttribute('data-mobile-open');\n\n          isExternalMobileMode.value = hasBottomNav;\n          isExternalMobileOpen.value = event?.detail ? event.detail.open : hasMobileOpen;\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-mobile-open'],\n          attributes: true,\n        });\n        target.addEventListener('mobile-open-change', syncTargetState as EventListener);\n        mobileSidebarCleanup = () => {\n          targetObserver.disconnect();\n          target.removeEventListener('mobile-open-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        computed(() => hasMobileMenu()),\n        (hasContent) => {\n          if (!hasContent && isMobileMenuOpen.value) {\n            closeMobileMenu();\n          }\n        },\n        { immediate: true },\n      );\n\n      watch(\n        props.breakpoint,\n        (query) => {\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          if (typeof window.matchMedia !== 'function') {\n            return;\n          }\n\n          const mql = window.matchMedia(mediaQuery);\n          const syncMedia = (next: boolean) => {\n            mediaMatches.value = next;\n            syncMobileMode();\n          };\n          const onChange = (event: MediaQueryListEvent) => {\n            syncMedia(event.matches);\n          };\n\n          syncMedia(mql.matches);\n          mql.addEventListener('change', onChange);\n\n          mediaCleanup = () => {\n            mql.removeEventListener('change', onChange);\n          };\n        },\n        { immediate: true },\n      );\n\n      const stopResizeEffect =\n        typeof ResizeObserver === 'function'\n          ? (() => {\n              const hostSize = resizeObserver(el);\n              const wrapperEl = el.parentElement;\n              const containerEl = resolveContainerElement(el);\n              const wrapperSize = wrapperEl ? resizeObserver(wrapperEl) : undefined;\n              const parentSize = containerEl && containerEl !== wrapperEl ? resizeObserver(containerEl) : undefined;\n\n              return watch(\n                computed(() => [\n                  hostSize.value.width,\n                  hostSize.value.height,\n                  wrapperSize?.value.width,\n                  wrapperSize?.value.height,\n                  parentSize?.value.width,\n                  parentSize?.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        stopMobileSidebarWatch?.dispose();\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()}>\n            <slot name=\"logo\"></slot>\n          </div>\n\n          <div class=\"navbar-start\" part=\"start\">\n            <slot name=\"start\"></slot>\n          </div>\n\n          <div class=\"navbar-center\" part=\"center\">\n            <slot></slot>\n          </div>\n\n          <div class=\"navbar-end\" part=\"end\">\n            <slot name=\"end\"></slot>\n          </div>\n\n          <button\n            class=\"mobile-toggle\"\n            part=\"mobile-toggle\"\n            type=\"button\"\n            aria-label=\"${() =>\n              hasMobileMenu()\n                ? isMobileMenuOpen.value\n                  ? 'Close navigation menu'\n                  : 'Open navigation menu'\n                : isExternalMobileOpen.value\n                  ? 'Close navigation menu'\n                  : 'Open navigation menu'}\"\n            aria-controls=\"mobile-menu-panel\"\n            aria-expanded=\"${() => String(hasMobileMenu() ? isMobileMenuOpen.value : isExternalMobileOpen.value)}\"\n            ?hidden=${() => !isMobile.value || (!hasMobileMenu() && !mobileSidebarTarget.value)}\n            @click=\"${toggleMobileMenu}\">\n            <ore-icon\n              name=\"${() => ((hasMobileMenu() ? isMobileMenuOpen.value : isExternalMobileOpen.value) ? 'x' : 'menu')}\"\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()}>\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 {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 {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 * ```\n */\nexport const NAVBAR_ITEM_TAG = 'ore-navbar-item' as const;\ndefine<OreNavbarItemProps>(NAVBAR_ITEM_TAG, {\n  props: {\n    active: prop.bool(false),\n    disabled: prop.bool(false),\n    href: prop.string(),\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    // 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-current=\"${() => (props.active.value ? 'page' : null)}\"\n              @click=${closeMobileMenuIfOpen}>\n              ${renderItemContent()}\n            </a>\n          `;\n        }\n\n        if (props.disabled.value) {\n          return html`<div class=\"item\" part=\"item\" tabindex=\"-1\" aria-disabled=\"true\">${renderItemContent()}</div>`;\n        }\n\n        return html`<button class=\"item\" part=\"item\" type=\"button\" @click=${closeMobileMenuIfOpen}>\n          ${renderItemContent()}\n        </button>`;\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  createContext,\n  define,\n  html,\n  inject,\n  prop,\n  bind,\n  getHost,\n  onMounted,\n  provide,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { resizeObserver } from '@vielzeug/ore';\nimport { computed, type Readable, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ElevationLevel, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  elevationMixin,\n  frostVariantMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n} from '../../styles';\nimport { computeSafeRel } from '../../utils';\nimport navbarStyles from './navbar.css?inline';\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 parseMaxWidthPx = (query: string | undefined): number | undefined => {\n  const value = String(query ?? '').trim();\n\n  if (!value) return undefined;\n\n  const match = /max-width\\s*:\\s*([0-9]+(?:\\.[0-9]+)?)px/i.exec(value);\n\n  if (!match) return undefined;\n\n  const parsed = Number.parseFloat(match[1]);\n\n  return Number.isFinite(parsed) ? parsed : undefined;\n};\n\nconst resolveContainerElement = (el: HTMLElement): HTMLElement | null => {\n  let container = el.parentElement;\n\n  while (container?.tagName.toLowerCase() === 'ore-grid-item') {\n    container = container.parentElement;\n  }\n\n  return container;\n};\n\nconst readContainerWidth = (el: HTMLElement): number => {\n  const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n  if (parentWidth > 0) return parentWidth;\n\n  return el.offsetWidth;\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  closeMobile?: () => void;\n  openMobile?: () => void;\n  toggleMobile?: () => 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  /** 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  /** 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 {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' | 'glass'\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 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 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    'mobile-sidebar': prop.string(),\n    rounded: prop.string<RoundedSize>(),\n    'scroll-threshold': prop.number(80),\n    sticky: prop.bool(false),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'frost'>(),\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 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.openMobile?.();\n          } else {\n            target.closeMobile?.();\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.toggleMobile === 'function') {\n            target.toggleMobile();\n          } else if (typeof target.openMobile === 'function' && typeof target.closeMobile === 'function') {\n            const isOpen = target.hasAttribute('data-mobile-open');\n\n            if (isOpen) target.closeMobile();\n            else target.openMobile();\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        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 hasMobileOpen = target.hasAttribute('data-mobile-open');\n\n          isExternalMobileMode.value = hasBottomNav;\n          isExternalMobileOpen.value = event?.detail ? event.detail.open : hasMobileOpen;\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-mobile-open'],\n          attributes: true,\n        });\n        target.addEventListener('mobile-open-change', syncTargetState as EventListener);\n        mobileSidebarCleanup = () => {\n          targetObserver.disconnect();\n          target.removeEventListener('mobile-open-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          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          if (typeof window.matchMedia !== 'function') {\n            return;\n          }\n\n          const mql = window.matchMedia(mediaQuery);\n          const syncMedia = (next: boolean) => {\n            mediaMatches.value = next;\n            syncMobileMode();\n          };\n          const onChange = (event: MediaQueryListEvent) => {\n            syncMedia(event.matches);\n          };\n\n          syncMedia(mql.matches);\n          mql.addEventListener('change', onChange);\n\n          mediaCleanup = () => {\n            mql.removeEventListener('change', onChange);\n          };\n        },\n        { immediate: true },\n      );\n\n      const stopResizeEffect =\n        typeof ResizeObserver === 'function'\n          ? (() => {\n              const hostSize = resizeObserver(el);\n              const wrapperEl = el.parentElement;\n              const containerEl = resolveContainerElement(el);\n              const wrapperSize = wrapperEl ? resizeObserver(wrapperEl) : undefined;\n              const parentSize = containerEl && containerEl !== wrapperEl ? resizeObserver(containerEl) : undefined;\n\n              return watch(\n                computed(() => [\n                  hostSize.value.width,\n                  hostSize.value.height,\n                  wrapperSize?.value.width,\n                  wrapperSize?.value.height,\n                  parentSize?.value.width,\n                  parentSize?.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\">\n            <slot name=\"start\"></slot>\n          </div>\n\n          <div class=\"navbar-center\" part=\"center\">\n            <slot></slot>\n          </div>\n\n          <div class=\"navbar-end\" part=\"end\">\n            <slot name=\"end\"></slot>\n          </div>\n\n          <button\n            class=\"mobile-toggle\"\n            part=\"mobile-toggle\"\n            type=\"button\"\n            aria-label=\"${() =>\n              hasMobileMenu.value\n                ? isMobileMenuOpen.value\n                  ? 'Close navigation menu'\n                  : 'Open navigation menu'\n                : isExternalMobileOpen.value\n                  ? 'Close navigation menu'\n                  : 'Open navigation menu'}\"\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=\"${() => ((hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value) ? 'x' : 'menu')}\"\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 {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    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    // 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-current=\"${() => (props.active.value ? 'page' : null)}\"\n              @click=${closeMobileMenuIfOpen}>\n              ${renderItemContent()}\n            </a>\n          `;\n        }\n\n        if (props.disabled.value) {\n          return html`\n            <div class=\"item\" part=\"item\" tabindex=\"-1\" aria-disabled=\"true\">${renderItemContent()}</div>\n          `;\n        }\n\n        return html`\n          <button class=\"item\" part=\"item\" type=\"button\" @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,24 +1,24 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/states.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./headless/spinner.cjs"),r=require("./inputs/shared/form-context.cjs"),i=require("./inputs/number-input/number-input.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple"),s=require("@vielzeug/arsenal");var c=`ore-number-input`;(0,a.define)(c,{formAssociated:!0,props:{...t.themableBundle,...t.sizableBundle,...t.disablableBundle,...t.roundableBundle,error:a.prop.string(),fullwidth:a.prop.bool(!1),helper:a.prop.string(),label:a.prop.string(),"label-placement":a.prop.oneOf([`inset`,`outside`],`inset`),"large-step":a.prop.json(void 0),loading:a.prop.bool(!1),max:a.prop.json(void 0),min:a.prop.json(void 0),name:a.prop.string(),placeholder:a.prop.string(),readonly:a.prop.bool(!1),ref:a.prop.data(),step:a.prop.number(1),success:a.prop.bool(!1),value:a.prop.json(void 0),variant:a.prop.string()},setup(e){let t=(0,a.useEmit)(),i=a.watchEffect,c=r.useFormContext(e,(0,a.inject)(r.FORM_CTX)),l=(0,o.computed)(()=>c.disabled.value||e.loading.value),u=(0,o.computed)(()=>!!e.readonly.value),d=(0,o.signal)(e.value.value==null?``:String(e.value.value));(0,o.watch)(e.value,e=>{let t=e==null?``:String(e);d.value!==t&&(d.value=t)});function f(){let e=d.value.trim();if(!e)return null;let t=Number.parseFloat(e);return Number.isNaN(t)?null:t}function p(n,r){let i=e.min.value==null?void 0:Number(e.min.value),a=e.max.value==null?void 0:Number(e.max.value),o=n==null?null:(0,s.clamp)(n,i,a),c=o==null?``:String(o);d.value!==c&&(d.value=c),t(`change`,{originalEvent:r,value:o})}let m=n.createSpinnerControl({commit:p,disabled:l,largeStep:e[`large-step`],max:e.max,min:e.min,parse:f,readonly:u,step:e.step}),h=(0,a.ref)(),g=null,_=null,v=null,y=n=>{if(!n){g?.(),_?.(),v?.dispose(),g=null,_=null,v=null,e.ref.value?.(null);return}n.setAttribute(`inputmode`,`decimal`),n.setAttribute(`role`,`spinbutton`);let r=e=>{let t=e.target.value,n=t===``?null:Number.parseFloat(t);p(Number.isNaN(n??NaN)?null:n,e)},a=e=>{let n=e.target.value,r=n===``?null:Number.parseFloat(n);d.value=n,t(`input`,{originalEvent:e,value:Number.isNaN(r??NaN)?null:r})};n.addEventListener(`change`,r),n.addEventListener(`input`,a),_=()=>{n.removeEventListener(`change`,r),n.removeEventListener(`input`,a)},g=i(()=>{let t=f();t==null?n.removeAttribute(`aria-valuenow`):n.setAttribute(`aria-valuenow`,String(t)),e.min.value==null?n.removeAttribute(`aria-valuemin`):n.setAttribute(`aria-valuemin`,String(e.min.value)),e.max.value==null?n.removeAttribute(`aria-valuemax`):n.setAttribute(`aria-valuemax`,String(e.max.value)),u.value?n.setAttribute(`aria-readonly`,`true`):n.removeAttribute(`aria-readonly`)}),e.ref.value?.(n),v=(0,o.watch)(e.ref,e=>{e?.(n)})};(0,a.onElement)(h,e=>{e.ref=y}),(0,a.bind)({attr:{size:c.size,value:()=>d.value||null,variant:c.variant}});let b=(0,o.computed)(()=>l.value||u.value);return a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/spinner.cjs"),t=require("./styles/mixins/states.css.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./inputs/shared/native-field-event.cjs"),i=require("./inputs/number-input/number-input.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple"),s=require("@vielzeug/ripple/watch"),c=require("@vielzeug/arsenal/math");var l=`ore-number-input`;(0,a.define)(l,{formAssociated:!0,props:{...n.themableBundle,...n.sizableBundle,...n.disablableBundle,...n.roundableBundle,error:a.prop.string(),fullwidth:a.prop.bool(!1),helper:a.prop.string(),label:a.prop.string(),"label-placement":a.prop.oneOf([`inset`,`outside`],`inset`),"large-step":a.prop.json(void 0),loading:a.prop.bool(!1),max:a.prop.json(void 0),min:a.prop.json(void 0),name:a.prop.string(),placeholder:a.prop.string(),readonly:a.prop.bool(!1),ref:a.prop.data(),step:a.prop.number(1),success:a.prop.bool(!1),value:a.prop.json(void 0),variant:a.prop.string()},setup(t){let n=(0,a.getHost)(),i=a.watchEffect,l=(0,o.computed)(()=>t.disabled.value||t.loading.value),u=(0,o.computed)(()=>!!t.readonly.value),d=(0,o.signal)(t.value.value==null?``:String(t.value.value));r.defineFieldValue(n,()=>d.value,e=>{d.value=e}),(0,s.watch)(t.value,e=>{let t=e==null?``:String(e);d.value!==t&&(d.value=t)});function f(){let e=d.value.trim();if(!e)return null;let t=Number.parseFloat(e);return Number.isNaN(t)?null:t}function p(e,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=e==null?null:(0,c.clamp)(e,a,o),l=s==null?``:String(s);d.value!==l&&(d.value=l),r.setFieldValue(n,l),r.dispatchNativeFieldEvent(n,`change`)}let m=e.createSpinnerControl({commit:p,disabled:l,largeStep:t[`large-step`],max:t.max,min:t.min,parse:f,readonly:u,step:t.step}),h=(0,a.ref)(),g=null,_=null,v=null,y=e=>{if(!e){g?.(),_?.(),v?.dispose(),g=null,_=null,v=null,t.ref.value?.(null);return}e.setAttribute(`inputmode`,`decimal`),e.setAttribute(`role`,`spinbutton`);let a=e=>{let t=e.target.value,n=t===``?null:Number.parseFloat(t);p(Number.isNaN(n??NaN)?null:n,e)},o=e=>{let t=e.target.value;d.value=t,r.setFieldValue(n,t),r.dispatchNativeFieldEvent(n,`input`)};e.addEventListener(`change`,a),e.addEventListener(`input`,o),_=()=>{e.removeEventListener(`change`,a),e.removeEventListener(`input`,o)},g=i(()=>{let n=f();n==null?e.removeAttribute(`aria-valuenow`):e.setAttribute(`aria-valuenow`,String(n)),t.min.value==null?e.removeAttribute(`aria-valuemin`):e.setAttribute(`aria-valuemin`,String(t.min.value)),t.max.value==null?e.removeAttribute(`aria-valuemax`):e.setAttribute(`aria-valuemax`,String(t.max.value)),u.value?e.setAttribute(`aria-readonly`,`true`):e.removeAttribute(`aria-readonly`)}),t.ref.value?.(e),v=(0,s.watch)(t.ref,t=>{t?.(e)})};(0,a.onElement)(h,e=>{e.ref=y}),(0,a.bind)({attr:{size:t.size,value:()=>d.value||null,variant:t.variant}});let b=(0,o.computed)(()=>l.value||u.value);return a.html`
       <ore-input
         class="field"
         part="field control"
         ref="${h}"
-        :value="${()=>d.value}"
-        :label="${()=>e.label.value??``}"
-        :label-placement="${()=>e[`label-placement`].value??`inset`}"
-        :placeholder="${()=>e.placeholder.value??``}"
-        :name="${()=>e.name.value??``}"
-        :helper="${()=>e.helper.value??``}"
-        :error="${()=>e.error.value??``}"
-        :size="${c.size}"
-        :color="${()=>e.color.value??``}"
-        :variant="${()=>e.variant.value??``}"
-        :rounded="${()=>e.rounded.value}"
-        ?disabled="${c.disabled}"
+        value="${()=>d.value??0}"
+        label="${()=>t.label.value??``}"
+        label-placement="${()=>t[`label-placement`].value??`inset`}"
+        placeholder="${()=>t.placeholder.value??``}"
+        name="${()=>t.name.value??``}"
+        helper="${()=>t.helper.value??``}"
+        error="${()=>t.error.value??``}"
+        size="${t.size}"
+        color="${()=>t.color.value??``}"
+        variant="${t.variant}"
+        rounded="${()=>t.rounded.value}"
+        ?disabled="${t.disabled}"
         ?readonly="${u}"
-        ?fullwidth="${()=>e.fullwidth.value}"
-        ?loading="${()=>e.loading.value}"
-        ?success="${()=>e.success.value}"
+        ?fullwidth="${()=>t.fullwidth.value}"
+        ?loading="${()=>t.loading.value}"
+        ?success="${()=>t.success.value}"
         @keydown="${e=>m.handleKeydown(e)}">
         <button
           slot="prefix"
@@ -26,7 +26,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           part="decrement-btn"
           aria-label="Decrease"
           ?disabled="${()=>b.value||m.atMin()}"
-          @click="${t=>m.incrementBy(-(Number(e.step.value)||1),t)}">
+          @click="${e=>m.incrementBy(-(Number(t.step.value)||1),e)}">
           <ore-icon name="minus" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>
         </button>
         <button
@@ -35,9 +35,9 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           part="increment-btn"
           aria-label="Increase"
           ?disabled="${()=>b.value||m.atMax()}"
-          @click="${t=>m.incrementBy(Number(e.step.value)||1,t)}">
+          @click="${e=>m.incrementBy(Number(t.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:[e.disabledLoadingMixin,i.default]}),exports.NUMBER_INPUT_TAG=c;
+    `},shadow:{delegatesFocus:!0},styles:[t.disabledLoadingMixin,i.default]}),exports.NUMBER_INPUT_TAG=l;
 //# 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 { define, html, inject, prop, ref, bind, onElement, useEmit, watchEffect } from '@vielzeug/ore';\nimport { computed, signal, watch as rippleWatch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { createSpinnerControl } from '../../headless';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledLoadingMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './number-input.css?inline';\n\nexport type OreNumberInputEvents = {\n  change: { originalEvent?: Event; value: number | null };\n  input: { originalEvent?: Event; value: number | null };\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 change - On committed value change. detail: { value: number | null, originalEvent?: Event }\n * @fires input - On every keystroke. detail: { value: number | null, originalEvent?: Event }\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 emit = useEmit<OreNumberInputEvents>();\n    const watch = watchEffect;\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    // `loading` behaves like a temporary `disabled` — see ore-input's identical computation.\n    const isDisabled = computed(() => fCtxProps.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    // 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      emit('change', { originalEvent, value: clamped });\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        const n = val !== '' ? Number.parseFloat(val) : null;\n\n        fieldValue.value = val;\n        emit('input', { originalEvent: e, value: Number.isNaN(n ?? NaN) ? null : n });\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: fCtxProps.size,\n        value: () => fieldValue.value || null,\n        variant: fCtxProps.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}\"\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=\"${fCtxProps.size}\"\n        :color=\"${() => props.color.value ?? ''}\"\n        :variant=\"${() => props.variant.value ?? ''}\"\n        :rounded=\"${() => props.rounded.value}\"\n        ?disabled=\"${fCtxProps.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/math';\nimport { define, html, prop, ref, bind, getHost, onElement, watchEffect } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch as rippleWatch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { createSpinnerControl } from '../../core';\nimport '../../content/icon/icon';\nimport '../input/input';\nimport { disablableBundle, roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledLoadingMixin } from '../../styles';\nimport { defineFieldValue, dispatchNativeFieldEvent, setFieldValue } from '../shared/native-field-event';\nimport componentStyles from './number-input.css?inline';\n\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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"}

package/dist/number-input.js

@@ -1,128 +1,125 @@
-import { disabledLoadingMixin as e } from "./styles/mixins/states.css.js";
-import { disablableBundle as t, roundableBundle as n, sizableBundle as r, themableBundle as i } from "./shared/prop-bundles.js";
-import { createSpinnerControl as a } from "./headless/spinner.js";
-import { FORM_CTX as o, useFormContext as s } from "./inputs/shared/form-context.js";
-import c from "./inputs/number-input/number-input.css.js";
-import { bind as l, define as u, html as d, inject as f, onElement as p, prop as m, ref as h, useEmit as g, watchEffect as _ } from "@vielzeug/ore";
-import { computed as v, signal as y, watch as b } from "@vielzeug/ripple";
-import { clamp as x } from "@vielzeug/arsenal";
+import { createSpinnerControl as e } from "./core/spinner.js";
+import { disabledLoadingMixin as t } from "./styles/mixins/states.css.js";
+import { disablableBundle as n, roundableBundle as r, sizableBundle as i, themableBundle as a } from "./shared/prop-bundles.js";
+import { defineFieldValue as o, dispatchNativeFieldEvent as s, setFieldValue as c } from "./inputs/shared/native-field-event.js";
+import l from "./inputs/number-input/number-input.css.js";
+import { bind as u, define as d, getHost as f, html as p, onElement as m, prop as h, ref as g, watchEffect as _ } from "@vielzeug/ore";
+import { computed as v, signal as y } from "@vielzeug/ripple";
+import { watch as b } from "@vielzeug/ripple/watch";
+import { clamp as x } from "@vielzeug/arsenal/math";
 //#region src/inputs/number-input/number-input.ts
 var S = "ore-number-input";
-u(S, {
+d(S, {
 	formAssociated: !0,
 	props: {
+		...a,
 		...i,
-		...r,
-		...t,
 		...n,
-		error: m.string(),
-		fullwidth: m.bool(!1),
-		helper: m.string(),
-		label: m.string(),
-		"label-placement": m.oneOf(["inset", "outside"], "inset"),
-		"large-step": m.json(void 0),
-		loading: m.bool(!1),
-		max: m.json(void 0),
-		min: m.json(void 0),
-		name: m.string(),
-		placeholder: m.string(),
-		readonly: m.bool(!1),
-		ref: m.data(),
-		step: m.number(1),
-		success: m.bool(!1),
-		value: m.json(void 0),
-		variant: m.string()
+		...r,
+		error: h.string(),
+		fullwidth: h.bool(!1),
+		helper: h.string(),
+		label: h.string(),
+		"label-placement": h.oneOf(["inset", "outside"], "inset"),
+		"large-step": h.json(void 0),
+		loading: h.bool(!1),
+		max: h.json(void 0),
+		min: h.json(void 0),
+		name: h.string(),
+		placeholder: h.string(),
+		readonly: h.bool(!1),
+		ref: h.data(),
+		step: h.number(1),
+		success: h.bool(!1),
+		value: h.json(void 0),
+		variant: h.string()
 	},
-	setup(e) {
-		let t = g(), n = _, r = s(e, f(o)), i = v(() => r.disabled.value || e.loading.value), c = v(() => !!e.readonly.value), u = y(e.value.value == null ? "" : String(e.value.value));
-		b(e.value, (e) => {
+	setup(t) {
+		let n = f(), r = _, i = v(() => t.disabled.value || t.loading.value), a = v(() => !!t.readonly.value), l = y(t.value.value == null ? "" : String(t.value.value));
+		o(n, () => l.value, (e) => {
+			l.value = e;
+		}), b(t.value, (e) => {
 			let t = e == null ? "" : String(e);
-			u.value !== t && (u.value = t);
+			l.value !== t && (l.value = t);
 		});
-		function m() {
-			let e = u.value.trim();
+		function d() {
+			let e = l.value.trim();
 			if (!e) return null;
 			let t = Number.parseFloat(e);
 			return Number.isNaN(t) ? null : t;
 		}
-		function S(n, r) {
-			let i = e.min.value == null ? void 0 : Number(e.min.value), a = e.max.value == null ? void 0 : Number(e.max.value), o = n == null ? null : x(n, i, a), s = o == null ? "" : String(o);
-			u.value !== s && (u.value = s), t("change", {
-				originalEvent: r,
-				value: o
-			});
+		function h(e, r) {
+			let i = t.min.value == null ? void 0 : Number(t.min.value), a = t.max.value == null ? void 0 : Number(t.max.value), o = e == null ? null : x(e, i, a), u = o == null ? "" : String(o);
+			l.value !== u && (l.value = u), c(n, u), s(n, "change");
 		}
-		let C = a({
-			commit: S,
+		let S = e({
+			commit: h,
 			disabled: i,
-			largeStep: e["large-step"],
-			max: e.max,
-			min: e.min,
-			parse: m,
-			readonly: c,
-			step: e.step
-		}), w = h(), T = null, E = null, D = null, O = (r) => {
-			if (!r) {
-				T?.(), E?.(), D?.dispose(), T = null, E = null, D = null, e.ref.value?.(null);
+			largeStep: t["large-step"],
+			max: t.max,
+			min: t.min,
+			parse: d,
+			readonly: a,
+			step: t.step
+		}), C = g(), w = null, T = null, E = null, D = (e) => {
+			if (!e) {
+				w?.(), T?.(), E?.dispose(), w = null, T = null, E = null, t.ref.value?.(null);
 				return;
 			}
-			r.setAttribute("inputmode", "decimal"), r.setAttribute("role", "spinbutton");
+			e.setAttribute("inputmode", "decimal"), e.setAttribute("role", "spinbutton");
 			let i = (e) => {
 				let t = e.target.value, n = t === "" ? null : Number.parseFloat(t);
-				S(Number.isNaN(n ?? NaN) ? null : n, e);
-			}, a = (e) => {
-				let n = e.target.value, r = n === "" ? null : Number.parseFloat(n);
-				u.value = n, t("input", {
-					originalEvent: e,
-					value: Number.isNaN(r ?? NaN) ? null : r
-				});
+				h(Number.isNaN(n ?? NaN) ? null : n, e);
+			}, o = (e) => {
+				let t = e.target.value;
+				l.value = t, c(n, t), s(n, "input");
 			};
-			r.addEventListener("change", i), r.addEventListener("input", a), E = () => {
-				r.removeEventListener("change", i), r.removeEventListener("input", a);
-			}, T = n(() => {
-				let t = m();
-				t == null ? r.removeAttribute("aria-valuenow") : r.setAttribute("aria-valuenow", String(t)), e.min.value == null ? r.removeAttribute("aria-valuemin") : r.setAttribute("aria-valuemin", String(e.min.value)), e.max.value == null ? r.removeAttribute("aria-valuemax") : r.setAttribute("aria-valuemax", String(e.max.value)), c.value ? r.setAttribute("aria-readonly", "true") : r.removeAttribute("aria-readonly");
-			}), e.ref.value?.(r), D = b(e.ref, (e) => {
-				e?.(r);
+			e.addEventListener("change", i), e.addEventListener("input", o), T = () => {
+				e.removeEventListener("change", i), e.removeEventListener("input", o);
+			}, w = r(() => {
+				let n = d();
+				n == null ? e.removeAttribute("aria-valuenow") : e.setAttribute("aria-valuenow", String(n)), t.min.value == null ? e.removeAttribute("aria-valuemin") : e.setAttribute("aria-valuemin", String(t.min.value)), t.max.value == null ? e.removeAttribute("aria-valuemax") : e.setAttribute("aria-valuemax", String(t.max.value)), a.value ? e.setAttribute("aria-readonly", "true") : e.removeAttribute("aria-readonly");
+			}), t.ref.value?.(e), E = b(t.ref, (t) => {
+				t?.(e);
 			});
 		};
-		p(w, (e) => {
-			e.ref = O;
-		}), l({ attr: {
-			size: r.size,
-			value: () => u.value || null,
-			variant: r.variant
+		m(C, (e) => {
+			e.ref = D;
+		}), u({ attr: {
+			size: t.size,
+			value: () => l.value || null,
+			variant: t.variant
 		} });
-		let k = v(() => i.value || c.value);
-		return d`
+		let O = v(() => i.value || a.value);
+		return p`
       <ore-input
         class="field"
         part="field control"
-        ref="${w}"
-        :value="${() => u.value}"
-        :label="${() => e.label.value ?? ""}"
-        :label-placement="${() => e["label-placement"].value ?? "inset"}"
-        :placeholder="${() => e.placeholder.value ?? ""}"
-        :name="${() => e.name.value ?? ""}"
-        :helper="${() => e.helper.value ?? ""}"
-        :error="${() => e.error.value ?? ""}"
-        :size="${r.size}"
-        :color="${() => e.color.value ?? ""}"
-        :variant="${() => e.variant.value ?? ""}"
-        :rounded="${() => e.rounded.value}"
-        ?disabled="${r.disabled}"
-        ?readonly="${c}"
-        ?fullwidth="${() => e.fullwidth.value}"
-        ?loading="${() => e.loading.value}"
-        ?success="${() => e.success.value}"
-        @keydown="${(e) => C.handleKeydown(e)}">
+        ref="${C}"
+        value="${() => l.value ?? 0}"
+        label="${() => t.label.value ?? ""}"
+        label-placement="${() => t["label-placement"].value ?? "inset"}"
+        placeholder="${() => t.placeholder.value ?? ""}"
+        name="${() => t.name.value ?? ""}"
+        helper="${() => t.helper.value ?? ""}"
+        error="${() => t.error.value ?? ""}"
+        size="${t.size}"
+        color="${() => t.color.value ?? ""}"
+        variant="${t.variant}"
+        rounded="${() => t.rounded.value}"
+        ?disabled="${t.disabled}"
+        ?readonly="${a}"
+        ?fullwidth="${() => t.fullwidth.value}"
+        ?loading="${() => t.loading.value}"
+        ?success="${() => t.success.value}"
+        @keydown="${(e) => S.handleKeydown(e)}">
         <button
           slot="prefix"
           type="button"
           part="decrement-btn"
           aria-label="Decrease"
-          ?disabled="${() => k.value || C.atMin()}"
-          @click="${(t) => C.incrementBy(-(Number(e.step.value) || 1), t)}">
+          ?disabled="${() => O.value || S.atMin()}"
+          @click="${(e) => S.incrementBy(-(Number(t.step.value) || 1), e)}">
           <ore-icon name="minus" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>
         </button>
         <button
@@ -130,15 +127,15 @@ u(S, {
           type="button"
           part="increment-btn"
           aria-label="Increase"
-          ?disabled="${() => k.value || C.atMax()}"
-          @click="${(t) => C.incrementBy(Number(e.step.value) || 1, t)}">
+          ?disabled="${() => O.value || S.atMax()}"
+          @click="${(e) => S.incrementBy(Number(t.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: [e, c]
+	styles: [t, l]
 });
 //#endregion
 export { S as NUMBER_INPUT_TAG };