@nvidia-elements/core 2.7.3 → 2.8.1

package/dist/internal/utils/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","names":[],"sources":["../../../src/internal/utils/dom.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { GlobalStateService } from '../services/global.service.js';\nimport { LogService } from '../services/log.service.js';\nimport type { ElementDefinition } from '../types/index.js';\nimport { isFocusable } from './focus.js';\n\nexport function getChildren(node: Document | Node | HTMLElement): Element[] {\n  if (node instanceof Document && node.documentElement) {\n    return Array.from(node.documentElement.children); // root document children\n  } else if (node instanceof HTMLElement && node.shadowRoot) {\n    return Array.from(node.shadowRoot.children); // shadow root direct children\n  } else if (node instanceof HTMLSlotElement && node.assignedElements) {\n    const slotted = node.assignedElements(); // slotted elements\n    return slotted.length ? slotted : Array.from(node.children); // slot fallback\n  } else {\n    return Array.from((node as HTMLElement).children); // light DOM direct children\n  }\n}\n\nexport function generateId() {\n  const uint32 = self.crypto.getRandomValues(new Uint32Array(1))[0]!;\n  return `_${uint32.toString(16)}`;\n}\n\nexport function getAttributeChanges(element: HTMLElement, attr: string, fn: (attrValue: string | null) => void) {\n  fn(element.getAttribute(attr));\n  const observer = new MutationObserver(mutations => {\n    mutations.forEach(mutation => {\n      if (mutation.attributeName === attr) {\n        fn((mutation.target as HTMLElement).getAttribute(attr));\n      }\n    });\n  });\n  observer.observe(element, { attributes: true, subtree: true });\n  return observer;\n}\n\nexport function getAttributeListChanges(element: HTMLElement, attrs: string[], fn: (mutation: MutationRecord) => void) {\n  const observer = new MutationObserver(mutations => {\n    mutations.forEach(mutation => {\n      if (mutation.attributeName && attrs.includes(mutation.attributeName)) {\n        fn(mutation);\n      }\n    });\n  });\n  observer.observe(element, { attributes: true, subtree: true });\n  return observer;\n}\n\n/**\n * Appends styles to the render root of a given element. This is useful for\n * styles that apply outside the scope of the element's shadow\n * root such as UA styles --webkit-* that won't work in a ::slotted selector\n */\nexport function appendRootNodeStyle(host: HTMLElement, styles: string) {\n  const stylesheet = new CSSStyleSheet();\n  stylesheet.replaceSync(styles);\n  const root = host.getRootNode() as Document | ShadowRoot;\n  if (root.adoptedStyleSheets) {\n    const hasStyleSheet = root.adoptedStyleSheets\n      .map(s => styleSheetToString(s))\n      .find(s => s === styleSheetToString(stylesheet));\n    if (!hasStyleSheet) {\n      root.adoptedStyleSheets = [...Array.from(root.adoptedStyleSheets), stylesheet];\n    }\n  }\n  return stylesheet;\n}\n\nexport function styleSheetToString(stylesheet: CSSStyleSheet) {\n  return stylesheet.cssRules\n    ? Array.from(stylesheet.cssRules)\n        .map(rule => rule.cssText || '')\n        .join('\\n')\n    : '';\n}\n\n/** Intercepts a property setter on an element so `callback` fires on every assignment. Does not use a MutationObserver. */\nexport function getPropertyChanges(element: HTMLElement, key: string, callback: (value: unknown) => void) {\n  const proto = Object.getPrototypeOf(element);\n  const descriptor = Object.getOwnPropertyDescriptor(proto, key);\n  if (!descriptor) return;\n  const own = Object.getOwnPropertyDescriptor(element, key);\n  if (own && own.configurable === false) return;\n  Object.defineProperty(element, key, {\n    configurable: true,\n    get: descriptor.get,\n    set: (val: unknown) => {\n      descriptor.set!.call(element, val);\n      callback(val);\n    }\n  });\n\n  return () => {\n    if (own) {\n      Object.defineProperty(element, key, own);\n      return;\n    }\n\n    Reflect.deleteProperty(element, key);\n  };\n}\n\n/* used for cases of needing to know a property update outside of lit, example a native input value prop change */\nexport function getElementUpdate(element: HTMLElement, key: string, callback: (value: unknown) => void) {\n  if (element.hasAttribute(key)) {\n    callback(element.getAttribute(key));\n  } else if ((element as unknown as Record<string, unknown>)[key] !== undefined) {\n    callback((element as unknown as Record<string, unknown>)[key]);\n  }\n\n  const cleanupPropertyChanges = getPropertyChanges(element, key, callback);\n  const observer = getAttributeChanges(element, key, val => callback(val));\n  const disconnect = observer.disconnect.bind(observer);\n\n  observer.disconnect = () => {\n    cleanupPropertyChanges?.();\n    disconnect();\n  };\n\n  return observer;\n}\n\nexport function clickOutsideElementBounds(event: PointerEvent | MouseEvent, element: HTMLElement) {\n  const { left, right, top, bottom } = element.getBoundingClientRect();\n  return event.clientX < left || event.clientX > right || event.clientY < top || event.clientY > bottom;\n}\n\n/** parses number out of basic calc generated by the design tokens */\nexport function parseTokenNumber(value: string) {\n  return parseInt(value.includes('calc') ? value.split('*')[1]!.replace('px)', '').trim() : value, 10) || 0;\n}\n\n/** true if the browser supports scoped custom element registries */\nexport const supportsScopedRegistry =\n  globalThis.CustomElementRegistry && 'initialize' in CustomElementRegistry.prototype;\n\n/** defines an element with the given custom element registry */\nexport function defineElement(element: ElementDefinition, customElementRegistry: CustomElementRegistry) {\n  Object.entries(element.elementDefinitions ?? {})\n    .filter(([_tag, e]) => !customElementRegistry.get(e.metadata.tag))\n    .forEach(([_tag, e]) => {\n      defineElement(e, customElementRegistry);\n    });\n\n  if (!customElementRegistry.get(element.metadata.tag)) {\n    customElementRegistry.define(element.metadata.tag, element);\n\n    if (customElementRegistry === customElements) {\n      GlobalStateService.dispatch('NVE_ELEMENT_DEFINE', {\n        elementRegistry: { [element.metadata.tag]: element.metadata.version }\n      });\n    }\n  }\n}\n\n/** defines an element with the global custom element registry */\nexport function define(element: ElementDefinition) {\n  const { version } = element.metadata;\n\n  // if scoped registry supported, register only the root element to global registry\n  if (supportsScopedRegistry && !customElements.get(element.metadata.tag)) {\n    customElements.define(element.metadata.tag, element);\n    GlobalStateService.dispatch('NVE_ELEMENT_DEFINE', {\n      elementRegistry: { [element.metadata.tag]: element.metadata.version }\n    });\n  } else {\n    // if scoped registry not supported, register the element and all its children to the global registry\n    defineElement(element, customElements);\n  }\n\n  // warn on duplicate version\n  if (\n    GlobalStateService.state.elementRegistry[element.metadata.tag] !== version &&\n    globalThis?.location?.hostname === 'localhost'\n  ) {\n    void import('./audit-logs.js').then(m =>\n      console.warn(m.getDuplicatePackageVersionWarning(element.metadata.tag, version))\n    );\n  }\n}\n\nexport function isContextMenuClick(event: MouseEvent) {\n  return (event.buttons === 2 && !event.ctrlKey) || (event.buttons === 1 && event.ctrlKey);\n}\n\nexport function getFlattenedFocusableItems(element: Node, depth = 10) {\n  return getFlattenedDOMTree(element, depth).filter((e: HTMLElement) => isFocusable(e)) as HTMLElement[];\n}\n\n/**\n * Preserves visual DOM ordering when using slots within Shadow DOM\n * See more information/resources on Shadow DOM linear traversal\n * https://nolanlawson.com/2021/02/13/managing-focus-in-the-shadow-dom/\n * https://www.abeautifulsite.net/posts/querying-through-shadow-roots/\n */\nexport function getFlattenedDOMTree(node: Node, depth = 10): HTMLElement[] {\n  return (\n    Array.from(getChildren(node)).reduce(\n      (p: unknown[], n: Node) => [\n        ...p,\n        [n, [...Array.from(getChildren(n)).map(i => [i, getFlattenedDOMTree(i, depth)])]]\n      ],\n      []\n    ) as unknown as HTMLElement[]\n  ).flat(depth);\n}\n\nexport function validKeyNavigationCode(e: KeyboardEvent) {\n  return keynavCodes.has(e.code);\n}\n\nexport enum KeynavCode {\n  End = 'End',\n  Home = 'Home',\n  PageUp = 'PageUp',\n  PageDown = 'PageDown',\n  ArrowUp = 'ArrowUp',\n  ArrowDown = 'ArrowDown',\n  ArrowLeft = 'ArrowLeft',\n  ArrowRight = 'ArrowRight'\n}\n\nconst keynavCodes: Set<string> = new Set(Object.values(KeynavCode));\n\nexport function hasInvalidDOMGrid(rows: HTMLElement[]) {\n  return rows.some(row => row.children.length !== rows[0]!.children.length);\n}\n\nexport function removeEmptyTextNode(node: Node) {\n  if ((node as Text)?.wholeText?.trim() === '') {\n    (node as Text).remove();\n  }\n}\n\nexport function scrollBarWidth() {\n  const div = globalThis.document.createElement('div');\n  div.style.setProperty('width', '100px');\n  div.style.setProperty('height', '100px');\n  div.style.setProperty('overflow', 'scroll');\n  div.style.setProperty('position', 'absolute');\n  div.style.setProperty('top', '-9999px');\n  globalThis.document.body.appendChild(div);\n  const width = div.offsetWidth - div.clientWidth;\n  globalThis.document.body.removeChild(div);\n  return width;\n}\n\nexport function hasScrollBar(el: HTMLElement) {\n  return el.scrollHeight > el.clientHeight;\n}\n\nexport function hasHorizontalScrollBar(el: HTMLElement) {\n  return el.scrollWidth > el.clientWidth;\n}\n\nexport function endOfScrollBox(element: HTMLElement, offset = 0) {\n  return element.scrollTop + element.offsetHeight + offset >= element.scrollHeight;\n}\n\nexport async function openEyeDropper(): Promise<string> {\n  const EyeDropperConstructor = (\n    globalThis as unknown as { EyeDropper?: new () => { open: () => Promise<{ sRGBHex: string }> } }\n  ).EyeDropper;\n\n  if (!EyeDropperConstructor) {\n    LogService.warn('EyeDropper API is unavailable');\n    return '';\n  }\n\n  try {\n    return (await new EyeDropperConstructor().open()).sRGBHex;\n  } catch (e) {\n    LogService.warn(`EyeDropper selection failed: ${(e as Error).message}`);\n    return '';\n  }\n}\n\n/**\n * provides a object with key/value of the currently applied design tokens\n */\nexport function getThemeTokens(element = globalThis.document.querySelector(':root')!) {\n  // default root or provided element\n  const styles = getComputedStyle(element);\n  let parent: CSSStyleSheet[] = [];\n\n  // check for parent iframe, same domain iframes change how the browser accesses style sheets\n  try {\n    parent = Array.from(globalThis.parent.document.styleSheets);\n  } catch {\n    // if not accessible, skip\n  }\n\n  return [...parent, ...Array.from(globalThis.document.styleSheets)]\n    .reduce((finalArr: string[][], sheet) => {\n      let rules: CSSRule[] = [];\n      try {\n        rules = [...sheet.cssRules];\n      } catch {\n        // if the style sheet is not accessible, skip\n      }\n      return finalArr.concat(\n        rules\n          .filter(rule => rule.type === 1)\n          .reduce((propValArr: string[][], rule) => {\n            const props = [...(rule as CSSStyleRule).style]\n              .filter((p: string) => p.trim().includes('--nve'))\n              .map((propName: string) => [\n                propName.trim(),\n                (rule as CSSStyleRule).style.getPropertyValue(propName).trim()\n              ]);\n            return [...propValArr, ...props];\n          }, [])\n      );\n    }, [])\n    .reduce(\n      (p: Record<string, string>, token: string[]) => ({ ...p, [token[0]!]: styles.getPropertyValue(token[0]!) }),\n      {}\n    );\n}\n\nexport function removeEmptySlotWhitespace(slot: HTMLSlotElement) {\n  if (slotContainsOnlyWhitespace(slot)) {\n    slot.assignedNodes().forEach((node: Node) => node.parentNode?.removeChild(node));\n  }\n}\n\nexport function slotContainsOnlyWhitespace(slot: HTMLSlotElement) {\n  const hasNoElements = !slot.assignedNodes().find(i => i.nodeType !== Node.TEXT_NODE);\n  const hasOnlyEmptyTextNodes = !slot\n    .assignedNodes()\n    .find(i => i.nodeType === Node.TEXT_NODE && (i.textContent ?? '').trim() !== '');\n  return hasNoElements && hasOnlyEmptyTextNodes;\n}\n\nexport function applySlotContentStates(slot: HTMLSlotElement, element: HTMLElement & { _internals: ElementInternals }) {\n  const nodes = slot.assignedNodes();\n  const name = slot.name ?? 'slot';\n\n  if (nodes.length) {\n    element._internals.states.add(`has-${name}`);\n  } else {\n    element._internals.states.delete(`has-${name}`);\n  }\n}\n\nexport function getDisplayValue(option?: { label?: string; value?: string }): string {\n  return option?.label || option?.value || '';\n}\n\n/** determines if HTML element matches the given component tag */\nexport function matchesElementName(element: Partial<HTMLElement>, component: { metadata: { tag: string } }) {\n  return element.localName === component.metadata.tag;\n}\n\nexport function createGhostElement(sourceElement: HTMLElement) {\n  const ghost = globalThis.document.createElement('div');\n  const { width } = sourceElement.getBoundingClientRect();\n  ghost.setAttribute('nve-ghost', '');\n  ghost.style.minWidth = `${width}px`;\n  ghost.style.maxWidth = `${width}px`;\n  ghost.style.height = '1px';\n  ghost.slot = sourceElement.slot;\n  return ghost;\n}\n\nexport function sameRenderRoot(element1: HTMLElement, element2: HTMLElement) {\n  const root1 = element1.getRootNode();\n  const root2 = element2.getRootNode();\n  const sameShadowRoot = root1 instanceof ShadowRoot && root2 instanceof ShadowRoot && root1 === root2;\n  const sameDocumentRoot = root1 === globalThis.document && root2 === globalThis.document;\n  const sameUnattachedRoot = root1 === root2;\n  return sameShadowRoot || sameDocumentRoot || sameUnattachedRoot;\n}\n\nexport function getAnchorNames(element: HTMLElement): string[] {\n  return (\n    element.style.anchorName\n      ?.split(',')\n      ?.map(name => name.trim())\n      ?.filter(name => name !== 'none' && name !== '') ?? []\n  );\n}\n\nexport function removeAnchorName(element: HTMLElement, name: string) {\n  const anchorNames = getAnchorNames(element);\n  element.style.anchorName = anchorNames.filter(i => i !== name).join(',');\n}\n\nexport function appendAnchorName(element: HTMLElement, name: string) {\n  element.style.anchorName = Array.from(new Set([...getAnchorNames(element), name])).join(',');\n}\n\n/**\n * Returns true when both arrays have the same length and each index is strictly equal (`===`).\n */\nexport function sameOrderedStringArray(a: readonly string[], b: readonly string[]): boolean {\n  return a.length === b.length && a.every((value, index) => value === b[index]);\n}\n\n/**\n * Returns unique non-empty strings in first-seen order (insertion order of a `Set` over the filtered list).\n */\nexport function uniqueNonEmptyStrings(values: Iterable<string | null | undefined>): string[] {\n  return Array.from(\n    new Set(Array.from(values).filter((value): value is string => typeof value === 'string' && value.length > 0))\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"dom.js","names":[],"sources":["../../../src/internal/utils/dom.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { GlobalStateService } from '../services/global.service.js';\nimport { LogService } from '../services/log.service.js';\nimport type { ElementDefinition } from '../types/index.js';\nimport { isFocusable } from './focus.js';\n\nexport function getChildren(node: Document | Node | HTMLElement): Element[] {\n  if (node instanceof Document && node.documentElement) {\n    return Array.from(node.documentElement.children); // root document children\n  } else if (node instanceof HTMLElement && node.shadowRoot) {\n    return Array.from(node.shadowRoot.children); // shadow root direct children\n  } else if (node instanceof HTMLSlotElement && node.assignedElements) {\n    const slotted = node.assignedElements(); // slotted elements\n    return slotted.length ? slotted : Array.from(node.children); // slot fallback\n  } else {\n    return Array.from((node as HTMLElement).children); // light DOM direct children\n  }\n}\n\nexport function generateId() {\n  const uint32 = self.crypto.getRandomValues(new Uint32Array(1))[0]!;\n  return `_${uint32.toString(16)}`;\n}\n\nexport function getAttributeChanges(element: HTMLElement, attr: string, fn: (attrValue: string | null) => void) {\n  fn(element.getAttribute(attr));\n  const observer = new MutationObserver(mutations => {\n    mutations.forEach(mutation => {\n      if (mutation.attributeName === attr) {\n        fn((mutation.target as HTMLElement).getAttribute(attr));\n      }\n    });\n  });\n  observer.observe(element, { attributes: true, subtree: true });\n  return observer;\n}\n\nexport function getAttributeListChanges(element: HTMLElement, attrs: string[], fn: (mutation: MutationRecord) => void) {\n  const observer = new MutationObserver(mutations => {\n    mutations.forEach(mutation => {\n      if (mutation.attributeName && attrs.includes(mutation.attributeName)) {\n        fn(mutation);\n      }\n    });\n  });\n  observer.observe(element, { attributes: true, subtree: true });\n  return observer;\n}\n\n/**\n * Appends styles to the render root of a given element. This is useful for\n * styles that apply outside the scope of the element's shadow\n * root such as UA styles --webkit-* that won't work in a ::slotted selector\n */\nexport function appendRootNodeStyle(host: HTMLElement, styles: string) {\n  const stylesheet = new CSSStyleSheet();\n  stylesheet.replaceSync(styles);\n  const root = host.getRootNode() as Document | ShadowRoot;\n  if (root.adoptedStyleSheets) {\n    const hasStyleSheet = root.adoptedStyleSheets\n      .map(s => styleSheetToString(s))\n      .find(s => s === styleSheetToString(stylesheet));\n    if (!hasStyleSheet) {\n      root.adoptedStyleSheets = [...Array.from(root.adoptedStyleSheets), stylesheet];\n    }\n  }\n  return stylesheet;\n}\n\nexport function styleSheetToString(stylesheet: CSSStyleSheet) {\n  return stylesheet.cssRules\n    ? Array.from(stylesheet.cssRules)\n        .map(rule => rule.cssText || '')\n        .join('\\n')\n    : '';\n}\n\n/** Intercepts a property setter on an element so `callback` fires on every assignment. Does not use a MutationObserver. */\nexport function getPropertyChanges(element: HTMLElement, key: string, callback: (value: unknown) => void) {\n  const proto = Object.getPrototypeOf(element);\n  const descriptor = Object.getOwnPropertyDescriptor(proto, key);\n  if (!descriptor) return;\n  const own = Object.getOwnPropertyDescriptor(element, key);\n  if (own && own.configurable === false) return;\n  Object.defineProperty(element, key, {\n    configurable: true,\n    get: descriptor.get,\n    set: (val: unknown) => {\n      descriptor.set!.call(element, val);\n      callback(val);\n    }\n  });\n\n  return () => {\n    if (own) {\n      Object.defineProperty(element, key, own);\n      return;\n    }\n\n    Reflect.deleteProperty(element, key);\n  };\n}\n\n/* used for cases of needing to know a property update outside of lit, example a native input value prop change */\nexport function getElementUpdate(element: HTMLElement, key: string, callback: (value: unknown) => void) {\n  if (element.hasAttribute(key)) {\n    callback(element.getAttribute(key));\n  } else if ((element as unknown as Record<string, unknown>)[key] !== undefined) {\n    callback((element as unknown as Record<string, unknown>)[key]);\n  }\n\n  const cleanupPropertyChanges = getPropertyChanges(element, key, callback);\n  const observer = getAttributeChanges(element, key, val => callback(val));\n  const disconnect = observer.disconnect.bind(observer);\n\n  observer.disconnect = () => {\n    cleanupPropertyChanges?.();\n    disconnect();\n  };\n\n  return observer;\n}\n\nexport function clickOutsideElementBounds(event: PointerEvent | MouseEvent, element: HTMLElement) {\n  const { left, right, top, bottom } = element.getBoundingClientRect();\n  return event.clientX < left || event.clientX > right || event.clientY < top || event.clientY > bottom;\n}\n\n/** parses number out of basic calc generated by the design tokens */\nexport function parseTokenNumber(value: string) {\n  return parseInt(value.includes('calc') ? value.split('*')[1]!.replace('px)', '').trim() : value, 10) || 0;\n}\n\n/** true if the browser supports scoped custom element registries */\nexport const supportsScopedRegistry =\n  globalThis.CustomElementRegistry && 'initialize' in CustomElementRegistry.prototype;\n\n/** defines an element with the given custom element registry */\nexport function defineElement(element: ElementDefinition, customElementRegistry: CustomElementRegistry) {\n  Object.entries(element.elementDefinitions ?? {})\n    .filter(([_tag, e]) => !customElementRegistry.get(e.metadata.tag))\n    .forEach(([_tag, e]) => {\n      defineElement(e, customElementRegistry);\n    });\n\n  if (!customElementRegistry.get(element.metadata.tag)) {\n    customElementRegistry.define(element.metadata.tag, element);\n\n    if (customElementRegistry === customElements) {\n      GlobalStateService.dispatch('NVE_ELEMENT_DEFINE', {\n        elementRegistry: { [element.metadata.tag]: element.metadata.version }\n      });\n    }\n  }\n}\n\n/** defines an element with the global custom element registry */\nexport function define(element: ElementDefinition) {\n  const { version } = element.metadata;\n\n  // if scoped registry supported, register only the root element to global registry\n  if (supportsScopedRegistry && !customElements.get(element.metadata.tag)) {\n    customElements.define(element.metadata.tag, element);\n    GlobalStateService.dispatch('NVE_ELEMENT_DEFINE', {\n      elementRegistry: { [element.metadata.tag]: element.metadata.version }\n    });\n  } else {\n    // if scoped registry not supported, register the element and all its children to the global registry\n    defineElement(element, customElements);\n  }\n\n  // warn on duplicate version\n  if (\n    GlobalStateService.state.elementRegistry[element.metadata.tag] !== version &&\n    globalThis?.location?.hostname === 'localhost'\n  ) {\n    void import('./audit-logs.js').then(m =>\n      console.warn(m.getDuplicatePackageVersionWarning(element.metadata.tag, version))\n    );\n  }\n}\n\nexport function isContextMenuClick(event: MouseEvent) {\n  return (event.buttons === 2 && !event.ctrlKey) || (event.buttons === 1 && event.ctrlKey);\n}\n\nexport function getFlattenedFocusableItems(element: Node, depth = 10) {\n  return getFlattenedDOMTree(element, depth).filter((e: HTMLElement) => isFocusable(e)) as HTMLElement[];\n}\n\n/**\n * Preserves visual DOM ordering when using slots within Shadow DOM\n * See more information/resources on Shadow DOM linear traversal\n * https://nolanlawson.com/2021/02/13/managing-focus-in-the-shadow-dom/\n * https://www.abeautifulsite.net/posts/querying-through-shadow-roots/\n */\nexport function getFlattenedDOMTree(node: Node, depth = 10): HTMLElement[] {\n  return (\n    Array.from(getChildren(node)).reduce(\n      (p: unknown[], n: Node) => [\n        ...p,\n        [n, [...Array.from(getChildren(n)).map(i => [i, getFlattenedDOMTree(i, depth)])]]\n      ],\n      []\n    ) as unknown as HTMLElement[]\n  ).flat(depth);\n}\n\nexport function validKeyNavigationCode(e: KeyboardEvent) {\n  return keynavCodes.has(e.code);\n}\n\nexport enum KeynavCode {\n  End = 'End',\n  Home = 'Home',\n  PageUp = 'PageUp',\n  PageDown = 'PageDown',\n  ArrowUp = 'ArrowUp',\n  ArrowDown = 'ArrowDown',\n  ArrowLeft = 'ArrowLeft',\n  ArrowRight = 'ArrowRight'\n}\n\nconst keynavCodes: Set<string> = new Set(Object.values(KeynavCode));\n\nexport function hasInvalidDOMGrid(rows: HTMLElement[]) {\n  return rows.some(row => row.children.length !== rows[0]!.children.length);\n}\n\nexport function removeEmptyTextNode(node: Node) {\n  if ((node as Text)?.wholeText?.trim() === '') {\n    (node as Text).remove();\n  }\n}\n\nexport function scrollBarWidth() {\n  const div = globalThis.document.createElement('div');\n  div.style.setProperty('width', '100px');\n  div.style.setProperty('height', '100px');\n  div.style.setProperty('overflow', 'scroll');\n  div.style.setProperty('position', 'absolute');\n  div.style.setProperty('top', '-9999px');\n  globalThis.document.body.appendChild(div);\n  const width = div.offsetWidth - div.clientWidth;\n  globalThis.document.body.removeChild(div);\n  return width;\n}\n\nexport function hasScrollBar(el: HTMLElement) {\n  return el.scrollHeight > el.clientHeight;\n}\n\nexport function hasHorizontalScrollBar(el: HTMLElement) {\n  return el.scrollWidth > el.clientWidth;\n}\n\nexport function endOfScrollBox(element: HTMLElement, offset = 0) {\n  return element.scrollTop + element.offsetHeight + offset >= element.scrollHeight;\n}\n\nexport async function openEyeDropper(): Promise<string> {\n  const EyeDropperConstructor = (\n    globalThis as unknown as { EyeDropper?: new () => { open: () => Promise<{ sRGBHex: string }> } }\n  ).EyeDropper;\n\n  if (!EyeDropperConstructor) {\n    LogService.warn('EyeDropper API is unavailable');\n    return '';\n  }\n\n  try {\n    return (await new EyeDropperConstructor().open()).sRGBHex;\n  } catch (e) {\n    LogService.warn(`EyeDropper selection failed: ${(e as Error).message}`);\n    return '';\n  }\n}\n\n/**\n * provides a object with key/value of the currently applied design tokens\n */\nexport function getThemeTokens(element = globalThis.document.querySelector(':root')!) {\n  // default root or provided element\n  const styles = getComputedStyle(element);\n  let parent: CSSStyleSheet[] = [];\n\n  // check for parent iframe, same domain iframes change how the browser accesses style sheets\n  try {\n    parent = Array.from(globalThis.parent.document.styleSheets);\n  } catch {\n    // if not accessible, skip\n  }\n\n  return [...parent, ...Array.from(globalThis.document.styleSheets)]\n    .reduce((finalArr: string[][], sheet) => {\n      let rules: CSSRule[] = [];\n      try {\n        rules = [...sheet.cssRules];\n      } catch {\n        // if the style sheet is not accessible, skip\n      }\n      return finalArr.concat(\n        rules\n          .filter(rule => rule.type === 1)\n          .reduce((propValArr: string[][], rule) => {\n            const props = [...(rule as CSSStyleRule).style]\n              .filter((p: string) => p.trim().includes('--nve'))\n              .map((propName: string) => [\n                propName.trim(),\n                (rule as CSSStyleRule).style.getPropertyValue(propName).trim()\n              ]);\n            return [...propValArr, ...props];\n          }, [])\n      );\n    }, [])\n    .reduce(\n      (p: Record<string, string>, token: string[]) => ({ ...p, [token[0]!]: styles.getPropertyValue(token[0]!) }),\n      {}\n    );\n}\n\nexport function removeEmptySlotWhitespace(slot: HTMLSlotElement) {\n  if (slotContainsOnlyWhitespace(slot)) {\n    slot.assignedNodes().forEach((node: Node) => node.parentNode?.removeChild(node));\n  }\n}\n\nexport function slotContainsOnlyWhitespace(slot: HTMLSlotElement) {\n  const hasNoElements = !slot.assignedNodes().find(i => i.nodeType !== Node.TEXT_NODE);\n  const hasOnlyEmptyTextNodes = !slot\n    .assignedNodes()\n    .find(i => i.nodeType === Node.TEXT_NODE && (i.textContent ?? '').trim() !== '');\n  return hasNoElements && hasOnlyEmptyTextNodes;\n}\n\nexport function applySlotContentStates(slot: HTMLSlotElement, element: HTMLElement & { _internals: ElementInternals }) {\n  const nodes = slot.assignedNodes();\n  const name = slot.name ?? 'slot';\n\n  if (nodes.length) {\n    element._internals.states.add(`has-${name}`);\n  } else {\n    element._internals.states.delete(`has-${name}`);\n  }\n}\n\nexport function getDisplayValue(option?: { label?: string; value?: string }): string {\n  return option?.label || option?.value || '';\n}\n\n/** determines if HTML element matches the given component tag */\nexport function matchesElementName(element: Partial<HTMLElement>, component: { metadata: { tag: string } }) {\n  return element.localName === component.metadata.tag;\n}\n\nexport function createGhostElement(sourceElement: HTMLElement) {\n  const ghost = globalThis.document.createElement('div');\n  const { width } = sourceElement.getBoundingClientRect();\n  ghost.setAttribute('nve-ghost', '');\n  ghost.style.minWidth = `${width}px`;\n  ghost.style.maxWidth = `${width}px`;\n  ghost.style.height = '1px';\n  ghost.slot = sourceElement.slot;\n  return ghost;\n}\n\nexport function sameRenderRoot(element1: HTMLElement, element2: HTMLElement) {\n  const root1 = element1.getRootNode();\n  const root2 = element2.getRootNode();\n  const sameShadowRoot = root1 instanceof ShadowRoot && root2 instanceof ShadowRoot && root1 === root2;\n  const sameDocumentRoot = root1 === globalThis.document && root2 === globalThis.document;\n  const sameUnattachedRoot = root1 === root2;\n  return sameShadowRoot || sameDocumentRoot || sameUnattachedRoot;\n}\n\nexport function getAnchorNames(element: HTMLElement): string[] {\n  return (\n    element.style.anchorName\n      ?.split(',')\n      ?.map(name => name.trim())\n      ?.filter(name => name !== 'none' && name !== '') ?? []\n  );\n}\n\nexport function removeAnchorName(element: HTMLElement, name: string) {\n  const anchorNames = getAnchorNames(element);\n  element.style.anchorName = anchorNames.filter(i => i !== name).join(',');\n}\n\nexport function appendAnchorName(element: HTMLElement, name: string) {\n  element.style.anchorName = Array.from(new Set([...getAnchorNames(element), name])).join(',');\n}\n\n/**\n * Returns true when both arrays have the same length and each index is strictly equal (`===`).\n */\nexport function sameOrderedStringArray(a: readonly string[], b: readonly string[]): boolean {\n  return a.length === b.length && a.every((value, index) => value === b[index]);\n}\n\n/**\n * Returns unique non-empty strings in first-seen order (insertion order of a `Set` over the filtered list).\n */\nexport function uniqueNonEmptyStrings(values: Iterable<string | null | undefined>): string[] {\n  return Array.from(\n    new Set(Array.from(values).filter((value): value is string => typeof value === 'string' && value.length > 0))\n  );\n}\n"],"mappings":"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"}

package/dist/internal/utils/strings.js

@@ -4,7 +4,7 @@ function e(e) {
 		[1024 ** 4, "TB"],
 		[1024 ** 3, "GB"],
 		[1024 ** 2, "MB"],
-		[1024 ** 1, "KB"],
+		[1024, "KB"],
 		[1, "B"]
 	]);
 	for (let [n, r] of t.entries()) if (e >= n) return `${(e / n).toFixed(2)} ${r}`;

package/dist/internal/utils/strings.js.map

@@ -1 +1 @@
-{"version":3,"file":"strings.js","names":[],"sources":["../../../src/internal/utils/strings.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/** formats a file size in bytes to a human readable string */\nexport function formatFileSize(size: number): string {\n  const thresholds = new Map<number, string>([\n    [1024 ** 4, 'TB'],\n    [1024 ** 3, 'GB'],\n    [1024 ** 2, 'MB'],\n    [1024 ** 1, 'KB'],\n    [1, 'B']\n  ]);\n  for (const [threshold, unit] of thresholds.entries()) {\n    if (size >= threshold) {\n      return `${(size / threshold).toFixed(2)} ${unit}`;\n    }\n  }\n  return `0`;\n}\n\n/** removes leading white space for a multiline string */\nexport function shiftLeft(value: string) {\n  const shift = value.replace(/^\\n|\\n$/g, '').search(/\\S|$/);\n  return value\n    .trim()\n    .split('\\n')\n    .map(line => {\n      return line\n        .split('')\n        .filter((c, i) => i >= shift || c !== ' ')\n        .join('');\n    })\n    .join('\\n');\n}\n\nexport let DOCS_URL = '';\n/* @ts-expect-error -- VITE_BUNDLE_CONFIG is only defined at build time */\nif (!import.meta.env.VITE_BUNDLE_CONFIG) {\n  DOCS_URL = 'https://nvidia.github.io/elements';\n}\n"],"mappings":";AAIA,SAAgB,EAAe,GAAsB;CACnD,IAAM,oBAAa,IAAI,IAAoB;EACzC,CAAC,QAAQ,GAAG,IAAI;EAChB,CAAC,QAAQ,GAAG,IAAI;EAChB,CAAC,QAAQ,GAAG,IAAI;EAChB,CAAC,QAAQ,GAAG,IAAI;EAChB,CAAC,GAAG,GAAG;CACT,CAAC;CACD,KAAK,IAAM,CAAC,GAAW,MAAS,EAAW,QAAQ,GACjD,IAAI,KAAQ,GACV,OAAO,IAAI,IAAO,EAAA,CAAW,QAAQ,CAAC,EAAE,GAAG;CAG/C,OAAO;AACT;AAGA,SAAgB,EAAU,GAAe;CACvC,IAAM,IAAQ,EAAM,QAAQ,YAAY,EAAE,CAAC,CAAC,OAAO,MAAM;CACzD,OAAO,EACJ,KAAK,CAAC,CACN,MAAM,IAAI,CAAC,CACX,KAAI,MACI,EACJ,MAAM,EAAE,CAAC,CACT,QAAQ,GAAG,MAAM,KAAK,KAAS,MAAM,GAAG,CAAC,CACzC,KAAK,EAAE,CACX,CAAC,CACD,KAAK,IAAI;AACd;AAEA,IAAW,IAAW;AAGpB,IAAW"}
+{"version":3,"file":"strings.js","names":[],"sources":["../../../src/internal/utils/strings.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/** formats a file size in bytes to a human readable string */\nexport function formatFileSize(size: number): string {\n  const thresholds = new Map<number, string>([\n    [1024 ** 4, 'TB'],\n    [1024 ** 3, 'GB'],\n    [1024 ** 2, 'MB'],\n    [1024 ** 1, 'KB'],\n    [1, 'B']\n  ]);\n  for (const [threshold, unit] of thresholds.entries()) {\n    if (size >= threshold) {\n      return `${(size / threshold).toFixed(2)} ${unit}`;\n    }\n  }\n  return `0`;\n}\n\n/** removes leading white space for a multiline string */\nexport function shiftLeft(value: string) {\n  const shift = value.replace(/^\\n|\\n$/g, '').search(/\\S|$/);\n  return value\n    .trim()\n    .split('\\n')\n    .map(line => {\n      return line\n        .split('')\n        .filter((c, i) => i >= shift || c !== ' ')\n        .join('');\n    })\n    .join('\\n');\n}\n\nexport let DOCS_URL = '';\n/* @ts-expect-error -- VITE_BUNDLE_CONFIG is only defined at build time */\nif (!import.meta.env.VITE_BUNDLE_CONFIG) {\n  DOCS_URL = 'https://nvidia.github.io/elements';\n}\n"],"mappings":";AAIA,SAAgB,EAAe,GAAsB;CACnD,IAAM,oBAAa,IAAI,IAAoB;EACzC,CAAC,QAAQ,GAAG,IAAI;EAChB,CAAC,QAAQ,GAAG,IAAI;EAChB,CAAC,QAAQ,GAAG,IAAI;EAChB,CAAC,MAAW,IAAI;EAChB,CAAC,GAAG,GAAG;CACT,CAAC;CACD,KAAK,IAAM,CAAC,GAAW,MAAS,EAAW,QAAQ,GACjD,IAAI,KAAQ,GACV,OAAO,IAAI,IAAO,EAAA,CAAW,QAAQ,CAAC,EAAE,GAAG;CAG/C,OAAO;AACT;AAGA,SAAgB,EAAU,GAAe;CACvC,IAAM,IAAQ,EAAM,QAAQ,YAAY,EAAE,CAAC,CAAC,OAAO,MAAM;CACzD,OAAO,EACJ,KAAK,CAAC,CACN,MAAM,IAAI,CAAC,CACX,KAAI,MACI,EACJ,MAAM,EAAE,CAAC,CACT,QAAQ,GAAG,MAAM,KAAK,KAAS,MAAM,GAAG,CAAC,CACzC,KAAK,EAAE,CACX,CAAC,CACD,KAAK,IAAI;AACd;AAEA,IAAW,IAAW;AAGpB,IAAW"}

package/dist/logo/logo.examples.json

@@ -45,7 +45,7 @@
     {
       "id": "logo-light-theme",
       "name": "LightTheme",
-      "template": "<div\n  nve-theme=\"root light\"\n  nve-layout=\"row gap:xs align:wrap pad:sm\"\n  style=\"background: var(--nve-sys-layer-container-background) !important\"\n>\n  <nve-logo aria-label=\"NVIDIA\">NV</nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n  <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n  <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n  <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n  <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n  <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n  <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n  <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n  <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n  <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n  <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n  <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n  <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n  <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n  <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n  <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n  <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n",
+      "template": "<div nve-theme=\"root light\" nve-layout=\"row gap:xs align:wrap pad:sm\" style=\"background: var(--nve-sys-layer-container-background) !important\">\n  <nve-logo aria-label=\"NVIDIA\">NV</nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n  <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n  <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n  <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n  <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n  <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n  <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n  <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n  <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n  <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n  <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n  <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n  <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n  <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n  <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n  <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n  <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n",
       "summary": "Logo colors optimized for light theme backgrounds. Ensures proper contrast and visibility when used in light mode interfaces.",
       "description": "",
       "composition": false,

package/dist/logo/logo2.js

@@ -1,6 +1,6 @@
 import { attachInternals as e } from "../internal/utils/a11y.js";
 import { colorStateStyles as t, useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import i from "./logo.js";
 import { LitElement as a, html as o } from "lit";
 import { property as s } from "lit/decorators/property.js";
@@ -12,7 +12,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-logo",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	render() {

package/dist/logo/logo2.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo2.js","names":[],"sources":["../../src/logo/logo.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Color, Size } from '@nvidia-elements/core/internal';\nimport { useStyles, colorStateStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './logo.css?inline';\n\n/**\n * @element nve-logo\n * @description A visual indicator for a brand or application.\n * @documentation https://nvidia.github.io/elements/docs/elements/logo/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/logo\n * @slot - Text, an image, or other visual content representing the brand or application.\n * @cssprop --background\n * @cssprop --gap\n * @cssprop --color\n * @cssprop --height\n * @cssprop --width\n * @cssprop --font-size\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Logo extends LitElement {\n  /**\n   * Visual treatment to represent unique color of an application\n   */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /**\n   * Determines size of logo\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  static styles = useStyles([styles, colorStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-logo',\n    version: '0.0.0'\n  };\n\n  _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'img';\n  }\n}\n"],"mappings":";;;;;;;AA0BA,IAAa,IAAb,cAA0B,EAAW;;gBAWnB,EAAU,CAAC,GAAQ,CAAgB,CAAC;;;kBAEzB;GACzB,KAAK;GACL,SAAS;EACX;;CAIA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;GA7BG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA"}
+{"version":3,"file":"logo2.js","names":[],"sources":["../../src/logo/logo.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Color, Size } from '@nvidia-elements/core/internal';\nimport { useStyles, colorStateStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './logo.css?inline';\n\n/**\n * @element nve-logo\n * @description A visual indicator for a brand or application.\n * @documentation https://nvidia.github.io/elements/docs/elements/logo/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/logo\n * @slot - Text, an image, or other visual content representing the brand or application.\n * @cssprop --background\n * @cssprop --gap\n * @cssprop --color\n * @cssprop --height\n * @cssprop --width\n * @cssprop --font-size\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Logo extends LitElement {\n  /**\n   * Visual treatment to represent unique color of an application\n   */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /**\n   * Determines size of logo\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  static styles = useStyles([styles, colorStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-logo',\n    version: '0.0.0'\n  };\n\n  _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'img';\n  }\n}\n"],"mappings":";;;;;;;AA0BA,IAAa,IAAb,cAA0B,EAAW;;EAWnB,KAAA,SAAA,EAAU,CAAC,GAAQ,CAAgB,CAAC;;;EAEzB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAIA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;AA7BG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA"}

package/dist/menu/menu-item2.js

@@ -1,6 +1,6 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import r from "./menu-item.js";
 import { LitElement as i, html as a } from "lit";
 import { property as o } from "lit/decorators/property.js";
@@ -13,7 +13,7 @@ var c = class extends s(i) {
 	static {
 		this.metadata = {
 			tag: "nve-menu-item",
-			version: "2.7.3",
+			version: "2.8.1",
 			parents: ["nve-menu"]
 		};
 	}

package/dist/menu/menu-item2.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item2.js","names":[],"sources":["../../src/menu/menu-item.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { useStyles, audit } from '@nvidia-elements/core/internal';\nimport styles from './menu-item.css?inline';\n\n/**\n * @element nve-menu-item\n * @description Represents a selectable option within a menu, providing an interactive button for navigation or actions.\n * @documentation https://nvidia.github.io/elements/docs/elements/menu/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/menu\n * @slot - Label and supporting content for the menu option.\n * @slot suffix - slot for suffix icon\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border-background\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @cssprop --min-height\n * @cssprop --line-height\n * @cssprop --cursor\n * @cssprop --opacity\n * @cssprop --text-transform\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\nexport class MenuItem extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([styles]);\n\n  /** Applies danger styling to destructive or high-risk menu actions. */\n  @property({ type: String, reflect: true }) status: 'danger';\n\n  static readonly metadata = {\n    tag: 'nve-menu-item',\n    version: '0.0.0',\n    parents: ['nve-menu']\n  };\n\n  static elementDefinitions = {};\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within part=\"_internal\">\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'menuitem';\n  }\n}\n"],"mappings":";;;;;;;;AAmCO,IAAA,IAAA,cAAuB,EAAuB,CAAU,CAAC,CAAC;;gBAC/C,EAAU,CAAC,CAAM,CAAC;;;kBAKP;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;;4BAE4B,CAAC;;CAE7B,SAAS;EACP,OAAO,CAAI;CAMb;CAEA,cAAc;EAEZ,AADA,MAAM,GACN,KAAK,OAAO;CACd;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO;CACzB;AACF;GA5BG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,UAL1C,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"menu-item2.js","names":[],"sources":["../../src/menu/menu-item.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { useStyles, audit } from '@nvidia-elements/core/internal';\nimport styles from './menu-item.css?inline';\n\n/**\n * @element nve-menu-item\n * @description Represents a selectable option within a menu, providing an interactive button for navigation or actions.\n * @documentation https://nvidia.github.io/elements/docs/elements/menu/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/menu\n * @slot - Label and supporting content for the menu option.\n * @slot suffix - slot for suffix icon\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border-background\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @cssprop --min-height\n * @cssprop --line-height\n * @cssprop --cursor\n * @cssprop --opacity\n * @cssprop --text-transform\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\nexport class MenuItem extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([styles]);\n\n  /** Applies danger styling to destructive or high-risk menu actions. */\n  @property({ type: String, reflect: true }) status: 'danger';\n\n  static readonly metadata = {\n    tag: 'nve-menu-item',\n    version: '0.0.0',\n    parents: ['nve-menu']\n  };\n\n  static elementDefinitions = {};\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within part=\"_internal\">\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'menuitem';\n  }\n}\n"],"mappings":";;;;;;;;AAmCO,IAAM,IAAN,cAAuB,EAAuB,CAAU,CAAC,CAAC;;EAC/C,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAKP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;;EAE4B,KAAA,qBAAA,CAAC;;CAE7B,SAAS;EACP,OAAO,CAAI;CAMb;CAEA,cAAc;EAEZ,AADA,MAAM,GACN,KAAK,OAAO;CACd;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO;CACzB;AACF;AA5BG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAL1C,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}

package/dist/menu/menu.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.examples.js","names":[],"sources":["../../src/menu/menu.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/logo/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/drawer/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/page/define.js';\n\nexport default {\n  title: 'Elements/Menu',\n  component: 'nve-menu',\n};\n\n/**\n * @summary Basic menu with simple text items for the default menu structure and styling.\n */\nexport const Default = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu with keyboard navigation and ARIA disclosure pattern inside a dropdown. Use when menu items need accessible focus management and arrow key navigation.\n * @tags pattern\n */\nexport const Dropdown = {\n  render: () => html`\n  <nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n  <nve-dropdown id=\"dropdown-menu\">\n    <nve-menu>\n      <nve-menu-item><nve-icon name=\"person\"></nve-icon> profile</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n      <nve-divider></nve-divider>\n      <nve-menu-item><nve-icon name=\"logout\"></nve-icon> logout</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  `\n};\n\n/**\n * @summary Menu with a selected item showing the visual state for user-selected options.\n */\nexport const Selected = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item selected>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu with a current page item showing the visual state for the active/current page in navigation.\n */\nexport const Current = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item current=\"page\">item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary By default Menu will show a blue border on the selected item. You can change the border color by setting `--border-background` on the `<nve-menu-item>`\n * @tags test-case\n */\nexport const BorderBackground = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item current=\"page\" style=\"--border-background: var(--nve-ref-color-brand-green-900);\">item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu with disabled items showing unavailable options while maintaining visual context.\n * @tags test-case\n */\nexport const Disabled = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item disabled>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu items with icons to add visual context and improve usability.\n */\nexport const Icons = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item><nve-icon name=\"person\"></nve-icon> profile</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"logout\"></nve-icon> logout</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu items with links for navigation functionality within menu structures.\n */\nexport const Links = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item><nve-icon name=\"person\"></nve-icon><a href=\"#\">profile</a></nve-menu-item>\n    <nve-menu-item><nve-icon name=\"gear\"></nve-icon> <a href=\"#\">settings</a></nve-menu-item>\n    <nve-menu-item><nve-icon name=\"star\"></nve-icon> <a href=\"#\">favorites</a></nve-menu-item>\n    <nve-menu-item><nve-icon name=\"logout\"></nve-icon> <a href=\"#\">logout</a></nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu item features a default slot for content, along with a suffix slot for displaying elements such as keyboard shortcuts at the end of the menu item container.\n */\nexport const Suffix = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item><kbd  slot=\"suffix\" nve-text=\"code flat\">CMD + C</kbd></nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu with constrained height showing scrollable behavior when content exceeds container limits.\n * @tags test-case\n */\nexport const Scroll = {\n  render: () => html`\n  <nve-menu style=\"--max-height: 150px\">\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n    <nve-menu-item>item 5</nve-menu-item>\n    <nve-menu-item>item 6</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Use a dropdown menu with search and branded logos for application selection interfaces.\n * @tags pattern\n */\nexport const Complex = {\n  render: () => html`\n  <nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n  <nve-dropdown id=\"dropdown-menu\">\n    <nve-search rounded>\n      <input type=\"search\" placeholder=\"search tools\" aria-label=\"search apps\" />\n    </nve-search>\n    <nve-menu>\n      <nve-menu-item>\n        <nve-logo color=\"pink-rose\" size=\"sm\">Db</nve-logo> Debugger\n      </nve-menu-item>\n      <nve-menu-item>\n        <nve-logo color=\"blue-cobalt\" size=\"sm\">TM</nve-logo> Task Manager\n      </nve-menu-item>\n      <nve-menu-item>\n        <nve-logo color=\"yellow-nova\" size=\"sm\">CI</nve-logo> CI Services\n      </nve-menu-item>\n      <nve-divider></nve-divider>\n      <nve-menu-item>\n        <nve-logo size=\"sm\">NV</nve-logo> All Apps\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  `\n};\n\n/**\n * @summary Use a navigation drawer to overlay page content for out-of-context navigation.\n * @tags pattern\n */\nexport const VerticalNavigationDrawer = {\n  render: () => html`\n  <nve-page>\n    <nve-page-header>\n      <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n      <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n    </nve-page-header>\n    <main nve-layout=\"column gap:md pad:md\">\n      <nve-button popovertarget=\"menu-drawer\">toggle drawer</nve-button>\n    </main>\n    <nve-drawer position=\"right\" size=\"sm\" modal closable id=\"menu-drawer\">\n      <nve-drawer-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n      </nve-drawer-header>\n      <nve-drawer-content>\n        <nve-menu>\n          <nve-menu-item>item 1</nve-menu-item>\n          <nve-menu-item current=\"page\">item 2</nve-menu-item>\n          <nve-menu-item>item 3</nve-menu-item>\n          <nve-menu-item>item 4</nve-menu-item>\n        </nve-menu>\n      </nve-drawer-content>\n    </nve-drawer>\n  </nve-page>\n  `\n};\n\n/**\n * @summary Use an inline navigation panel to push page content aside when navigation is contextual to the page.\n * @tags pattern\n */\nexport const VerticalNavigationPanel = {\n  render: () => html`\n<nve-page>\n  <nve-page-header>\n    <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n    <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" expanded style=\"max-width:280px\">\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      <nve-menu>\n        <nve-menu-item>item 1</nve-menu-item>\n        <nve-menu-item current=\"page\">item 2</nve-menu-item>\n        <nve-menu-item>item 3</nve-menu-item>\n        <nve-menu-item>item 4</nve-menu-item>\n      </nve-menu>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:md pad:md\">\n    <p nve-text=\"body\">Content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Use a tooltip on a menu item to provide extra context and warnings.\n * @tags pattern test-case\n */\nexport const ItemTooltip = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item popovertarget=\"menu-tooltip\" id=\"menu-item-2\">\n      item 2\n      <nve-icon id=\"menu-anchor\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon>\n      <nve-tooltip anchor=\"menu-anchor\" id=\"menu-tooltip\" style=\"interest-delay-start: 2s\">This is a warning tooltip</nve-tooltip>\n    </nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n  </nve-menu>\n  `\n}\n\n/**\n * @summary Menu items with danger status styling for destructive actions like delete or logout operations.\n */\nexport const DangerStatus = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item status=\"danger\">default</nve-menu-item>\n    <nve-menu-item status=\"danger\" disabled>disabled</nve-menu-item>\n    <nve-menu-item status=\"danger\" selected>selected</nve-menu-item>\n    <nve-menu-item status=\"danger\" current=\"page\">current</nve-menu-item>\n    <nve-menu-item status=\"danger\"><nve-icon name=\"gear\"></nve-icon> icon left</nve-menu-item>\n    <nve-menu-item status=\"danger\">icon right <nve-icon id=\"warning-icon\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon></nve-menu-item>\n  </nve-menu>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"menu.examples.js","names":[],"sources":["../../src/menu/menu.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/logo/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/drawer/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/page/define.js';\n\nexport default {\n  title: 'Elements/Menu',\n  component: 'nve-menu',\n};\n\n/**\n * @summary Basic menu with simple text items for the default menu structure and styling.\n */\nexport const Default = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu with keyboard navigation and ARIA disclosure pattern inside a dropdown. Use when menu items need accessible focus management and arrow key navigation.\n * @tags pattern\n */\nexport const Dropdown = {\n  render: () => html`\n  <nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n  <nve-dropdown id=\"dropdown-menu\">\n    <nve-menu>\n      <nve-menu-item><nve-icon name=\"person\"></nve-icon> profile</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n      <nve-divider></nve-divider>\n      <nve-menu-item><nve-icon name=\"logout\"></nve-icon> logout</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  `\n};\n\n/**\n * @summary Menu with a selected item showing the visual state for user-selected options.\n */\nexport const Selected = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item selected>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu with a current page item showing the visual state for the active/current page in navigation.\n */\nexport const Current = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item current=\"page\">item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary By default Menu will show a blue border on the selected item. You can change the border color by setting `--border-background` on the `<nve-menu-item>`\n * @tags test-case\n */\nexport const BorderBackground = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item current=\"page\" style=\"--border-background: var(--nve-ref-color-brand-green-900);\">item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu with disabled items showing unavailable options while maintaining visual context.\n * @tags test-case\n */\nexport const Disabled = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item disabled>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu items with icons to add visual context and improve usability.\n */\nexport const Icons = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item><nve-icon name=\"person\"></nve-icon> profile</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"logout\"></nve-icon> logout</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu items with links for navigation functionality within menu structures.\n */\nexport const Links = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item><nve-icon name=\"person\"></nve-icon><a href=\"#\">profile</a></nve-menu-item>\n    <nve-menu-item><nve-icon name=\"gear\"></nve-icon> <a href=\"#\">settings</a></nve-menu-item>\n    <nve-menu-item><nve-icon name=\"star\"></nve-icon> <a href=\"#\">favorites</a></nve-menu-item>\n    <nve-menu-item><nve-icon name=\"logout\"></nve-icon> <a href=\"#\">logout</a></nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu item features a default slot for content, along with a suffix slot for displaying elements such as keyboard shortcuts at the end of the menu item container.\n */\nexport const Suffix = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item><kbd  slot=\"suffix\" nve-text=\"code flat\">CMD + C</kbd></nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu with constrained height showing scrollable behavior when content exceeds container limits.\n * @tags test-case\n */\nexport const Scroll = {\n  render: () => html`\n  <nve-menu style=\"--max-height: 150px\">\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n    <nve-menu-item>item 5</nve-menu-item>\n    <nve-menu-item>item 6</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Use a dropdown menu with search and branded logos for application selection interfaces.\n * @tags pattern\n */\nexport const Complex = {\n  render: () => html`\n  <nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n  <nve-dropdown id=\"dropdown-menu\">\n    <nve-search rounded>\n      <input type=\"search\" placeholder=\"search tools\" aria-label=\"search apps\" />\n    </nve-search>\n    <nve-menu>\n      <nve-menu-item>\n        <nve-logo color=\"pink-rose\" size=\"sm\">Db</nve-logo> Debugger\n      </nve-menu-item>\n      <nve-menu-item>\n        <nve-logo color=\"blue-cobalt\" size=\"sm\">TM</nve-logo> Task Manager\n      </nve-menu-item>\n      <nve-menu-item>\n        <nve-logo color=\"yellow-nova\" size=\"sm\">CI</nve-logo> CI Services\n      </nve-menu-item>\n      <nve-divider></nve-divider>\n      <nve-menu-item>\n        <nve-logo size=\"sm\">NV</nve-logo> All Apps\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  `\n};\n\n/**\n * @summary Use a navigation drawer to overlay page content for out-of-context navigation.\n * @tags pattern\n */\nexport const VerticalNavigationDrawer = {\n  render: () => html`\n  <nve-page>\n    <nve-page-header slot=\"header\">\n      <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n      <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n    </nve-page-header>\n    <main nve-layout=\"column gap:md pad:md\">\n      <nve-button popovertarget=\"menu-drawer\">toggle drawer</nve-button>\n    </main>\n    <nve-drawer position=\"right\" size=\"sm\" modal closable id=\"menu-drawer\">\n      <nve-drawer-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n      </nve-drawer-header>\n      <nve-drawer-content>\n        <nve-menu>\n          <nve-menu-item>item 1</nve-menu-item>\n          <nve-menu-item current=\"page\">item 2</nve-menu-item>\n          <nve-menu-item>item 3</nve-menu-item>\n          <nve-menu-item>item 4</nve-menu-item>\n        </nve-menu>\n      </nve-drawer-content>\n    </nve-drawer>\n  </nve-page>\n  `\n};\n\n/**\n * @summary Use an inline navigation panel to push page content aside when navigation is contextual to the page.\n * @tags pattern\n */\nexport const VerticalNavigationPanel = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n    <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" expanded style=\"max-width:280px\">\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      <nve-menu>\n        <nve-menu-item>item 1</nve-menu-item>\n        <nve-menu-item current=\"page\">item 2</nve-menu-item>\n        <nve-menu-item>item 3</nve-menu-item>\n        <nve-menu-item>item 4</nve-menu-item>\n      </nve-menu>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:md pad:md\">\n    <p nve-text=\"body\">Content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Use a tooltip on a menu item to provide extra context and warnings.\n * @tags pattern test-case\n */\nexport const ItemTooltip = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item popovertarget=\"menu-tooltip\" id=\"menu-item-2\">\n      item 2\n      <nve-icon id=\"menu-anchor\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon>\n      <nve-tooltip anchor=\"menu-anchor\" id=\"menu-tooltip\" style=\"interest-delay-start: 2s\">This is a warning tooltip</nve-tooltip>\n    </nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n  </nve-menu>\n  `\n}\n\n/**\n * @summary Menu items with danger status styling for destructive actions like delete or logout operations.\n */\nexport const DangerStatus = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item status=\"danger\">default</nve-menu-item>\n    <nve-menu-item status=\"danger\" disabled>disabled</nve-menu-item>\n    <nve-menu-item status=\"danger\" selected>selected</nve-menu-item>\n    <nve-menu-item status=\"danger\" current=\"page\">current</nve-menu-item>\n    <nve-menu-item status=\"danger\"><nve-icon name=\"gear\"></nve-icon> icon left</nve-menu-item>\n    <nve-menu-item status=\"danger\">icon right <nve-icon id=\"warning-icon\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon></nve-menu-item>\n  </nve-menu>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/menu/menu.examples.json

@@ -114,7 +114,7 @@
     {
       "id": "menu-vertical-navigation-drawer",
       "name": "VerticalNavigationDrawer",
-      "template": "<nve-page>\n  <nve-page-header>\n    <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n    <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  </nve-page-header>\n  <main nve-layout=\"column gap:md pad:md\">\n    <nve-button popovertarget=\"menu-drawer\">toggle drawer</nve-button>\n  </main>\n  <nve-drawer position=\"right\" size=\"sm\" modal closable id=\"menu-drawer\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <nve-menu>\n        <nve-menu-item>item 1</nve-menu-item>\n        <nve-menu-item current=\"page\">item 2</nve-menu-item>\n        <nve-menu-item>item 3</nve-menu-item>\n        <nve-menu-item>item 4</nve-menu-item>\n      </nve-menu>\n    </nve-drawer-content>\n  </nve-drawer>\n</nve-page>\n",
+      "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n    <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  </nve-page-header>\n  <main nve-layout=\"column gap:md pad:md\">\n    <nve-button popovertarget=\"menu-drawer\">toggle drawer</nve-button>\n  </main>\n  <nve-drawer position=\"right\" size=\"sm\" modal closable id=\"menu-drawer\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <nve-menu>\n        <nve-menu-item>item 1</nve-menu-item>\n        <nve-menu-item current=\"page\">item 2</nve-menu-item>\n        <nve-menu-item>item 3</nve-menu-item>\n        <nve-menu-item>item 4</nve-menu-item>\n      </nve-menu>\n    </nve-drawer-content>\n  </nve-drawer>\n</nve-page>\n",
       "summary": "Use a navigation drawer to overlay page content for out-of-context navigation.",
       "description": "",
       "composition": true,
@@ -125,7 +125,7 @@
     {
       "id": "menu-vertical-navigation-panel",
       "name": "VerticalNavigationPanel",
-      "template": "<nve-page>\n  <nve-page-header>\n    <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n    <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" expanded style=\"max-width: 280px\">\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      <nve-menu>\n        <nve-menu-item>item 1</nve-menu-item>\n        <nve-menu-item current=\"page\">item 2</nve-menu-item>\n        <nve-menu-item>item 3</nve-menu-item>\n        <nve-menu-item>item 4</nve-menu-item>\n      </nve-menu>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:md pad:md\">\n    <p nve-text=\"body\">Content</p>\n  </main>\n</nve-page>\n",
+      "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n    <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" expanded style=\"max-width: 280px\">\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      <nve-menu>\n        <nve-menu-item>item 1</nve-menu-item>\n        <nve-menu-item current=\"page\">item 2</nve-menu-item>\n        <nve-menu-item>item 3</nve-menu-item>\n        <nve-menu-item>item 4</nve-menu-item>\n      </nve-menu>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:md pad:md\">\n    <p nve-text=\"body\">Content</p>\n  </main>\n</nve-page>\n",
       "summary": "Use an inline navigation panel to push page content aside when navigation is contextual to the page.",
       "description": "",
       "composition": true,
@@ -136,7 +136,7 @@
     {
       "id": "menu-item-tooltip",
       "name": "ItemTooltip",
-      "template": "<nve-menu>\n  <nve-menu-item>item 1</nve-menu-item>\n  <nve-menu-item popovertarget=\"menu-tooltip\" id=\"menu-item-2\">\n    item 2\n    <nve-icon id=\"menu-anchor\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon>\n    <nve-tooltip anchor=\"menu-anchor\" id=\"menu-tooltip\" style=\"interest-delay-start: 2s\"\n      >This is a warning tooltip</nve-tooltip\n    >\n  </nve-menu-item>\n  <nve-menu-item>item 3</nve-menu-item>\n</nve-menu>\n",
+      "template": "<nve-menu>\n  <nve-menu-item>item 1</nve-menu-item>\n  <nve-menu-item popovertarget=\"menu-tooltip\" id=\"menu-item-2\">\n    item 2\n    <nve-icon id=\"menu-anchor\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon>\n    <nve-tooltip anchor=\"menu-anchor\" id=\"menu-tooltip\" style=\"interest-delay-start: 2s\">This is a warning tooltip</nve-tooltip>\n  </nve-menu-item>\n  <nve-menu-item>item 3</nve-menu-item>\n</nve-menu>\n",
       "summary": "Use a tooltip on a menu item to provide extra context and warnings.",
       "description": "",
       "composition": true,
@@ -148,7 +148,7 @@
     {
       "id": "menu-danger-status",
       "name": "DangerStatus",
-      "template": "<nve-menu>\n  <nve-menu-item status=\"danger\">default</nve-menu-item>\n  <nve-menu-item status=\"danger\" disabled>disabled</nve-menu-item>\n  <nve-menu-item status=\"danger\" selected>selected</nve-menu-item>\n  <nve-menu-item status=\"danger\" current=\"page\">current</nve-menu-item>\n  <nve-menu-item status=\"danger\"><nve-icon name=\"gear\"></nve-icon> icon left</nve-menu-item>\n  <nve-menu-item status=\"danger\"\n    >icon right <nve-icon id=\"warning-icon\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon\n  ></nve-menu-item>\n</nve-menu>\n",
+      "template": "<nve-menu>\n  <nve-menu-item status=\"danger\">default</nve-menu-item>\n  <nve-menu-item status=\"danger\" disabled>disabled</nve-menu-item>\n  <nve-menu-item status=\"danger\" selected>selected</nve-menu-item>\n  <nve-menu-item status=\"danger\" current=\"page\">current</nve-menu-item>\n  <nve-menu-item status=\"danger\"><nve-icon name=\"gear\"></nve-icon> icon left</nve-menu-item>\n  <nve-menu-item status=\"danger\">icon right <nve-icon id=\"warning-icon\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon></nve-menu-item>\n</nve-menu>\n",
       "summary": "Menu items with danger status styling for destructive actions like delete or logout operations.",
       "description": "",
       "composition": false,

package/dist/menu/menu2.js

@@ -3,7 +3,7 @@ import { appendRootNodeStyle as t } from "../internal/utils/dom.js";
 import { keyNavigationList as n } from "../internal/controllers/keynav-list.controller.js";
 import { attachInternals as r } from "../internal/utils/a11y.js";
 import { useStyles as i } from "../internal/styles/index.js";
-import a from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import a from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import o from "./menu.js";
 import s from "./menu.global.js";
 import { LitElement as c, html as l } from "lit";
@@ -16,7 +16,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-menu",
-			version: "2.7.3",
+			version: "2.8.1",
 			children: ["nve-menu-item", "nve-divider"]
 		};
 	}

package/dist/menu/menu2.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu2.js","names":["#scrollRAF","#handleScroll"],"sources":["../../src/menu/menu.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  useStyles,\n  attachInternals,\n  keyNavigationList,\n  appendRootNodeStyle,\n  audit\n} from '@nvidia-elements/core/internal';\nimport type { MenuItem } from './menu-item.js';\nimport styles from './menu.css?inline';\nimport globalStyles from './menu.global.css?inline';\n\n/**\n * @element nve-menu\n * @description A menu offers a list of choices to the user, such as a set of actions or functions. Choosing an item in a menu typically opens a sub menu, or invokes a command.\n * @documentation https://nvidia.github.io/elements/docs/elements/menu/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/menu\n * @slot - default slot for `nve-menu-item`\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --min-width\n * @cssprop --max-height\n * @event scroll - Fires when the user scrolls the menu list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\n@keyNavigationList<Menu>()\nexport class Menu extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-menu',\n    version: '0.0.0',\n    children: ['nve-menu-item', 'nve-divider']\n  };\n\n  static elementDefinitions = {};\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      layout: 'vertical',\n      items: this.items\n    };\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  @queryAssignedElements() private items!: MenuItem[];\n\n  #scrollRAF: number | null = null;\n\n  #handleScroll = () => {\n    if (this.#scrollRAF !== null) return;\n    this.#scrollRAF = requestAnimationFrame(() => {\n      this.#scrollRAF = null;\n      const container = this.shadowRoot?.querySelector<HTMLElement>('[internal-host]');\n      if (!container) return;\n      const { scrollTop, scrollHeight, clientHeight } = container;\n      this.dispatchEvent(\n        new CustomEvent('scroll', {\n          bubbles: true,\n          composed: true,\n          detail: { scrollTop, scrollHeight, clientHeight }\n        })\n      );\n    });\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  async firstUpdated() {\n    await this.updateComplete;\n    this.shadowRoot\n      ?.querySelector('[internal-host]')\n      ?.addEventListener('scroll', this.#handleScroll, { passive: true });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'menu';\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;;;;;;AAmCO,IAAA,IAAA,cAAmB,EAAW;;gBACnB,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,iBAAiB,aAAa;EAC3C;;;4BAE4B,CAAC;;CAG7B,IAAI,mBAAqC;EACvC,OAAO;GACL,QAAQ;GACR,OAAO,KAAK;EACd;CACF;CAOA,KAA4B;CAE5B,WAAsB;EAChB,KAAKA,OAAe,SACxB,KAAKA,KAAa,4BAA4B;GAC5C,KAAKA,KAAa;GAClB,IAAM,IAAY,KAAK,YAAY,cAA2B,iBAAiB;GAC/E,IAAI,CAAC,GAAW;GAChB,IAAM,EAAE,cAAW,iBAAc,oBAAiB;GAClD,KAAK,cACH,IAAI,YAAY,UAAU;IACxB,SAAS;IACT,UAAU;IACV,QAAQ;KAAE;KAAW;KAAc;IAAa;GAClD,CAAC,CACH;EACF,CAAC;CACH;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,MAAM,eAAe;EAEnB,AADA,MAAM,KAAK,gBACX,KAAK,YACD,cAAc,iBAAiB,CAAC,EAChC,iBAAiB,UAAU,KAAKC,IAAe,EAAE,SAAS,GAAK,CAAC;CACtE;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,QACvB,EAAoB,MAAM,CAAY;CACxC;AACF;GA1CG,EAAsB,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAxBxB,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"menu2.js","names":[],"sources":["../../src/menu/menu.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  useStyles,\n  attachInternals,\n  keyNavigationList,\n  appendRootNodeStyle,\n  audit\n} from '@nvidia-elements/core/internal';\nimport type { MenuItem } from './menu-item.js';\nimport styles from './menu.css?inline';\nimport globalStyles from './menu.global.css?inline';\n\n/**\n * @element nve-menu\n * @description A menu offers a list of choices to the user, such as a set of actions or functions. Choosing an item in a menu typically opens a sub menu, or invokes a command.\n * @documentation https://nvidia.github.io/elements/docs/elements/menu/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/menu\n * @slot - default slot for `nve-menu-item`\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --min-width\n * @cssprop --max-height\n * @event scroll - Fires when the user scrolls the menu list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\n@keyNavigationList<Menu>()\nexport class Menu extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-menu',\n    version: '0.0.0',\n    children: ['nve-menu-item', 'nve-divider']\n  };\n\n  static elementDefinitions = {};\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      layout: 'vertical',\n      items: this.items\n    };\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  @queryAssignedElements() private items!: MenuItem[];\n\n  #scrollRAF: number | null = null;\n\n  #handleScroll = () => {\n    if (this.#scrollRAF !== null) return;\n    this.#scrollRAF = requestAnimationFrame(() => {\n      this.#scrollRAF = null;\n      const container = this.shadowRoot?.querySelector<HTMLElement>('[internal-host]');\n      if (!container) return;\n      const { scrollTop, scrollHeight, clientHeight } = container;\n      this.dispatchEvent(\n        new CustomEvent('scroll', {\n          bubbles: true,\n          composed: true,\n          detail: { scrollTop, scrollHeight, clientHeight }\n        })\n      );\n    });\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  async firstUpdated() {\n    await this.updateComplete;\n    this.shadowRoot\n      ?.querySelector('[internal-host]')\n      ?.addEventListener('scroll', this.#handleScroll, { passive: true });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'menu';\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;;;;;;AAmCO,IAAM,IAAN,cAAmB,EAAW;;EACnB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,iBAAiB,aAAa;EAC3C;;;EAE4B,KAAA,qBAAA,CAAC;;CAG7B,IAAI,mBAAqC;EACvC,OAAO;GACL,QAAQ;GACR,OAAO,KAAK;EACd;CACF;CAOA,KAA4B;CAE5B,WAAsB;EAChB,KAAK,OAAe,SACxB,KAAK,KAAa,4BAA4B;GAC5C,KAAK,KAAa;GAClB,IAAM,IAAY,KAAK,YAAY,cAA2B,iBAAiB;GAC/E,IAAI,CAAC,GAAW;GAChB,IAAM,EAAE,cAAW,iBAAc,oBAAiB;GAClD,KAAK,cACH,IAAI,YAAY,UAAU;IACxB,SAAS;IACT,UAAU;IACV,QAAQ;KAAE;KAAW;KAAc;IAAa;GAClD,CAAC,CACH;EACF,CAAC;CACH;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,MAAM,eAAe;EAEnB,AADA,MAAM,KAAK,gBACX,KAAK,YACD,cAAc,iBAAiB,CAAC,EAChC,iBAAiB,UAAU,KAAK,IAAe,EAAE,SAAS,GAAK,CAAC;CACtE;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,QACvB,EAAoB,MAAM,CAAY;CACxC;AACF;AA1CG,EAAA,CAAA,EAAsB,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAxBxB,IAAA,EAAA,CAAA,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA"}

package/dist/month/month2.js

@@ -1,6 +1,6 @@
 import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Control as r } from "../forms/control/control2.js";
 import { IconButton as i } from "../icon-button/icon-button2.js";
 import { inputStyles as a } from "../input/input2.js";
@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-month",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {

package/dist/month/month2.js.map

@@ -1 +1 @@
-{"version":3,"file":"month2.js","names":[],"sources":["../../src/month/month.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport styles from './month.css?inline';\n\n/**\n * @element nve-month\n * @description A month picker is a control that enables users to choose a month value.\n * @documentation https://nvidia.github.io/elements/docs/elements/month/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/month\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The calendar icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month\n */\n@scopedRegistry()\nexport class Month extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-month',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" .ariaLabel=${this.i18n.expand} icon-name=\"calendar\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AA6BO,IAAA,IAAA,cAAoB,EAAoC;;gBAO7C,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,mDAAkD,KAAK,KAAK,OAAO,oDAAkD,KAAK,WAAW;CAClJ;AACF;GAhBG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,UAN1C,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"month2.js","names":[],"sources":["../../src/month/month.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport styles from './month.css?inline';\n\n/**\n * @element nve-month\n * @description A month picker is a control that enables users to choose a month value.\n * @documentation https://nvidia.github.io/elements/docs/elements/month/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/month\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The calendar icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month\n */\n@scopedRegistry()\nexport class Month extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-month',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" .ariaLabel=${this.i18n.expand} icon-name=\"calendar\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AA6BO,IAAM,IAAN,cAAoB,EAAoC;;EAO7C,KAAA,SAAA,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,mDAAkD,KAAK,KAAK,OAAO,oDAAkD,KAAK,WAAW;CAClJ;AACF;AAhBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAN1C,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}

package/dist/notification/notification-group2.js

@@ -2,7 +2,7 @@ import { audit as e } from "../internal/controllers/audit.controller.js";
 import { TypeNativePopoverController as t } from "../internal/controllers/type-native-popover.controller.js";
 import { useStyles as n } from "../internal/styles/index.js";
 import { popoverStyles as r } from "../internal/styles/popover2.js";
-import i from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import i from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import a from "./notification-group.js";
 import { LitElement as o, html as s } from "lit";
 import { property as c } from "lit/decorators/property.js";
@@ -20,7 +20,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-notification-group",
-			version: "2.7.3",
+			version: "2.8.1",
 			children: ["nve-notification"]
 		};
 	}

package/dist/notification/notification-group2.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-group2.js","names":[],"sources":["../../src/notification/notification-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport { audit, popoverStyles, TypeNativePopoverController, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './notification-group.css?inline';\n\n/**\n * @element nve-notification-group\n * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status.\n * @documentation https://nvidia.github.io/elements/docs/elements/notification/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/notification\n * @slot - default slot for `nve-notification`\n * @cssprop --box-shadow\n * @cssprop --animation-duration - Duration of notification group open/close animations\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/\n */\n@audit()\nexport class NotificationGroup extends LitElement {\n  /**\n   * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement = globalThis.document?.body;\n\n  /**\n   * Sets the position of the popover relative to the anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition;\n\n  /**\n   * Sets the alignment of the popover relative to the anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  protected typeNativePopoverController = new TypeNativePopoverController<NotificationGroup>(this);\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return 'manual';\n  }\n\n  static readonly metadata = {\n    tag: 'nve-notification-group',\n    version: '0.0.0',\n    children: ['nve-notification']\n  };\n\n  render() {\n    return html`\n    <div internal-host>\n      <slot @slotchange=${() => this.showPopover()}></slot>\n    </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;AAqBO,IAAA,IAAA,cAAgC,EAAW;;6BAKW,WAAW,UAAU,yCAYxC,IAAI,EAA+C,IAAI;;;gBAE/E,EAAU,CAAC,GAAe,CAAM,CAAC;;CAGjD,IAAI,cAA2B;EAC7B,OAAO;CACT;;kBAE2B;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,kBAAkB;EAC/B;;CAEA,SAAS;EACP,OAAO,CAAI,+CAEiB,KAAK,YAAY,EAAE;CAGjD;AACF;GAlCG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAKzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,UAhB1C,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"notification-group2.js","names":[],"sources":["../../src/notification/notification-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport { audit, popoverStyles, TypeNativePopoverController, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './notification-group.css?inline';\n\n/**\n * @element nve-notification-group\n * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status.\n * @documentation https://nvidia.github.io/elements/docs/elements/notification/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/notification\n * @slot - default slot for `nve-notification`\n * @cssprop --box-shadow\n * @cssprop --animation-duration - Duration of notification group open/close animations\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/\n */\n@audit()\nexport class NotificationGroup extends LitElement {\n  /**\n   * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement = globalThis.document?.body;\n\n  /**\n   * Sets the position of the popover relative to the anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition;\n\n  /**\n   * Sets the alignment of the popover relative to the anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  protected typeNativePopoverController = new TypeNativePopoverController<NotificationGroup>(this);\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return 'manual';\n  }\n\n  static readonly metadata = {\n    tag: 'nve-notification-group',\n    version: '0.0.0',\n    children: ['nve-notification']\n  };\n\n  render() {\n    return html`\n    <div internal-host>\n      <slot @slotchange=${() => this.showPopover()}></slot>\n    </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;AAqBO,IAAM,IAAN,cAAgC,EAAW;;EAiBR,aAZmB,KAAA,SAAA,WAAW,UAAU,MAYxC,KAAA,8BAAA,IAAI,EAA+C,IAAI;;;EAE/E,KAAA,SAAA,EAAU,CAAC,GAAe,CAAM,CAAC;;CAGjD,IAAI,cAA2B;EAC7B,OAAO;CACT;;EAE2B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,kBAAkB;EAC/B;;CAEA,SAAS;EACP,OAAO,CAAI,+CAEiB,KAAK,YAAY,EAAE;CAGjD;AACF;AAlCG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAKzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAhB1C,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}

package/dist/notification/notification.examples.json

@@ -45,7 +45,7 @@
     {
       "id": "notification-content-wrap",
       "name": "ContentWrap",
-      "template": "<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\" style=\"width: 230px\">\n    some text content in a notification with some really long text in it that just keeps going...\n  </p>\n</nve-notification>\n",
+      "template": "<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\" style=\"width: 230px\">some text content in a notification with some really long text in it that just keeps going...</p>\n</nve-notification>\n",
       "summary": "Notification with text wrapping for longer content. Use when notification messages exceed single-line length, but keep content concise for better readability and user comprehension.",
       "description": "",
       "composition": false,
@@ -67,7 +67,7 @@
     {
       "id": "notification-interactive-group",
       "name": "InteractiveGroup",
-      "template": "<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-button>generate</nve-button>\n<script type=\"module\">\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const notification = document.createElement(\"nve-notification\");\n    notification.closable = true;\n    notification.status = [\"warning\", \"danger\", \"success\", \"accent\", undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML =\n      '<h3 nve-text=\"label\">' +\n      (notification.status ?? \"default\") +\n      '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 1000 * (document.querySelectorAll(\"nve-notification\").length + 1);\n    notification.addEventListener(\"close\", () => notification.remove(), { once: true });\n    notification.position = \"bottom\";\n    notification.alignment = \"end\";\n    document.querySelector(\"nve-notification-group\").prepend(notification);\n  });\n</script>\n",
+      "template": "<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-button>generate</nve-button>\n<script type=\"module\">\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const notification = document.createElement(\"nve-notification\");\n    notification.closable = true;\n    notification.status = [\"warning\", \"danger\", \"success\", \"accent\", undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML = '<h3 nve-text=\"label\">' + (notification.status ?? \"default\") + '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 1000 * (document.querySelectorAll(\"nve-notification\").length + 1);\n    notification.addEventListener(\"close\", () => notification.remove(), { once: true });\n    notification.position = \"bottom\";\n    notification.alignment = \"end\";\n    document.querySelector(\"nve-notification-group\").prepend(notification);\n  });\n</script>\n",
       "summary": "Dynamic notification group with programmatic creation and stacking. Perfect for toast-style notifications generated by user actions or system events, with progressive timeout and automatic removal patterns for managing many notifications.",
       "description": "",
       "composition": false,
@@ -140,7 +140,7 @@
     {
       "id": "notification-layers",
       "name": "Layers",
-      "template": "<nve-button>Notification</nve-button>\n<nve-button popovertarget=\"dialog\">Dialog</nve-button>\n<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">Notification</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">This should not cause the dialog to close</p>\n</nve-dialog>\n<script type=\"module\">\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const notification = document.createElement(\"nve-notification\");\n    notification.closable = true;\n    notification.status = [\"warning\", \"danger\", \"success\", \"accent\", undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML =\n      '<h3 nve-text=\"label\">' +\n      (notification.status ?? \"default\") +\n      '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 3000 * (document.querySelectorAll(\"nve-notification\").length + 1);\n    notification.addEventListener(\"close\", () => notification.remove(), { once: true });\n    notification.position = \"bottom\";\n    notification.alignment = \"end\";\n    document.querySelector(\"nve-notification-group\").prepend(notification);\n  });\n</script>\n",
+      "template": "<nve-button>Notification</nve-button>\n<nve-button popovertarget=\"dialog\">Dialog</nve-button>\n<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">Notification</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">This should not cause the dialog to close</p>\n</nve-dialog>\n<script type=\"module\">\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const notification = document.createElement(\"nve-notification\");\n    notification.closable = true;\n    notification.status = [\"warning\", \"danger\", \"success\", \"accent\", undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML = '<h3 nve-text=\"label\">' + (notification.status ?? \"default\") + '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 3000 * (document.querySelectorAll(\"nve-notification\").length + 1);\n    notification.addEventListener(\"close\", () => notification.remove(), { once: true });\n    notification.position = \"bottom\";\n    notification.alignment = \"end\";\n    document.querySelector(\"nve-notification-group\").prepend(notification);\n  });\n</script>\n",
       "summary": "Notification layering with modal dialogs for proper stacking context. Ensures notifications appear above dialogs without interfering with modal interactions, crucial for complex UI layering scenarios.",
       "description": "",
       "composition": true,

package/dist/notification/notification2.js

@@ -5,7 +5,7 @@ import { scopedRegistry as r } from "../internal/decorators/scoped-registry.js";
 import { useStyles as i } from "../internal/styles/index.js";
 import { popoverStyles as a } from "../internal/styles/popover2.js";
 import { statusIcons as o } from "../internal/types/index.js";
-import s from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import s from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Icon as c } from "../icon/icon2.js";
 import { IconButton as l } from "../icon-button/icon-button2.js";
 import u from "./notification.js";
@@ -34,7 +34,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-notification",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {

package/dist/notification/notification2.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification2.js","names":["#i18nController","#popoverContent","#hiddenAttributeObserver","#syncInlineCloseTimeout","#clearCloseTimeout","#closeTimeout"],"sources":["../../src/notification/notification.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverType, SupportStatus, PopoverPosition } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  popoverStyles,\n  statusIcons,\n  useStyles,\n  I18nController,\n  TypeNativePopoverController,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport styles from './notification.css?inline';\n\n/**\n * @element nve-notification\n * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status.\n * @documentation https://nvidia.github.io/elements/docs/elements/notification/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/notification\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the notification opens.\n * @event close - Dispatched when the notification closes.\n * @slot - The message communicated by the notification.\n * @slot icon - content slot for the status icon\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --min-width\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --border\n * @cssprop --status-border\n * @cssprop --gap\n * @cssprop --status-color\n * @cssprop --animation-duration - Duration of notification open/close animations\n * @csspart status-icon - The status icon element\n * @csspart icon-button - The close icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/\n */\n@scopedRegistry()\nexport class Notification extends LitElement {\n  /**\n   * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement = globalThis.document?.body;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition;\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * Determines if a close button should render within notification.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * A delayed `close` event will occur determined from the provided millisecond value.\n   */\n  @property({ type: Number, attribute: 'close-timeout' }) closeTimeout = 0;\n\n  /**\n   * Determines the visual status of the notification.\n   */\n  @property({ type: String, reflect: true }) status: SupportStatus;\n\n  /**\n   * Flat container option applies when embedding within another containing element such as a drawer.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /**\n   * @private\n   */\n  @property({ type: Boolean }) inline = false;\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return 'manual';\n  }\n\n  /** @private */\n  get popoverInline() {\n    return this.parentElement?.localName === 'nve-notification-group' || this.inline || this.container === 'flat';\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  protected typeNativePopoverController: TypeNativePopoverController<Notification>;\n\n  #closeTimeout?: ReturnType<typeof setTimeout>;\n\n  #hiddenAttributeObserver?: MutationObserver;\n\n  get #popoverContent() {\n    return html`\n    <slot name=\"icon\"><nve-icon .name=${statusIcons[this.status]} .ariaLabel=${(this.status ? (this.i18n as Record<string, string>)[this.status] : undefined) ?? this.i18n.information} part=\"status-icon\"></nve-icon></slot>\n    ${this.closable ? html`<nve-icon-button part=\"icon-button\" @click=${this.hidePopover} icon-name=\"cancel\" size=\"sm\" container=\"flat\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n    <slot></slot>`;\n  }\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-notification',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon,\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  render() {\n    return html`\n    <div internal-host>\n      ${this.#popoverContent}\n    </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this.#hiddenAttributeObserver = new MutationObserver(() => this.#syncInlineCloseTimeout());\n    this.#hiddenAttributeObserver.observe(this, { attributeFilter: ['hidden'] });\n    this._internals.role = 'alert';\n    this.#syncInlineCloseTimeout();\n  }\n\n  disconnectedCallback() {\n    this.#clearCloseTimeout();\n    this.#hiddenAttributeObserver?.disconnect();\n    this.#hiddenAttributeObserver = undefined;\n    super.disconnectedCallback();\n  }\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n\n    if (!this.popoverInline) {\n      this.typeNativePopoverController = new TypeNativePopoverController<Notification>(this);\n    } else {\n      this.setAttribute('nve-popover', '');\n    }\n\n    this.#syncInlineCloseTimeout();\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    if (props.has('closeTimeout') || props.has('container') || props.has('inline')) {\n      this.#syncInlineCloseTimeout();\n    }\n  }\n\n  hidePopover(): void {\n    this.#clearCloseTimeout();\n\n    if (this.popoverInline) {\n      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n    } else {\n      super.hidePopover();\n    }\n  }\n\n  /**\n   * The popover controller provides this functionality.\n   * But when the notification is in inline mode the\n   * controller does not run so this sets it up directly.\n   */\n  #syncInlineCloseTimeout() {\n    this.#clearCloseTimeout();\n\n    if (this.popoverInline && this.closeTimeout && !this.hidden) {\n      this.#closeTimeout = setTimeout(() => this.hidePopover(), this.closeTimeout);\n    }\n  }\n\n  #clearCloseTimeout() {\n    if (this.#closeTimeout !== undefined) {\n      clearTimeout(this.#closeTimeout);\n      this.#closeTimeout = undefined;\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"notification2.js","names":[],"sources":["../../src/notification/notification.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverType, SupportStatus, PopoverPosition } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  popoverStyles,\n  statusIcons,\n  useStyles,\n  I18nController,\n  TypeNativePopoverController,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport styles from './notification.css?inline';\n\n/**\n * @element nve-notification\n * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status.\n * @documentation https://nvidia.github.io/elements/docs/elements/notification/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/notification\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the notification opens.\n * @event close - Dispatched when the notification closes.\n * @slot - The message communicated by the notification.\n * @slot icon - content slot for the status icon\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --min-width\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --border\n * @cssprop --status-border\n * @cssprop --gap\n * @cssprop --status-color\n * @cssprop --animation-duration - Duration of notification open/close animations\n * @csspart status-icon - The status icon element\n * @csspart icon-button - The close icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/\n */\n@scopedRegistry()\nexport class Notification extends LitElement {\n  /**\n   * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement = globalThis.document?.body;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition;\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * Determines if a close button should render within notification.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * A delayed `close` event will occur determined from the provided millisecond value.\n   */\n  @property({ type: Number, attribute: 'close-timeout' }) closeTimeout = 0;\n\n  /**\n   * Determines the visual status of the notification.\n   */\n  @property({ type: String, reflect: true }) status: SupportStatus;\n\n  /**\n   * Flat container option applies when embedding within another containing element such as a drawer.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /**\n   * @private\n   */\n  @property({ type: Boolean }) inline = false;\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return 'manual';\n  }\n\n  /** @private */\n  get popoverInline() {\n    return this.parentElement?.localName === 'nve-notification-group' || this.inline || this.container === 'flat';\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  protected typeNativePopoverController: TypeNativePopoverController<Notification>;\n\n  #closeTimeout?: ReturnType<typeof setTimeout>;\n\n  #hiddenAttributeObserver?: MutationObserver;\n\n  get #popoverContent() {\n    return html`\n    <slot name=\"icon\"><nve-icon .name=${statusIcons[this.status]} .ariaLabel=${(this.status ? (this.i18n as Record<string, string>)[this.status] : undefined) ?? this.i18n.information} part=\"status-icon\"></nve-icon></slot>\n    ${this.closable ? html`<nve-icon-button part=\"icon-button\" @click=${this.hidePopover} icon-name=\"cancel\" size=\"sm\" container=\"flat\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n    <slot></slot>`;\n  }\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-notification',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon,\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  render() {\n    return html`\n    <div internal-host>\n      ${this.#popoverContent}\n    </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this.#hiddenAttributeObserver = new MutationObserver(() => this.#syncInlineCloseTimeout());\n    this.#hiddenAttributeObserver.observe(this, { attributeFilter: ['hidden'] });\n    this._internals.role = 'alert';\n    this.#syncInlineCloseTimeout();\n  }\n\n  disconnectedCallback() {\n    this.#clearCloseTimeout();\n    this.#hiddenAttributeObserver?.disconnect();\n    this.#hiddenAttributeObserver = undefined;\n    super.disconnectedCallback();\n  }\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n\n    if (!this.popoverInline) {\n      this.typeNativePopoverController = new TypeNativePopoverController<Notification>(this);\n    } else {\n      this.setAttribute('nve-popover', '');\n    }\n\n    this.#syncInlineCloseTimeout();\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    if (props.has('closeTimeout') || props.has('container') || props.has('inline')) {\n      this.#syncInlineCloseTimeout();\n    }\n  }\n\n  hidePopover(): void {\n    this.#clearCloseTimeout();\n\n    if (this.popoverInline) {\n      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n    } else {\n      super.hidePopover();\n    }\n  }\n\n  /**\n   * The popover controller provides this functionality.\n   * But when the notification is in inline mode the\n   * controller does not run so this sets it up directly.\n   */\n  #syncInlineCloseTimeout() {\n    this.#clearCloseTimeout();\n\n    if (this.popoverInline && this.closeTimeout && !this.hidden) {\n      this.#closeTimeout = setTimeout(() => this.hidePopover(), this.closeTimeout);\n    }\n  }\n\n  #clearCloseTimeout() {\n    if (this.#closeTimeout !== undefined) {\n      clearTimeout(this.#closeTimeout);\n      this.#closeTimeout = undefined;\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/page/page-panel/page-panel-content2.js

@@ -9,7 +9,7 @@ var i = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel-content",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	render() {