@filip.mazev/blocks 1.4.3 → 1.4.5

package/fesm2022/filip.mazev-blocks-navigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"filip.mazev-blocks-navigation.mjs","names":[],"sources":["../../../projects/blocks/navigation/tokens/navigation-config.token.ts","../../../projects/blocks/navigation/tokens/navigation-access-adapter.token.ts","../../../projects/blocks/navigation/services/navigation.service.ts","../../../projects/blocks/navigation/components/breadcrumbs/breadcrumbs.ts","../../../projects/blocks/navigation/components/breadcrumbs/breadcrumbs.html","../../../projects/blocks/navigation/helpers/navigation-functions.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { INavigationConfig } from '../interfaces/inavigation-config.interface';\n\nexport const NAVIGATION_CONFIG = new InjectionToken<INavigationConfig>('NAVIGATION_CONFIG');\n","import { InjectionToken } from '@angular/core';\nimport { INavigationAccessAdapter } from '../interfaces/inavigation-access-adapter.interface';\n\nexport const NAVIGATION_ACCESS_ADAPTER = new InjectionToken<INavigationAccessAdapter>('NAVIGATION_ACCESS_ADAPTER');\n","import { computed, inject, Injectable, Signal } from '@angular/core';\nimport { ActivatedRouteSnapshot, NavigationEnd, Router, Routes } from '@angular/router';\nimport { NAVIGATION_CONFIG } from '../tokens/navigation-config.token';\nimport { IResolvedNavigation } from '../interfaces/iresolved-navigation.interface';\nimport { filter } from 'rxjs';\nimport { IBreadcrumbItem } from '../interfaces/ibreadcrumb-item.interface';\nimport { INavMeta } from '../interfaces/inav-meta.interface';\nimport { INavigationItem } from '../interfaces/inavigation-item.interface';\nimport { NAVIGATION_ACCESS_ADAPTER } from '../tokens/navigation-access-adapter.token';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { INavContext } from '../interfaces/inav-context.interface';\nimport { BX_I18N, isTextWithKey, ResolvableText } from '@filip.mazev/blocks/core';\nimport { NavText } from '../types/navigation.types';\n\n@Injectable({ providedIn: 'root' })\nexport class NavigationService {\n  private readonly router = inject(Router);\n  private readonly config = inject(NAVIGATION_CONFIG, { optional: true });\n  private readonly i18n = inject(BX_I18N, { optional: true });\n  private readonly accessAdapter = inject(NAVIGATION_ACCESS_ADAPTER, { optional: true });\n\n  private readonly navEnd = toSignal(this.router.events.pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd)));\n\n  public readonly current = computed<IResolvedNavigation>(() => {\n    this.navEnd();\n    this.i18n?.version?.();\n    return this.resolveCurrent(this.router.routerState.snapshot.root);\n  });\n\n  public readonly routeBase = computed<string | undefined>(() => {\n    return this.accessAdapter?.resolveBaseRoute();\n  });\n\n  public readonly routes: Signal<INavigationItem[]> = computed(() => {\n    this.i18n?.version?.();\n    return this.extractRoutes(this.router.config);\n  });\n\n  public readonly baseRoute = computed<string | undefined>(() => {\n    const viewableRoutes = this.routes();\n\n    const primaryPrefix = this.routeBase();\n\n    let firstFoundRoot: string | undefined;\n\n    const findRootRoute = (items: INavigationItem[]): string | undefined => {\n      for (const item of items) {\n        if (item.data?.root) {\n          if (!firstFoundRoot) {\n            firstFoundRoot = item.route;\n          }\n\n          if (primaryPrefix && item.route.startsWith(primaryPrefix)) {\n            return item.route;\n          }\n        }\n\n        if (item.children?.length) {\n          const childRoot = findRootRoute(item.children);\n          if (childRoot) return childRoot;\n        }\n      }\n      return undefined;\n    };\n\n    const perfectMatch = findRootRoute(viewableRoutes);\n\n    return perfectMatch ?? firstFoundRoot ?? primaryPrefix;\n  });\n\n  public readonly menu = computed(() => this.buildMenu(this.routes()));\n\n  public navigateBack(): void {\n    const breadcrumbs = this.current().breadcrumbs;\n\n    if (breadcrumbs.length > 1) {\n      const previousBreadcrumb = breadcrumbs[breadcrumbs.length - 2];\n      this.router.navigateByUrl(previousBreadcrumb.route);\n    } else {\n      this.router.navigateByUrl(this.routeBase() ?? '/');\n    }\n  }\n\n  //#region Helpers\n\n  private extractRoutes(routes: Routes, parentSegment: string[] = []): INavigationItem[] {\n    const items: INavigationItem[] = [];\n\n    for (const route of routes) {\n      if (route.redirectTo) continue;\n\n      if (this.accessAdapter && !this.accessAdapter.canAccessMenu(route.data ?? {})) {\n        continue;\n      }\n\n      const ownPath = route.path ?? '';\n\n      const fullSegments = ownPath ? [...parentSegment, ownPath] : [...parentSegment];\n\n      const fullRoute = '/' + fullSegments.filter(Boolean).join('/');\n\n      const children = route.children?.length ? this.extractRoutes(route.children, fullSegments) : [];\n\n      const nav = route.data?.['nav'] as INavMeta | undefined;\n\n      if (!nav) {\n        items.push(...children);\n        continue;\n      }\n\n      const item = {\n        id: fullRoute,\n        route: fullRoute,\n        label: this.resolveNavText(nav.label, { snapshot: undefined }) ?? '',\n        icon: nav.icon,\n        section: nav.section,\n        visible: nav.visible ? nav.visible() : true,\n        data: nav,\n        children\n      };\n\n      items.push(item);\n    }\n\n    return this.sortNavigationItems(items);\n  }\n\n  private resolveCurrent(root: ActivatedRouteSnapshot): IResolvedNavigation {\n    let currentNode: ActivatedRouteSnapshot | null = root;\n    let finalSnapshot: ActivatedRouteSnapshot | undefined;\n\n    while (currentNode) {\n      const next: ActivatedRouteSnapshot | null = currentNode.children.find((child) => child.outlet === 'primary') ?? null;\n      if (!next) {\n        finalSnapshot = currentNode;\n        break;\n      }\n      currentNode = next;\n    }\n\n    if (!finalSnapshot) return { breadcrumbs: [] };\n\n    const urlSegments = finalSnapshot.pathFromRoot.flatMap((s) => s.url.map((u) => u.path)).filter(Boolean);\n\n    const breadcrumbs: IBreadcrumbItem[] = [];\n    const allItems = this.flattenRoutes(this.routes());\n    let currentUrl = '';\n\n    for (const segment of urlSegments) {\n      currentUrl += '/' + segment;\n\n      const matchingItem = this.matchRouteToUrl(allItems, currentUrl);\n\n      if (matchingItem && matchingItem.data && !matchingItem.data.hidden) {\n        const ctx: INavContext = { snapshot: finalSnapshot };\n\n        const label = this.resolveNavText(matchingItem.data.breadcrumb, ctx) ?? this.resolveNavText(matchingItem.data.label, ctx);\n\n        if (label && breadcrumbs[breadcrumbs.length - 1]?.label !== label) {\n          breadcrumbs.push({ label, route: currentUrl });\n        }\n      }\n    }\n\n    const leafNav = finalSnapshot.routeConfig?.data?.['nav'] as INavMeta | undefined;\n    const fullUrl = '/' + urlSegments.join('/');\n\n    let current: INavigationItem | undefined;\n\n    if (leafNav && !leafNav.hidden) {\n      current = {\n        id: fullUrl,\n        route: fullUrl,\n        label: this.resolveNavText(leafNav.label, { snapshot: finalSnapshot }) ?? '',\n        icon: leafNav.icon,\n        section: leafNav.section,\n        visible: leafNav.visible ? leafNav.visible() : true,\n        data: leafNav\n      };\n    }\n\n    return { current, breadcrumbs };\n  }\n\n  private buildMenu(items: INavigationItem[]): INavigationItem[] {\n    return items\n      .map((item): INavigationItem | null => {\n        const children = this.buildMenu(item.children ?? []);\n        const includeSelf = item.visible && item.data?.menu !== false;\n\n        if (!includeSelf && !children.length) {\n          return null;\n        }\n\n        return {\n          ...item,\n          children\n        };\n      })\n      .filter((item): item is INavigationItem => item !== null);\n  }\n\n  private sortNavigationItems(items: INavigationItem[]): INavigationItem[] {\n    const customSort = this.config?.sortItems;\n\n    return [...items].sort((a, b) => {\n      if (customSort) {\n        return customSort(a, b);\n      }\n\n      const orderA = a.data?.order ?? Number.POSITIVE_INFINITY;\n      const orderB = b.data?.order ?? Number.POSITIVE_INFINITY;\n\n      if (orderA !== orderB) return orderA - orderB;\n      return a.label.localeCompare(b.label);\n    });\n  }\n\n  private matchRouteToUrl(items: INavigationItem[], url: string): INavigationItem | undefined {\n    const exactMatch = items.find((i) => i.route === url);\n    if (exactMatch) return exactMatch;\n\n    return items.find((i) => {\n      if (!i.route.includes(':')) return false;\n      const routeRegex = new RegExp('^' + i.route.replace(/:[^\\s/]+/g, '([^/]+)') + '$');\n      return routeRegex.test(url);\n    });\n  }\n\n  private flattenRoutes(items: INavigationItem[]): INavigationItem[] {\n    return items.reduce((acc, item) => {\n      acc.push(item);\n      if (item.children) acc.push(...this.flattenRoutes(item.children));\n      return acc;\n    }, [] as INavigationItem[]);\n  }\n\n  private resolveNavText(textDef: NavText | undefined, ctx: INavContext): string | undefined {\n    if (!textDef) return undefined;\n\n    const text: ResolvableText = typeof textDef === 'function' ? textDef(ctx) : textDef;\n\n    if (isTextWithKey(text)) {\n      return this.i18n?.translate(text.key, { route: ctx.snapshot });\n    }\n\n    return text;\n  }\n\n  //#endregion\n}\n","import { Component, computed, inject, input, ChangeDetectionStrategy } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { NavigationService } from '../../services/navigation.service';\nimport { Icon, IconName } from '@filip.mazev/blocks/icons';\nimport { BxA11yService } from '@filip.mazev/blocks/core';\n\n@Component({\n  selector: 'bx-breadcrumbs',\n  imports: [RouterLink, Icon],\n  templateUrl: './breadcrumbs.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styleUrl: './breadcrumbs.scss'\n})\nexport class Breadcrumbs {\n  private readonly navigationService = inject(NavigationService);\n  private readonly a11y = inject(BxA11yService);\n\n  protected readonly isAnimated = computed(() => {\n    return !this.a11y.isReducedMotion();\n  });\n\n  public readonly minimumBreadcrumbs = input<number>(2);\n  public readonly divider = input<IconName>('chevron-right');\n\n  protected showBreadcumbs = computed(() => {\n    const minimum = Math.max(1, this.minimumBreadcrumbs());\n    return this.current().breadcrumbs.length >= minimum;\n  });\n\n  protected ariaLabel = computed(() => {\n    const labels = this.current()\n      .breadcrumbs.map((crumb) => crumb.label)\n      .join(' > ');\n    return `Breadcrumbs: ${labels}`;\n  });\n\n  protected current = this.navigationService.current;\n}\n","@if(showBreadcumbs()) {\n<nav class=\"breadcrumbs\" [attr.aria-label]=\"ariaLabel()\">\n    @for (crumb of current().breadcrumbs; track crumb.route; let last = $last) {\n        @if (last) {\n        <span class=\"crumb last\" aria-current=\"page\">{{ crumb.label }}</span>\n        } @else {\n        <a class=\"crumb\" [routerLink]=\"crumb.route\">{{ crumb.label }}</a>\n        <bx-icon [name]=\"divider()\" size=\"16\" class=\"breadcrumb-separator\" />\n        }\n    }\n</nav>\n}\n","import { Strict } from '@filip.mazev/blocks/core';\nimport { INavMeta } from '../interfaces/inav-meta.interface';\nimport { INavigationConfig } from '../interfaces/inavigation-config.interface';\nimport { NAVIGATION_CONFIG } from '../tokens/navigation-config.token';\nimport { Route } from '@angular/router';\n\n/**\n *\n * @param config\n * This function is a helper to provide the navigation configuration in your Angular application.\n * It takes an `INavigationConfig` object as an argument and returns an array of providers that can be used in the `providers` array of your Angular module.\n * By using this function, you can easily set up the navigation configuration for your application without having to manually create the provider object each time.\n */\nexport function provideNavigation(config: INavigationConfig) {\n  return [\n    {\n      provide: NAVIGATION_CONFIG,\n      useValue: config\n    }\n  ];\n}\n\n/**\n *\n * @param route\n * @param nav\n * This function is a helper to attach navigation metadata to Angular routes. It takes an Angular `Route` object and a navigation metadata object of type `Strict<T, INavMeta>`, where `T`\n * is a generic type that can be used to enforce specific properties on the navigation metadata.\n * The function returns a new `Route` object with the provided navigation metadata merged into the existing route data under the 'nav' property.\n * This allows you to easily associate navigation information with your routes, which can then be used by navigation components to generate menus, breadcrumbs, etc.\n */\nexport function withNav<T>(route: Route, nav: Strict<T, INavMeta>): Route {\n  const existingNav = (route.data?.['nav'] as INavMeta | undefined) ?? {};\n\n  return {\n    ...route,\n    data: {\n      ...(route.data ?? {}),\n      nav: {\n        ...existingNav,\n        ...nav\n      }\n    }\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"filip.mazev-blocks-navigation.mjs","names":[],"sources":["../../../projects/blocks/navigation/tokens/navigation-config.token.ts","../../../projects/blocks/navigation/tokens/navigation-access-adapter.token.ts","../../../projects/blocks/navigation/services/navigation.service.ts","../../../projects/blocks/navigation/components/breadcrumbs/breadcrumbs.ts","../../../projects/blocks/navigation/components/breadcrumbs/breadcrumbs.html","../../../projects/blocks/navigation/helpers/navigation-functions.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { INavigationConfig } from '../interfaces/inavigation-config.interface';\n\nexport const NAVIGATION_CONFIG = new InjectionToken<INavigationConfig>('NAVIGATION_CONFIG');\n","import { InjectionToken } from '@angular/core';\nimport { INavigationAccessAdapter } from '../interfaces/inavigation-access-adapter.interface';\n\nexport const NAVIGATION_ACCESS_ADAPTER = new InjectionToken<INavigationAccessAdapter>('NAVIGATION_ACCESS_ADAPTER');\n","import { computed, inject, Injectable, Signal } from '@angular/core';\nimport { ActivatedRouteSnapshot, NavigationEnd, Router, Routes } from '@angular/router';\nimport { NAVIGATION_CONFIG } from '../tokens/navigation-config.token';\nimport { IResolvedNavigation } from '../interfaces/iresolved-navigation.interface';\nimport { filter } from 'rxjs';\nimport { IBreadcrumbItem } from '../interfaces/ibreadcrumb-item.interface';\nimport { INavMeta } from '../interfaces/inav-meta.interface';\nimport { INavigationItem } from '../interfaces/inavigation-item.interface';\nimport { NAVIGATION_ACCESS_ADAPTER } from '../tokens/navigation-access-adapter.token';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { INavContext } from '../interfaces/inav-context.interface';\nimport { BX_I18N, isTextWithKey, ResolvableText } from '@filip.mazev/blocks/core';\nimport { NavText } from '../types/navigation.types';\nimport { INavigationGroup } from '../interfaces/inavigation-group.interface';\n\n@Injectable({ providedIn: 'root' })\nexport class NavigationService {\n  private readonly router = inject(Router);\n  private readonly config = inject(NAVIGATION_CONFIG, { optional: true });\n  private readonly i18n = inject(BX_I18N, { optional: true });\n  private readonly accessAdapter = inject(NAVIGATION_ACCESS_ADAPTER, { optional: true });\n\n  private readonly navEnd = toSignal(this.router.events.pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd)));\n\n  public readonly current = computed<IResolvedNavigation>(() => {\n    this.navEnd();\n    this.i18n?.version?.();\n    return this.resolveCurrent(this.router.routerState.snapshot.root);\n  });\n\n  public readonly routeBase = computed<string | undefined>(() => {\n    return this.accessAdapter?.resolveBaseRoute();\n  });\n\n  public readonly routes: Signal<INavigationItem[]> = computed(() => {\n    this.i18n?.version?.();\n    return this.extractRoutes(this.router.config);\n  });\n\n  public readonly baseRoute = computed<string | undefined>(() => {\n    const viewableRoutes = this.routes();\n\n    const primaryPrefix = this.routeBase();\n\n    let firstFoundRoot: string | undefined;\n\n    const findRootRoute = (items: INavigationItem[]): string | undefined => {\n      for (const item of items) {\n        if (item.data?.root) {\n          if (!firstFoundRoot) {\n            firstFoundRoot = item.route;\n          }\n\n          if (primaryPrefix && item.route.startsWith(primaryPrefix)) {\n            return item.route;\n          }\n        }\n\n        if (item.children?.length) {\n          const childRoot = findRootRoute(item.children);\n          if (childRoot) return childRoot;\n        }\n      }\n      return undefined;\n    };\n\n    const perfectMatch = findRootRoute(viewableRoutes);\n\n    return perfectMatch ?? firstFoundRoot ?? primaryPrefix;\n  });\n\n  public readonly menu = computed(() => this.buildMenu(this.routes()));\n\n  public readonly menuGroups = computed<INavigationGroup[]>(() => {\n    const sections = [...(this.config?.sections ?? [])].sort((a, b) => (a.order ?? Number.POSITIVE_INFINITY) - (b.order ?? Number.POSITIVE_INFINITY));\n    const groups = new Map<string, INavigationGroup>(\n      sections.map((section) => [section.id, { id: section.id, title: section.title ?? section.id, items: [] }])\n    );\n\n    for (const item of this.flattenRoutes(this.menu())) {\n      if (!item.visible || item.data?.menu === false) continue;\n\n      const id = item.section ?? '';\n      let group = groups.get(id);\n      if (!group) {\n        group = { id, title: id, items: [] };\n        groups.set(id, group);\n      }\n      group.items.push({ ...item, children: undefined });\n    }\n\n    return [...groups.values()].filter((group) => group.items.length > 0);\n  });\n\n  public navigateBack(): void {\n    const breadcrumbs = this.current().breadcrumbs;\n\n    if (breadcrumbs.length > 1) {\n      const previousBreadcrumb = breadcrumbs[breadcrumbs.length - 2];\n      this.router.navigateByUrl(previousBreadcrumb.route);\n    } else {\n      this.router.navigateByUrl(this.routeBase() ?? '/');\n    }\n  }\n\n  //#region Helpers\n\n  private extractRoutes(routes: Routes, parentSegment: string[] = []): INavigationItem[] {\n    const items: INavigationItem[] = [];\n\n    for (const route of routes) {\n      if (route.redirectTo) continue;\n\n      if (this.accessAdapter && !this.accessAdapter.canAccessMenu(route.data ?? {})) {\n        continue;\n      }\n\n      const ownPath = route.path ?? '';\n\n      const fullSegments = ownPath ? [...parentSegment, ownPath] : [...parentSegment];\n\n      const fullRoute = '/' + fullSegments.filter(Boolean).join('/');\n\n      const children = route.children?.length ? this.extractRoutes(route.children, fullSegments) : [];\n\n      const nav = route.data?.['nav'] as INavMeta | undefined;\n\n      if (!nav) {\n        items.push(...children);\n        continue;\n      }\n\n      const item = {\n        id: fullRoute,\n        route: fullRoute,\n        label: this.resolveNavText(nav.label, { snapshot: undefined }) ?? '',\n        icon: nav.icon,\n        section: nav.section,\n        visible: nav.visible ? nav.visible() : true,\n        data: nav,\n        children\n      };\n\n      items.push(item);\n    }\n\n    return this.sortNavigationItems(items);\n  }\n\n  private resolveCurrent(root: ActivatedRouteSnapshot): IResolvedNavigation {\n    let currentNode: ActivatedRouteSnapshot | null = root;\n    let finalSnapshot: ActivatedRouteSnapshot | undefined;\n\n    while (currentNode) {\n      const next: ActivatedRouteSnapshot | null = currentNode.children.find((child) => child.outlet === 'primary') ?? null;\n      if (!next) {\n        finalSnapshot = currentNode;\n        break;\n      }\n      currentNode = next;\n    }\n\n    if (!finalSnapshot) return { breadcrumbs: [] };\n\n    const urlSegments = finalSnapshot.pathFromRoot.flatMap((s) => s.url.map((u) => u.path)).filter(Boolean);\n\n    const breadcrumbs: IBreadcrumbItem[] = [];\n    const allItems = this.flattenRoutes(this.routes());\n    let currentUrl = '';\n\n    for (const segment of urlSegments) {\n      currentUrl += '/' + segment;\n\n      const matchingItem = this.matchRouteToUrl(allItems, currentUrl);\n\n      if (matchingItem && matchingItem.data && !matchingItem.data.hidden) {\n        const ctx: INavContext = { snapshot: finalSnapshot };\n\n        const label = this.resolveNavText(matchingItem.data.breadcrumb, ctx) ?? this.resolveNavText(matchingItem.data.label, ctx);\n\n        if (label && breadcrumbs[breadcrumbs.length - 1]?.label !== label) {\n          breadcrumbs.push({ label, route: currentUrl });\n        }\n      }\n    }\n\n    const leafNav = finalSnapshot.routeConfig?.data?.['nav'] as INavMeta | undefined;\n    const fullUrl = '/' + urlSegments.join('/');\n\n    let current: INavigationItem | undefined;\n\n    if (leafNav && !leafNav.hidden) {\n      current = {\n        id: fullUrl,\n        route: fullUrl,\n        label: this.resolveNavText(leafNav.label, { snapshot: finalSnapshot }) ?? '',\n        icon: leafNav.icon,\n        section: leafNav.section,\n        visible: leafNav.visible ? leafNav.visible() : true,\n        data: leafNav\n      };\n    }\n\n    return { current, breadcrumbs };\n  }\n\n  private buildMenu(items: INavigationItem[]): INavigationItem[] {\n    return items\n      .map((item): INavigationItem | null => {\n        const children = this.buildMenu(item.children ?? []);\n        const includeSelf = item.visible && item.data?.menu !== false;\n\n        if (!includeSelf && !children.length) {\n          return null;\n        }\n\n        return {\n          ...item,\n          children\n        };\n      })\n      .filter((item): item is INavigationItem => item !== null);\n  }\n\n  private sortNavigationItems(items: INavigationItem[]): INavigationItem[] {\n    const customSort = this.config?.sortItems;\n\n    return [...items].sort((a, b) => {\n      if (customSort) {\n        return customSort(a, b);\n      }\n\n      const orderA = a.data?.order ?? Number.POSITIVE_INFINITY;\n      const orderB = b.data?.order ?? Number.POSITIVE_INFINITY;\n\n      if (orderA !== orderB) return orderA - orderB;\n      return a.label.localeCompare(b.label);\n    });\n  }\n\n  private matchRouteToUrl(items: INavigationItem[], url: string): INavigationItem | undefined {\n    const exactMatch = items.find((i) => i.route === url);\n    if (exactMatch) return exactMatch;\n\n    return items.find((i) => {\n      if (!i.route.includes(':')) return false;\n      const routeRegex = new RegExp('^' + i.route.replace(/:[^\\s/]+/g, '([^/]+)') + '$');\n      return routeRegex.test(url);\n    });\n  }\n\n  private flattenRoutes(items: INavigationItem[]): INavigationItem[] {\n    return items.reduce((acc, item) => {\n      acc.push(item);\n      if (item.children) acc.push(...this.flattenRoutes(item.children));\n      return acc;\n    }, [] as INavigationItem[]);\n  }\n\n  private resolveNavText(textDef: NavText | undefined, ctx: INavContext): string | undefined {\n    if (!textDef) return undefined;\n\n    const text: ResolvableText = typeof textDef === 'function' ? textDef(ctx) : textDef;\n\n    if (isTextWithKey(text)) {\n      return this.i18n?.translate(text.key, { route: ctx.snapshot });\n    }\n\n    return text;\n  }\n\n  //#endregion\n}\n","import { Component, computed, inject, input, ChangeDetectionStrategy } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { NavigationService } from '../../services/navigation.service';\nimport { Icon, IconName } from '@filip.mazev/blocks/icons';\nimport { BxA11yService } from '@filip.mazev/blocks/core';\n\n@Component({\n  selector: 'bx-breadcrumbs',\n  imports: [RouterLink, Icon],\n  templateUrl: './breadcrumbs.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styleUrl: './breadcrumbs.scss'\n})\nexport class Breadcrumbs {\n  private readonly navigationService = inject(NavigationService);\n  private readonly a11y = inject(BxA11yService);\n\n  protected readonly isAnimated = computed(() => {\n    return !this.a11y.isReducedMotion();\n  });\n\n  public readonly minimumBreadcrumbs = input<number>(2);\n  public readonly divider = input<IconName>('chevron-right');\n\n  protected showBreadcumbs = computed(() => {\n    const minimum = Math.max(1, this.minimumBreadcrumbs());\n    return this.current().breadcrumbs.length >= minimum;\n  });\n\n  protected ariaLabel = computed(() => {\n    const labels = this.current()\n      .breadcrumbs.map((crumb) => crumb.label)\n      .join(' > ');\n    return `Breadcrumbs: ${labels}`;\n  });\n\n  protected current = this.navigationService.current;\n}\n","@if(showBreadcumbs()) {\n<nav class=\"breadcrumbs\" [attr.aria-label]=\"ariaLabel()\">\n    @for (crumb of current().breadcrumbs; track crumb.route; let last = $last) {\n        @if (last) {\n        <span class=\"crumb last\" aria-current=\"page\">{{ crumb.label }}</span>\n        } @else {\n        <a class=\"crumb\" [routerLink]=\"crumb.route\">{{ crumb.label }}</a>\n        <bx-icon [name]=\"divider()\" size=\"16\" class=\"breadcrumb-separator\" />\n        }\n    }\n</nav>\n}\n","import { Strict } from '@filip.mazev/blocks/core';\nimport { INavMeta } from '../interfaces/inav-meta.interface';\nimport { INavigationConfig } from '../interfaces/inavigation-config.interface';\nimport { NAVIGATION_CONFIG } from '../tokens/navigation-config.token';\nimport { Route } from '@angular/router';\nimport { INavigationSectionConfig } from '../interfaces/inavigation-section-config.interface';\n\n/** Declares UI sections and binds route metadata to their literal IDs. */\nexport function defineNavigation<const TSections extends readonly INavigationSectionConfig[]>(\n  config: Omit<INavigationConfig, 'sections'> & { sections: TSections }\n) {\n  return {\n    config,\n    withNav<T extends INavMeta<TSections[number]['id']>>(route: Route, nav: Strict<T, INavMeta<TSections[number]['id']>>): Route {\n      return withNav(route, nav);\n    }\n  };\n}\n\n/**\n *\n * @param config\n * This function is a helper to provide the navigation configuration in your Angular application.\n * It takes an `INavigationConfig` object as an argument and returns an array of providers that can be used in the `providers` array of your Angular module.\n * By using this function, you can easily set up the navigation configuration for your application without having to manually create the provider object each time.\n */\nexport function provideNavigation(config: INavigationConfig) {\n  return [\n    {\n      provide: NAVIGATION_CONFIG,\n      useValue: config\n    }\n  ];\n}\n\n/**\n *\n * @param route\n * @param nav\n * This function is a helper to attach navigation metadata to Angular routes. It takes an Angular `Route` object and a navigation metadata object of type `Strict<T, INavMeta>`, where `T`\n * is a generic type that can be used to enforce specific properties on the navigation metadata.\n * The function returns a new `Route` object with the provided navigation metadata merged into the existing route data under the 'nav' property.\n * This allows you to easily associate navigation information with your routes, which can then be used by navigation components to generate menus, breadcrumbs, etc.\n */\nexport function withNav<T extends INavMeta>(route: Route, nav: Strict<T, INavMeta>): Route {\n  const existingNav = (route.data?.['nav'] as INavMeta | undefined) ?? {};\n\n  return {\n    ...route,\n    data: {\n      ...(route.data ?? {}),\n      nav: {\n        ...existingNav,\n        ...nav\n      }\n    }\n  };\n}\n"],"mappings":"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"}

package/fesm2022/filip.mazev-blocks-primitives.mjs

@@ -5,7 +5,7 @@ import { BX_I18N, BxA11yService, BxOverlayPositionService, BxShortcutService, in
 import { Icon } from "@filip.mazev/blocks/icons";
 import { Overlay } from "@angular/cdk/overlay";
 import { ComponentPortal, TemplatePortal } from "@angular/cdk/portal";
-import { createGlassTransition } from "@filip.mazev/blocks/effects/runtime";
+import { createGlassTransition, inheritGlassLighting } from "@filip.mazev/blocks/effects/runtime";
 import { isPlatformBrowser } from "@angular/common";
 import { Subscription } from "rxjs";
 var Tooltip = class Tooltip {
@@ -43,16 +43,14 @@ var Tooltip = class Tooltip {
 		} },
 		ngImport: i0,
 		template: "<div class=\"bx-tooltip-surface\" bxSurface [class.bx-tooltip-animated]=\"isAnimated()\">\n    @if (resolvedText()) {\n    {{ resolvedText() }}\n    }\n</div>",
-		styles: [":host{display:block;pointer-events:none;z-index:600}.bx-tooltip-surface[data-bx-surface]{position:relative;padding:.25rem .5rem;border:1px solid var(--bx-border-default);border-radius:.25rem;font-size:.75rem;font-family:inherit;max-width:min(22rem,100vw - 1.5rem);white-space:normal;overflow-wrap:anywhere;--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--bx-glass-min-opacity: 1;--bx-glass-decoration-opacity: 0;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-tooltip-surface[data-bx-surface]:after{content:\"\";position:absolute;z-index:2;width:.5rem;height:.5rem;box-sizing:border-box;border-radius:0;background:var(--bx-glass-surface);border:0 solid var(--bx-border-default);transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}:host-context(.bx-overlay-pos-bottom) .bx-tooltip-surface:after{top:-1px;left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-top-width:1px;border-left-width:1px}:host-context(.bx-overlay-pos-top) .bx-tooltip-surface:after{top:calc(100% + 1px);left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-right-width:1px;border-bottom-width:1px}:host-context(.bx-overlay-pos-left) .bx-tooltip-surface:after{left:calc(100% + 1px);top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-top-width:1px;border-right-width:1px}:host-context(.bx-overlay-pos-right) .bx-tooltip-surface:after{left:-1px;top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-bottom-width:1px;border-left-width:1px}@media(forced-colors:active){.bx-tooltip-surface[data-bx-surface]:after{background:Canvas;border-color:CanvasText}}\n"],
+		styles: [":host{display:block;pointer-events:none;z-index:600}.bx-tooltip-surface[data-bx-surface]{position:relative;padding:.25rem .5rem;border:1px solid var(--bx-glass-edge);border-radius:var(--bx-glass-radius, var(--bx-rounded-sm, .25rem));font-size:.75rem;font-family:inherit;max-width:min(22rem,100vw - 1.5rem);white-space:normal;overflow-wrap:anywhere;--bx-glass-unified-lighting: 1;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-default);--bx-glass-text: var(--bx-text-primary);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--bx-glass-min-opacity: 1;--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: .35;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-tooltip-surface[data-bx-surface]:after{content:\"\";position:absolute;z-index:2;width:.5rem;height:.5rem;box-sizing:border-box;border-radius:0;background:var(--bx-glass-surface);border:0 solid var(--bx-tooltip-arrow-edge, var(--bx-glass-edge));transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}@media(prefers-contrast:more){.bx-tooltip-surface[data-bx-surface]{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-edge: currentcolor}.bx-tooltip-surface[data-bx-surface]:after{border-color:currentcolor}}:host-context(.bx-overlay-pos-bottom) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-top, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-bottom) .bx-tooltip-surface:after{top:-1px;left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-top-width:1px;border-left-width:1px}:host-context(.bx-overlay-pos-top) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-bottom, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-top) .bx-tooltip-surface:after{top:calc(100% + 1px);left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-right-width:1px;border-bottom-width:1px}:host-context(.bx-overlay-pos-left) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-right, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-left) .bx-tooltip-surface:after{left:calc(100% + 1px);top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-top-width:1px;border-right-width:1px}:host-context(.bx-overlay-pos-right) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-left, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-right) .bx-tooltip-surface:after{left:-1px;top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-bottom-width:1px;border-left-width:1px}@media(forced-colors:active){.bx-tooltip-surface[data-bx-surface]:after{background:Canvas;border-color:CanvasText}}\n"],
 		dependencies: [{
 			kind: "directive",
 			type: BxSurfaceDirective,
 			selector: "[bxSurface]",
 			inputs: [
-				"bxSurface",
 				"bxSurfaceInteractive",
-				"bxSurfaceBlur",
-				"bxSurfaceTint",
+				"bxSurfaceGlassiness",
 				"bxSurfaceEmission",
 				"bxSurfaceFocusEmission",
 				"bxReducedTransparency"
@@ -74,7 +72,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [BxSurfaceDirective],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<div class=\"bx-tooltip-surface\" bxSurface [class.bx-tooltip-animated]=\"isAnimated()\">\n    @if (resolvedText()) {\n    {{ resolvedText() }}\n    }\n</div>",
-			styles: [":host{display:block;pointer-events:none;z-index:600}.bx-tooltip-surface[data-bx-surface]{position:relative;padding:.25rem .5rem;border:1px solid var(--bx-border-default);border-radius:.25rem;font-size:.75rem;font-family:inherit;max-width:min(22rem,100vw - 1.5rem);white-space:normal;overflow-wrap:anywhere;--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--bx-glass-min-opacity: 1;--bx-glass-decoration-opacity: 0;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-tooltip-surface[data-bx-surface]:after{content:\"\";position:absolute;z-index:2;width:.5rem;height:.5rem;box-sizing:border-box;border-radius:0;background:var(--bx-glass-surface);border:0 solid var(--bx-border-default);transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}:host-context(.bx-overlay-pos-bottom) .bx-tooltip-surface:after{top:-1px;left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-top-width:1px;border-left-width:1px}:host-context(.bx-overlay-pos-top) .bx-tooltip-surface:after{top:calc(100% + 1px);left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-right-width:1px;border-bottom-width:1px}:host-context(.bx-overlay-pos-left) .bx-tooltip-surface:after{left:calc(100% + 1px);top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-top-width:1px;border-right-width:1px}:host-context(.bx-overlay-pos-right) .bx-tooltip-surface:after{left:-1px;top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-bottom-width:1px;border-left-width:1px}@media(forced-colors:active){.bx-tooltip-surface[data-bx-surface]:after{background:Canvas;border-color:CanvasText}}\n"]
+			styles: [":host{display:block;pointer-events:none;z-index:600}.bx-tooltip-surface[data-bx-surface]{position:relative;padding:.25rem .5rem;border:1px solid var(--bx-glass-edge);border-radius:var(--bx-glass-radius, var(--bx-rounded-sm, .25rem));font-size:.75rem;font-family:inherit;max-width:min(22rem,100vw - 1.5rem);white-space:normal;overflow-wrap:anywhere;--bx-glass-unified-lighting: 1;--bx-glass-surface: var(--bx-bg-neutral);--bx-glass-edge: var(--bx-border-default);--bx-glass-text: var(--bx-text-primary);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--bx-glass-min-opacity: 1;--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: .35;-webkit-backdrop-filter:none;backdrop-filter:none}.bx-tooltip-surface[data-bx-surface]:after{content:\"\";position:absolute;z-index:2;width:.5rem;height:.5rem;box-sizing:border-box;border-radius:0;background:var(--bx-glass-surface);border:0 solid var(--bx-tooltip-arrow-edge, var(--bx-glass-edge));transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}@media(prefers-contrast:more){.bx-tooltip-surface[data-bx-surface]{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-edge: currentcolor}.bx-tooltip-surface[data-bx-surface]:after{border-color:currentcolor}}:host-context(.bx-overlay-pos-bottom) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-top, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-bottom) .bx-tooltip-surface:after{top:-1px;left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-top-width:1px;border-left-width:1px}:host-context(.bx-overlay-pos-top) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-bottom, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-top) .bx-tooltip-surface:after{top:calc(100% + 1px);left:clamp(.75rem,var(--bx-tooltip-arrow-x, 50%),100% - .75rem);border-right-width:1px;border-bottom-width:1px}:host-context(.bx-overlay-pos-left) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-right, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-left) .bx-tooltip-surface:after{left:calc(100% + 1px);top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-top-width:1px;border-right-width:1px}:host-context(.bx-overlay-pos-right) .bx-tooltip-surface{--bx-tooltip-arrow-edge: var(--bx-glass-lit-edge-left, var(--bx-glass-edge))}:host-context(.bx-overlay-pos-right) .bx-tooltip-surface:after{left:-1px;top:clamp(.5rem,var(--bx-tooltip-arrow-y, 50%),100% - .5rem);border-bottom-width:1px;border-left-width:1px}@media(forced-colors:active){.bx-tooltip-surface[data-bx-surface]:after{background:Canvas;border-color:CanvasText}}\n"]
 		}]
 	}],
 	propDecorators: { text: [{
@@ -106,17 +104,15 @@ var Menu = class Menu {
 		isStandalone: true,
 		selector: "bx-menu",
 		ngImport: i0,
-		template: "<div bxSurface class=\"bx-menu-wrapper\" [class.bx-menu-animated]=\"isAnimated()\">\n    <ng-content></ng-content>\n</div>",
-		styles: [":host{display:block}.bx-menu-wrapper{background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-subtle);border-radius:.25rem;box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;padding:.25rem;display:flex;flex-direction:column;min-width:12rem}.bx-menu-wrapper.bx-menu-animated{transition:opacity .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1)}.bx-menu-wrapper{transform-origin:top}.bx-menu-wrapper.is-hidden{opacity:0;transform:scaleY(.95);pointer-events:none}:host([data-bx-surface]){border-radius:var(--bx-glass-radius, .25rem);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);color:var(--bx-glass-text, var(--bx-text-primary))}:host([data-bx-surface]) .bx-menu-wrapper{background:transparent;border-color:transparent;border-radius:inherit;box-shadow:none}[data-bx-surface]{--bx-glass-min-opacity: .8}\n"],
+		template: "<div bxSurface role=\"menu\" class=\"bx-menu-wrapper\" [class.bx-menu-animated]=\"isAnimated()\">\n    <ng-content></ng-content>\n</div>\n",
+		styles: [":host{display:block}.bx-menu-wrapper{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-min-opacity: 0;--bx-glass-decoration-opacity: 1;--bx-glass-rim-visibility: 1;--bx-glass-unified-lighting: 0;--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);background-color:var(--bx-glass-surface);border:1px solid var(--bx-glass-edge);border-radius:var(--bx-glass-radius, var(--bx-rounded-lg, .75rem));box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;padding:.25rem;display:flex;flex-direction:column;min-width:12rem}.bx-menu-wrapper.bx-menu-animated{transition:transform .2s cubic-bezier(.25,.8,.25,1)}.bx-menu-wrapper{transform-origin:top}.bx-menu-wrapper.is-hidden{opacity:0;transform:scaleY(.95);pointer-events:none}:host([data-bx-surface]){border-radius:var(--bx-glass-radius, var(--bx-rounded-lg, .75rem));--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);color:var(--bx-glass-text, var(--bx-text-primary))}:host([data-bx-surface]) .bx-menu-wrapper{background:transparent;border-color:transparent;border-radius:inherit;box-shadow:none}\n"],
 		dependencies: [{
 			kind: "directive",
 			type: BxSurfaceDirective,
 			selector: "[bxSurface]",
 			inputs: [
-				"bxSurface",
 				"bxSurfaceInteractive",
-				"bxSurfaceBlur",
-				"bxSurfaceTint",
+				"bxSurfaceGlassiness",
 				"bxSurfaceEmission",
 				"bxSurfaceFocusEmission",
 				"bxReducedTransparency"
@@ -137,8 +133,8 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "bx-menu",
 			imports: [BxSurfaceDirective],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<div bxSurface class=\"bx-menu-wrapper\" [class.bx-menu-animated]=\"isAnimated()\">\n    <ng-content></ng-content>\n</div>",
-			styles: [":host{display:block}.bx-menu-wrapper{background-color:var(--bx-bg-surface);border:1px solid var(--bx-border-subtle);border-radius:.25rem;box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;padding:.25rem;display:flex;flex-direction:column;min-width:12rem}.bx-menu-wrapper.bx-menu-animated{transition:opacity .2s cubic-bezier(.25,.8,.25,1),transform .2s cubic-bezier(.25,.8,.25,1)}.bx-menu-wrapper{transform-origin:top}.bx-menu-wrapper.is-hidden{opacity:0;transform:scaleY(.95);pointer-events:none}:host([data-bx-surface]){border-radius:var(--bx-glass-radius, .25rem);--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);color:var(--bx-glass-text, var(--bx-text-primary))}:host([data-bx-surface]) .bx-menu-wrapper{background:transparent;border-color:transparent;border-radius:inherit;box-shadow:none}[data-bx-surface]{--bx-glass-min-opacity: .8}\n"]
+			template: "<div bxSurface role=\"menu\" class=\"bx-menu-wrapper\" [class.bx-menu-animated]=\"isAnimated()\">\n    <ng-content></ng-content>\n</div>\n",
+			styles: [":host{display:block}.bx-menu-wrapper{--bx-glass-surface: var(--bx-bg-surface);--bx-glass-text: var(--bx-text-primary);--bx-glass-edge: var(--bx-border-default);--bx-glass-min-opacity: 0;--bx-glass-decoration-opacity: 1;--bx-glass-rim-visibility: 1;--bx-glass-unified-lighting: 0;--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);background-color:var(--bx-glass-surface);border:1px solid var(--bx-glass-edge);border-radius:var(--bx-glass-radius, var(--bx-rounded-lg, .75rem));box-shadow:0 2px 4px #0000001a,0 1px 2px -1px #0000001a;padding:.25rem;display:flex;flex-direction:column;min-width:12rem}.bx-menu-wrapper.bx-menu-animated{transition:transform .2s cubic-bezier(.25,.8,.25,1)}.bx-menu-wrapper{transform-origin:top}.bx-menu-wrapper.is-hidden{opacity:0;transform:scaleY(.95);pointer-events:none}:host([data-bx-surface]){border-radius:var(--bx-glass-radius, var(--bx-rounded-lg, .75rem));--bx-glass-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);color:var(--bx-glass-text, var(--bx-text-primary))}:host([data-bx-surface]) .bx-menu-wrapper{background:transparent;border-color:transparent;border-radius:inherit;box-shadow:none}\n"]
 		}]
 	}]
 });
@@ -160,6 +156,7 @@ var MenuItem = class MenuItem {
 	icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
 	endIcon = input(void 0, ...ngDevMode ? [{ debugName: "endIcon" }] : /* istanbul ignore next */ []);
 	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	wrapLabel = input(false, ...ngDevMode ? [{ debugName: "wrapLabel" }] : /* istanbul ignore next */ []);
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 	danger = input(false, ...ngDevMode ? [{ debugName: "danger" }] : /* istanbul ignore next */ []);
 	shortcut = input(void 0, ...ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []);
@@ -208,6 +205,13 @@ var MenuItem = class MenuItem {
 				isRequired: false,
 				transformFunction: null
 			},
+			wrapLabel: {
+				classPropertyName: "wrapLabel",
+				publicName: "wrapLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			disabled: {
 				classPropertyName: "disabled",
 				publicName: "disabled",
@@ -232,8 +236,8 @@ var MenuItem = class MenuItem {
 		},
 		outputs: { action: "action" },
 		ngImport: i0,
-		template: "<button type=\"button\" [disabled]=\"disabled()\" class=\"bx-menu-item-btn\" [class.is-disabled]=\"disabled()\" [class.is-danger]=\"danger()\"\n    [class.bx-menu-item-animated]=\"isAnimated()\" (click)=\"onClick($event)\">\n\n    @if (icon()) {\n    <bx-icon class=\"bx-icon-pos-start\" [name]=\"icon()!\" size=\"20\" />\n    }\n\n    <span class=\"bx-menu-item-content\">\n        @if (resolvedLabel()) {\n        {{ resolvedLabel() }}\n        } @else {\n        <ng-content></ng-content>\n        }\n    </span>\n\n    @if (resolvedShortcut()) {\n    <span class=\"bx-menu-item-shortcut\">\n        @for (key of resolvedShortcut(); track $index) {\n        <kbd>{{ key }}</kbd>\n        }\n    </span>\n    }\n\n    @if (endIcon()) {\n    <bx-icon class=\"bx-icon-pos-end\" [name]=\"endIcon()!\" size=\"20\" />\n    }\n</button>",
-		styles: [":host{display:block;width:100%}.bx-menu-item-btn{width:100%;display:flex;align-items:center;background:transparent;border:none;padding:.5rem .75rem;cursor:pointer;font-family:inherit;font-size:.875rem;text-align:left;border-radius:.25rem;color:var(--bx-text-primary)}.bx-menu-item-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}.bx-menu-item-btn.bx-menu-item-animated{transition:background-color .1s ease-in-out,color .1s ease-in-out}.bx-menu-item-btn.bx-menu-item-animated .bx-menu-item-shortcut{transition:color .1s ease-in-out}.bx-menu-item-btn:hover:not(.is-disabled){background-color:var(--bx-bg-element-hover)}.bx-menu-item-btn:hover:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn:active:not(.is-disabled){background-color:var(--bx-bg-element-active)}.bx-menu-item-btn:active:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn.is-danger{color:var(--bx-text-danger)}.bx-menu-item-btn.is-danger .bx-menu-item-shortcut{color:var(--bx-text-danger);opacity:.7}.bx-menu-item-btn.is-danger:hover:not(.is-disabled){background-color:var(--bx-bg-danger-hover)}.bx-menu-item-btn.is-danger:active:not(.is-disabled){background-color:var(--bx-bg-danger-active)}.bx-menu-item-btn.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.bx-menu-item-content{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;text-align:left}.bx-menu-item-shortcut{display:flex;align-items:center;gap:.15rem;margin-left:1.5rem;color:var(--bx-text-secondary);font-size:.875rem}.bx-menu-item-shortcut kbd{font-family:inherit;background:transparent;border:none;box-shadow:none;padding:0;margin:0;color:inherit}\n"],
+		template: "<button bxSurface [bxSurfaceEmission]=\"danger() ? 'var(--bx-text-danger)' : 'var(--bx-primary)'\" type=\"button\" role=\"menuitem\" [disabled]=\"disabled()\" class=\"bx-menu-item-btn\" [class.is-disabled]=\"disabled()\" [class.is-danger]=\"danger()\"\n    [class.bx-menu-item-animated]=\"isAnimated()\" (click)=\"onClick($event)\">\n\n    @if (icon()) {\n    <bx-icon class=\"bx-icon-pos-start\" [name]=\"icon()!\" size=\"20\" />\n    }\n\n    <span class=\"bx-menu-item-content\" [class.bx-menu-item-content-wrapped]=\"wrapLabel()\">\n        @if (resolvedLabel()) {\n        {{ resolvedLabel() }}\n        } @else {\n        <ng-content></ng-content>\n        }\n    </span>\n\n    @if (resolvedShortcut()) {\n    <span class=\"bx-menu-item-shortcut\">\n        @for (key of resolvedShortcut(); track $index) {\n        <kbd>{{ key }}</kbd>\n        }\n    </span>\n    }\n\n    @if (endIcon()) {\n    <bx-icon class=\"bx-icon-pos-end\" [name]=\"endIcon()!\" size=\"20\" />\n    }\n</button>\n",
+		styles: [":host{display:block;width:100%}.bx-menu-item-btn{width:100%;display:flex;align-items:center;background:transparent!important;border:none;padding:.5rem .75rem;cursor:pointer;font-family:inherit;font-size:.875rem;text-align:left;border-radius:max(0px,var(--bx-glass-radius, var(--bx-rounded-lg, .75rem)) - .25rem);color:var(--bx-text-primary);--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: 0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}.bx-menu-item-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}.bx-menu-item-btn.bx-menu-item-animated{transition:background-color .1s ease-in-out,color .1s ease-in-out}.bx-menu-item-btn.bx-menu-item-animated .bx-menu-item-shortcut{transition:color .1s ease-in-out}.bx-menu-item-btn:hover:not(.is-disabled){background:var(--bx-bg-element-hover)!important}.bx-menu-item-btn:hover:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn:active:not(.is-disabled){background:var(--bx-bg-element-active)!important}.bx-menu-item-btn:active:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn.is-danger{color:var(--bx-text-danger)}.bx-menu-item-btn.is-danger .bx-menu-item-shortcut{color:var(--bx-text-danger);opacity:.7}.bx-menu-item-btn.is-danger:hover:not(.is-disabled){background:var(--bx-bg-danger-hover)!important}.bx-menu-item-btn.is-danger:active:not(.is-disabled){background:var(--bx-bg-danger-active)!important}.bx-menu-item-btn.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.bx-menu-item-content{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;text-align:left}.bx-menu-item-content-wrapped{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}.bx-menu-item-shortcut{display:flex;align-items:center;gap:.15rem;margin-left:1.5rem;color:var(--bx-text-secondary);font-size:.875rem}.bx-menu-item-shortcut kbd{font-family:inherit;background:transparent;border:none;box-shadow:none;padding:0;margin:0;color:inherit}\n"],
 		dependencies: [{
 			kind: "component",
 			type: Icon,
@@ -247,6 +251,18 @@ var MenuItem = class MenuItem {
 				"decorative",
 				"ariaLabel"
 			]
+		}, {
+			kind: "directive",
+			type: BxSurfaceDirective,
+			selector: "[bxSurface]",
+			inputs: [
+				"bxSurfaceInteractive",
+				"bxSurfaceGlassiness",
+				"bxSurfaceEmission",
+				"bxSurfaceFocusEmission",
+				"bxReducedTransparency"
+			],
+			exportAs: ["bxSurface"]
 		}],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
@@ -260,10 +276,10 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "bx-menu-item",
-			imports: [Icon],
+			imports: [Icon, BxSurfaceDirective],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<button type=\"button\" [disabled]=\"disabled()\" class=\"bx-menu-item-btn\" [class.is-disabled]=\"disabled()\" [class.is-danger]=\"danger()\"\n    [class.bx-menu-item-animated]=\"isAnimated()\" (click)=\"onClick($event)\">\n\n    @if (icon()) {\n    <bx-icon class=\"bx-icon-pos-start\" [name]=\"icon()!\" size=\"20\" />\n    }\n\n    <span class=\"bx-menu-item-content\">\n        @if (resolvedLabel()) {\n        {{ resolvedLabel() }}\n        } @else {\n        <ng-content></ng-content>\n        }\n    </span>\n\n    @if (resolvedShortcut()) {\n    <span class=\"bx-menu-item-shortcut\">\n        @for (key of resolvedShortcut(); track $index) {\n        <kbd>{{ key }}</kbd>\n        }\n    </span>\n    }\n\n    @if (endIcon()) {\n    <bx-icon class=\"bx-icon-pos-end\" [name]=\"endIcon()!\" size=\"20\" />\n    }\n</button>",
-			styles: [":host{display:block;width:100%}.bx-menu-item-btn{width:100%;display:flex;align-items:center;background:transparent;border:none;padding:.5rem .75rem;cursor:pointer;font-family:inherit;font-size:.875rem;text-align:left;border-radius:.25rem;color:var(--bx-text-primary)}.bx-menu-item-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}.bx-menu-item-btn.bx-menu-item-animated{transition:background-color .1s ease-in-out,color .1s ease-in-out}.bx-menu-item-btn.bx-menu-item-animated .bx-menu-item-shortcut{transition:color .1s ease-in-out}.bx-menu-item-btn:hover:not(.is-disabled){background-color:var(--bx-bg-element-hover)}.bx-menu-item-btn:hover:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn:active:not(.is-disabled){background-color:var(--bx-bg-element-active)}.bx-menu-item-btn:active:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn.is-danger{color:var(--bx-text-danger)}.bx-menu-item-btn.is-danger .bx-menu-item-shortcut{color:var(--bx-text-danger);opacity:.7}.bx-menu-item-btn.is-danger:hover:not(.is-disabled){background-color:var(--bx-bg-danger-hover)}.bx-menu-item-btn.is-danger:active:not(.is-disabled){background-color:var(--bx-bg-danger-active)}.bx-menu-item-btn.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.bx-menu-item-content{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;text-align:left}.bx-menu-item-shortcut{display:flex;align-items:center;gap:.15rem;margin-left:1.5rem;color:var(--bx-text-secondary);font-size:.875rem}.bx-menu-item-shortcut kbd{font-family:inherit;background:transparent;border:none;box-shadow:none;padding:0;margin:0;color:inherit}\n"]
+			template: "<button bxSurface [bxSurfaceEmission]=\"danger() ? 'var(--bx-text-danger)' : 'var(--bx-primary)'\" type=\"button\" role=\"menuitem\" [disabled]=\"disabled()\" class=\"bx-menu-item-btn\" [class.is-disabled]=\"disabled()\" [class.is-danger]=\"danger()\"\n    [class.bx-menu-item-animated]=\"isAnimated()\" (click)=\"onClick($event)\">\n\n    @if (icon()) {\n    <bx-icon class=\"bx-icon-pos-start\" [name]=\"icon()!\" size=\"20\" />\n    }\n\n    <span class=\"bx-menu-item-content\" [class.bx-menu-item-content-wrapped]=\"wrapLabel()\">\n        @if (resolvedLabel()) {\n        {{ resolvedLabel() }}\n        } @else {\n        <ng-content></ng-content>\n        }\n    </span>\n\n    @if (resolvedShortcut()) {\n    <span class=\"bx-menu-item-shortcut\">\n        @for (key of resolvedShortcut(); track $index) {\n        <kbd>{{ key }}</kbd>\n        }\n    </span>\n    }\n\n    @if (endIcon()) {\n    <bx-icon class=\"bx-icon-pos-end\" [name]=\"endIcon()!\" size=\"20\" />\n    }\n</button>\n",
+			styles: [":host{display:block;width:100%}.bx-menu-item-btn{width:100%;display:flex;align-items:center;background:transparent!important;border:none;padding:.5rem .75rem;cursor:pointer;font-family:inherit;font-size:.875rem;text-align:left;border-radius:max(0px,var(--bx-glass-radius, var(--bx-rounded-lg, .75rem)) - .25rem);color:var(--bx-text-primary);--bx-glass-decoration-opacity: 0;--bx-glass-rim-visibility: 0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}.bx-menu-item-btn:focus-visible{outline:2px solid var(--bx-border-brand);outline-offset:-2px}.bx-menu-item-btn.bx-menu-item-animated{transition:background-color .1s ease-in-out,color .1s ease-in-out}.bx-menu-item-btn.bx-menu-item-animated .bx-menu-item-shortcut{transition:color .1s ease-in-out}.bx-menu-item-btn:hover:not(.is-disabled){background:var(--bx-bg-element-hover)!important}.bx-menu-item-btn:hover:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn:active:not(.is-disabled){background:var(--bx-bg-element-active)!important}.bx-menu-item-btn:active:not(.is-disabled) .bx-menu-item-shortcut{color:inherit;opacity:1}.bx-menu-item-btn.is-danger{color:var(--bx-text-danger)}.bx-menu-item-btn.is-danger .bx-menu-item-shortcut{color:var(--bx-text-danger);opacity:.7}.bx-menu-item-btn.is-danger:hover:not(.is-disabled){background:var(--bx-bg-danger-hover)!important}.bx-menu-item-btn.is-danger:active:not(.is-disabled){background:var(--bx-bg-danger-active)!important}.bx-menu-item-btn.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.bx-menu-item-content{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;text-align:left}.bx-menu-item-content-wrapped{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}.bx-menu-item-shortcut{display:flex;align-items:center;gap:.15rem;margin-left:1.5rem;color:var(--bx-text-secondary);font-size:.875rem}.bx-menu-item-shortcut kbd{font-family:inherit;background:transparent;border:none;box-shadow:none;padding:0;margin:0;color:inherit}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -291,6 +307,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		wrapLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "wrapLabel",
+				required: false
+			}]
+		}],
 		disabled: [{
 			type: i0.Input,
 			args: [{
@@ -333,6 +357,7 @@ var TooltipDirective = class TooltipDirective {
 	overlayRef = null;
 	transition;
 	disconnectTheme;
+	disconnectLighting;
 	positionSubscription;
 	keyboardSubscription;
 	revision = 0;
@@ -356,6 +381,7 @@ var TooltipDirective = class TooltipDirective {
 			pane.id = this.id;
 			pane.setAttribute("role", "tooltip");
 			this.disconnectTheme = this.zone.runOutsideAngular(() => inheritOverlayTheme(this.elementRef.nativeElement, pane));
+			this.disconnectLighting = inheritGlassLighting(pane, this.elementRef.nativeElement);
 			const component = this.overlayRef.attach(new ComponentPortal(Tooltip));
 			pane.style.pointerEvents = "none";
 			this.keyboardSubscription = this.overlayRef.keydownEvents().subscribe((event) => this.onEscape(event));
@@ -388,7 +414,8 @@ var TooltipDirective = class TooltipDirective {
 		const revision = ++this.revision;
 		this.removeDescription();
 		if (!this.overlayRef) return;
-		if (this.transition && !this.a11y.isReducedMotion()) this.zone.runOutsideAngular(() => this.transition.exit()).then(() => {
+		const transition = this.transition;
+		if (transition && !this.a11y.isReducedMotion()) this.zone.runOutsideAngular(() => transition.exit()).then(() => {
 			if (revision === this.revision) this.dispose();
 		}).catch(() => {
 			if (revision === this.revision) this.dispose();
@@ -438,6 +465,8 @@ var TooltipDirective = class TooltipDirective {
 		this.transition = void 0;
 		this.overlayRef?.dispose();
 		this.overlayRef = null;
+		this.disconnectLighting?.();
+		this.disconnectLighting = void 0;
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -544,6 +573,7 @@ var DropdownDirective = class DropdownDirective {
 	subscriptions = new Subscription();
 	revision = 0;
 	disconnectTheme;
+	disconnectLighting;
 	constructor() {
 		inject(DestroyRef).onDestroy(() => {
 			++this.revision;
@@ -562,7 +592,8 @@ var DropdownDirective = class DropdownDirective {
 	toggle(event) {
 		if (this.isDisabled()) return;
 		event?.stopPropagation();
-		this.isOpen() ? this.close() : this.open();
+		if (this.isOpen()) this.close();
+		else this.open();
 	}
 	onTriggerKeydown(event) {
 		if (this.bxTransition() === "none" || this.isDisabled() || this.isEditing(event.target)) return;
@@ -584,8 +615,8 @@ var DropdownDirective = class DropdownDirective {
 		overlay.overlayElement.inert = false;
 		overlay.overlayElement.style.removeProperty("pointer-events");
 		if (this.bxTransition() !== "none" && !this.a11y.isReducedMotion()) {
-			this.transition ??= this.zone.runOutsideAngular(() => createGlassTransition(this.elementRef.nativeElement, overlay.overlayElement));
-			this.zone.runOutsideAngular(() => this.transition.enter()).then(() => {
+			const transition = this.transition ??= this.zone.runOutsideAngular(() => createGlassTransition(this.elementRef.nativeElement, overlay.overlayElement));
+			this.zone.runOutsideAngular(() => transition.enter()).then(() => {
 				if (revision === this.revision && this.isOpen()) this.zone.run(() => this._state.set("open"));
 			}).catch(() => {
 				if (revision === this.revision && this.isOpen()) {
@@ -606,7 +637,8 @@ var DropdownDirective = class DropdownDirective {
 		if (restoreFocus || overlay.overlayElement.contains(source.ownerDocument.activeElement)) source.focus({ preventScroll: true });
 		overlay.overlayElement.inert = true;
 		overlay.overlayElement.style.pointerEvents = "none";
-		if (this.transition && !this.a11y.isReducedMotion()) this.zone.runOutsideAngular(() => this.transition.exit()).then(() => {
+		const transition = this.transition;
+		if (transition && !this.a11y.isReducedMotion()) this.zone.runOutsideAngular(() => transition.exit()).then(() => {
 			if (revision === this.revision && !this.isOpen()) this.zone.run(() => this.dispose());
 		}).catch(() => {
 			if (revision === this.revision && !this.isOpen()) this.dispose();
@@ -623,14 +655,17 @@ var DropdownDirective = class DropdownDirective {
 		const positionStrategy = this.positionBuilder.getElementStrategy(this.elementRef.nativeElement, this.placement(), 4);
 		const overlay = this.overlay.create({
 			positionStrategy,
-			scrollStrategy: this.overlay.scrollStrategies.reposition(),
+			scrollStrategy: this.overlay.scrollStrategies.noop(),
+			usePopover: !!this.elementRef.nativeElement.closest("dialog, [role=\"dialog\"], [role=\"alertdialog\"], bx-modal, bx-modal-core, [popover], .app-toolbar"),
 			hasBackdrop: this.bxTransition() === "none",
 			backdropClass: "cdk-overlay-transparent-backdrop"
 		});
 		this.overlayRef = overlay;
 		this.overlayId.set(overlay.overlayElement.id || null);
 		this.disconnectTheme = this.zone.runOutsideAngular(() => inheritOverlayTheme(this.elementRef.nativeElement, overlay.overlayElement));
+		this.disconnectLighting = inheritGlassLighting(overlay.overlayElement, this.elementRef.nativeElement);
 		this.subscriptions = new Subscription();
+		this.trackScroll(overlay, positionStrategy);
 		this.subscriptions.add(overlay.backdropClick().subscribe(() => this.close()));
 		this.subscriptions.add(overlay.outsidePointerEvents().subscribe((event) => {
 			if (!this.elementRef.nativeElement.contains(event.target)) this.close();
@@ -648,6 +683,22 @@ var DropdownDirective = class DropdownDirective {
 		overlay.attach(new TemplatePortal(this.bxDropdown(), this.vcr)).detectChanges();
 		overlay.updatePosition();
 	}
+	trackScroll(overlay, positionStrategy) {
+		const source = this.elementRef.nativeElement;
+		const view = source.ownerDocument.defaultView;
+		if (!view) return;
+		this.zone.runOutsideAngular(() => {
+			const reposition = (event) => {
+				const target = event.target;
+				if (overlay.hasAttached() && (target === view || target instanceof Node && target.contains(source))) positionStrategy.reapplyLastPosition();
+			};
+			view.addEventListener("scroll", reposition, {
+				capture: true,
+				passive: true
+			});
+			this.subscriptions.add(() => view.removeEventListener("scroll", reposition, true));
+		});
+	}
 	isDisabled() {
 		const element = this.elementRef.nativeElement;
 		return element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
@@ -693,6 +744,8 @@ var DropdownDirective = class DropdownDirective {
 		this.subscriptions.unsubscribe();
 		this.overlayRef?.dispose();
 		this.overlayRef = null;
+		this.disconnectLighting?.();
+		this.disconnectLighting = void 0;
 		this.overlayId.set(null);
 		this._isOpen.set(false);
 		this._state.set("closed");
@@ -820,6 +873,7 @@ var ContextMenuDirective = class ContextMenuDirective {
 	transition;
 	point;
 	disconnectTheme;
+	disconnectLighting;
 	subscriptions = new Subscription();
 	revision = 0;
 	constructor() {
@@ -837,7 +891,8 @@ var ContextMenuDirective = class ContextMenuDirective {
 		const revision = ++this.revision;
 		if (restoreFocus || this.overlayRef.overlayElement.contains(this.elementRef.nativeElement.ownerDocument.activeElement)) this.elementRef.nativeElement.focus({ preventScroll: true });
 		this.overlayRef.overlayElement.inert = true;
-		if (this.transition && !this.a11y.isReducedMotion()) this.zone.runOutsideAngular(() => this.transition.exit()).then(() => {
+		const transition = this.transition;
+		if (transition && !this.a11y.isReducedMotion()) this.zone.runOutsideAngular(() => transition.exit()).then(() => {
 			if (revision === this.revision) this.dispose();
 		}).catch(() => {
 			if (revision === this.revision) this.dispose();
@@ -861,22 +916,37 @@ var ContextMenuDirective = class ContextMenuDirective {
 		const source = this.elementRef.nativeElement;
 		this.overlayRef = this.overlay.create({
 			positionStrategy: this.positionBuilder.getCoordinateStrategy(x, y),
-			scrollStrategy: this.overlay.scrollStrategies.close(),
+			scrollStrategy: this.overlay.scrollStrategies.noop(),
+			usePopover: !!source.closest("dialog, [role=\"dialog\"], [role=\"alertdialog\"], bx-modal, bx-modal-core, [popover], .app-toolbar"),
 			hasBackdrop: true,
 			backdropClass: "cdk-overlay-transparent-backdrop"
 		});
 		this.subscriptions = new Subscription();
+		const win = source.ownerDocument.defaultView;
+		if (win) this.zone.runOutsideAngular(() => {
+			const closeOnScroll = (event) => {
+				const target = event.target;
+				if (this.overlayRef?.overlayElement.inert) return;
+				if (target === win || target instanceof Node && target.contains(source)) this.zone.run(() => this.close());
+			};
+			win.addEventListener("scroll", closeOnScroll, {
+				capture: true,
+				passive: true
+			});
+			this.subscriptions.add(() => win.removeEventListener("scroll", closeOnScroll, true));
+		});
 		this.subscriptions.add(this.overlayRef.backdropClick().subscribe(() => this.close()));
 		this.subscriptions.add(this.overlayRef.detachments().subscribe(() => this.dispose()));
 		this.subscriptions.add(this.overlayRef.keydownEvents().subscribe((event) => this.onMenuKey(event)));
 		const pane = this.overlayRef.overlayElement;
 		this.disconnectTheme = this.zone.runOutsideAngular(() => inheritOverlayTheme(source, pane));
+		this.disconnectLighting = inheritGlassLighting(pane, source);
 		this.overlayRef.attach(new TemplatePortal(this.bxContextMenu(), this.vcr)).detectChanges();
 		this.overlayRef.updatePosition();
 		if (!this.a11y.isReducedMotion()) {
-			this.point = source.ownerDocument.createElement("span");
-			this.point.setAttribute("aria-hidden", "true");
-			Object.assign(this.point.style, {
+			const point = source.ownerDocument.createElement("span");
+			point.setAttribute("aria-hidden", "true");
+			Object.assign(point.style, {
 				position: "fixed",
 				left: `${x}px`,
 				top: `${y}px`,
@@ -884,9 +954,11 @@ var ContextMenuDirective = class ContextMenuDirective {
 				height: "1px",
 				pointerEvents: "none"
 			});
-			source.ownerDocument.body.append(this.point);
-			this.transition = this.zone.runOutsideAngular(() => createGlassTransition(this.point, pane));
-			this.zone.runOutsideAngular(() => this.transition.enter()).catch(() => {
+			source.ownerDocument.body.append(point);
+			this.point = point;
+			const transition = this.zone.runOutsideAngular(() => createGlassTransition(point, pane));
+			this.transition = transition;
+			this.zone.runOutsideAngular(() => transition.enter()).catch(() => {
 				this.transition?.destroy();
 				this.transition = void 0;
 			});
@@ -926,6 +998,8 @@ var ContextMenuDirective = class ContextMenuDirective {
 		const overlay = this.overlayRef;
 		this.overlayRef = null;
 		overlay?.dispose();
+		this.disconnectLighting?.();
+		this.disconnectLighting = void 0;
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",