@vielzeug/refine 2.1.3 → 2.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion.cjs +1 -1
- package/dist/accordion.cjs.map +1 -1
- package/dist/accordion.js +2 -2
- package/dist/accordion.js.map +1 -1
- package/dist/carousel.cjs +25 -24
- package/dist/carousel.cjs.map +1 -1
- package/dist/carousel.js +125 -135
- package/dist/carousel.js.map +1 -1
- package/dist/combobox.cjs +14 -14
- package/dist/combobox.cjs.map +1 -1
- package/dist/combobox.js +88 -98
- package/dist/combobox.js.map +1 -1
- package/dist/content/carousel/carousel.d.ts.map +1 -1
- package/dist/content/list/_list-item-reveal.cjs +1 -1
- package/dist/content/list/_list-item-reveal.cjs.map +1 -1
- package/dist/content/list/_list-item-reveal.d.ts +3 -3
- package/dist/content/list/_list-item-reveal.d.ts.map +1 -1
- package/dist/content/list/_list-item-reveal.js +22 -22
- package/dist/content/list/_list-item-reveal.js.map +1 -1
- package/dist/content/list/list-item.d.ts.map +1 -1
- package/dist/core/focus.cjs +1 -1
- package/dist/core/focus.cjs.map +1 -1
- package/dist/core/focus.d.ts.map +1 -1
- package/dist/core/focus.js +21 -20
- package/dist/core/focus.js.map +1 -1
- package/dist/core/index.d.ts +2 -3
- package/dist/core/index.d.ts.map +1 -1
- package/dist/core/nav.cjs +1 -1
- package/dist/core/nav.cjs.map +1 -1
- package/dist/core/nav.d.ts +3 -62
- package/dist/core/nav.d.ts.map +1 -1
- package/dist/core/nav.js +41 -124
- package/dist/core/nav.js.map +1 -1
- package/dist/core/option-list.cjs +1 -1
- package/dist/core/option-list.cjs.map +1 -1
- package/dist/core/option-list.d.ts +5 -5
- package/dist/core/option-list.d.ts.map +1 -1
- package/dist/core/option-list.js +14 -13
- package/dist/core/option-list.js.map +1 -1
- package/dist/core/overlay.cjs +1 -1
- package/dist/core/overlay.cjs.map +1 -1
- package/dist/core/overlay.d.ts +0 -8
- package/dist/core/overlay.d.ts.map +1 -1
- package/dist/core/overlay.js +1 -3
- package/dist/core/overlay.js.map +1 -1
- package/dist/custom-elements.json +5636 -5683
- package/dist/drawer.cjs +6 -6
- package/dist/drawer.cjs.map +1 -1
- package/dist/drawer.js +65 -75
- package/dist/drawer.js.map +1 -1
- package/dist/feedback/skeleton/skeleton.css.cjs +1 -1
- package/dist/feedback/skeleton/skeleton.css.cjs.map +1 -1
- package/dist/feedback/skeleton/skeleton.css.js +1 -1
- package/dist/feedback/skeleton/skeleton.css.js.map +1 -1
- package/dist/feedback/skeleton/skeleton.d.ts.map +1 -1
- package/dist/feedback/toast/toast.d.ts.map +1 -1
- package/dist/grid.cjs +2 -2
- package/dist/grid.cjs.map +1 -1
- package/dist/grid.js +42 -41
- package/dist/grid.js.map +1 -1
- package/dist/input.cjs.map +1 -1
- package/dist/input.js.map +1 -1
- package/dist/inputs/input/input.css.cjs +1 -1
- package/dist/inputs/input/input.css.cjs.map +1 -1
- package/dist/inputs/input/input.css.js +1 -1
- package/dist/inputs/input/input.css.js.map +1 -1
- package/dist/inputs/input/input.d.ts +2 -0
- package/dist/inputs/input/input.d.ts.map +1 -1
- package/dist/inputs/select/select.d.ts +2 -2
- package/dist/inputs/select/select.d.ts.map +1 -1
- package/dist/layout/grid/grid.d.ts.map +1 -1
- package/dist/layout/navbar/navbar.d.ts.map +1 -1
- package/dist/layout/sidebar/sidebar.d.ts.map +1 -1
- package/dist/list-item.cjs +2 -6
- package/dist/list-item.cjs.map +1 -1
- package/dist/list-item.js +40 -39
- package/dist/list-item.js.map +1 -1
- package/dist/list.cjs +1 -1
- package/dist/list.cjs.map +1 -1
- package/dist/list.js +2 -2
- package/dist/list.js.map +1 -1
- package/dist/marquee.cjs +1 -1
- package/dist/marquee.cjs.map +1 -1
- package/dist/marquee.js +3 -1
- package/dist/marquee.js.map +1 -1
- package/dist/menu.cjs +5 -5
- package/dist/menu.cjs.map +1 -1
- package/dist/menu.js +59 -59
- package/dist/menu.js.map +1 -1
- package/dist/navbar.cjs +9 -9
- package/dist/navbar.cjs.map +1 -1
- package/dist/navbar.js +124 -116
- package/dist/navbar.js.map +1 -1
- package/dist/otp-input.cjs +1 -1
- package/dist/otp-input.cjs.map +1 -1
- package/dist/otp-input.js +2 -2
- package/dist/otp-input.js.map +1 -1
- package/dist/overlay/drawer/drawer.d.ts.map +1 -1
- package/dist/overlay/menu/menu.d.ts.map +1 -1
- package/dist/radio-group.cjs +1 -1
- package/dist/radio-group.cjs.map +1 -1
- package/dist/radio-group.js +2 -3
- package/dist/radio-group.js.map +1 -1
- package/dist/radio.cjs +1 -1
- package/dist/radio.cjs.map +1 -1
- package/dist/radio.js +12 -11
- package/dist/radio.js.map +1 -1
- package/dist/rating.cjs +1 -1
- package/dist/rating.cjs.map +1 -1
- package/dist/rating.js +1 -1
- package/dist/rating.js.map +1 -1
- package/dist/refine.cjs +188 -195
- package/dist/refine.cjs.map +1 -1
- package/dist/refine.iife.js +212 -219
- package/dist/refine.iife.js.map +1 -1
- package/dist/refine.js +392 -399
- package/dist/refine.js.map +1 -1
- package/dist/select.cjs +1 -1
- package/dist/select.cjs.map +1 -1
- package/dist/select.js +1 -0
- package/dist/select.js.map +1 -1
- package/dist/sidebar.cjs +16 -16
- package/dist/sidebar.cjs.map +1 -1
- package/dist/sidebar.js +106 -91
- package/dist/sidebar.js.map +1 -1
- package/dist/skeleton.cjs +3 -3
- package/dist/skeleton.cjs.map +1 -1
- package/dist/skeleton.js +8 -7
- package/dist/skeleton.js.map +1 -1
- package/dist/stepper.cjs +1 -1
- package/dist/stepper.cjs.map +1 -1
- package/dist/stepper.js +3 -3
- package/dist/stepper.js.map +1 -1
- package/dist/styles/fouc.css +22 -0
- package/dist/styles/preflight.css +2 -10
- package/dist/tabs.cjs +1 -1
- package/dist/tabs.cjs.map +1 -1
- package/dist/tabs.js +4 -5
- package/dist/tabs.js.map +1 -1
- package/dist/toast.cjs +13 -17
- package/dist/toast.cjs.map +1 -1
- package/dist/toast.js +86 -85
- package/dist/toast.js.map +1 -1
- package/package.json +18 -11
- package/dist/core/swipe.cjs +0 -2
- package/dist/core/swipe.cjs.map +0 -1
- package/dist/core/swipe.d.ts +0 -40
- package/dist/core/swipe.d.ts.map +0 -1
- package/dist/core/swipe.js +0 -63
- package/dist/core/swipe.js.map +0 -1
- package/dist/core/typeahead.cjs +0 -2
- package/dist/core/typeahead.cjs.map +0 -1
- package/dist/core/typeahead.d.ts +0 -53
- package/dist/core/typeahead.d.ts.map +0 -1
- package/dist/core/typeahead.js +0 -23
- package/dist/core/typeahead.js.map +0 -1
package/dist/navbar.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navbar.cjs","names":[],"sources":["../src/layout/navbar/navbar.ts"],"sourcesContent":["import {\n bind,\n createContext,\n define,\n getHost,\n html,\n inject,\n onMounted,\n prop,\n provide,\n resizeObserver,\n useEmit,\n useSlots,\n} from '@vielzeug/ore';\nimport { computed, type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport type { ElevationLevel, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport {\n coarsePointerMixin,\n colorThemeMixin,\n elevationMixin,\n frostVariantMixin,\n reducedMotionMixin,\n roundedVariantMixin,\n} from '../../styles';\nimport { computeSafeRel } from '../../utils';\nimport navbarStyles from './navbar.css?inline';\n\nconst listen = <E extends Event = Event>(\n el: EventTarget | null | undefined,\n name: string,\n handler: (e: E) => void,\n options?: AddEventListenerOptions,\n): (() => void) => {\n if (!el) return () => {};\n\n el.addEventListener(name, handler as EventListener, options);\n\n return () => el.removeEventListener(name, handler as EventListener, options);\n};\n\ntype NavbarMode = 'floating' | 'sticky';\n\nconst hasElementContent = (el: Element): boolean => {\n if (!(el instanceof HTMLElement)) return true;\n\n if (el.tagName.includes('-')) return true;\n\n if (el.childElementCount > 0) return true;\n\n return (el.textContent ?? '').trim().length > 0;\n};\n\nconst parseMaxWidthPx = (query: string | undefined): number | undefined => {\n const value = String(query ?? '').trim();\n\n if (!value) return undefined;\n\n const match = /max-width\\s*:\\s*([0-9]+(?:\\.[0-9]+)?)px/i.exec(value);\n\n if (!match) return undefined;\n\n const parsed = Number.parseFloat(match[1]);\n\n return Number.isFinite(parsed) ? parsed : undefined;\n};\n\nconst resolveContainerElement = (el: HTMLElement): HTMLElement | null => {\n let container = el.parentElement;\n\n while (container?.tagName.toLowerCase() === 'ore-grid-item') {\n container = container.parentElement;\n }\n\n return container;\n};\n\nconst readContainerWidth = (el: HTMLElement): number => {\n const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n if (parentWidth > 0) return parentWidth;\n\n return el.offsetWidth;\n};\n\nconst findScrollContainer = (start: HTMLElement): HTMLElement | null => {\n let current: HTMLElement | null = start.parentElement;\n\n while (current) {\n const styles = window.getComputedStyle(current);\n const overflowY = styles.overflowY;\n\n if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {\n return current;\n }\n\n current = current.parentElement;\n }\n\n return null;\n};\n\n/** Context provided by `ore-navbar` to `ore-navbar-item` children. */\nexport type NavbarContext = {\n closeMobileMenu: () => void;\n isMobile: Readable<boolean>;\n mobileMenuOpen: Readable<boolean>;\n};\n\n/** Injection key for navbar context. */\nexport const NAVBAR_CTX = createContext<NavbarContext>('NavbarContext');\n\n/** Navbar component events */\nexport type OreNavbarEvents = {\n 'mobile-menu-change': { open: boolean };\n};\n\n/** Navbar component element interface */\nexport type NavbarElement = HTMLElement &\n OreNavbarProps & {\n closeMobileMenu(): void;\n openMobileMenu(): void;\n toggleMobileMenu(): void;\n };\n\ntype MobileSidebarElement = HTMLElement & {\n closeMobile?: () => void;\n openMobile?: () => void;\n toggleMobile?: () => void;\n};\n\n/** Navbar component properties */\nexport type OreNavbarProps = {\n /** CSS media query used for mobile layout switching */\n breakpoint?: string;\n /** Theme color */\n color?: ThemeColor;\n /** Evaluate mobile breakpoint against container width only when possible. */\n 'container-breakpoints'?: boolean;\n /** Shadow elevation level (0-5) */\n elevation?: ElevationLevel;\n /** Start as detached floating navbar */\n floating?: boolean;\n /** Accessible nav landmark label */\n label?: string;\n /** CSS selector for an external sidebar toggled by the mobile button */\n 'mobile-sidebar'?: string;\n /** Border radius size */\n rounded?: RoundedSize;\n /** Scroll threshold in px used by floating+sticky transition */\n 'scroll-threshold'?: number;\n /** Stick to top of viewport */\n sticky?: boolean;\n /** Visual style variant */\n variant?: Exclude<VisualVariant, 'ghost' | 'text'>;\n};\n\n/** Navbar item properties */\nexport type OreNavbarItemProps = {\n /** Whether this item represents the current page */\n active?: boolean;\n /** Whether this item is disabled */\n disabled?: boolean;\n /** Link target URL. Renders an anchor when provided. */\n href?: string;\n /**\n * Icon-only mode — hides the (empty) label region and switches to compact, symmetric\n * padding instead of the icon+label layout's wider horizontal padding. Set this whenever\n * the default slot is intentionally left empty (name conveyed via `aria-label` instead),\n * otherwise the empty label still reserves its inter-element gap and the item ends up\n * with lopsided padding around the icon.\n */\n 'icon-only'?: boolean;\n /** Relationship of linked URL (anchor-only) */\n rel?: string;\n /** Browsing context for link (anchor-only) */\n target?: string;\n};\n\n/**\n * `ore-navbar` — Responsive navigation with sticky/floating modes and a mobile overflow panel.\n *\n * @element ore-navbar\n * @element ore-navbar-item - Navigation link or button placed in the default or mobile-menu slot\n *\n * @attr {string} label - Accessible nav landmark label\n * @attr {boolean} sticky - Makes navbar sticky at top\n * @attr {boolean} floating - Makes navbar detached and floating\n * @attr {number} scroll-threshold - Scroll threshold for floating+sticky transition\n * @attr {string} breakpoint - CSS media query used for mobile mode\n * @attr {boolean} container-breakpoints - Evaluates parseable max-width breakpoints against container width\n * @attr {string} variant - Visual variant: 'flat' | 'solid' | 'bordered' | 'outline' | 'frost' | 'glass'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n *\n * @fires mobile-menu-change - Emitted when mobile menu open state changes. detail: { open: boolean }\n *\n * @slot logo - Brand/logo content rendered at the leading edge\n * @slot start - Content rendered in the left/start region\n * @slot - Center navigation content rendered between the start and end regions\n * @slot end - Content rendered in the right/end region\n * @slot mobile-menu - Controls and links rendered inside the mobile overflow panel\n *\n * @cssprop --navbar-height - Navbar bar height\n * @cssprop --navbar-width - Max width of the navbar content\n * @cssprop --navbar-offset - Horizontal offset for floating/sticky positioning\n * @cssprop --navbar-bg - Navbar background color\n * @cssprop --navbar-color - Navbar text color\n * @cssprop --navbar-border-color - Navbar border color\n * @cssprop --navbar-shadow - Navbar box shadow\n * @cssprop --navbar-radius - Border radius (floating/sticky modes)\n * @cssprop --navbar-backdrop-filter - Backdrop filter for blur effect\n * @cssprop --navbar-item-color - Nav item text color\n * @cssprop --navbar-item-hover-color - Nav item hover text color\n * @cssprop --navbar-item-hover-bg - Nav item hover background\n * @cssprop --navbar-item-active-color - Nav item active/current text color\n * @cssprop --navbar-item-active-bg - Nav item active/current background\n * @part nav - Outer navigation landmark\n * @part bar - Main navbar row container\n * @part logo - Logo slot container\n * @part start - Leading action/content region\n * @part center - Center content region\n * @part end - Trailing action/content region\n * @part mobile-toggle - Mobile menu toggle button\n * @part mobile-menu - Mobile overflow panel\n * @part item-icon - Leading icon inside navbar items\n * @part item-label - Label text inside navbar items\n * @part item-end - Trailing content inside navbar items\n * @part item - Clickable navbar item root\n * @example\n * ```html\n * <ore-navbar sticky elevation=\"1\">\n * <a href=\"/\" slot=\"logo\"><strong>MyApp</strong></a>\n * <ore-navbar-item href=\"/dashboard\">Dashboard</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\">Docs</ore-navbar-item>\n * <ore-button slot=\"end\" variant=\"solid\" color=\"primary\" size=\"sm\">Sign in</ore-button>\n * </ore-navbar>\n * ```\n */\nexport const NAVBAR_TAG = 'ore-navbar' as const;\ndefine<OreNavbarProps>(NAVBAR_TAG, {\n props: {\n breakpoint: prop.string('(max-width: 768px)'),\n color: prop.string<ThemeColor>(),\n 'container-breakpoints': prop.bool(false),\n elevation: prop.number<ElevationLevel>(),\n floating: prop.bool(false),\n label: prop.string('Main navigation'),\n 'mobile-sidebar': prop.string(),\n rounded: prop.string<RoundedSize>(),\n 'scroll-threshold': prop.number(80),\n sticky: prop.bool(false),\n variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'frost'>(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreNavbarEvents>();\n const slots = useSlots();\n\n const hasLogo = slots.has('logo');\n const mobileMenuElements = slots.elements('mobile-menu');\n const hasMobileMenu = signal(false);\n const mobileSidebarTarget = signal<MobileSidebarElement | null>(null);\n const isExternalMobileMode = signal(false);\n const isExternalMobileOpen = signal(false);\n const isMobile = signal(false);\n const isMobileMenuOpen = signal(false);\n const isModeTransitioning = signal(false);\n const isScrolled = signal(false);\n const scrollBase = signal(0);\n const mediaMatches = signal(false);\n const sizeMatches = signal(false);\n const maxWidthPx = signal<number | undefined>(parseMaxWidthPx(props.breakpoint.value));\n const isPreviewMode = signal(false);\n\n const getExternalSidebar = () => {\n const selector = String(props['mobile-sidebar'].value ?? '').trim();\n\n if (!selector) return null;\n\n const root = el.getRootNode();\n const scopedTarget =\n root instanceof ShadowRoot || root instanceof Document\n ? (root.querySelector(selector) as MobileSidebarElement | null)\n : null;\n\n return scopedTarget ?? (document.querySelector(selector) as MobileSidebarElement | null);\n };\n\n provide(NAVBAR_CTX, {\n // Wrapped, not passed directly — `closeMobileMenu` (below) isn't defined yet at this point\n // in `setup()`; by the time `ore-navbar-item` actually calls this (a later click), it is.\n closeMobileMenu: () => closeMobileMenu(),\n isMobile: computed(() => isMobile.value) as Readable<boolean>,\n mobileMenuOpen: computed(() => isMobileMenuOpen.value) as Readable<boolean>,\n });\n\n const computeMode = (): NavbarMode | undefined => {\n if (props.floating.value && props.sticky.value) {\n return isScrolled.value ? 'sticky' : 'floating';\n }\n\n if (props.floating.value) return 'floating';\n\n if (props.sticky.value) return 'sticky';\n\n return undefined;\n };\n\n const setMobileMenu = (next: boolean) => {\n const open = Boolean(next);\n\n if (!hasMobileMenu.value) {\n const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n if (target) {\n if (open) {\n target.openMobile?.();\n } else {\n target.closeMobile?.();\n }\n\n return;\n }\n }\n\n if (open && !hasMobileMenu.value) return;\n\n if (isMobileMenuOpen.value === open) return;\n\n isMobileMenuOpen.value = open;\n emit('mobile-menu-change', { open });\n };\n\n const closeMobileMenu = () => setMobileMenu(false);\n const openMobileMenu = () => setMobileMenu(true);\n const toggleMobileMenu = () => {\n if (!hasMobileMenu.value) {\n const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n if (target) {\n if (typeof target.toggleMobile === 'function') {\n target.toggleMobile();\n } else if (typeof target.openMobile === 'function' && typeof target.closeMobile === 'function') {\n const isOpen = target.hasAttribute('data-mobile-open');\n\n if (isOpen) target.closeMobile();\n else target.openMobile();\n }\n\n return;\n }\n }\n\n setMobileMenu(!isMobileMenuOpen.value);\n };\n\n const syncMobileMode = () => {\n const next =\n (mobileSidebarTarget.value && !hasMobileMenu.value ? isExternalMobileMode.value : false) ||\n mediaMatches.value ||\n sizeMatches.value;\n\n isMobile.value = next;\n\n if (!next) closeMobileMenu();\n };\n\n const readScrollOffset = (scrollContainer: HTMLElement | null): number => {\n if (scrollContainer) {\n return scrollContainer.scrollTop || 0;\n }\n\n return window.scrollY || document.documentElement.scrollTop || 0;\n };\n\n const resetScrollBase = (scrollContainer: HTMLElement | null) => {\n scrollBase.value = readScrollOffset(scrollContainer);\n };\n\n const updateScrolled = (scrollContainer: HTMLElement | null = null) => {\n if (!(props.floating.value && props.sticky.value)) {\n if (isScrolled.value) isScrolled.value = false;\n\n return;\n }\n\n const threshold = Math.max(0, Number(props['scroll-threshold'].value) || 0);\n const currentOffset = readScrollOffset(scrollContainer);\n const delta = currentOffset - scrollBase.value;\n\n isScrolled.value = delta > threshold;\n };\n\n bind({\n attr: {\n 'data-mobile': () => (isMobile.value ? true : undefined),\n 'data-mobile-open': () => (isMobile.value && isMobileMenuOpen.value ? true : undefined),\n 'data-mode': () => computeMode() ?? null,\n 'data-mode-transitioning': () => (isModeTransitioning.value ? true : undefined),\n 'data-preview-mode': () => (isPreviewMode.value ? true : undefined),\n 'data-scrolled': () => (props.floating.value && props.sticky.value && isScrolled.value ? true : undefined),\n },\n });\n\n onMounted(() => {\n const navbarEl = el as NavbarElement;\n const scrollContainer = findScrollContainer(el);\n\n navbarEl.closeMobileMenu = closeMobileMenu;\n navbarEl.openMobileMenu = openMobileMenu;\n navbarEl.toggleMobileMenu = toggleMobileMenu;\n\n const stopScroll = listen(\n window,\n 'scroll',\n () => {\n updateScrolled(scrollContainer);\n },\n { passive: true },\n );\n const stopContainerScroll = scrollContainer\n ? listen(\n scrollContainer,\n 'scroll',\n () => {\n updateScrolled(scrollContainer);\n },\n { passive: true },\n )\n : undefined;\n const stopEscape = listen(el, 'keydown', (event: KeyboardEvent) => {\n if (event.key !== 'Escape' || !isMobileMenuOpen.value) return;\n\n closeMobileMenu();\n });\n\n let mediaCleanup: (() => void) | undefined;\n let mobileSidebarCleanup: (() => void) | undefined;\n let modeTransitionTimeout: ReturnType<typeof setTimeout> | undefined;\n let previousMode: NavbarMode | undefined;\n\n const resolveMobileSidebarTarget = () => {\n mobileSidebarCleanup?.();\n mobileSidebarCleanup = undefined;\n mobileSidebarTarget.value = null;\n isExternalMobileMode.value = false;\n isExternalMobileOpen.value = false;\n\n if (!String(props['mobile-sidebar'].value ?? '').trim()) return;\n\n const target = getExternalSidebar();\n\n if (!target) {\n const root = el.getRootNode();\n const discoveryRoot = root instanceof Document || root instanceof ShadowRoot ? root : document;\n const discoveryObserver = new MutationObserver(() => {\n if (getExternalSidebar()) resolveMobileSidebarTarget();\n });\n\n discoveryObserver.observe(discoveryRoot, { childList: true, subtree: true });\n mobileSidebarCleanup = () => discoveryObserver.disconnect();\n\n return;\n }\n\n const syncTargetState = (event?: CustomEvent<{ open: boolean }>) => {\n const hasBottomNav = target.hasAttribute('data-bottom-nav');\n const hasMobileOpen = target.hasAttribute('data-mobile-open');\n\n isExternalMobileMode.value = hasBottomNav;\n isExternalMobileOpen.value = event?.detail ? event.detail.open : hasMobileOpen;\n\n // If the sidebar is reporting it's open, it must be in bottom-nav mode\n // (either natural or forced). We honor this to avoid race conditions\n // where attributes haven't reflected yet.\n if (isExternalMobileOpen.value && !isExternalMobileMode.value) {\n isExternalMobileMode.value = true;\n }\n\n syncMobileMode();\n };\n\n const targetObserver = new MutationObserver(() => {\n syncTargetState();\n });\n\n syncTargetState();\n targetObserver.observe(target, {\n attributeFilter: ['data-bottom-nav', 'data-mobile-open'],\n attributes: true,\n });\n target.addEventListener('mobile-open-change', syncTargetState as EventListener);\n mobileSidebarCleanup = () => {\n targetObserver.disconnect();\n target.removeEventListener('mobile-open-change', syncTargetState as EventListener);\n };\n mobileSidebarTarget.value = target;\n };\n\n const triggerModeTransition = () => {\n isModeTransitioning.value = true;\n\n if (modeTransitionTimeout != null) clearTimeout(modeTransitionTimeout);\n\n modeTransitionTimeout = setTimeout(() => {\n isModeTransitioning.value = false;\n modeTransitionTimeout = undefined;\n }, 220);\n };\n\n const stopModeWatch = watch(\n computed(() => props.floating.value && props.sticky.value),\n (enabled) => {\n if (!enabled) {\n if (isScrolled.value) isScrolled.value = false;\n\n if (isModeTransitioning.value) isModeTransitioning.value = false;\n\n previousMode = undefined;\n\n if (modeTransitionTimeout != null) {\n clearTimeout(modeTransitionTimeout);\n modeTransitionTimeout = undefined;\n }\n\n return;\n }\n\n resetScrollBase(scrollContainer);\n updateScrolled(scrollContainer);\n\n const currentMode = computeMode();\n\n previousMode = currentMode;\n },\n { immediate: true },\n );\n\n const stopMobileSidebarWatch = watch(\n props['mobile-sidebar'],\n () => {\n resolveMobileSidebarTarget();\n },\n { immediate: true },\n );\n\n const stopModeTransitionWatch = watch(\n computed(() => computeMode()),\n (nextMode) => {\n const comboEnabled = props.floating.value && props.sticky.value;\n\n if (!comboEnabled) {\n previousMode = nextMode ?? undefined;\n\n return;\n }\n\n const next = nextMode ?? undefined;\n\n if (previousMode && next && previousMode !== next) {\n triggerModeTransition();\n }\n\n previousMode = next;\n },\n { immediate: true },\n );\n\n const stopMobileMenuSlotWatch = watch(\n hasMobileMenu,\n (hasContent) => {\n if (!hasContent && isMobileMenuOpen.value) {\n closeMobileMenu();\n }\n },\n { immediate: true },\n );\n const syncMobileMenuContent = () => {\n hasMobileMenu.value = mobileMenuElements.value.some(hasElementContent);\n };\n const stopMobileMenuElementsWatch = watch(mobileMenuElements, syncMobileMenuContent, { immediate: true });\n const mobileMenuContentObserver = new MutationObserver(() => {\n syncMobileMenuContent();\n });\n\n // Parser-created demo content can populate an already-assigned slot wrapper after this\n // custom element connects; `slotchange` alone does not observe that nested content.\n mobileMenuContentObserver.observe(el, { childList: true, subtree: true });\n\n watch(\n props.breakpoint,\n (query) => {\n mediaCleanup?.();\n mediaCleanup = undefined;\n\n const mediaQuery = String(query ?? '').trim();\n\n maxWidthPx.value = parseMaxWidthPx(mediaQuery);\n mediaMatches.value = false;\n\n const width = readContainerWidth(el);\n\n sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n syncMobileMode();\n\n if (props['container-breakpoints'].value && maxWidthPx.value != null) {\n return;\n }\n\n if (!mediaQuery) {\n return;\n }\n\n if (typeof window.matchMedia !== 'function') {\n return;\n }\n\n const mql = window.matchMedia(mediaQuery);\n const syncMedia = (next: boolean) => {\n mediaMatches.value = next;\n syncMobileMode();\n };\n const onChange = (event: MediaQueryListEvent) => {\n syncMedia(event.matches);\n };\n\n syncMedia(mql.matches);\n mql.addEventListener('change', onChange);\n\n mediaCleanup = () => {\n mql.removeEventListener('change', onChange);\n };\n },\n { immediate: true },\n );\n\n const stopResizeEffect =\n typeof ResizeObserver === 'function'\n ? (() => {\n const hostSize = resizeObserver(el);\n const wrapperEl = el.parentElement;\n const containerEl = resolveContainerElement(el);\n const wrapperSize = wrapperEl ? resizeObserver(wrapperEl) : undefined;\n const parentSize = containerEl && containerEl !== wrapperEl ? resizeObserver(containerEl) : undefined;\n\n return watch(\n computed(() => [\n hostSize.value.width,\n hostSize.value.height,\n wrapperSize?.value.width,\n wrapperSize?.value.height,\n parentSize?.value.width,\n parentSize?.value.height,\n ]),\n () => {\n const width = readContainerWidth(el);\n const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n isPreviewMode.value = parentWidth > 0 && parentWidth < window.innerWidth;\n syncMobileMode();\n },\n );\n })()\n : undefined;\n\n return () => {\n stopEscape?.();\n stopScroll?.();\n stopContainerScroll?.();\n stopModeWatch?.dispose();\n stopModeTransitionWatch?.dispose();\n stopMobileMenuSlotWatch?.dispose();\n stopMobileMenuElementsWatch?.dispose();\n stopMobileSidebarWatch?.dispose();\n mobileMenuContentObserver.disconnect();\n mediaCleanup?.();\n mobileSidebarCleanup?.();\n stopResizeEffect?.dispose();\n\n if (modeTransitionTimeout != null) {\n clearTimeout(modeTransitionTimeout);\n modeTransitionTimeout = undefined;\n }\n };\n });\n\n return html`\n <nav part=\"nav\" aria-label=\"${props.label}\">\n <div class=\"navbar\" part=\"bar\">\n <div class=\"navbar-logo\" part=\"logo\" ?hidden=${() => !hasLogo.value}>\n <slot name=\"logo\"></slot>\n </div>\n\n <div class=\"navbar-start\" part=\"start\">\n <slot name=\"start\"></slot>\n </div>\n\n <div class=\"navbar-center\" part=\"center\">\n <slot></slot>\n </div>\n\n <div class=\"navbar-end\" part=\"end\">\n <slot name=\"end\"></slot>\n </div>\n\n <button\n class=\"mobile-toggle\"\n part=\"mobile-toggle\"\n type=\"button\"\n aria-label=\"${() =>\n hasMobileMenu.value\n ? isMobileMenuOpen.value\n ? 'Close navigation menu'\n : 'Open navigation menu'\n : isExternalMobileOpen.value\n ? 'Close navigation menu'\n : 'Open navigation menu'}\"\n aria-controls=\"mobile-menu-panel\"\n aria-expanded=\"${() => String(hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)}\"\n ?hidden=${() => !isMobile.value || (!hasMobileMenu.value && !mobileSidebarTarget.value)}\n @click=\"${toggleMobileMenu}\">\n <ore-icon\n name=\"${() => ((hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value) ? 'x' : 'menu')}\"\n size=\"18\"\n stroke-width=\"2.5\"\n aria-hidden=\"true\"></ore-icon>\n </button>\n </div>\n\n <div\n id=\"mobile-menu-panel\"\n class=\"mobile-menu-panel\"\n part=\"mobile-menu\"\n role=\"navigation\"\n aria-label=\"${() => `${props.label.value} mobile menu`}\"\n ?hidden=${() => !isMobile.value || !isMobileMenuOpen.value || !hasMobileMenu.value}>\n <slot name=\"mobile-menu\"></slot>\n </div>\n </nav>\n `;\n },\n styles: [\n colorThemeMixin,\n elevationMixin,\n roundedVariantMixin,\n coarsePointerMixin,\n reducedMotionMixin,\n frostVariantMixin('.navbar'),\n navbarStyles,\n ],\n});\n\n/**\n * `ore-navbar-item` — Navigation item for navbar slots.\n *\n * Renders as an anchor when `href` is provided and item is not disabled.\n *\n * @element ore-navbar-item\n *\n * @attr {boolean} active - Marks item as the current active route\n * @attr {boolean} disabled - Disables interaction\n * @attr {string} href - Link URL; renders as `<a>` when set\n * @attr {boolean} icon-only - Compact, symmetric padding for items with no visible label\n * @attr {string} rel - Anchor `rel` attribute (links only)\n * @attr {string} target - Anchor `target` attribute (links only)\n *\n * @slot - Item label\n * @slot icon - Optional icon before the label\n *\n * @part item - Root clickable element (anchor or button).\n * @part item-icon - Leading icon container.\n * @part item-label - Label text container.\n * @part item-end - Trailing content container.\n *\n * @example\n * ```html\n * <ore-navbar-item href=\"/home\">Home</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\" active>Docs</ore-navbar-item>\n * <ore-navbar-item href=\"/about\" target=\"_blank\" rel=\"noopener\">About</ore-navbar-item>\n * <ore-navbar-item disabled>Disabled</ore-navbar-item>\n * <ore-navbar-item icon-only aria-label=\"Search\"><ore-icon slot=\"icon\" name=\"search\"></ore-icon></ore-navbar-item>\n * ```\n */\nexport const NAVBAR_ITEM_TAG = 'ore-navbar-item' as const;\ndefine<OreNavbarItemProps>(NAVBAR_ITEM_TAG, {\n props: {\n active: prop.bool(false),\n disabled: prop.bool(false),\n href: prop.string(),\n 'icon-only': prop.bool(false),\n rel: prop.string(),\n target: prop.string(),\n },\n setup(props) {\n const slots = useSlots();\n\n const hasIcon = () => slots.has('icon').value;\n const hasEnd = () => slots.has('end').value;\n const navbarCtx = inject(NAVBAR_CTX);\n\n bind({\n attr: {\n 'navbar-mobile': () => (navbarCtx?.isMobile.value ? true : undefined),\n 'navbar-mobile-open': () => (navbarCtx?.mobileMenuOpen.value ? true : undefined),\n },\n });\n\n const isLink = () => Boolean(props.href.value) && !props.disabled.value;\n\n // Prevent reverse tabnapping: auto-inject noopener + noreferrer for _blank links.\n const effectiveRel = computed(() => computeSafeRel(props.rel.value, props.target.value));\n\n // Closes the mobile overflow panel when one of its items is activated — otherwise picking a\n // destination (or firing any other action placed in the `mobile-menu` slot) leaves the panel\n // open over the page until the user separately taps the toggle again. Only matters while\n // actually in mobile mode; on desktop `navbarCtx.mobileMenuOpen` is never true to begin with,\n // so `closeMobileMenu()` (idempotent — see `setMobileMenu`'s equality check) is a no-op there.\n const closeMobileMenuIfOpen = (): void => {\n if (navbarCtx?.mobileMenuOpen.value) navbarCtx.closeMobileMenu();\n };\n\n const renderItemContent = () => html`\n <span class=\"item-icon\" part=\"item-icon\" ?hidden=${() => !hasIcon()} aria-hidden=\"true\">\n <slot name=\"icon\"></slot>\n </span>\n <span class=\"item-label\" part=\"item-label\"><slot></slot></span>\n <span class=\"item-end\" part=\"item-end\" ?hidden=${() => !hasEnd()}>\n <slot name=\"end\"></slot>\n </span>\n `;\n\n return html`\n ${() => {\n if (isLink()) {\n return html`\n <a\n class=\"item\"\n part=\"item\"\n href=\"${props.href}\"\n rel=\"${effectiveRel}\"\n target=\"${props.target}\"\n aria-current=\"${() => (props.active.value ? 'page' : null)}\"\n @click=${closeMobileMenuIfOpen}>\n ${renderItemContent()}\n </a>\n `;\n }\n\n if (props.disabled.value) {\n return html`\n <div class=\"item\" part=\"item\" tabindex=\"-1\" aria-disabled=\"true\">${renderItemContent()}</div>\n `;\n }\n\n return html`\n <button class=\"item\" part=\"item\" type=\"button\" @click=${closeMobileMenuIfOpen}>${renderItemContent()}</button>\n `;\n }}\n `;\n },\n styles: [coarsePointerMixin, navbarStyles],\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"navbar.cjs","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, type Readable, signal, untrack, watch } from '@vielzeug/ripple';\nimport { createElementSize, createMediaQuery, SentinelUnavailableError } from '@vielzeug/sentinel';\n\nimport type { ElevationLevel, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport {\n coarsePointerMixin,\n colorThemeMixin,\n elevationMixin,\n frostVariantMixin,\n reducedMotionMixin,\n roundedVariantMixin,\n} from '../../styles';\nimport { computeSafeRel } from '../../utils';\nimport navbarStyles from './navbar.css?inline';\n\nconst listen = <E extends Event = Event>(\n el: EventTarget | null | undefined,\n name: string,\n handler: (e: E) => void,\n options?: AddEventListenerOptions,\n): (() => void) => {\n if (!el) return () => {};\n\n el.addEventListener(name, handler as EventListener, options);\n\n return () => el.removeEventListener(name, handler as EventListener, options);\n};\n\ntype NavbarMode = 'floating' | 'sticky';\n\nconst hasElementContent = (el: Element): boolean => {\n if (!(el instanceof HTMLElement)) return true;\n\n if (el.tagName.includes('-')) return true;\n\n if (el.childElementCount > 0) return true;\n\n return (el.textContent ?? '').trim().length > 0;\n};\n\nconst parseMaxWidthPx = (query: string | undefined): number | undefined => {\n const value = String(query ?? '').trim();\n\n if (!value) return undefined;\n\n const match = /max-width\\s*:\\s*([0-9]+(?:\\.[0-9]+)?)px/i.exec(value);\n\n if (!match) return undefined;\n\n const parsed = Number.parseFloat(match[1]);\n\n return Number.isFinite(parsed) ? parsed : undefined;\n};\n\nconst resolveContainerElement = (el: HTMLElement): HTMLElement | null => {\n let container = el.parentElement;\n\n while (container?.tagName.toLowerCase() === 'ore-grid-item') {\n container = container.parentElement;\n }\n\n return container;\n};\n\nconst readContainerWidth = (el: HTMLElement): number => {\n const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n if (parentWidth > 0) return parentWidth;\n\n return el.offsetWidth;\n};\n\nconst findScrollContainer = (start: HTMLElement): HTMLElement | null => {\n let current: HTMLElement | null = start.parentElement;\n\n while (current) {\n const styles = window.getComputedStyle(current);\n const overflowY = styles.overflowY;\n\n if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {\n return current;\n }\n\n current = current.parentElement;\n }\n\n return null;\n};\n\n/** Context provided by `ore-navbar` to `ore-navbar-item` children. */\nexport type NavbarContext = {\n closeMobileMenu: () => void;\n isMobile: Readable<boolean>;\n mobileMenuOpen: Readable<boolean>;\n};\n\n/** Injection key for navbar context. */\nexport const NAVBAR_CTX = createContext<NavbarContext>('NavbarContext');\n\n/** Navbar component events */\nexport type OreNavbarEvents = {\n 'mobile-menu-change': { open: boolean };\n};\n\n/** Navbar component element interface */\nexport type NavbarElement = HTMLElement &\n OreNavbarProps & {\n closeMobileMenu(): void;\n openMobileMenu(): void;\n toggleMobileMenu(): void;\n };\n\ntype MobileSidebarElement = HTMLElement & {\n closeMobile?: () => void;\n openMobile?: () => void;\n toggleMobile?: () => void;\n};\n\n/** Navbar component properties */\nexport type OreNavbarProps = {\n /** CSS media query used for mobile layout switching */\n breakpoint?: string;\n /** Theme color */\n color?: ThemeColor;\n /** Evaluate mobile breakpoint against container width only when possible. */\n 'container-breakpoints'?: boolean;\n /** Shadow elevation level (0-5) */\n elevation?: ElevationLevel;\n /** Start as detached floating navbar */\n floating?: boolean;\n /** Accessible nav landmark label */\n label?: string;\n /** CSS selector for an external sidebar toggled by the mobile button */\n 'mobile-sidebar'?: string;\n /** Border radius size */\n rounded?: RoundedSize;\n /** Scroll threshold in px used by floating+sticky transition */\n 'scroll-threshold'?: number;\n /** Stick to top of viewport */\n sticky?: boolean;\n /** Visual style variant */\n variant?: Exclude<VisualVariant, 'ghost' | 'text'>;\n};\n\n/** Navbar item properties */\nexport type OreNavbarItemProps = {\n /** Whether this item represents the current page */\n active?: boolean;\n /** Whether this item is disabled */\n disabled?: boolean;\n /** Link target URL. Renders an anchor when provided. */\n href?: string;\n /**\n * Icon-only mode — hides the (empty) label region and switches to compact, symmetric\n * padding instead of the icon+label layout's wider horizontal padding. Set this whenever\n * the default slot is intentionally left empty (name conveyed via `aria-label` instead),\n * otherwise the empty label still reserves its inter-element gap and the item ends up\n * with lopsided padding around the icon.\n */\n 'icon-only'?: boolean;\n /** Relationship of linked URL (anchor-only) */\n rel?: string;\n /** Browsing context for link (anchor-only) */\n target?: string;\n};\n\n/**\n * `ore-navbar` — Responsive navigation with sticky/floating modes and a mobile overflow panel.\n *\n * @element ore-navbar\n * @element ore-navbar-item - Navigation link or button placed in the default or mobile-menu slot\n *\n * @attr {string} label - Accessible nav landmark label\n * @attr {boolean} sticky - Makes navbar sticky at top\n * @attr {boolean} floating - Makes navbar detached and floating\n * @attr {number} scroll-threshold - Scroll threshold for floating+sticky transition\n * @attr {string} breakpoint - CSS media query used for mobile mode\n * @attr {boolean} container-breakpoints - Evaluates parseable max-width breakpoints against container width\n * @attr {string} variant - Visual variant: 'flat' | 'solid' | 'bordered' | 'outline' | 'frost' | 'glass'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n *\n * @fires mobile-menu-change - Emitted when mobile menu open state changes. detail: { open: boolean }\n *\n * @slot logo - Brand/logo content rendered at the leading edge\n * @slot start - Content rendered in the left/start region\n * @slot - Center navigation content rendered between the start and end regions\n * @slot end - Content rendered in the right/end region\n * @slot mobile-menu - Controls and links rendered inside the mobile overflow panel\n *\n * @cssprop --navbar-height - Navbar bar height\n * @cssprop --navbar-width - Max width of the navbar content\n * @cssprop --navbar-offset - Horizontal offset for floating/sticky positioning\n * @cssprop --navbar-bg - Navbar background color\n * @cssprop --navbar-color - Navbar text color\n * @cssprop --navbar-border-color - Navbar border color\n * @cssprop --navbar-shadow - Navbar box shadow\n * @cssprop --navbar-radius - Border radius (floating/sticky modes)\n * @cssprop --navbar-backdrop-filter - Backdrop filter for blur effect\n * @cssprop --navbar-item-color - Nav item text color\n * @cssprop --navbar-item-hover-color - Nav item hover text color\n * @cssprop --navbar-item-hover-bg - Nav item hover background\n * @cssprop --navbar-item-active-color - Nav item active/current text color\n * @cssprop --navbar-item-active-bg - Nav item active/current background\n * @part nav - Outer navigation landmark\n * @part bar - Main navbar row container\n * @part logo - Logo slot container\n * @part start - Leading action/content region\n * @part center - Center content region\n * @part end - Trailing action/content region\n * @part mobile-toggle - Mobile menu toggle button\n * @part mobile-menu - Mobile overflow panel\n * @part item-icon - Leading icon inside navbar items\n * @part item-label - Label text inside navbar items\n * @part item-end - Trailing content inside navbar items\n * @part item - Clickable navbar item root\n * @example\n * ```html\n * <ore-navbar sticky elevation=\"1\">\n * <a href=\"/\" slot=\"logo\"><strong>MyApp</strong></a>\n * <ore-navbar-item href=\"/dashboard\">Dashboard</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\">Docs</ore-navbar-item>\n * <ore-button slot=\"end\" variant=\"solid\" color=\"primary\" size=\"sm\">Sign in</ore-button>\n * </ore-navbar>\n * ```\n */\nexport const NAVBAR_TAG = 'ore-navbar' as const;\ndefine<OreNavbarProps>(NAVBAR_TAG, {\n props: {\n breakpoint: prop.string('(max-width: 768px)'),\n color: prop.string<ThemeColor>(),\n 'container-breakpoints': prop.bool(false),\n elevation: prop.number<ElevationLevel>(),\n floating: prop.bool(false),\n label: prop.string('Main navigation'),\n 'mobile-sidebar': prop.string(),\n rounded: prop.string<RoundedSize>(),\n 'scroll-threshold': prop.number(80),\n sticky: prop.bool(false),\n variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'frost'>(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreNavbarEvents>();\n const slots = useSlots();\n\n const hasLogo = slots.has('logo');\n const mobileMenuElements = slots.elements('mobile-menu');\n const hasMobileMenu = signal(false);\n const mobileSidebarTarget = signal<MobileSidebarElement | null>(null);\n const isExternalMobileMode = signal(false);\n const isExternalMobileOpen = signal(false);\n const isMobile = signal(false);\n const isMobileMenuOpen = signal(false);\n const isModeTransitioning = signal(false);\n const isScrolled = signal(false);\n const scrollBase = signal(0);\n const mediaMatches = signal(false);\n const sizeMatches = signal(false);\n const maxWidthPx = signal<number | undefined>(parseMaxWidthPx(props.breakpoint.value));\n const isPreviewMode = signal(false);\n\n const getExternalSidebar = () => {\n const selector = String(props['mobile-sidebar'].value ?? '').trim();\n\n if (!selector) return null;\n\n const root = el.getRootNode();\n const scopedTarget =\n root instanceof ShadowRoot || root instanceof Document\n ? (root.querySelector(selector) as MobileSidebarElement | null)\n : null;\n\n return scopedTarget ?? (document.querySelector(selector) as MobileSidebarElement | null);\n };\n\n provide(NAVBAR_CTX, {\n // Wrapped, not passed directly — `closeMobileMenu` (below) isn't defined yet at this point\n // in `setup()`; by the time `ore-navbar-item` actually calls this (a later click), it is.\n closeMobileMenu: () => closeMobileMenu(),\n isMobile: computed(() => isMobile.value) as Readable<boolean>,\n mobileMenuOpen: computed(() => isMobileMenuOpen.value) as Readable<boolean>,\n });\n\n const computeMode = (): NavbarMode | undefined => {\n if (props.floating.value && props.sticky.value) {\n return isScrolled.value ? 'sticky' : 'floating';\n }\n\n if (props.floating.value) return 'floating';\n\n if (props.sticky.value) return 'sticky';\n\n return undefined;\n };\n\n const setMobileMenu = (next: boolean) => {\n const open = Boolean(next);\n\n if (!hasMobileMenu.value) {\n const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n if (target) {\n if (open) {\n target.openMobile?.();\n } else {\n target.closeMobile?.();\n }\n\n return;\n }\n }\n\n if (open && !hasMobileMenu.value) return;\n\n if (isMobileMenuOpen.value === open) return;\n\n isMobileMenuOpen.value = open;\n emit('mobile-menu-change', { open });\n };\n\n const closeMobileMenu = () => setMobileMenu(false);\n const openMobileMenu = () => setMobileMenu(true);\n const toggleMobileMenu = () => {\n if (!hasMobileMenu.value) {\n const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n if (target) {\n if (typeof target.toggleMobile === 'function') {\n target.toggleMobile();\n } else if (typeof target.openMobile === 'function' && typeof target.closeMobile === 'function') {\n const isOpen = target.hasAttribute('data-mobile-open');\n\n if (isOpen) target.closeMobile();\n else target.openMobile();\n }\n\n return;\n }\n }\n\n setMobileMenu(!isMobileMenuOpen.value);\n };\n\n const syncMobileMode = () => {\n const next =\n (mobileSidebarTarget.value && !hasMobileMenu.value ? isExternalMobileMode.value : false) ||\n mediaMatches.value ||\n sizeMatches.value;\n\n isMobile.value = next;\n\n if (!next) closeMobileMenu();\n };\n\n const readScrollOffset = (scrollContainer: HTMLElement | null): number => {\n if (scrollContainer) {\n return scrollContainer.scrollTop || 0;\n }\n\n return window.scrollY || document.documentElement.scrollTop || 0;\n };\n\n const resetScrollBase = (scrollContainer: HTMLElement | null) => {\n scrollBase.value = readScrollOffset(scrollContainer);\n };\n\n const updateScrolled = (scrollContainer: HTMLElement | null = null) => {\n if (!(props.floating.value && props.sticky.value)) {\n if (isScrolled.value) isScrolled.value = false;\n\n return;\n }\n\n const threshold = Math.max(0, Number(props['scroll-threshold'].value) || 0);\n const currentOffset = readScrollOffset(scrollContainer);\n const delta = currentOffset - scrollBase.value;\n\n isScrolled.value = delta > threshold;\n };\n\n bind({\n attr: {\n 'data-mobile': () => (isMobile.value ? true : undefined),\n 'data-mobile-open': () => (isMobile.value && isMobileMenuOpen.value ? true : undefined),\n 'data-mode': () => computeMode() ?? null,\n 'data-mode-transitioning': () => (isModeTransitioning.value ? true : undefined),\n 'data-preview-mode': () => (isPreviewMode.value ? true : undefined),\n 'data-scrolled': () => (props.floating.value && props.sticky.value && isScrolled.value ? true : undefined),\n },\n });\n\n onMounted(() => {\n const navbarEl = el as NavbarElement;\n const scrollContainer = findScrollContainer(el);\n\n navbarEl.closeMobileMenu = closeMobileMenu;\n navbarEl.openMobileMenu = openMobileMenu;\n navbarEl.toggleMobileMenu = toggleMobileMenu;\n\n const stopScroll = listen(\n window,\n 'scroll',\n () => {\n updateScrolled(scrollContainer);\n },\n { passive: true },\n );\n const stopContainerScroll = scrollContainer\n ? listen(\n scrollContainer,\n 'scroll',\n () => {\n updateScrolled(scrollContainer);\n },\n { passive: true },\n )\n : undefined;\n const stopEscape = listen(el, 'keydown', (event: KeyboardEvent) => {\n if (event.key !== 'Escape' || !isMobileMenuOpen.value) return;\n\n closeMobileMenu();\n });\n\n let mediaCleanup: (() => void) | undefined;\n let mobileSidebarCleanup: (() => void) | undefined;\n let modeTransitionTimeout: ReturnType<typeof setTimeout> | undefined;\n let previousMode: NavbarMode | undefined;\n\n const resolveMobileSidebarTarget = () => {\n mobileSidebarCleanup?.();\n mobileSidebarCleanup = undefined;\n mobileSidebarTarget.value = null;\n isExternalMobileMode.value = false;\n isExternalMobileOpen.value = false;\n\n if (!String(props['mobile-sidebar'].value ?? '').trim()) return;\n\n const target = getExternalSidebar();\n\n if (!target) {\n const root = el.getRootNode();\n const discoveryRoot = root instanceof Document || root instanceof ShadowRoot ? root : document;\n const discoveryObserver = new MutationObserver(() => {\n if (getExternalSidebar()) resolveMobileSidebarTarget();\n });\n\n discoveryObserver.observe(discoveryRoot, { childList: true, subtree: true });\n mobileSidebarCleanup = () => discoveryObserver.disconnect();\n\n return;\n }\n\n const syncTargetState = (event?: CustomEvent<{ open: boolean }>) => {\n const hasBottomNav = target.hasAttribute('data-bottom-nav');\n const hasMobileOpen = target.hasAttribute('data-mobile-open');\n\n isExternalMobileMode.value = hasBottomNav;\n isExternalMobileOpen.value = event?.detail ? event.detail.open : hasMobileOpen;\n\n // If the sidebar is reporting it's open, it must be in bottom-nav mode\n // (either natural or forced). We honor this to avoid race conditions\n // where attributes haven't reflected yet.\n if (isExternalMobileOpen.value && !isExternalMobileMode.value) {\n isExternalMobileMode.value = true;\n }\n\n syncMobileMode();\n };\n\n const targetObserver = new MutationObserver(() => {\n syncTargetState();\n });\n\n syncTargetState();\n targetObserver.observe(target, {\n attributeFilter: ['data-bottom-nav', 'data-mobile-open'],\n attributes: true,\n });\n target.addEventListener('mobile-open-change', syncTargetState as EventListener);\n mobileSidebarCleanup = () => {\n targetObserver.disconnect();\n target.removeEventListener('mobile-open-change', syncTargetState as EventListener);\n };\n mobileSidebarTarget.value = target;\n };\n\n const triggerModeTransition = () => {\n isModeTransitioning.value = true;\n\n if (modeTransitionTimeout != null) clearTimeout(modeTransitionTimeout);\n\n modeTransitionTimeout = setTimeout(() => {\n isModeTransitioning.value = false;\n modeTransitionTimeout = undefined;\n }, 220);\n };\n\n const stopModeWatch = watch(\n computed(() => props.floating.value && props.sticky.value),\n (enabled) => {\n if (!enabled) {\n if (isScrolled.value) isScrolled.value = false;\n\n if (isModeTransitioning.value) isModeTransitioning.value = false;\n\n previousMode = undefined;\n\n if (modeTransitionTimeout != null) {\n clearTimeout(modeTransitionTimeout);\n modeTransitionTimeout = undefined;\n }\n\n return;\n }\n\n resetScrollBase(scrollContainer);\n updateScrolled(scrollContainer);\n\n const currentMode = computeMode();\n\n previousMode = currentMode;\n },\n { immediate: true },\n );\n\n const stopMobileSidebarWatch = watch(\n props['mobile-sidebar'],\n () => {\n resolveMobileSidebarTarget();\n },\n { immediate: true },\n );\n\n const stopModeTransitionWatch = watch(\n computed(() => computeMode()),\n (nextMode) => {\n const comboEnabled = props.floating.value && props.sticky.value;\n\n if (!comboEnabled) {\n previousMode = nextMode ?? undefined;\n\n return;\n }\n\n const next = nextMode ?? undefined;\n\n if (previousMode && next && previousMode !== next) {\n triggerModeTransition();\n }\n\n previousMode = next;\n },\n { immediate: true },\n );\n\n const stopMobileMenuSlotWatch = watch(\n hasMobileMenu,\n (hasContent) => {\n if (!hasContent && isMobileMenuOpen.value) {\n closeMobileMenu();\n }\n },\n { immediate: true },\n );\n const syncMobileMenuContent = () => {\n hasMobileMenu.value = mobileMenuElements.value.some(hasElementContent);\n };\n const stopMobileMenuElementsWatch = watch(mobileMenuElements, syncMobileMenuContent, { immediate: true });\n const mobileMenuContentObserver = new MutationObserver(() => {\n syncMobileMenuContent();\n });\n\n // Parser-created demo content can populate an already-assigned slot wrapper after this\n // custom element connects; `slotchange` alone does not observe that nested content.\n mobileMenuContentObserver.observe(el, { childList: true, subtree: true });\n\n watch(\n props.breakpoint,\n (query) => {\n // 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: typeof mediaHandle.value) => {\n if (state) {\n mediaMatches.value = state.matches;\n syncMobileMode();\n }\n };\n\n syncMedia(mediaHandle.value);\n\n const mediaCleanupFn = watch(mediaHandle, syncMedia);\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\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 return watch(\n computed(() => [\n hostSize.value?.width,\n hostSize.value?.height,\n wrapperSize?.value?.width,\n wrapperSize?.value?.height,\n parentSize?.value?.width,\n parentSize?.value?.height,\n ]),\n () => {\n const width = readContainerWidth(el);\n const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n isPreviewMode.value = parentWidth > 0 && parentWidth < window.innerWidth;\n syncMobileMode();\n },\n );\n })()\n : undefined;\n\n return () => {\n stopEscape?.();\n stopScroll?.();\n stopContainerScroll?.();\n stopModeWatch?.dispose();\n stopModeTransitionWatch?.dispose();\n stopMobileMenuSlotWatch?.dispose();\n stopMobileMenuElementsWatch?.dispose();\n stopMobileSidebarWatch?.dispose();\n mobileMenuContentObserver.disconnect();\n mediaCleanup?.();\n mobileSidebarCleanup?.();\n stopResizeEffect?.dispose();\n\n if (modeTransitionTimeout != null) {\n clearTimeout(modeTransitionTimeout);\n modeTransitionTimeout = undefined;\n }\n };\n });\n\n return html`\n <nav part=\"nav\" aria-label=\"${props.label}\">\n <div class=\"navbar\" part=\"bar\">\n <div class=\"navbar-logo\" part=\"logo\" ?hidden=${() => !hasLogo.value}>\n <slot name=\"logo\"></slot>\n </div>\n\n <div class=\"navbar-start\" part=\"start\">\n <slot name=\"start\"></slot>\n </div>\n\n <div class=\"navbar-center\" part=\"center\">\n <slot></slot>\n </div>\n\n <div class=\"navbar-end\" part=\"end\">\n <slot name=\"end\"></slot>\n </div>\n\n <button\n class=\"mobile-toggle\"\n part=\"mobile-toggle\"\n type=\"button\"\n aria-label=\"${() =>\n hasMobileMenu.value\n ? isMobileMenuOpen.value\n ? 'Close navigation menu'\n : 'Open navigation menu'\n : isExternalMobileOpen.value\n ? 'Close navigation menu'\n : 'Open navigation menu'}\"\n aria-controls=\"mobile-menu-panel\"\n aria-expanded=\"${() => String(hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)}\"\n ?hidden=${() => !isMobile.value || (!hasMobileMenu.value && !mobileSidebarTarget.value)}\n @click=\"${toggleMobileMenu}\">\n <ore-icon\n name=\"${() => ((hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value) ? 'x' : 'menu')}\"\n size=\"18\"\n stroke-width=\"2.5\"\n aria-hidden=\"true\"></ore-icon>\n </button>\n </div>\n\n <div\n id=\"mobile-menu-panel\"\n class=\"mobile-menu-panel\"\n part=\"mobile-menu\"\n role=\"navigation\"\n aria-label=\"${() => `${props.label.value} mobile menu`}\"\n ?hidden=${() => !isMobile.value || !isMobileMenuOpen.value || !hasMobileMenu.value}>\n <slot name=\"mobile-menu\"></slot>\n </div>\n </nav>\n `;\n },\n styles: [\n colorThemeMixin,\n elevationMixin,\n roundedVariantMixin,\n coarsePointerMixin,\n reducedMotionMixin,\n frostVariantMixin('.navbar'),\n navbarStyles,\n ],\n});\n\n/**\n * `ore-navbar-item` — Navigation item for navbar slots.\n *\n * Renders as an anchor when `href` is provided and item is not disabled.\n *\n * @element ore-navbar-item\n *\n * @attr {boolean} active - Marks item as the current active route\n * @attr {boolean} disabled - Disables interaction\n * @attr {string} href - Link URL; renders as `<a>` when set\n * @attr {boolean} icon-only - Compact, symmetric padding for items with no visible label\n * @attr {string} rel - Anchor `rel` attribute (links only)\n * @attr {string} target - Anchor `target` attribute (links only)\n *\n * @slot - Item label\n * @slot icon - Optional icon before the label\n *\n * @part item - Root clickable element (anchor or button).\n * @part item-icon - Leading icon container.\n * @part item-label - Label text container.\n * @part item-end - Trailing content container.\n *\n * @example\n * ```html\n * <ore-navbar-item href=\"/home\">Home</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\" active>Docs</ore-navbar-item>\n * <ore-navbar-item href=\"/about\" target=\"_blank\" rel=\"noopener\">About</ore-navbar-item>\n * <ore-navbar-item disabled>Disabled</ore-navbar-item>\n * <ore-navbar-item icon-only aria-label=\"Search\"><ore-icon slot=\"icon\" name=\"search\"></ore-icon></ore-navbar-item>\n * ```\n */\nexport const NAVBAR_ITEM_TAG = 'ore-navbar-item' as const;\ndefine<OreNavbarItemProps>(NAVBAR_ITEM_TAG, {\n props: {\n active: prop.bool(false),\n disabled: prop.bool(false),\n href: prop.string(),\n 'icon-only': prop.bool(false),\n rel: prop.string(),\n target: prop.string(),\n },\n setup(props) {\n const slots = useSlots();\n\n const hasIcon = () => slots.has('icon').value;\n const hasEnd = () => slots.has('end').value;\n const navbarCtx = inject(NAVBAR_CTX);\n\n bind({\n attr: {\n 'navbar-mobile': () => (navbarCtx?.isMobile.value ? true : undefined),\n 'navbar-mobile-open': () => (navbarCtx?.mobileMenuOpen.value ? true : undefined),\n },\n });\n\n const isLink = () => Boolean(props.href.value) && !props.disabled.value;\n\n // Prevent reverse tabnapping: auto-inject noopener + noreferrer for _blank links.\n const effectiveRel = computed(() => computeSafeRel(props.rel.value, props.target.value));\n\n // Closes the mobile overflow panel when one of its items is activated — otherwise picking a\n // destination (or firing any other action placed in the `mobile-menu` slot) leaves the panel\n // open over the page until the user separately taps the toggle again. Only matters while\n // actually in mobile mode; on desktop `navbarCtx.mobileMenuOpen` is never true to begin with,\n // so `closeMobileMenu()` (idempotent — see `setMobileMenu`'s equality check) is a no-op there.\n const closeMobileMenuIfOpen = (): void => {\n if (navbarCtx?.mobileMenuOpen.value) navbarCtx.closeMobileMenu();\n };\n\n const renderItemContent = () => html`\n <span class=\"item-icon\" part=\"item-icon\" ?hidden=${() => !hasIcon()} aria-hidden=\"true\">\n <slot name=\"icon\"></slot>\n </span>\n <span class=\"item-label\" part=\"item-label\"><slot></slot></span>\n <span class=\"item-end\" part=\"item-end\" ?hidden=${() => !hasEnd()}>\n <slot name=\"end\"></slot>\n </span>\n `;\n\n return html`\n ${() => {\n if (isLink()) {\n return html`\n <a\n class=\"item\"\n part=\"item\"\n href=\"${props.href}\"\n rel=\"${effectiveRel}\"\n target=\"${props.target}\"\n aria-current=\"${() => (props.active.value ? 'page' : null)}\"\n @click=${closeMobileMenuIfOpen}>\n ${renderItemContent()}\n </a>\n `;\n }\n\n if (props.disabled.value) {\n return html`\n <div class=\"item\" part=\"item\" tabindex=\"-1\" aria-disabled=\"true\">${renderItemContent()}</div>\n `;\n }\n\n return html`\n <button class=\"item\" part=\"item\" type=\"button\" @click=${closeMobileMenuIfOpen}>${renderItemContent()}</button>\n `;\n }}\n `;\n },\n styles: [coarsePointerMixin, navbarStyles],\n});\n"],"mappings":"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"}
|
package/dist/navbar.js
CHANGED
|
@@ -4,24 +4,25 @@ import { colorThemeMixin as r, elevationMixin as i } from "./styles/mixins/theme
|
|
|
4
4
|
import { frostVariantMixin as a } from "./styles/mixins/variants.css.js";
|
|
5
5
|
import { computeSafeRel as o } from "./utils/link.js";
|
|
6
6
|
import s from "./layout/navbar/navbar.css.js";
|
|
7
|
-
import { bind as c, createContext as l, define as u, getHost as d, html as f, inject as p,
|
|
8
|
-
import { computed as b, signal as x,
|
|
7
|
+
import { bind as c, createContext as l, define as u, getHost as d, html as f, inject as p, onCleanup as m, onMounted as h, prop as g, provide as _, useEmit as v, useSlots as y } from "@vielzeug/ore";
|
|
8
|
+
import { computed as b, signal as x, untrack as S, watch as C } from "@vielzeug/ripple";
|
|
9
|
+
import { SentinelUnavailableError as w, createElementSize as T, createMediaQuery as E } from "@vielzeug/sentinel";
|
|
9
10
|
//#region src/layout/navbar/navbar.ts
|
|
10
|
-
var
|
|
11
|
+
var D = (e, t, n, r) => e ? (e.addEventListener(t, n, r), () => e.removeEventListener(t, n, r)) : () => {}, O = (e) => !(e instanceof HTMLElement) || e.tagName.includes("-") || e.childElementCount > 0 ? !0 : (e.textContent ?? "").trim().length > 0, k = (e) => {
|
|
11
12
|
let t = String(e ?? "").trim();
|
|
12
13
|
if (!t) return;
|
|
13
14
|
let n = /max-width\s*:\s*([0-9]+(?:\.[0-9]+)?)px/i.exec(t);
|
|
14
15
|
if (!n) return;
|
|
15
16
|
let r = Number.parseFloat(n[1]);
|
|
16
17
|
return Number.isFinite(r) ? r : void 0;
|
|
17
|
-
},
|
|
18
|
+
}, A = (e) => {
|
|
18
19
|
let t = e.parentElement;
|
|
19
20
|
for (; t?.tagName.toLowerCase() === "ore-grid-item";) t = t.parentElement;
|
|
20
21
|
return t;
|
|
21
|
-
},
|
|
22
|
-
let t =
|
|
22
|
+
}, j = (e) => {
|
|
23
|
+
let t = A(e)?.clientWidth ?? 0;
|
|
23
24
|
return t > 0 ? t : e.offsetWidth;
|
|
24
|
-
},
|
|
25
|
+
}, M = (e) => {
|
|
25
26
|
let t = e.parentElement;
|
|
26
27
|
for (; t;) {
|
|
27
28
|
let e = window.getComputedStyle(t).overflowY;
|
|
@@ -29,91 +30,91 @@ var C = (e, t, n, r) => e ? (e.addEventListener(t, n, r), () => e.removeEventLis
|
|
|
29
30
|
t = t.parentElement;
|
|
30
31
|
}
|
|
31
32
|
return null;
|
|
32
|
-
},
|
|
33
|
-
u(
|
|
33
|
+
}, N = l("NavbarContext"), P = "ore-navbar";
|
|
34
|
+
u(P, {
|
|
34
35
|
props: {
|
|
35
|
-
breakpoint:
|
|
36
|
-
color:
|
|
37
|
-
"container-breakpoints":
|
|
38
|
-
elevation:
|
|
39
|
-
floating:
|
|
40
|
-
label:
|
|
41
|
-
"mobile-sidebar":
|
|
42
|
-
rounded:
|
|
43
|
-
"scroll-threshold":
|
|
44
|
-
sticky:
|
|
45
|
-
variant:
|
|
36
|
+
breakpoint: g.string("(max-width: 768px)"),
|
|
37
|
+
color: g.string(),
|
|
38
|
+
"container-breakpoints": g.bool(!1),
|
|
39
|
+
elevation: g.number(),
|
|
40
|
+
floating: g.bool(!1),
|
|
41
|
+
label: g.string("Main navigation"),
|
|
42
|
+
"mobile-sidebar": g.string(),
|
|
43
|
+
rounded: g.string(),
|
|
44
|
+
"scroll-threshold": g.number(80),
|
|
45
|
+
sticky: g.bool(!1),
|
|
46
|
+
variant: g.string()
|
|
46
47
|
},
|
|
47
48
|
setup(e) {
|
|
48
|
-
let t = d(), n = v(), r = y(), i = r.has("logo"), a = r.elements("mobile-menu"), o = x(!1), s = x(null), l = x(!1), u = x(!1), p = x(!1),
|
|
49
|
+
let t = d(), n = v(), r = y(), i = r.has("logo"), a = r.elements("mobile-menu"), o = x(!1), s = x(null), l = x(!1), u = x(!1), p = x(!1), g = x(!1), P = x(!1), F = x(!1), I = x(0), L = x(!1), R = x(!1), z = x(k(e.breakpoint.value)), B = x(!1), V = () => {
|
|
49
50
|
let n = String(e["mobile-sidebar"].value ?? "").trim();
|
|
50
51
|
if (!n) return null;
|
|
51
52
|
let r = t.getRootNode();
|
|
52
53
|
return (r instanceof ShadowRoot || r instanceof Document ? r.querySelector(n) : null) ?? document.querySelector(n);
|
|
53
54
|
};
|
|
54
|
-
|
|
55
|
-
closeMobileMenu: () =>
|
|
55
|
+
_(N, {
|
|
56
|
+
closeMobileMenu: () => W(),
|
|
56
57
|
isMobile: b(() => p.value),
|
|
57
|
-
mobileMenuOpen: b(() =>
|
|
58
|
+
mobileMenuOpen: b(() => g.value)
|
|
58
59
|
});
|
|
59
|
-
let
|
|
60
|
-
if (e.floating.value && e.sticky.value) return
|
|
60
|
+
let H = () => {
|
|
61
|
+
if (e.floating.value && e.sticky.value) return F.value ? "sticky" : "floating";
|
|
61
62
|
if (e.floating.value) return "floating";
|
|
62
63
|
if (e.sticky.value) return "sticky";
|
|
63
|
-
},
|
|
64
|
+
}, U = (e) => {
|
|
64
65
|
let t = !!e;
|
|
65
66
|
if (!o.value) {
|
|
66
|
-
let e = s.value ??
|
|
67
|
+
let e = s.value ?? V();
|
|
67
68
|
if (e) {
|
|
68
69
|
t ? e.openMobile?.() : e.closeMobile?.();
|
|
69
70
|
return;
|
|
70
71
|
}
|
|
71
72
|
}
|
|
72
|
-
t && !o.value ||
|
|
73
|
-
},
|
|
73
|
+
t && !o.value || g.value !== t && (g.value = t, n("mobile-menu-change", { open: t }));
|
|
74
|
+
}, W = () => U(!1), G = () => U(!0), K = () => {
|
|
74
75
|
if (!o.value) {
|
|
75
|
-
let e = s.value ??
|
|
76
|
+
let e = s.value ?? V();
|
|
76
77
|
if (e) {
|
|
77
78
|
typeof e.toggleMobile == "function" ? e.toggleMobile() : typeof e.openMobile == "function" && typeof e.closeMobile == "function" && (e.hasAttribute("data-mobile-open") ? e.closeMobile() : e.openMobile());
|
|
78
79
|
return;
|
|
79
80
|
}
|
|
80
81
|
}
|
|
81
|
-
|
|
82
|
-
},
|
|
83
|
-
let e = (s.value && !o.value ? l.value : !1) ||
|
|
84
|
-
p.value = e, e ||
|
|
85
|
-
},
|
|
86
|
-
|
|
87
|
-
},
|
|
82
|
+
U(!g.value);
|
|
83
|
+
}, q = () => {
|
|
84
|
+
let e = (s.value && !o.value ? l.value : !1) || L.value || R.value;
|
|
85
|
+
p.value = e, e || W();
|
|
86
|
+
}, J = (e) => e ? e.scrollTop || 0 : window.scrollY || document.documentElement.scrollTop || 0, Y = (e) => {
|
|
87
|
+
I.value = J(e);
|
|
88
|
+
}, X = (t = null) => {
|
|
88
89
|
if (!(e.floating.value && e.sticky.value)) {
|
|
89
|
-
|
|
90
|
+
F.value &&= !1;
|
|
90
91
|
return;
|
|
91
92
|
}
|
|
92
|
-
let n = Math.max(0, Number(e["scroll-threshold"].value) || 0), r =
|
|
93
|
-
|
|
93
|
+
let n = Math.max(0, Number(e["scroll-threshold"].value) || 0), r = J(t) - I.value;
|
|
94
|
+
F.value = r > n;
|
|
94
95
|
};
|
|
95
96
|
return c({ attr: {
|
|
96
97
|
"data-mobile": () => p.value ? !0 : void 0,
|
|
97
|
-
"data-mobile-open": () => p.value &&
|
|
98
|
-
"data-mode": () =>
|
|
99
|
-
"data-mode-transitioning": () =>
|
|
100
|
-
"data-preview-mode": () =>
|
|
101
|
-
"data-scrolled": () => e.floating.value && e.sticky.value &&
|
|
102
|
-
} }),
|
|
103
|
-
let n = t, r =
|
|
104
|
-
n.closeMobileMenu =
|
|
105
|
-
let i =
|
|
106
|
-
|
|
107
|
-
}, { passive: !0 }), c = r ?
|
|
108
|
-
|
|
109
|
-
}, { passive: !0 }) : void 0, d =
|
|
110
|
-
e.key !== "Escape" || !
|
|
111
|
-
}), f, p,
|
|
98
|
+
"data-mobile-open": () => p.value && g.value ? !0 : void 0,
|
|
99
|
+
"data-mode": () => H() ?? null,
|
|
100
|
+
"data-mode-transitioning": () => P.value ? !0 : void 0,
|
|
101
|
+
"data-preview-mode": () => B.value ? !0 : void 0,
|
|
102
|
+
"data-scrolled": () => e.floating.value && e.sticky.value && F.value ? !0 : void 0
|
|
103
|
+
} }), h(() => {
|
|
104
|
+
let n = t, r = M(t);
|
|
105
|
+
n.closeMobileMenu = W, n.openMobileMenu = G, n.toggleMobileMenu = K;
|
|
106
|
+
let i = D(window, "scroll", () => {
|
|
107
|
+
X(r);
|
|
108
|
+
}, { passive: !0 }), c = r ? D(r, "scroll", () => {
|
|
109
|
+
X(r);
|
|
110
|
+
}, { passive: !0 }) : void 0, d = D(t, "keydown", (e) => {
|
|
111
|
+
e.key !== "Escape" || !g.value || W();
|
|
112
|
+
}), f, p, h, _, v = () => {
|
|
112
113
|
if (p?.(), p = void 0, s.value = null, l.value = !1, u.value = !1, !String(e["mobile-sidebar"].value ?? "").trim()) return;
|
|
113
|
-
let n =
|
|
114
|
+
let n = V();
|
|
114
115
|
if (!n) {
|
|
115
116
|
let e = t.getRootNode(), n = e instanceof Document || e instanceof ShadowRoot ? e : document, r = new MutationObserver(() => {
|
|
116
|
-
|
|
117
|
+
V() && v();
|
|
117
118
|
});
|
|
118
119
|
r.observe(n, {
|
|
119
120
|
childList: !0,
|
|
@@ -123,7 +124,7 @@ u(A, {
|
|
|
123
124
|
}
|
|
124
125
|
let r = (e) => {
|
|
125
126
|
let t = n.hasAttribute("data-bottom-nav"), r = n.hasAttribute("data-mobile-open");
|
|
126
|
-
l.value = t, u.value = e?.detail ? e.detail.open : r, u.value && !l.value && (l.value = !0),
|
|
127
|
+
l.value = t, u.value = e?.detail ? e.detail.open : r, u.value && !l.value && (l.value = !0), q();
|
|
127
128
|
}, i = new MutationObserver(() => {
|
|
128
129
|
r();
|
|
129
130
|
});
|
|
@@ -134,65 +135,72 @@ u(A, {
|
|
|
134
135
|
i.disconnect(), n.removeEventListener("mobile-open-change", r);
|
|
135
136
|
}, s.value = n;
|
|
136
137
|
}, y = () => {
|
|
137
|
-
|
|
138
|
-
|
|
138
|
+
P.value = !0, h != null && clearTimeout(h), h = setTimeout(() => {
|
|
139
|
+
P.value = !1, h = void 0;
|
|
139
140
|
}, 220);
|
|
140
|
-
}, x =
|
|
141
|
+
}, x = C(b(() => e.floating.value && e.sticky.value), (e) => {
|
|
141
142
|
if (!e) {
|
|
142
|
-
|
|
143
|
+
F.value &&= !1, P.value &&= !1, _ = void 0, h != null && (clearTimeout(h), h = void 0);
|
|
143
144
|
return;
|
|
144
145
|
}
|
|
145
|
-
|
|
146
|
-
}, { immediate: !0 }),
|
|
146
|
+
Y(r), X(r), _ = H();
|
|
147
|
+
}, { immediate: !0 }), N = C(e["mobile-sidebar"], () => {
|
|
147
148
|
v();
|
|
148
|
-
}, { immediate: !0 }),
|
|
149
|
+
}, { immediate: !0 }), I = C(b(() => H()), (t) => {
|
|
149
150
|
if (!(e.floating.value && e.sticky.value)) {
|
|
150
|
-
|
|
151
|
+
_ = t ?? void 0;
|
|
151
152
|
return;
|
|
152
153
|
}
|
|
153
154
|
let n = t ?? void 0;
|
|
154
|
-
|
|
155
|
-
}, { immediate: !0 }),
|
|
156
|
-
!e &&
|
|
157
|
-
}, { immediate: !0 }),
|
|
158
|
-
o.value = a.value.some(
|
|
159
|
-
},
|
|
160
|
-
|
|
155
|
+
_ && n && _ !== n && y(), _ = n;
|
|
156
|
+
}, { immediate: !0 }), U = C(o, (e) => {
|
|
157
|
+
!e && g.value && W();
|
|
158
|
+
}, { immediate: !0 }), J = () => {
|
|
159
|
+
o.value = a.value.some(O);
|
|
160
|
+
}, Z = C(a, J, { immediate: !0 }), Q = new MutationObserver(() => {
|
|
161
|
+
J();
|
|
161
162
|
});
|
|
162
|
-
|
|
163
|
+
Q.observe(t, {
|
|
163
164
|
childList: !0,
|
|
164
165
|
subtree: !0
|
|
165
|
-
}),
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
166
|
+
}), C(e.breakpoint, (n) => {
|
|
167
|
+
S(() => {
|
|
168
|
+
f?.(), f = void 0;
|
|
169
|
+
let r = String(n ?? "").trim();
|
|
170
|
+
z.value = k(r), L.value = !1;
|
|
171
|
+
let i = j(t);
|
|
172
|
+
if (R.value = i > 0 && z.value != null && i <= z.value, q(), !(e["container-breakpoints"].value && z.value != null) && r) try {
|
|
173
|
+
let e = E(r), t = (e) => {
|
|
174
|
+
e && (L.value = e.matches, q());
|
|
175
|
+
};
|
|
176
|
+
t(e.value);
|
|
177
|
+
let n = C(e, t);
|
|
178
|
+
f = () => {
|
|
179
|
+
n.dispose(), e.dispose();
|
|
180
|
+
};
|
|
181
|
+
} catch (e) {
|
|
182
|
+
if (!(e instanceof w)) throw e;
|
|
183
|
+
}
|
|
184
|
+
});
|
|
179
185
|
}, { immediate: !0 });
|
|
180
|
-
let
|
|
181
|
-
let e =
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
186
|
+
let $ = typeof ResizeObserver == "function" ? (() => {
|
|
187
|
+
let e = T(t);
|
|
188
|
+
m(() => e.dispose());
|
|
189
|
+
let n = t.parentElement, r = A(t), i = n ? T(n) : void 0, a = r && r !== n ? T(r) : void 0;
|
|
190
|
+
return i && m(() => i.dispose()), a && m(() => a.dispose()), C(b(() => [
|
|
191
|
+
e.value?.width,
|
|
192
|
+
e.value?.height,
|
|
193
|
+
i?.value?.width,
|
|
194
|
+
i?.value?.height,
|
|
195
|
+
a?.value?.width,
|
|
196
|
+
a?.value?.height
|
|
189
197
|
]), () => {
|
|
190
|
-
let e =
|
|
191
|
-
|
|
198
|
+
let e = j(t), n = A(t)?.clientWidth ?? 0;
|
|
199
|
+
R.value = e > 0 && z.value != null && e <= z.value, B.value = n > 0 && n < window.innerWidth, q();
|
|
192
200
|
});
|
|
193
201
|
})() : void 0;
|
|
194
202
|
return () => {
|
|
195
|
-
d?.(), i?.(), c?.(), x?.dispose(),
|
|
203
|
+
d?.(), i?.(), c?.(), x?.dispose(), I?.dispose(), U?.dispose(), Z?.dispose(), N?.dispose(), Q.disconnect(), f?.(), p?.(), $?.dispose(), h != null && (clearTimeout(h), h = void 0);
|
|
196
204
|
};
|
|
197
205
|
}), f`
|
|
198
206
|
<nav part="nav" aria-label="${e.label}">
|
|
@@ -217,13 +225,13 @@ u(A, {
|
|
|
217
225
|
class="mobile-toggle"
|
|
218
226
|
part="mobile-toggle"
|
|
219
227
|
type="button"
|
|
220
|
-
aria-label="${() => o.value ?
|
|
228
|
+
aria-label="${() => o.value ? g.value ? "Close navigation menu" : "Open navigation menu" : u.value ? "Close navigation menu" : "Open navigation menu"}"
|
|
221
229
|
aria-controls="mobile-menu-panel"
|
|
222
|
-
aria-expanded="${() => String(o.value ?
|
|
230
|
+
aria-expanded="${() => String(o.value ? g.value : u.value)}"
|
|
223
231
|
?hidden=${() => !p.value || !o.value && !s.value}
|
|
224
|
-
@click="${
|
|
232
|
+
@click="${K}">
|
|
225
233
|
<ore-icon
|
|
226
|
-
name="${() => (o.value ?
|
|
234
|
+
name="${() => (o.value ? g.value : u.value) ? "x" : "menu"}"
|
|
227
235
|
size="18"
|
|
228
236
|
stroke-width="2.5"
|
|
229
237
|
aria-hidden="true"></ore-icon>
|
|
@@ -236,7 +244,7 @@ u(A, {
|
|
|
236
244
|
part="mobile-menu"
|
|
237
245
|
role="navigation"
|
|
238
246
|
aria-label="${() => `${e.label.value} mobile menu`}"
|
|
239
|
-
?hidden=${() => !p.value || !
|
|
247
|
+
?hidden=${() => !p.value || !g.value || !o.value}>
|
|
240
248
|
<slot name="mobile-menu"></slot>
|
|
241
249
|
</div>
|
|
242
250
|
</nav>
|
|
@@ -252,18 +260,18 @@ u(A, {
|
|
|
252
260
|
s
|
|
253
261
|
]
|
|
254
262
|
});
|
|
255
|
-
var
|
|
256
|
-
u(
|
|
263
|
+
var F = "ore-navbar-item";
|
|
264
|
+
u(F, {
|
|
257
265
|
props: {
|
|
258
|
-
active:
|
|
259
|
-
disabled:
|
|
260
|
-
href:
|
|
261
|
-
"icon-only":
|
|
262
|
-
rel:
|
|
263
|
-
target:
|
|
266
|
+
active: g.bool(!1),
|
|
267
|
+
disabled: g.bool(!1),
|
|
268
|
+
href: g.string(),
|
|
269
|
+
"icon-only": g.bool(!1),
|
|
270
|
+
rel: g.string(),
|
|
271
|
+
target: g.string()
|
|
264
272
|
},
|
|
265
273
|
setup(e) {
|
|
266
|
-
let t = y(), n = () => t.has("icon").value, r = () => t.has("end").value, i = p(
|
|
274
|
+
let t = y(), n = () => t.has("icon").value, r = () => t.has("end").value, i = p(N);
|
|
267
275
|
c({ attr: {
|
|
268
276
|
"navbar-mobile": () => i?.isMobile.value ? !0 : void 0,
|
|
269
277
|
"navbar-mobile-open": () => i?.mobileMenuOpen.value ? !0 : void 0
|
|
@@ -301,6 +309,6 @@ u(j, {
|
|
|
301
309
|
styles: [e, s]
|
|
302
310
|
});
|
|
303
311
|
//#endregion
|
|
304
|
-
export {
|
|
312
|
+
export { N as NAVBAR_CTX, F as NAVBAR_ITEM_TAG, P as NAVBAR_TAG };
|
|
305
313
|
|
|
306
314
|
//# sourceMappingURL=navbar.js.map
|