@vielzeug/refine 26.10.5 → 26.10.7

package/dist/navbar.js.map

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

package/dist/query-bar.cjs

@@ -0,0 +1,77 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./inputs/shared/native-field-event.cjs"),t=require("./styles/mixins/accessibility.css.cjs"),n=require("./styles/mixins/shape.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/aria-reflection.cjs"),a=require("./core/ore.cjs"),o=require("./core/option-list.cjs"),s=require("./chip.cjs"),c=require("./input.cjs"),l=require("./inputs/query-bar/query-bar.css.cjs"),u=require("./inputs/query-bar/query-bar-grammar.cjs");let d=require("@vielzeug/ripple"),f=require("@vielzeug/ore");var p=36,m=`ore-query-bar`;(0,f.define)(m,{props:{clearable:f.prop.bool(!1),disabled:f.prop.bool(!1),error:f.prop.string(),helper:f.prop.string(),"hide-label":f.prop.bool(!1),label:f.prop.string(),placeholder:f.prop.string(),rounded:f.prop.string(),size:f.prop.string(),state:f.prop.data(),variant:f.prop.string(),vocabulary:f.prop.data()},setup(t){let n=(0,f.getHost)(),r=(0,f.useEmit)(),s=f.watchEffect,c=a.lifecycleSignal(f.onCleanup),l=(0,f.createId)(`query-bar`),vocabulary=()=>t.vocabulary.value??[],emptyState=()=>({text:``,tokens:[]}),normalizeState=e=>{if(e==null)return emptyState();if(typeof e!=`object`||!Array.isArray(e.tokens))return null;let t=e;return{text:typeof t.text==`string`?t.text:``,tokens:t.tokens}},m=(0,d.signal)(normalizeState(t.state.value)??emptyState()),h=(0,d.signal)(m.value.text),g=(0,d.computed)(()=>u.suggestQuery(h.value,vocabulary())),_=(0,d.computed)(()=>new Map(vocabulary().map(e=>[e.key,e]))),v=(0,d.computed)(()=>{let e=u.parseQuery(h.value,vocabulary()).draft;return e!==null&&e.valuePrefix!==``&&g.value.length===0}),y=(0,d.computed)(()=>{let e=u.parseQuery(h.value,vocabulary()).draft;return`No matching ${(e?_.value.get(e.key):void 0)?.label??e?.key??``} — searching as text`}),b=null,x=null,S=null,C=(0,f.ref)(),w=o.createListboxDropdown({getBoundary:()=>n,getFocusedOptionElement:()=>S?.querySelector(`[data-focused]`)??null,getItems:()=>g.value,getOptionId:e=>`${l}-opt-${e}`,getPanel:()=>S,getReference:()=>x,getTrigger:()=>b,isDisabled:()=>!!t.disabled.value,isItemDisabled:()=>!1,onClose:e=>r(`open-change`,{open:!1,reason:e}),onOpen:e=>r(`open-change`,{open:!0,reason:e}),positioning:{matchWidth:!1},restoreFocus:!1,signal:c}),{focusedIndex:T,isOpen:E}=w;(0,f.bind)({attr:{open:()=>E.value?!0:void 0,size:t.size,variant:t.variant}}),Object.defineProperty(n,"state",{configurable:!0,enumerable:!0,get:()=>m.value,set:e=>{let t=normalizeState(e);t!==null&&t.tokens!==m.value.tokens&&(m.value=t,h.value=t.text)}});function emitChange(){e.dispatchNativeFieldEvent(n,`input`),e.dispatchNativeFieldEvent(n,`change`)}function commit(e){m.value=e,emitChange()}function mergeTokens(e,t){let n=e;for(let e of t){let t=n.findIndex(t=>t.key===e.key);n=t>=0?[...n.slice(0,t),e,...n.slice(t+1)]:[...n,e]}return n}function applyField(){let e=u.parseQuery(h.value,vocabulary());e.tokens.length>0&&(h.value=e.text),commit({text:e.text,tokens:mergeTokens(m.value.tokens,e.tokens)})}function handleInput(e){h.value=e.target.value,applyField(),canOpen()&&w.open(`keyboard`)}function pick(e){let t=/\s$/.test(h.value)||h.value.trim()===``?``:h.value.replace(/\S+\s*$/,``).trim();e.kind===`key`?(h.value=t?`${t} ${e.key}:`:`${e.key}:`,applyField()):(h.value=t,commit(u.commitToken({text:t,tokens:m.value.tokens},e.key,e.value))),b?.focus()}function removeChip(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(commit(u.removeToken(m.value,t)),b?.focus())}function clearText(){h.value=``,commit({text:``,tokens:m.value.tokens}),b?.focus()}function handleKeydown(e){if(!t.disabled.value&&!w.handleKeydown(e))switch(e.key){case`Enter`:{let t=E.value?g.value[T.value]:void 0;t&&(e.preventDefault(),pick(t));break}case`Backspace`:if(h.value===``&&m.value.tokens.length>0){let e=m.value.tokens[m.value.tokens.length-1];e&&commit(u.removeToken(m.value,e.key))}break;case`Tab`:w.close(`programmatic`)}}let canOpen=()=>g.value.length>0||v.value,openDropdown=()=>{canOpen()&&w.open(`focus`)};s(()=>{E.value&&!canOpen()&&w.close(`programmatic`)});function handleFocusOut(e){let t=e.relatedTarget;if(t instanceof Node&&n.shadowRoot?.contains(t))return;let r=u.parseQuery(h.value,vocabulary());if(r.draft){if(r.draft.valuePrefix===``){h.value=r.text;return}if(u.suggestQuery(h.value,vocabulary()).length===0){let e=r.text?`${r.text} ${r.draft.key}:${r.draft.valuePrefix}`:`${r.draft.key}:${r.draft.valuePrefix}`;h.value=e,commit({text:e,tokens:m.value.tokens})}}}s(()=>{g.value,w.isOpen.value&&w.set(-1)}),s(()=>{E.value?(S&&`showPopover`in S&&!S.matches(`:popover-open`)&&S.showPopover(),w.updatePosition()):S&&`hidePopover`in S&&S.matches(`:popover-open`)&&S.hidePopover()}),(0,f.onElement)(C,e=>{x=e;let t=e.shadowRoot?.querySelector(`input`)??null;if(t)return b=t,t.setAttribute(`role`,`combobox`),t.setAttribute(`autocomplete`,`off`),t.setAttribute(`aria-autocomplete`,`list`),t.setAttribute(`aria-haspopup`,`listbox`),t.setAttribute(`spellcheck`,`false`),t.setAttribute(`aria-keyshortcuts`,`Backspace`),t.addEventListener(`input`,handleInput),t.addEventListener(`keydown`,handleKeydown),t.addEventListener(`focus`,openDropdown),t.addEventListener(`focusout`,handleFocusOut),()=>{b=null,x=null,t.removeEventListener(`input`,handleInput),t.removeEventListener(`keydown`,handleKeydown),t.removeEventListener(`focus`,openDropdown),t.removeEventListener(`focusout`,handleFocusOut)}}),(0,f.onMounted)(()=>{let e=n.shadowRoot?.querySelector(`[role="listbox"]`);b&&i.setAriaReflection(b,`ariaControlsElements`,e?[e]:[])}),s(()=>{if(!C.value||!b)return;b.setAttribute(`aria-expanded`,String(E.value));let e=n.shadowRoot?.querySelector(`[role="listbox"]`);i.setAriaReflection(b,`ariaControlsElements`,e?[e]:[]);let r=w.ariaActiveDescendant.value,a=r?[...S?.querySelectorAll(`[role="option"]`)??[]].find(e=>e.id===r):null;i.setAriaReflection(b,`ariaActiveDescendantElement`,a?.id===r?[a]:[]),t.disabled.value?b.setAttribute(`aria-disabled`,`true`):b.removeAttribute(`aria-disabled`),t.error.value?b.setAttribute(`aria-invalid`,`true`):b.removeAttribute(`aria-invalid`)}),s(()=>{C.value&&b&&b.value!==h.value&&(b.value=h.value)}),(0,f.onCleanup)(()=>{w[Symbol.dispose]()});let hideLabel=()=>t[`hide-label`].value,inputLabel=()=>hideLabel()?``:t.label.value??``,inputAriaLabel=()=>hideLabel()?t.label.value??``:null,pillLabel=e=>{let t=_.value.get(e.key),n=t?.options.find(t=>t.value===e.value);return t&&n?`${t.label}: ${n.label}`:`${t?.key??e.key}: ${n?.label??e.value}`},optionMeta=e=>{let t=_.value.get(e.key);return e.kind===`key`?`${e.key}:`:t?.label??e.key};return f.html`
+      <ore-input
+        class="trigger"
+        ref=${C}
+        label="${inputLabel}"
+        aria-label="${inputAriaLabel}"
+        placeholder="${()=>t.placeholder.value??``}"
+        label-placement="inset"
+        variant="${()=>t.variant.value??`bordered`}"
+        size="${()=>t.size.value??``}"
+        rounded="${()=>t.rounded.value??`md`}"
+        helper="${()=>t.helper.value??``}"
+        error="${()=>t.error.value??``}"
+        ?disabled="${()=>!!t.disabled.value}"
+        part="wrapper">
+        <div class="prefix" slot="prefix">
+          <ore-icon name="search" size="16" aria-hidden="true"></ore-icon>
+          <span class="pills">
+            ${()=>m.value.tokens.map(e=>f.html`
+                  <ore-chip
+                    value=${e.key}
+                    label=${pillLabel(e)}
+                    mode="removable"
+                    variant="flat"
+                    size="sm"
+                    @remove=${removeChip}>
+                    ${pillLabel(e)}
+                  </ore-chip>
+                `)}
+          </span>
+        </div>
+        <span class="suffix" slot="suffix">
+          <button
+            class="clear-btn"
+            part="clear-btn"
+            type="button"
+            aria-label="Clear"
+            tabindex="-1"
+            ?hidden="${()=>!t.clearable.value||h.value===``}"
+            @click="${clearText}">
+            <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+          </button>
+        </span>
+      </ore-input>
+      <div
+        class="dropdown"
+        part="dropdown"
+        id="${()=>`${l}-dropdown`}"
+        popover="manual"
+        ?data-open=${()=>E.value}
+        ref=${e=>{S=e}}>
+        <div
+          role="listbox"
+          id="${()=>`${l}-listbox`}"
+          style="${()=>E.value&&canOpen()?`height:${(v.value?1:g.value.length)*p}px;`:``}"
+          aria-label="${()=>t.label.value||t.placeholder.value||`Suggestions`}">
+          ${()=>E.value&&v.value?f.html`<div class="no-match" role="option" aria-selected="false" aria-disabled="true">${y.value}</div>`:``}
+          ${()=>E.value&&g.value.length>0?g.value.map((e,t)=>f.html`
+                    <div
+                      class="option"
+                      role="option"
+                      id="${`${l}-opt-${t}`}"
+                      data-option-index="${t}"
+                      aria-selected="false"
+                      aria-disabled="false"
+                      style="${`position:absolute;top:0;left:0;right:0;transform:translateY(${t*p}px);`}"
+                      ?data-focused=${()=>T.value===t}
+                      @pointermove="${()=>w.set(t)}"
+                      @click="${()=>pick(e)}">
+                      <span class="option-label">${e.label}</span>
+                      <span class="option-meta">${optionMeta(e)}</span>
+                    </div>
+                  `):``}
+        </div>
+      </div>
+    `},shadow:{delegatesFocus:!0},styles:[r.colorThemeMixin,t.reducedMotionMixin,n.roundedVariantMixin,l.default]}),exports.CHIP_TAG=s.CHIP_TAG,exports.INPUT_TAG=c.INPUT_TAG,exports.QUERY_BAR_TAG=m,exports.commitToken=u.commitToken,exports.hasQueryFilters=u.hasQueryFilters,exports.parseQuery=u.parseQuery,exports.removeToken=u.removeToken,exports.suggestQuery=u.suggestQuery,exports.tokenValue=u.tokenValue;
+//# sourceMappingURL=query-bar.cjs.map

package/dist/query-bar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-bar.cjs","names":[],"sources":["../src/inputs/query-bar/query-bar.ts"],"sourcesContent":["import {\n  bind,\n  createId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onElement,\n  onMounted,\n  prop,\n  ref,\n  useEmit,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createListboxDropdown, lifecycleSignal, setAriaReflection } from '../../core';\nimport { colorThemeMixin, reducedMotionMixin, roundedVariantMixin } from '../../styles';\nimport type { AddEventListeners, ComponentSize, RoundedSize } from '../../types';\nimport { dispatchNativeFieldEvent } from '../shared/native-field-event';\nimport componentStyles from './query-bar.css?inline';\nimport type { OreQueryBarEvents, OreQueryBarProps } from './query-bar.types';\nimport {\n  commitToken,\n  parseQuery,\n  type QueryState,\n  type QuerySuggestion,\n  type QueryToken,\n  type QueryTokenDef,\n  removeToken,\n  suggestQuery,\n} from './query-bar-grammar';\n\nexport { CHIP_TAG } from '../../feedback/chip/chip';\nexport { INPUT_TAG } from '../input/input';\nexport type { OreQueryBarEvents, OreQueryBarProps } from './query-bar.types';\nexport * from './query-bar-grammar';\n\n/** Fixed row height of one suggestion; the dropdown positions rows against it. */\nconst OPTION_ROW_HEIGHT = 36;\n\n/**\n * A search field that accepts free text and `key:value` tokens together, in the\n * grammar GitHub's pull-request search made familiar. Committed tokens render as\n * removable pills inside the field; a suggestion dropdown lists the vocabulary's\n * keys and matching values while typing, so phones never need to type a colon.\n *\n * The bar is state-driven: `vocabulary` defines the token keys and their accepted\n * values, `state` carries `{ text, tokens }`, and every edit emits `input` +\n * `change` with the new state readable from the element's `state` property. Omit\n * `state` for uncontrolled use. External `state` writes whose `tokens` array is\n * identical to the current one are treated as echoes — only token changes are\n * adopted — so text-only round-trips never wipe the field's live draft.\n *\n * The dropdown opens while the field holds focus (and reopens on typing after\n * Escape) and overlays the page from the top layer. Picking a key suggestion\n * starts composing `key:`; picking a value commits its pill. Typing a complete\n * `key:value` commits immediately. Backspace on an empty field removes the last\n * pill. A draft whose value matches nothing shows a \"searching as text\" row\n * instead of closing; on blur, a bare `key:` fragment reverts and a dead draft\n * degrades into the searched text, so the field never carries silent residue.\n *\n * @element ore-query-bar\n *\n * @attr {string} label - Accessible name for the entry field\n * @attr {string} placeholder - Field placeholder, typically the surface's search hint\n * @attr {string} error - Inline error under the field\n * @attr {string} helper - Helper text under the field\n * @attr {boolean} hide-label - Hide the visible label while keeping its accessible name\n * @attr {boolean} clearable - Show a clear (×) button; it clears the free text only\n * @attr {boolean} disabled - Disable the whole bar\n * @attr {string} size - Field size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Field radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} variant - Field variant: 'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'\n *\n * @prop {QueryState} state - The controlled query state; write a new object to apply external changes\n * @prop {QueryTokenDef[]} vocabulary - The token vocabulary\n *\n * @fires input - The query changed; read the new state from the `state` property\n * @fires change - Same as `input`\n * @fires open-change - The suggestion dropdown opened or closed. detail: { open, reason }\n *\n * @part wrapper - The ore-input field host\n * @part dropdown - The suggestion dropdown container\n * @cssprop --query-bar-min-width - Minimum host width (default 12rem)\n * @cssprop --query-bar-icon-size - Leading search icon size (default 16px)\n * @cssprop --query-bar-option-height - Suggestion row height (default 36px)\n * @cssprop --query-bar-dropdown-min-width - Dropdown panel minimum width (default 16rem)\n * @cssprop --query-bar-dropdown-max-width - Dropdown panel maximum width (default 28rem, viewport-capped)\n * @cssprop --chip-* - Pill styling (see ore-chip)\n * @cssprop --combobox-dropdown-* - Dropdown panel and option styling (see ore-combobox)\n *\n * @example\n * ```html\n * <ore-query-bar id=\"bar\" label=\"Search issues\" placeholder=\"Title, author or label…\" clearable>\n * </ore-query-bar>\n * <script>\n *   bar.vocabulary = [\n *     { key: 'author', label: 'Author', options: [{ label: 'Alice', value: 'alice' }] },\n *   ];\n * </script>\n * ```\n */\nexport const QUERY_BAR_TAG = 'ore-query-bar' as const;\ndefine<OreQueryBarProps>(QUERY_BAR_TAG, {\n  props: {\n    clearable: prop.bool(false),\n    disabled: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    'hide-label': prop.bool(false),\n    label: prop.string(),\n    placeholder: prop.string(),\n    rounded: prop.string<RoundedSize>(),\n    size: prop.string<ComponentSize>(),\n    state: prop.data<QueryState>(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n    vocabulary: prop.data<QueryTokenDef[]>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreQueryBarEvents>();\n    const watch = watchEffect;\n    const abortSignal = lifecycleSignal(onCleanup);\n    const barId = createId('query-bar');\n\n    const vocabulary = (): QueryTokenDef[] => props.vocabulary.value ?? [];\n    const emptyState = (): QueryState => ({ text: '', tokens: [] });\n    const normalizeState = (value: unknown): QueryState | null => {\n      if (value == null) return emptyState();\n      if (typeof value !== 'object' || !Array.isArray((value as QueryState).tokens)) return null;\n      const state = value as QueryState;\n      return { text: typeof state.text === 'string' ? state.text : '', tokens: state.tokens };\n    };\n\n    /**\n     * The working state: the initial `state` prop plus every commit this bar emits\n     * before the consumer round-trips it. Gestures must read from here, never from\n     * the prop directly: props lag a render behind, so two quick pill removals\n     * would otherwise each compute from the same stale snapshot and the second\n     * would resurrect the first pill.\n     */\n    const working = signal<QueryState>(normalizeState(props.state.value) ?? emptyState());\n    /** What the field shows: the live draft (free text plus an unfinished token). */\n    const field = signal(working.value.text);\n\n    const suggestions = computed<QuerySuggestion[]>(() => suggestQuery(field.value, vocabulary()));\n    const defBy = computed(() => new Map(vocabulary().map((def) => [def.key, def])));\n\n    /**\n     * True while the draft names a known key whose prefix matches no option. The\n     * dropdown then shows a \"searching as text\" row instead of closing, so the\n     * degradation is never silent — and blur makes the state honest (below).\n     */\n    const noMatch = computed(() => {\n      const draft = parseQuery(field.value, vocabulary()).draft;\n      return draft !== null && draft.valuePrefix !== '' && suggestions.value.length === 0;\n    });\n\n    const noMatchLabel = computed(() => {\n      const draft = parseQuery(field.value, vocabulary()).draft;\n      const def = draft ? defBy.value.get(draft.key) : undefined;\n      return `No matching ${def?.label ?? draft?.key ?? ''} — searching as text`;\n    });\n\n    // Element refs the listbox dropdown needs; resolved as the template renders.\n    let inputEl: HTMLInputElement | null = null;\n    let fieldEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n    const inputRef = ref<HTMLElement>();\n\n    const optionList = createListboxDropdown<QuerySuggestion>({\n      getBoundary: () => el,\n      getFocusedOptionElement: () => dropdownEl?.querySelector<HTMLElement>('[data-focused]') ?? null,\n      getItems: () => suggestions.value,\n      getOptionId: (index) => `${barId}-opt-${index}`,\n      getPanel: () => dropdownEl,\n      getReference: () => fieldEl,\n      getTrigger: () => inputEl,\n      isDisabled: () => Boolean(props.disabled.value),\n      isItemDisabled: () => false,\n      onClose: (reason) => emit('open-change', { open: false, reason }),\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      // The reference is the whole (often full-row) field: matching its width would\n      // stretch the panel across the page. The dropdown sizes to its content within\n      // its own min/max bounds instead, like a menu.\n      positioning: { matchWidth: false },\n      restoreFocus: false,\n      signal: abortSignal,\n    });\n    const { focusedIndex, isOpen } = optionList;\n\n    bind({\n      attr: {\n        open: () => (isOpen.value ? true : undefined),\n        size: props.size,\n        variant: props.variant,\n      },\n    });\n\n    // Expose the working state as a native-like `.state` property on the host: the\n    // live external channel, replacing the prop-installed property exactly as\n    // ore-combobox replaces its own `value`. Writes whose `tokens` array matches\n    // the working one are consumer echoes (v-model round-trips) and keep the\n    // field's live draft; a changed tokens array is an external write — a deep-link\n    // preset, a mode switch — and is adopted, field included.\n    Object.defineProperty(el, 'state', {\n      configurable: true,\n      enumerable: true,\n      get: () => working.value,\n      set: (value: unknown) => {\n        const next = normalizeState(value);\n        if (next === null || next.tokens === working.value.tokens) return;\n        working.value = next;\n        field.value = next.text;\n      },\n    });\n\n    // ── State commits ────────────────────────────────────────────────────────\n\n    function emitChange(): void {\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n    }\n\n    /** Applies the next state locally and announces it; the consumer reads `el.state`. */\n    function commit(next: QueryState): void {\n      working.value = next;\n      emitChange();\n    }\n\n    /** Folds parsed tokens into the working set, replacing per key and keeping slots. */\n    function mergeTokens(base: QueryToken[], parsed: readonly QueryToken[]): QueryToken[] {\n      let tokens = base;\n      for (const token of parsed) {\n        const slot = tokens.findIndex((candidate) => candidate.key === token.key);\n        tokens = slot >= 0 ? [...tokens.slice(0, slot), token, ...tokens.slice(slot + 1)] : [...tokens, token];\n      }\n      return tokens;\n    }\n\n    /** Parses the field, folds any complete tokens into the working state, and commits. */\n    function applyField(): void {\n      const parsed = parseQuery(field.value, vocabulary());\n      if (parsed.tokens.length > 0) field.value = parsed.text;\n      commit({ text: parsed.text, tokens: mergeTokens(working.value.tokens, parsed.tokens) });\n    }\n\n    function handleInput(event: Event): void {\n      field.value = (event.target as HTMLInputElement).value;\n      applyField();\n      // Typing is the strongest composing signal: the dropdown must come back after\n      // Escape without a blur/refocus cycle, or the bar reads as broken.\n      if (canOpen()) optionList.open('keyboard');\n    }\n\n    function pick(suggestion: QuerySuggestion): void {\n      // The word being typed is selector intent: whichever suggestion is picked consumes\n      // it, so it never leaks into the free text as a stray search term. A field ending\n      // in whitespace has no active word; a `key:…` draft is consumed like any word.\n      const rest =\n        /\\s$/.test(field.value) || field.value.trim() === '' ? '' : field.value.replace(/\\S+\\s*$/, '').trim();\n      if (suggestion.kind === 'key') {\n        // Start composing: replace the word being typed with the token key.\n        field.value = rest ? `${rest} ${suggestion.key}:` : `${suggestion.key}:`;\n        applyField();\n      } else {\n        field.value = rest;\n        commit(commitToken({ text: rest, tokens: working.value.tokens }, suggestion.key, suggestion.value));\n      }\n      inputEl?.focus();\n    }\n\n    function removeChip(event: Event): void {\n      event.stopPropagation();\n      const key = (event as CustomEvent<{ value?: string }>).detail?.value;\n      if (key === undefined) return;\n      commit(removeToken(working.value, key));\n      // Keep the compose flow: without this, focus falls to the host and the next\n      // keystroke goes nowhere.\n      inputEl?.focus();\n    }\n\n    /** The field's own clear button: clears the free text, never the pills. */\n    function clearText(): void {\n      field.value = '';\n      commit({ text: '', tokens: working.value.tokens });\n      inputEl?.focus();\n    }\n\n    function handleKeydown(e: KeyboardEvent): void {\n      if (props.disabled.value) return;\n\n      // While open, the listbox owns arrows, Home/End, and Escape.\n      if (optionList.handleKeydown(e)) return;\n\n      switch (e.key) {\n        case 'Enter': {\n          const active = isOpen.value ? suggestions.value[focusedIndex.value] : undefined;\n          if (active) {\n            e.preventDefault();\n            pick(active);\n          }\n          break;\n        }\n        case 'Backspace':\n          // The GitHub-style touch: backspace on an empty field drops the last pill.\n          if (field.value === '' && working.value.tokens.length > 0) {\n            const last = working.value.tokens[working.value.tokens.length - 1];\n            if (last) commit(removeToken(working.value, last.key));\n          }\n          break;\n        case 'Tab':\n          optionList.close('programmatic');\n          break;\n        default:\n          break;\n      }\n    }\n\n    // The dropdown is open exactly while the field holds focus and has something to\n    // show — suggestions, or the no-match row for an unresolvable draft; Escape,\n    // outside pointers, and Tab dismiss it through the machinery.\n    const canOpen = (): boolean => suggestions.value.length > 0 || noMatch.value;\n    const openDropdown = (): void => {\n      if (canOpen()) optionList.open('focus');\n    };\n    watch(() => {\n      if (isOpen.value && !canOpen()) optionList.close('programmatic');\n    });\n\n    /**\n     * Blur makes the field honest about dead drafts. A bare `key:` fragment is dead\n     * syntax — revert it, leaving no residue. A draft that matches nothing was\n     * already announced as \"searching as text\" — degrade it into the text so what\n     * the field shows is what is searched. Live compositions (a draft with matching\n     * suggestions) survive blur, so an interrupted pick resumes on refocus.\n     */\n    function handleFocusOut(event: FocusEvent): void {\n      const next = event.relatedTarget;\n      if (next instanceof Node && el.shadowRoot?.contains(next)) return;\n\n      const parsed = parseQuery(field.value, vocabulary());\n      if (!parsed.draft) return;\n      if (parsed.draft.valuePrefix === '') {\n        field.value = parsed.text;\n        return;\n      }\n      if (suggestQuery(field.value, vocabulary()).length === 0) {\n        const degraded = parsed.text\n          ? `${parsed.text} ${parsed.draft.key}:${parsed.draft.valuePrefix}`\n          : `${parsed.draft.key}:${parsed.draft.valuePrefix}`;\n        field.value = degraded;\n        commit({ text: degraded, tokens: working.value.tokens });\n      }\n    }\n\n    // New suggestions start from no highlight; arrows move it, Enter commits it.\n    watch(() => {\n      void suggestions.value;\n      if (optionList.isOpen.value) optionList.set(-1);\n    });\n\n    // The dropdown is popover=manual: without showPopover the UA stylesheet keeps it\n    // display:none, so the panel must enter the top layer exactly when it opens.\n    watch(() => {\n      if (isOpen.value) {\n        if (dropdownEl && 'showPopover' in dropdownEl && !dropdownEl.matches(':popover-open')) {\n          dropdownEl.showPopover();\n        }\n        optionList.updatePosition();\n      } else if (dropdownEl && 'hidePopover' in dropdownEl && dropdownEl.matches(':popover-open')) {\n        dropdownEl.hidePopover();\n      }\n    });\n\n    // Once ore-input is in the DOM, grab its inner <input> from its shadow root and\n    // attach the query-bar's ARIA and event handlers imperatively (the combobox\n    // pattern: the focused element must carry the combobox semantics itself).\n    onElement(inputRef, (bitInputEl) => {\n      fieldEl = bitInputEl;\n\n      const rawInput = bitInputEl.shadowRoot?.querySelector<HTMLInputElement>('input') ?? null;\n      if (!rawInput) return;\n\n      inputEl = rawInput;\n\n      rawInput.setAttribute('role', 'combobox');\n      rawInput.setAttribute('autocomplete', 'off');\n      rawInput.setAttribute('aria-autocomplete', 'list');\n      rawInput.setAttribute('aria-haspopup', 'listbox');\n      rawInput.setAttribute('spellcheck', 'false');\n      // Backspace on the empty field drops the last pill: the only discoverability\n      // of that shortcut for assistive tech.\n      rawInput.setAttribute('aria-keyshortcuts', 'Backspace');\n\n      rawInput.addEventListener('input', handleInput as EventListener);\n      rawInput.addEventListener('keydown', handleKeydown as EventListener);\n      rawInput.addEventListener('focus', openDropdown);\n      rawInput.addEventListener('focusout', handleFocusOut as EventListener);\n\n      return () => {\n        inputEl = null;\n        fieldEl = null;\n        rawInput.removeEventListener('input', handleInput as EventListener);\n        rawInput.removeEventListener('keydown', handleKeydown as EventListener);\n        rawInput.removeEventListener('focus', openDropdown);\n        rawInput.removeEventListener('focusout', handleFocusOut as EventListener);\n      };\n    });\n\n    onMounted(() => {\n      const listbox = el.shadowRoot?.querySelector<HTMLElement>('[role=\"listbox\"]');\n      if (inputEl) setAriaReflection(inputEl, 'ariaControlsElements', listbox ? [listbox] : []);\n    });\n\n    // Reactively sync combobox-specific ARIA the field does not manage itself.\n    watch(() => {\n      if (!inputRef.value || !inputEl) return;\n\n      inputEl.setAttribute('aria-expanded', String(isOpen.value));\n\n      const listbox = el.shadowRoot?.querySelector<HTMLElement>('[role=\"listbox\"]');\n      setAriaReflection(inputEl, 'ariaControlsElements', listbox ? [listbox] : []);\n      const activeId = optionList.ariaActiveDescendant.value;\n      const activeOption = activeId\n        ? [...(dropdownEl?.querySelectorAll<HTMLElement>('[role=\"option\"]') ?? [])].find(\n            (option) => option.id === activeId,\n          )\n        : null;\n      setAriaReflection(inputEl, 'ariaActiveDescendantElement', activeOption?.id === activeId ? [activeOption] : []);\n\n      if (props.disabled.value) inputEl.setAttribute('aria-disabled', 'true');\n      else inputEl.removeAttribute('aria-disabled');\n\n      if (props.error.value) inputEl.setAttribute('aria-invalid', 'true');\n      else inputEl.removeAttribute('aria-invalid');\n    });\n\n    // Reactively sync the field signal into the raw input value.\n    watch(() => {\n      if (!inputRef.value || !inputEl) return;\n      if (inputEl.value !== field.value) inputEl.value = field.value;\n    });\n\n    onCleanup(() => {\n      optionList[Symbol.dispose]();\n    });\n\n    // When hide-label is set, suppress the visible label passed to ore-input (no inset\n    // label renders, avoiding extra field height) but expose the label text as\n    // aria-label on the input so the bar retains its accessible name.\n    const hideLabel = () => props['hide-label'].value;\n    const inputLabel = () => (hideLabel() ? '' : (props.label.value ?? ''));\n    const inputAriaLabel = () => (hideLabel() ? (props.label.value ?? '') : null);\n\n    /** Pill copy: `Author: Alice`, degrading to the raw key/value outside the vocabulary. */\n    const pillLabel = (token: QueryToken): string => {\n      const def = defBy.value.get(token.key);\n      const option = def?.options.find((candidate) => candidate.value === token.value);\n      if (def && option) return `${def.label}: ${option.label}`;\n      return `${def?.key ?? token.key}: ${option?.label ?? token.value}`;\n    };\n\n    /** The muted second column: the token key for value rows, the `key:` syntax for key rows. */\n    const optionMeta = (suggestion: QuerySuggestion): string => {\n      const def = defBy.value.get(suggestion.key);\n      return suggestion.kind === 'key' ? `${suggestion.key}:` : (def?.label ?? suggestion.key);\n    };\n\n    return html`\n      <ore-input\n        class=\"trigger\"\n        ref=${inputRef}\n        label=\"${inputLabel}\"\n        aria-label=\"${inputAriaLabel}\"\n        placeholder=\"${() => props.placeholder.value ?? ''}\"\n        label-placement=\"inset\"\n        variant=\"${() => props.variant.value ?? 'bordered'}\"\n        size=\"${() => props.size.value ?? ''}\"\n        rounded=\"${() => props.rounded.value ?? 'md'}\"\n        helper=\"${() => props.helper.value ?? ''}\"\n        error=\"${() => props.error.value ?? ''}\"\n        ?disabled=\"${() => Boolean(props.disabled.value)}\"\n        part=\"wrapper\">\n        <div class=\"prefix\" slot=\"prefix\">\n          <ore-icon name=\"search\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n          <span class=\"pills\">\n            ${() =>\n              working.value.tokens.map(\n                (token) => html`\n                  <ore-chip\n                    value=${token.key}\n                    label=${pillLabel(token)}\n                    mode=\"removable\"\n                    variant=\"flat\"\n                    size=\"sm\"\n                    @remove=${removeChip}>\n                    ${pillLabel(token)}\n                  </ore-chip>\n                `,\n              )}\n          </span>\n        </div>\n        <span class=\"suffix\" slot=\"suffix\">\n          <button\n            class=\"clear-btn\"\n            part=\"clear-btn\"\n            type=\"button\"\n            aria-label=\"Clear\"\n            tabindex=\"-1\"\n            ?hidden=\"${() => !props.clearable.value || field.value === ''}\"\n            @click=\"${clearText}\">\n            <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n          </button>\n        </span>\n      </ore-input>\n      <div\n        class=\"dropdown\"\n        part=\"dropdown\"\n        id=\"${() => `${barId}-dropdown`}\"\n        popover=\"manual\"\n        ?data-open=${() => isOpen.value}\n        ref=${(node: HTMLElement | null) => {\n          dropdownEl = node;\n        }}>\n        <div\n          role=\"listbox\"\n          id=\"${() => `${barId}-listbox`}\"\n          style=\"${() => (isOpen.value && canOpen() ? `height:${(noMatch.value ? 1 : suggestions.value.length) * OPTION_ROW_HEIGHT}px;` : '')}\"\n          aria-label=\"${() => props.label.value || props.placeholder.value || 'Suggestions'}\">\n          ${() =>\n            isOpen.value && noMatch.value\n              ? html`<div class=\"no-match\" role=\"option\" aria-selected=\"false\" aria-disabled=\"true\">${noMatchLabel.value}</div>`\n              : ''}\n          ${() =>\n            isOpen.value && suggestions.value.length > 0\n              ? suggestions.value.map(\n                  (suggestion, index) => html`\n                    <div\n                      class=\"option\"\n                      role=\"option\"\n                      id=\"${`${barId}-opt-${index}`}\"\n                      data-option-index=\"${index}\"\n                      aria-selected=\"false\"\n                      aria-disabled=\"false\"\n                      style=\"${`position:absolute;top:0;left:0;right:0;transform:translateY(${index * OPTION_ROW_HEIGHT}px);`}\"\n                      ?data-focused=${() => focusedIndex.value === index}\n                      @pointermove=\"${() => optionList.set(index)}\"\n                      @click=\"${() => pick(suggestion)}\">\n                      <span class=\"option-label\">${suggestion.label}</span>\n                      <span class=\"option-meta\">${optionMeta(suggestion)}</span>\n                    </div>\n                  `,\n                )\n              : ''}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, roundedVariantMixin, componentStyles],\n}) as unknown as AddEventListeners<OreQueryBarEvents>;\n"],"mappings":"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"}

package/dist/query-bar.js

@@ -0,0 +1,77 @@
+import{dispatchNativeFieldEvent as e}from"./inputs/shared/native-field-event.js";import{reducedMotionMixin as t}from"./styles/mixins/accessibility.css.js";import{roundedVariantMixin as n}from"./styles/mixins/shape.css.js";import{colorThemeMixin as r}from"./styles/mixins/theme.css.js";import{setAriaReflection as i}from"./core/aria-reflection.js";import{lifecycleSignal as a}from"./core/ore.js";import{createListboxDropdown as o}from"./core/option-list.js";import{CHIP_TAG as s}from"./chip.js";import{INPUT_TAG as c}from"./input.js";import l from"./inputs/query-bar/query-bar.css.js";import{commitToken as u,hasQueryFilters as d,parseQuery as f,removeToken as p,suggestQuery as m,tokenValue as h}from"./inputs/query-bar/query-bar-grammar.js";import{computed as g,signal as _}from"@vielzeug/ripple";import{bind as v,createId as y,define as b,getHost as x,html as S,onCleanup as C,onElement as w,onMounted as T,prop as E,ref as D,useEmit as O,watchEffect as k}from"@vielzeug/ore";var A=36,j=`ore-query-bar`;b(j,{props:{clearable:E.bool(!1),disabled:E.bool(!1),error:E.string(),helper:E.string(),"hide-label":E.bool(!1),label:E.string(),placeholder:E.string(),rounded:E.string(),size:E.string(),state:E.data(),variant:E.string(),vocabulary:E.data()},setup(t){let n=x(),r=O(),s=k,c=a(C),l=y(`query-bar`),vocabulary=()=>t.vocabulary.value??[],emptyState=()=>({text:``,tokens:[]}),normalizeState=e=>{if(e==null)return emptyState();if(typeof e!=`object`||!Array.isArray(e.tokens))return null;let t=e;return{text:typeof t.text==`string`?t.text:``,tokens:t.tokens}},d=_(normalizeState(t.state.value)??emptyState()),h=_(d.value.text),b=g(()=>m(h.value,vocabulary())),E=g(()=>new Map(vocabulary().map(e=>[e.key,e]))),j=g(()=>{let e=f(h.value,vocabulary()).draft;return e!==null&&e.valuePrefix!==``&&b.value.length===0}),M=g(()=>{let e=f(h.value,vocabulary()).draft;return`No matching ${(e?E.value.get(e.key):void 0)?.label??e?.key??``} — searching as text`}),N=null,P=null,F=null,I=D(),L=o({getBoundary:()=>n,getFocusedOptionElement:()=>F?.querySelector(`[data-focused]`)??null,getItems:()=>b.value,getOptionId:e=>`${l}-opt-${e}`,getPanel:()=>F,getReference:()=>P,getTrigger:()=>N,isDisabled:()=>!!t.disabled.value,isItemDisabled:()=>!1,onClose:e=>r(`open-change`,{open:!1,reason:e}),onOpen:e=>r(`open-change`,{open:!0,reason:e}),positioning:{matchWidth:!1},restoreFocus:!1,signal:c}),{focusedIndex:R,isOpen:z}=L;v({attr:{open:()=>z.value?!0:void 0,size:t.size,variant:t.variant}}),Object.defineProperty(n,"state",{configurable:!0,enumerable:!0,get:()=>d.value,set:e=>{let t=normalizeState(e);t!==null&&t.tokens!==d.value.tokens&&(d.value=t,h.value=t.text)}});function emitChange(){e(n,`input`),e(n,`change`)}function commit(e){d.value=e,emitChange()}function mergeTokens(e,t){let n=e;for(let e of t){let t=n.findIndex(t=>t.key===e.key);n=t>=0?[...n.slice(0,t),e,...n.slice(t+1)]:[...n,e]}return n}function applyField(){let e=f(h.value,vocabulary());e.tokens.length>0&&(h.value=e.text),commit({text:e.text,tokens:mergeTokens(d.value.tokens,e.tokens)})}function handleInput(e){h.value=e.target.value,applyField(),canOpen()&&L.open(`keyboard`)}function pick(e){let t=/\s$/.test(h.value)||h.value.trim()===``?``:h.value.replace(/\S+\s*$/,``).trim();e.kind===`key`?(h.value=t?`${t} ${e.key}:`:`${e.key}:`,applyField()):(h.value=t,commit(u({text:t,tokens:d.value.tokens},e.key,e.value))),N?.focus()}function removeChip(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(commit(p(d.value,t)),N?.focus())}function clearText(){h.value=``,commit({text:``,tokens:d.value.tokens}),N?.focus()}function handleKeydown(e){if(!t.disabled.value&&!L.handleKeydown(e))switch(e.key){case`Enter`:{let t=z.value?b.value[R.value]:void 0;t&&(e.preventDefault(),pick(t));break}case`Backspace`:if(h.value===``&&d.value.tokens.length>0){let e=d.value.tokens[d.value.tokens.length-1];e&&commit(p(d.value,e.key))}break;case`Tab`:L.close(`programmatic`)}}let canOpen=()=>b.value.length>0||j.value,openDropdown=()=>{canOpen()&&L.open(`focus`)};s(()=>{z.value&&!canOpen()&&L.close(`programmatic`)});function handleFocusOut(e){let t=e.relatedTarget;if(t instanceof Node&&n.shadowRoot?.contains(t))return;let r=f(h.value,vocabulary());if(r.draft){if(r.draft.valuePrefix===``){h.value=r.text;return}if(m(h.value,vocabulary()).length===0){let e=r.text?`${r.text} ${r.draft.key}:${r.draft.valuePrefix}`:`${r.draft.key}:${r.draft.valuePrefix}`;h.value=e,commit({text:e,tokens:d.value.tokens})}}}s(()=>{b.value,L.isOpen.value&&L.set(-1)}),s(()=>{z.value?(F&&`showPopover`in F&&!F.matches(`:popover-open`)&&F.showPopover(),L.updatePosition()):F&&`hidePopover`in F&&F.matches(`:popover-open`)&&F.hidePopover()}),w(I,e=>{P=e;let t=e.shadowRoot?.querySelector(`input`)??null;if(t)return N=t,t.setAttribute(`role`,`combobox`),t.setAttribute(`autocomplete`,`off`),t.setAttribute(`aria-autocomplete`,`list`),t.setAttribute(`aria-haspopup`,`listbox`),t.setAttribute(`spellcheck`,`false`),t.setAttribute(`aria-keyshortcuts`,`Backspace`),t.addEventListener(`input`,handleInput),t.addEventListener(`keydown`,handleKeydown),t.addEventListener(`focus`,openDropdown),t.addEventListener(`focusout`,handleFocusOut),()=>{N=null,P=null,t.removeEventListener(`input`,handleInput),t.removeEventListener(`keydown`,handleKeydown),t.removeEventListener(`focus`,openDropdown),t.removeEventListener(`focusout`,handleFocusOut)}}),T(()=>{let e=n.shadowRoot?.querySelector(`[role="listbox"]`);N&&i(N,`ariaControlsElements`,e?[e]:[])}),s(()=>{if(!I.value||!N)return;N.setAttribute(`aria-expanded`,String(z.value));let e=n.shadowRoot?.querySelector(`[role="listbox"]`);i(N,`ariaControlsElements`,e?[e]:[]);let r=L.ariaActiveDescendant.value,a=r?[...F?.querySelectorAll(`[role="option"]`)??[]].find(e=>e.id===r):null;i(N,`ariaActiveDescendantElement`,a?.id===r?[a]:[]),t.disabled.value?N.setAttribute(`aria-disabled`,`true`):N.removeAttribute(`aria-disabled`),t.error.value?N.setAttribute(`aria-invalid`,`true`):N.removeAttribute(`aria-invalid`)}),s(()=>{I.value&&N&&N.value!==h.value&&(N.value=h.value)}),C(()=>{L[Symbol.dispose]()});let hideLabel=()=>t[`hide-label`].value,inputLabel=()=>hideLabel()?``:t.label.value??``,inputAriaLabel=()=>hideLabel()?t.label.value??``:null,pillLabel=e=>{let t=E.value.get(e.key),n=t?.options.find(t=>t.value===e.value);return t&&n?`${t.label}: ${n.label}`:`${t?.key??e.key}: ${n?.label??e.value}`},optionMeta=e=>{let t=E.value.get(e.key);return e.kind===`key`?`${e.key}:`:t?.label??e.key};return S`
+      <ore-input
+        class="trigger"
+        ref=${I}
+        label="${inputLabel}"
+        aria-label="${inputAriaLabel}"
+        placeholder="${()=>t.placeholder.value??``}"
+        label-placement="inset"
+        variant="${()=>t.variant.value??`bordered`}"
+        size="${()=>t.size.value??``}"
+        rounded="${()=>t.rounded.value??`md`}"
+        helper="${()=>t.helper.value??``}"
+        error="${()=>t.error.value??``}"
+        ?disabled="${()=>!!t.disabled.value}"
+        part="wrapper">
+        <div class="prefix" slot="prefix">
+          <ore-icon name="search" size="16" aria-hidden="true"></ore-icon>
+          <span class="pills">
+            ${()=>d.value.tokens.map(e=>S`
+                  <ore-chip
+                    value=${e.key}
+                    label=${pillLabel(e)}
+                    mode="removable"
+                    variant="flat"
+                    size="sm"
+                    @remove=${removeChip}>
+                    ${pillLabel(e)}
+                  </ore-chip>
+                `)}
+          </span>
+        </div>
+        <span class="suffix" slot="suffix">
+          <button
+            class="clear-btn"
+            part="clear-btn"
+            type="button"
+            aria-label="Clear"
+            tabindex="-1"
+            ?hidden="${()=>!t.clearable.value||h.value===``}"
+            @click="${clearText}">
+            <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+          </button>
+        </span>
+      </ore-input>
+      <div
+        class="dropdown"
+        part="dropdown"
+        id="${()=>`${l}-dropdown`}"
+        popover="manual"
+        ?data-open=${()=>z.value}
+        ref=${e=>{F=e}}>
+        <div
+          role="listbox"
+          id="${()=>`${l}-listbox`}"
+          style="${()=>z.value&&canOpen()?`height:${(j.value?1:b.value.length)*A}px;`:``}"
+          aria-label="${()=>t.label.value||t.placeholder.value||`Suggestions`}">
+          ${()=>z.value&&j.value?S`<div class="no-match" role="option" aria-selected="false" aria-disabled="true">${M.value}</div>`:``}
+          ${()=>z.value&&b.value.length>0?b.value.map((e,t)=>S`
+                    <div
+                      class="option"
+                      role="option"
+                      id="${`${l}-opt-${t}`}"
+                      data-option-index="${t}"
+                      aria-selected="false"
+                      aria-disabled="false"
+                      style="${`position:absolute;top:0;left:0;right:0;transform:translateY(${t*A}px);`}"
+                      ?data-focused=${()=>R.value===t}
+                      @pointermove="${()=>L.set(t)}"
+                      @click="${()=>pick(e)}">
+                      <span class="option-label">${e.label}</span>
+                      <span class="option-meta">${optionMeta(e)}</span>
+                    </div>
+                  `):``}
+        </div>
+      </div>
+    `},shadow:{delegatesFocus:!0},styles:[r,t,n,l]});export{s as CHIP_TAG,c as INPUT_TAG,j as QUERY_BAR_TAG,u as commitToken,d as hasQueryFilters,f as parseQuery,p as removeToken,m as suggestQuery,h as tokenValue};
+//# sourceMappingURL=query-bar.js.map

package/dist/query-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-bar.js","names":[],"sources":["../src/inputs/query-bar/query-bar.ts"],"sourcesContent":["import {\n  bind,\n  createId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onElement,\n  onMounted,\n  prop,\n  ref,\n  useEmit,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { createListboxDropdown, lifecycleSignal, setAriaReflection } from '../../core';\nimport { colorThemeMixin, reducedMotionMixin, roundedVariantMixin } from '../../styles';\nimport type { AddEventListeners, ComponentSize, RoundedSize } from '../../types';\nimport { dispatchNativeFieldEvent } from '../shared/native-field-event';\nimport componentStyles from './query-bar.css?inline';\nimport type { OreQueryBarEvents, OreQueryBarProps } from './query-bar.types';\nimport {\n  commitToken,\n  parseQuery,\n  type QueryState,\n  type QuerySuggestion,\n  type QueryToken,\n  type QueryTokenDef,\n  removeToken,\n  suggestQuery,\n} from './query-bar-grammar';\n\nexport { CHIP_TAG } from '../../feedback/chip/chip';\nexport { INPUT_TAG } from '../input/input';\nexport type { OreQueryBarEvents, OreQueryBarProps } from './query-bar.types';\nexport * from './query-bar-grammar';\n\n/** Fixed row height of one suggestion; the dropdown positions rows against it. */\nconst OPTION_ROW_HEIGHT = 36;\n\n/**\n * A search field that accepts free text and `key:value` tokens together, in the\n * grammar GitHub's pull-request search made familiar. Committed tokens render as\n * removable pills inside the field; a suggestion dropdown lists the vocabulary's\n * keys and matching values while typing, so phones never need to type a colon.\n *\n * The bar is state-driven: `vocabulary` defines the token keys and their accepted\n * values, `state` carries `{ text, tokens }`, and every edit emits `input` +\n * `change` with the new state readable from the element's `state` property. Omit\n * `state` for uncontrolled use. External `state` writes whose `tokens` array is\n * identical to the current one are treated as echoes — only token changes are\n * adopted — so text-only round-trips never wipe the field's live draft.\n *\n * The dropdown opens while the field holds focus (and reopens on typing after\n * Escape) and overlays the page from the top layer. Picking a key suggestion\n * starts composing `key:`; picking a value commits its pill. Typing a complete\n * `key:value` commits immediately. Backspace on an empty field removes the last\n * pill. A draft whose value matches nothing shows a \"searching as text\" row\n * instead of closing; on blur, a bare `key:` fragment reverts and a dead draft\n * degrades into the searched text, so the field never carries silent residue.\n *\n * @element ore-query-bar\n *\n * @attr {string} label - Accessible name for the entry field\n * @attr {string} placeholder - Field placeholder, typically the surface's search hint\n * @attr {string} error - Inline error under the field\n * @attr {string} helper - Helper text under the field\n * @attr {boolean} hide-label - Hide the visible label while keeping its accessible name\n * @attr {boolean} clearable - Show a clear (×) button; it clears the free text only\n * @attr {boolean} disabled - Disable the whole bar\n * @attr {string} size - Field size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Field radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} variant - Field variant: 'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'\n *\n * @prop {QueryState} state - The controlled query state; write a new object to apply external changes\n * @prop {QueryTokenDef[]} vocabulary - The token vocabulary\n *\n * @fires input - The query changed; read the new state from the `state` property\n * @fires change - Same as `input`\n * @fires open-change - The suggestion dropdown opened or closed. detail: { open, reason }\n *\n * @part wrapper - The ore-input field host\n * @part dropdown - The suggestion dropdown container\n * @cssprop --query-bar-min-width - Minimum host width (default 12rem)\n * @cssprop --query-bar-icon-size - Leading search icon size (default 16px)\n * @cssprop --query-bar-option-height - Suggestion row height (default 36px)\n * @cssprop --query-bar-dropdown-min-width - Dropdown panel minimum width (default 16rem)\n * @cssprop --query-bar-dropdown-max-width - Dropdown panel maximum width (default 28rem, viewport-capped)\n * @cssprop --chip-* - Pill styling (see ore-chip)\n * @cssprop --combobox-dropdown-* - Dropdown panel and option styling (see ore-combobox)\n *\n * @example\n * ```html\n * <ore-query-bar id=\"bar\" label=\"Search issues\" placeholder=\"Title, author or label…\" clearable>\n * </ore-query-bar>\n * <script>\n *   bar.vocabulary = [\n *     { key: 'author', label: 'Author', options: [{ label: 'Alice', value: 'alice' }] },\n *   ];\n * </script>\n * ```\n */\nexport const QUERY_BAR_TAG = 'ore-query-bar' as const;\ndefine<OreQueryBarProps>(QUERY_BAR_TAG, {\n  props: {\n    clearable: prop.bool(false),\n    disabled: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    'hide-label': prop.bool(false),\n    label: prop.string(),\n    placeholder: prop.string(),\n    rounded: prop.string<RoundedSize>(),\n    size: prop.string<ComponentSize>(),\n    state: prop.data<QueryState>(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n    vocabulary: prop.data<QueryTokenDef[]>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreQueryBarEvents>();\n    const watch = watchEffect;\n    const abortSignal = lifecycleSignal(onCleanup);\n    const barId = createId('query-bar');\n\n    const vocabulary = (): QueryTokenDef[] => props.vocabulary.value ?? [];\n    const emptyState = (): QueryState => ({ text: '', tokens: [] });\n    const normalizeState = (value: unknown): QueryState | null => {\n      if (value == null) return emptyState();\n      if (typeof value !== 'object' || !Array.isArray((value as QueryState).tokens)) return null;\n      const state = value as QueryState;\n      return { text: typeof state.text === 'string' ? state.text : '', tokens: state.tokens };\n    };\n\n    /**\n     * The working state: the initial `state` prop plus every commit this bar emits\n     * before the consumer round-trips it. Gestures must read from here, never from\n     * the prop directly: props lag a render behind, so two quick pill removals\n     * would otherwise each compute from the same stale snapshot and the second\n     * would resurrect the first pill.\n     */\n    const working = signal<QueryState>(normalizeState(props.state.value) ?? emptyState());\n    /** What the field shows: the live draft (free text plus an unfinished token). */\n    const field = signal(working.value.text);\n\n    const suggestions = computed<QuerySuggestion[]>(() => suggestQuery(field.value, vocabulary()));\n    const defBy = computed(() => new Map(vocabulary().map((def) => [def.key, def])));\n\n    /**\n     * True while the draft names a known key whose prefix matches no option. The\n     * dropdown then shows a \"searching as text\" row instead of closing, so the\n     * degradation is never silent — and blur makes the state honest (below).\n     */\n    const noMatch = computed(() => {\n      const draft = parseQuery(field.value, vocabulary()).draft;\n      return draft !== null && draft.valuePrefix !== '' && suggestions.value.length === 0;\n    });\n\n    const noMatchLabel = computed(() => {\n      const draft = parseQuery(field.value, vocabulary()).draft;\n      const def = draft ? defBy.value.get(draft.key) : undefined;\n      return `No matching ${def?.label ?? draft?.key ?? ''} — searching as text`;\n    });\n\n    // Element refs the listbox dropdown needs; resolved as the template renders.\n    let inputEl: HTMLInputElement | null = null;\n    let fieldEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n    const inputRef = ref<HTMLElement>();\n\n    const optionList = createListboxDropdown<QuerySuggestion>({\n      getBoundary: () => el,\n      getFocusedOptionElement: () => dropdownEl?.querySelector<HTMLElement>('[data-focused]') ?? null,\n      getItems: () => suggestions.value,\n      getOptionId: (index) => `${barId}-opt-${index}`,\n      getPanel: () => dropdownEl,\n      getReference: () => fieldEl,\n      getTrigger: () => inputEl,\n      isDisabled: () => Boolean(props.disabled.value),\n      isItemDisabled: () => false,\n      onClose: (reason) => emit('open-change', { open: false, reason }),\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      // The reference is the whole (often full-row) field: matching its width would\n      // stretch the panel across the page. The dropdown sizes to its content within\n      // its own min/max bounds instead, like a menu.\n      positioning: { matchWidth: false },\n      restoreFocus: false,\n      signal: abortSignal,\n    });\n    const { focusedIndex, isOpen } = optionList;\n\n    bind({\n      attr: {\n        open: () => (isOpen.value ? true : undefined),\n        size: props.size,\n        variant: props.variant,\n      },\n    });\n\n    // Expose the working state as a native-like `.state` property on the host: the\n    // live external channel, replacing the prop-installed property exactly as\n    // ore-combobox replaces its own `value`. Writes whose `tokens` array matches\n    // the working one are consumer echoes (v-model round-trips) and keep the\n    // field's live draft; a changed tokens array is an external write — a deep-link\n    // preset, a mode switch — and is adopted, field included.\n    Object.defineProperty(el, 'state', {\n      configurable: true,\n      enumerable: true,\n      get: () => working.value,\n      set: (value: unknown) => {\n        const next = normalizeState(value);\n        if (next === null || next.tokens === working.value.tokens) return;\n        working.value = next;\n        field.value = next.text;\n      },\n    });\n\n    // ── State commits ────────────────────────────────────────────────────────\n\n    function emitChange(): void {\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n    }\n\n    /** Applies the next state locally and announces it; the consumer reads `el.state`. */\n    function commit(next: QueryState): void {\n      working.value = next;\n      emitChange();\n    }\n\n    /** Folds parsed tokens into the working set, replacing per key and keeping slots. */\n    function mergeTokens(base: QueryToken[], parsed: readonly QueryToken[]): QueryToken[] {\n      let tokens = base;\n      for (const token of parsed) {\n        const slot = tokens.findIndex((candidate) => candidate.key === token.key);\n        tokens = slot >= 0 ? [...tokens.slice(0, slot), token, ...tokens.slice(slot + 1)] : [...tokens, token];\n      }\n      return tokens;\n    }\n\n    /** Parses the field, folds any complete tokens into the working state, and commits. */\n    function applyField(): void {\n      const parsed = parseQuery(field.value, vocabulary());\n      if (parsed.tokens.length > 0) field.value = parsed.text;\n      commit({ text: parsed.text, tokens: mergeTokens(working.value.tokens, parsed.tokens) });\n    }\n\n    function handleInput(event: Event): void {\n      field.value = (event.target as HTMLInputElement).value;\n      applyField();\n      // Typing is the strongest composing signal: the dropdown must come back after\n      // Escape without a blur/refocus cycle, or the bar reads as broken.\n      if (canOpen()) optionList.open('keyboard');\n    }\n\n    function pick(suggestion: QuerySuggestion): void {\n      // The word being typed is selector intent: whichever suggestion is picked consumes\n      // it, so it never leaks into the free text as a stray search term. A field ending\n      // in whitespace has no active word; a `key:…` draft is consumed like any word.\n      const rest =\n        /\\s$/.test(field.value) || field.value.trim() === '' ? '' : field.value.replace(/\\S+\\s*$/, '').trim();\n      if (suggestion.kind === 'key') {\n        // Start composing: replace the word being typed with the token key.\n        field.value = rest ? `${rest} ${suggestion.key}:` : `${suggestion.key}:`;\n        applyField();\n      } else {\n        field.value = rest;\n        commit(commitToken({ text: rest, tokens: working.value.tokens }, suggestion.key, suggestion.value));\n      }\n      inputEl?.focus();\n    }\n\n    function removeChip(event: Event): void {\n      event.stopPropagation();\n      const key = (event as CustomEvent<{ value?: string }>).detail?.value;\n      if (key === undefined) return;\n      commit(removeToken(working.value, key));\n      // Keep the compose flow: without this, focus falls to the host and the next\n      // keystroke goes nowhere.\n      inputEl?.focus();\n    }\n\n    /** The field's own clear button: clears the free text, never the pills. */\n    function clearText(): void {\n      field.value = '';\n      commit({ text: '', tokens: working.value.tokens });\n      inputEl?.focus();\n    }\n\n    function handleKeydown(e: KeyboardEvent): void {\n      if (props.disabled.value) return;\n\n      // While open, the listbox owns arrows, Home/End, and Escape.\n      if (optionList.handleKeydown(e)) return;\n\n      switch (e.key) {\n        case 'Enter': {\n          const active = isOpen.value ? suggestions.value[focusedIndex.value] : undefined;\n          if (active) {\n            e.preventDefault();\n            pick(active);\n          }\n          break;\n        }\n        case 'Backspace':\n          // The GitHub-style touch: backspace on an empty field drops the last pill.\n          if (field.value === '' && working.value.tokens.length > 0) {\n            const last = working.value.tokens[working.value.tokens.length - 1];\n            if (last) commit(removeToken(working.value, last.key));\n          }\n          break;\n        case 'Tab':\n          optionList.close('programmatic');\n          break;\n        default:\n          break;\n      }\n    }\n\n    // The dropdown is open exactly while the field holds focus and has something to\n    // show — suggestions, or the no-match row for an unresolvable draft; Escape,\n    // outside pointers, and Tab dismiss it through the machinery.\n    const canOpen = (): boolean => suggestions.value.length > 0 || noMatch.value;\n    const openDropdown = (): void => {\n      if (canOpen()) optionList.open('focus');\n    };\n    watch(() => {\n      if (isOpen.value && !canOpen()) optionList.close('programmatic');\n    });\n\n    /**\n     * Blur makes the field honest about dead drafts. A bare `key:` fragment is dead\n     * syntax — revert it, leaving no residue. A draft that matches nothing was\n     * already announced as \"searching as text\" — degrade it into the text so what\n     * the field shows is what is searched. Live compositions (a draft with matching\n     * suggestions) survive blur, so an interrupted pick resumes on refocus.\n     */\n    function handleFocusOut(event: FocusEvent): void {\n      const next = event.relatedTarget;\n      if (next instanceof Node && el.shadowRoot?.contains(next)) return;\n\n      const parsed = parseQuery(field.value, vocabulary());\n      if (!parsed.draft) return;\n      if (parsed.draft.valuePrefix === '') {\n        field.value = parsed.text;\n        return;\n      }\n      if (suggestQuery(field.value, vocabulary()).length === 0) {\n        const degraded = parsed.text\n          ? `${parsed.text} ${parsed.draft.key}:${parsed.draft.valuePrefix}`\n          : `${parsed.draft.key}:${parsed.draft.valuePrefix}`;\n        field.value = degraded;\n        commit({ text: degraded, tokens: working.value.tokens });\n      }\n    }\n\n    // New suggestions start from no highlight; arrows move it, Enter commits it.\n    watch(() => {\n      void suggestions.value;\n      if (optionList.isOpen.value) optionList.set(-1);\n    });\n\n    // The dropdown is popover=manual: without showPopover the UA stylesheet keeps it\n    // display:none, so the panel must enter the top layer exactly when it opens.\n    watch(() => {\n      if (isOpen.value) {\n        if (dropdownEl && 'showPopover' in dropdownEl && !dropdownEl.matches(':popover-open')) {\n          dropdownEl.showPopover();\n        }\n        optionList.updatePosition();\n      } else if (dropdownEl && 'hidePopover' in dropdownEl && dropdownEl.matches(':popover-open')) {\n        dropdownEl.hidePopover();\n      }\n    });\n\n    // Once ore-input is in the DOM, grab its inner <input> from its shadow root and\n    // attach the query-bar's ARIA and event handlers imperatively (the combobox\n    // pattern: the focused element must carry the combobox semantics itself).\n    onElement(inputRef, (bitInputEl) => {\n      fieldEl = bitInputEl;\n\n      const rawInput = bitInputEl.shadowRoot?.querySelector<HTMLInputElement>('input') ?? null;\n      if (!rawInput) return;\n\n      inputEl = rawInput;\n\n      rawInput.setAttribute('role', 'combobox');\n      rawInput.setAttribute('autocomplete', 'off');\n      rawInput.setAttribute('aria-autocomplete', 'list');\n      rawInput.setAttribute('aria-haspopup', 'listbox');\n      rawInput.setAttribute('spellcheck', 'false');\n      // Backspace on the empty field drops the last pill: the only discoverability\n      // of that shortcut for assistive tech.\n      rawInput.setAttribute('aria-keyshortcuts', 'Backspace');\n\n      rawInput.addEventListener('input', handleInput as EventListener);\n      rawInput.addEventListener('keydown', handleKeydown as EventListener);\n      rawInput.addEventListener('focus', openDropdown);\n      rawInput.addEventListener('focusout', handleFocusOut as EventListener);\n\n      return () => {\n        inputEl = null;\n        fieldEl = null;\n        rawInput.removeEventListener('input', handleInput as EventListener);\n        rawInput.removeEventListener('keydown', handleKeydown as EventListener);\n        rawInput.removeEventListener('focus', openDropdown);\n        rawInput.removeEventListener('focusout', handleFocusOut as EventListener);\n      };\n    });\n\n    onMounted(() => {\n      const listbox = el.shadowRoot?.querySelector<HTMLElement>('[role=\"listbox\"]');\n      if (inputEl) setAriaReflection(inputEl, 'ariaControlsElements', listbox ? [listbox] : []);\n    });\n\n    // Reactively sync combobox-specific ARIA the field does not manage itself.\n    watch(() => {\n      if (!inputRef.value || !inputEl) return;\n\n      inputEl.setAttribute('aria-expanded', String(isOpen.value));\n\n      const listbox = el.shadowRoot?.querySelector<HTMLElement>('[role=\"listbox\"]');\n      setAriaReflection(inputEl, 'ariaControlsElements', listbox ? [listbox] : []);\n      const activeId = optionList.ariaActiveDescendant.value;\n      const activeOption = activeId\n        ? [...(dropdownEl?.querySelectorAll<HTMLElement>('[role=\"option\"]') ?? [])].find(\n            (option) => option.id === activeId,\n          )\n        : null;\n      setAriaReflection(inputEl, 'ariaActiveDescendantElement', activeOption?.id === activeId ? [activeOption] : []);\n\n      if (props.disabled.value) inputEl.setAttribute('aria-disabled', 'true');\n      else inputEl.removeAttribute('aria-disabled');\n\n      if (props.error.value) inputEl.setAttribute('aria-invalid', 'true');\n      else inputEl.removeAttribute('aria-invalid');\n    });\n\n    // Reactively sync the field signal into the raw input value.\n    watch(() => {\n      if (!inputRef.value || !inputEl) return;\n      if (inputEl.value !== field.value) inputEl.value = field.value;\n    });\n\n    onCleanup(() => {\n      optionList[Symbol.dispose]();\n    });\n\n    // When hide-label is set, suppress the visible label passed to ore-input (no inset\n    // label renders, avoiding extra field height) but expose the label text as\n    // aria-label on the input so the bar retains its accessible name.\n    const hideLabel = () => props['hide-label'].value;\n    const inputLabel = () => (hideLabel() ? '' : (props.label.value ?? ''));\n    const inputAriaLabel = () => (hideLabel() ? (props.label.value ?? '') : null);\n\n    /** Pill copy: `Author: Alice`, degrading to the raw key/value outside the vocabulary. */\n    const pillLabel = (token: QueryToken): string => {\n      const def = defBy.value.get(token.key);\n      const option = def?.options.find((candidate) => candidate.value === token.value);\n      if (def && option) return `${def.label}: ${option.label}`;\n      return `${def?.key ?? token.key}: ${option?.label ?? token.value}`;\n    };\n\n    /** The muted second column: the token key for value rows, the `key:` syntax for key rows. */\n    const optionMeta = (suggestion: QuerySuggestion): string => {\n      const def = defBy.value.get(suggestion.key);\n      return suggestion.kind === 'key' ? `${suggestion.key}:` : (def?.label ?? suggestion.key);\n    };\n\n    return html`\n      <ore-input\n        class=\"trigger\"\n        ref=${inputRef}\n        label=\"${inputLabel}\"\n        aria-label=\"${inputAriaLabel}\"\n        placeholder=\"${() => props.placeholder.value ?? ''}\"\n        label-placement=\"inset\"\n        variant=\"${() => props.variant.value ?? 'bordered'}\"\n        size=\"${() => props.size.value ?? ''}\"\n        rounded=\"${() => props.rounded.value ?? 'md'}\"\n        helper=\"${() => props.helper.value ?? ''}\"\n        error=\"${() => props.error.value ?? ''}\"\n        ?disabled=\"${() => Boolean(props.disabled.value)}\"\n        part=\"wrapper\">\n        <div class=\"prefix\" slot=\"prefix\">\n          <ore-icon name=\"search\" size=\"16\" aria-hidden=\"true\"></ore-icon>\n          <span class=\"pills\">\n            ${() =>\n              working.value.tokens.map(\n                (token) => html`\n                  <ore-chip\n                    value=${token.key}\n                    label=${pillLabel(token)}\n                    mode=\"removable\"\n                    variant=\"flat\"\n                    size=\"sm\"\n                    @remove=${removeChip}>\n                    ${pillLabel(token)}\n                  </ore-chip>\n                `,\n              )}\n          </span>\n        </div>\n        <span class=\"suffix\" slot=\"suffix\">\n          <button\n            class=\"clear-btn\"\n            part=\"clear-btn\"\n            type=\"button\"\n            aria-label=\"Clear\"\n            tabindex=\"-1\"\n            ?hidden=\"${() => !props.clearable.value || field.value === ''}\"\n            @click=\"${clearText}\">\n            <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n          </button>\n        </span>\n      </ore-input>\n      <div\n        class=\"dropdown\"\n        part=\"dropdown\"\n        id=\"${() => `${barId}-dropdown`}\"\n        popover=\"manual\"\n        ?data-open=${() => isOpen.value}\n        ref=${(node: HTMLElement | null) => {\n          dropdownEl = node;\n        }}>\n        <div\n          role=\"listbox\"\n          id=\"${() => `${barId}-listbox`}\"\n          style=\"${() => (isOpen.value && canOpen() ? `height:${(noMatch.value ? 1 : suggestions.value.length) * OPTION_ROW_HEIGHT}px;` : '')}\"\n          aria-label=\"${() => props.label.value || props.placeholder.value || 'Suggestions'}\">\n          ${() =>\n            isOpen.value && noMatch.value\n              ? html`<div class=\"no-match\" role=\"option\" aria-selected=\"false\" aria-disabled=\"true\">${noMatchLabel.value}</div>`\n              : ''}\n          ${() =>\n            isOpen.value && suggestions.value.length > 0\n              ? suggestions.value.map(\n                  (suggestion, index) => html`\n                    <div\n                      class=\"option\"\n                      role=\"option\"\n                      id=\"${`${barId}-opt-${index}`}\"\n                      data-option-index=\"${index}\"\n                      aria-selected=\"false\"\n                      aria-disabled=\"false\"\n                      style=\"${`position:absolute;top:0;left:0;right:0;transform:translateY(${index * OPTION_ROW_HEIGHT}px);`}\"\n                      ?data-focused=${() => focusedIndex.value === index}\n                      @pointermove=\"${() => optionList.set(index)}\"\n                      @click=\"${() => pick(suggestion)}\">\n                      <span class=\"option-label\">${suggestion.label}</span>\n                      <span class=\"option-meta\">${optionMeta(suggestion)}</span>\n                    </div>\n                  `,\n                )\n              : ''}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, roundedVariantMixin, componentStyles],\n}) as unknown as AddEventListeners<OreQueryBarEvents>;\n"],"mappings":"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"}