@nvidia-elements/core 0.0.10 → 0.0.11

package/dist/internal/controllers/keynav-list.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"keynav-list.controller.js","names":["#config","#keynavDisabled","#initializeTabIndex","#clickItem","#focusItem","#getActiveItem","#setActiveItem"],"sources":["../../../src/internal/controllers/keynav-list.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { LegacyDecoratorTarget } from '../types/index.js';\nimport { focusElement, initializeKeyListItems, setActiveKeyListItem } from '../utils/focus.js';\nimport { KeynavCode, validKeyNavigationCode } from '../utils/dom.js';\n\nexport interface KeynavListConfig {\n  items: NodeListOf<HTMLElement> | HTMLElement[];\n  layout?: 'both' | 'horizontal' | 'vertical';\n  manageFocus?: boolean;\n  manageTabindex?: boolean;\n  loop?: boolean;\n  dir?: string | null;\n}\n\nexport interface KeynavListElement {\n  keynavListConfig: KeynavListConfig;\n}\n\n/** https://webaim.org/techniques/keyboard/ */\nexport function keyNavigationList<T extends ReactiveElement & KeynavListElement>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new KeyNavigationListController(instance));\n}\n\nexport class KeyNavigationListController<T extends ReactiveElement & KeynavListElement> implements ReactiveController {\n  get #config(): KeynavListConfig & { items: HTMLElement[] } {\n    return {\n      layout: 'horizontal',\n      manageFocus: true,\n      manageTabindex: true,\n      loop: false,\n      dir: this.host.getAttribute('rtl'),\n      ...this.host.keynavListConfig,\n      items: Array.from(this.host.keynavListConfig.items).filter(\n        (i: HTMLElement & { disabled?: boolean }) => !i.disabled\n      )\n    };\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  /** @private attr nve-keynav-disabled is an internal API for advanced use cases only */\n  get #keynavDisabled() {\n    return this.host.hasAttribute('nve-keynav-disabled');\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    this.#initializeTabIndex();\n    this.host.addEventListener('pointerup', (e: PointerEvent) => this.#clickItem(e));\n    this.host.addEventListener('keydown', (e: KeyboardEvent) => this.#focusItem(e));\n  }\n\n  #initializeTabIndex() {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus && manageTabindex && !this.#keynavDisabled) {\n      initializeKeyListItems(items);\n    }\n  }\n\n  #clickItem(e: PointerEvent) {\n    const item = this.#getActiveItem(e, this.#config.items);\n    if (item) {\n      this.#setActiveItem(e, item);\n    }\n  }\n\n  #focusItem(e: KeyboardEvent) {\n    if (validKeyNavigationCode(e) && !this.#keynavDisabled) {\n      const { loop, layout, dir, items } = this.#config;\n      const activeItem = this.#getActiveItem(e, items);\n      if (activeItem) {\n        const { next, previous } = getNextKeyListItem(activeItem, Array.from(items), {\n          loop,\n          layout,\n          dir,\n          code: e.code as KeynavCode\n        });\n\n        if (next !== previous) {\n          this.#setActiveItem(e, items[next]!, items[previous]);\n        }\n      }\n    }\n  }\n\n  #getActiveItem(e: Event, items: HTMLElement[]) {\n    const focusedElement = e.composedPath()[0] as HTMLElement;\n    return items.find(i => i === focusedElement) ? focusedElement : null;\n  }\n\n  #setActiveItem(e: KeyboardEvent | PointerEvent, activeItem: HTMLElement, previousItem?: HTMLElement) {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus) {\n      if (manageTabindex) {\n        setActiveKeyListItem(items, activeItem);\n      }\n\n      focusElement(activeItem);\n      e.preventDefault();\n    }\n\n    const detail = {\n      activeItem,\n      previousItem,\n      code: e instanceof KeyboardEvent ? e.code : null,\n      metaKey: e.ctrlKey || e.metaKey,\n      items\n    };\n    activeItem.dispatchEvent(new CustomEvent('nve-key-change', { bubbles: true, composed: true, detail }));\n  }\n}\n\ninterface KeyListConfig {\n  code: KeynavCode;\n  loop?: boolean;\n  layout?: 'horizontal' | 'vertical' | 'both';\n  dir: string | null | undefined;\n}\n\nfunction resolveArrowDirection(config: KeyListConfig): 'backward' | 'forward' | null {\n  const { code, layout, dir } = config;\n  const start = dir === 'rtl' ? KeynavCode.ArrowRight : KeynavCode.ArrowLeft;\n  const end = dir === 'rtl' ? KeynavCode.ArrowLeft : KeynavCode.ArrowRight;\n\n  if (layout !== 'horizontal') {\n    if (code === KeynavCode.ArrowUp) return 'backward';\n    if (code === KeynavCode.ArrowDown) return 'forward';\n  }\n\n  if (layout !== 'vertical') {\n    if (code === start) return 'backward';\n    if (code === end) return 'forward';\n  }\n\n  return null;\n}\n\nfunction resolveSpecialKey(code: KeynavCode): 'home' | 'end' | 'pageup' | 'pagedown' | null {\n  if (code === KeynavCode.End) return 'end';\n  if (code === KeynavCode.Home) return 'home';\n  if (code === KeynavCode.PageUp) return 'pageup';\n  if (code === KeynavCode.PageDown) return 'pagedown';\n  return null;\n}\n\nfunction navigateWithLoop(current: number, limit: number, step: number, loop: boolean | undefined) {\n  const next = current + step;\n  if (next >= 0 && next <= limit) return next;\n  return loop ? (step < 0 ? limit : 0) : current;\n}\n\nexport function getNextKeyListItem(item: HTMLElement, items: HTMLElement[], config: KeyListConfig) {\n  let next = items.indexOf(item);\n  const previous = next;\n  const itemCount = items.length - 1;\n  const direction = resolveArrowDirection(config);\n\n  switch (direction ?? resolveSpecialKey(config.code)) {\n    case 'backward':\n      next = navigateWithLoop(next, itemCount, -1, config.loop);\n      break;\n    case 'forward':\n      next = navigateWithLoop(next, itemCount, 1, config.loop);\n      break;\n    case 'end':\n      next = itemCount;\n      break;\n    case 'home':\n      next = 0;\n      break;\n    case 'pageup':\n      next = Math.max(0, next - 4);\n      break;\n    case 'pagedown':\n      next = Math.min(itemCount, next + 4);\n      break;\n    case null:\n      break;\n  }\n\n  return { next, previous };\n}\n"],"mappings":";;;AAsBA,SAAgB,IAAmF;AACjG,SAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAA4B,EAAS,CAAC;;AAGtF,IAAa,IAAb,MAAsH;CACpH,KAAA,IAA2D;AACzD,SAAO;GACL,QAAQ;GACR,aAAa;GACb,gBAAgB;GAChB,MAAM;GACN,KAAK,KAAK,KAAK,aAAa,MAAM;GAClC,GAAG,KAAK,KAAK;GACb,OAAO,MAAM,KAAK,KAAK,KAAK,iBAAiB,MAAM,CAAC,QACjD,MAA4C,CAAC,EAAE,SACjD;GACF;;CAGH,YAAY,GAAiB;AAC3B,EADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,KAAK;;CAI/B,KAAA,IAAsB;AACpB,SAAO,KAAK,KAAK,aAAa,sBAAsB;;CAGtD,MAAM,gBAAgB;AAIpB,EAHA,MAAM,KAAK,KAAK,gBAChB,MAAA,GAA0B,EAC1B,KAAK,KAAK,iBAAiB,cAAc,MAAoB,MAAA,EAAgB,EAAE,CAAC,EAChF,KAAK,KAAK,iBAAiB,YAAY,MAAqB,MAAA,EAAgB,EAAE,CAAC;;CAGjF,KAAsB;EACpB,IAAM,EAAE,gBAAa,mBAAgB,aAAU,MAAA;AAC/C,EAAI,KAAe,KAAkB,CAAC,MAAA,KACpC,EAAuB,EAAM;;CAIjC,GAAW,GAAiB;EAC1B,IAAM,IAAO,MAAA,EAAoB,GAAG,MAAA,EAAa,MAAM;AACvD,EAAI,KACF,MAAA,EAAoB,GAAG,EAAK;;CAIhC,GAAW,GAAkB;AAC3B,MAAI,EAAuB,EAAE,IAAI,CAAC,MAAA,GAAsB;GACtD,IAAM,EAAE,SAAM,WAAQ,QAAK,aAAU,MAAA,GAC/B,IAAa,MAAA,EAAoB,GAAG,EAAM;AAChD,OAAI,GAAY;IACd,IAAM,EAAE,SAAM,gBAAa,EAAmB,GAAY,MAAM,KAAK,EAAM,EAAE;KAC3E;KACA;KACA;KACA,MAAM,EAAE;KACT,CAAC;AAEF,IAAI,MAAS,KACX,MAAA,EAAoB,GAAG,EAAM,IAAQ,EAAM,GAAU;;;;CAM7D,GAAe,GAAU,GAAsB;EAC7C,IAAM,IAAiB,EAAE,cAAc,CAAC;AACxC,SAAO,EAAM,MAAK,MAAK,MAAM,EAAe,GAAG,IAAiB;;CAGlE,GAAe,GAAiC,GAAyB,GAA4B;EACnG,IAAM,EAAE,gBAAa,mBAAgB,aAAU,MAAA;AAC/C,EAAI,MACE,KACF,EAAqB,GAAO,EAAW,EAGzC,EAAa,EAAW,EACxB,EAAE,gBAAgB;EAGpB,IAAM,IAAS;GACb;GACA;GACA,MAAM,aAAa,gBAAgB,EAAE,OAAO;GAC5C,SAAS,EAAE,WAAW,EAAE;GACxB;GACD;AACD,IAAW,cAAc,IAAI,YAAY,kBAAkB;GAAE,SAAS;GAAM,UAAU;GAAM;GAAQ,CAAC,CAAC;;;AAW1G,SAAS,EAAsB,GAAsD;CACnF,IAAM,EAAE,SAAM,WAAQ,WAAQ,GACxB,IAAQ,MAAQ,QAAQ,EAAW,aAAa,EAAW,WAC3D,IAAM,MAAQ,QAAQ,EAAW,YAAY,EAAW;AAE9D,KAAI,MAAW,cAAc;AAC3B,MAAI,MAAS,EAAW,QAAS,QAAO;AACxC,MAAI,MAAS,EAAW,UAAW,QAAO;;AAG5C,KAAI,MAAW,YAAY;AACzB,MAAI,MAAS,EAAO,QAAO;AAC3B,MAAI,MAAS,EAAK,QAAO;;AAG3B,QAAO;;AAGT,SAAS,EAAkB,GAAiE;AAK1F,QAJI,MAAS,EAAW,MAAY,QAChC,MAAS,EAAW,OAAa,SACjC,MAAS,EAAW,SAAe,WACnC,MAAS,EAAW,WAAiB,aAClC;;AAGT,SAAS,EAAiB,GAAiB,GAAe,GAAc,GAA2B;CACjG,IAAM,IAAO,IAAU;AAEvB,QADI,KAAQ,KAAK,KAAQ,IAAc,IAChC,IAAQ,IAAO,IAAI,IAAQ,IAAK;;AAGzC,SAAgB,EAAmB,GAAmB,GAAsB,GAAuB;CACjG,IAAI,IAAO,EAAM,QAAQ,EAAK,EACxB,IAAW,GACX,IAAY,EAAM,SAAS;AAGjC,SAFkB,EAAsB,EAAO,IAE1B,EAAkB,EAAO,KAAK,EAAnD;EACE,KAAK;AACH,OAAO,EAAiB,GAAM,GAAW,IAAI,EAAO,KAAK;AACzD;EACF,KAAK;AACH,OAAO,EAAiB,GAAM,GAAW,GAAG,EAAO,KAAK;AACxD;EACF,KAAK;AACH,OAAO;AACP;EACF,KAAK;AACH,OAAO;AACP;EACF,KAAK;AACH,OAAO,KAAK,IAAI,GAAG,IAAO,EAAE;AAC5B;EACF,KAAK;AACH,OAAO,KAAK,IAAI,GAAW,IAAO,EAAE;AACpC;EACF,KAAK,KACH;;AAGJ,QAAO;EAAE;EAAM;EAAU"}
+{"version":3,"file":"keynav-list.controller.js","names":["#config","#keynavDisabled","#initializeTabIndex","#clickItem","#focusItem","#getActiveItem","#setActiveItem"],"sources":["../../../src/internal/controllers/keynav-list.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { LegacyDecoratorTarget } from '../types/index.js';\nimport { focusElement, initializeKeyListItems, setActiveKeyListItem } from '../utils/focus.js';\nimport { KeynavCode, validKeyNavigationCode } from '../utils/dom.js';\n\nexport interface KeynavListConfig {\n  items: NodeListOf<HTMLElement> | HTMLElement[];\n  layout?: 'both' | 'horizontal' | 'vertical';\n  manageFocus?: boolean;\n  manageTabindex?: boolean;\n  loop?: boolean;\n  dir?: string | null;\n}\n\nexport interface KeynavListElement {\n  keynavListConfig: KeynavListConfig;\n}\n\n/** https://webaim.org/techniques/keyboard/ */\nexport function keyNavigationList<T extends ReactiveElement & KeynavListElement>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new KeyNavigationListController(instance));\n}\n\nexport class KeyNavigationListController<T extends ReactiveElement & KeynavListElement> implements ReactiveController {\n  get #config(): KeynavListConfig & { items: HTMLElement[] } {\n    return {\n      layout: 'horizontal',\n      manageFocus: true,\n      manageTabindex: true,\n      loop: false,\n      dir: this.host.getAttribute('rtl'),\n      ...this.host.keynavListConfig,\n      items: Array.from(this.host.keynavListConfig.items).filter(\n        (i: HTMLElement & { disabled?: boolean }) => !i.disabled\n      )\n    };\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  /** @private attr nve-keynav-disabled is an internal API for advanced use cases only */\n  get #keynavDisabled() {\n    return this.host.hasAttribute('nve-keynav-disabled');\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    this.#initializeTabIndex();\n    this.host.addEventListener('pointerup', (e: PointerEvent) => this.#clickItem(e));\n    this.host.addEventListener('keydown', (e: KeyboardEvent) => this.#focusItem(e));\n  }\n\n  #initializeTabIndex() {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus && manageTabindex && !this.#keynavDisabled) {\n      initializeKeyListItems(items);\n    }\n  }\n\n  #clickItem(e: PointerEvent) {\n    const item = this.#getActiveItem(e, this.#config.items);\n    if (item) {\n      this.#setActiveItem(e, item);\n    }\n  }\n\n  #focusItem(e: KeyboardEvent) {\n    if (validKeyNavigationCode(e) && !this.#keynavDisabled) {\n      const { loop, layout, dir, items } = this.#config;\n      const activeItem = this.#getActiveItem(e, items);\n      if (activeItem) {\n        const { next, previous } = getNextKeyListItem(activeItem, Array.from(items), {\n          loop,\n          layout,\n          dir,\n          code: e.code as KeynavCode\n        });\n\n        if (next !== previous) {\n          this.#setActiveItem(e, items[next]!, items[previous]);\n        }\n      }\n    }\n  }\n\n  #getActiveItem(e: Event, items: HTMLElement[]) {\n    const focusedElement = e.composedPath()[0] as HTMLElement;\n    return items.find(i => i === focusedElement) ? focusedElement : null;\n  }\n\n  #setActiveItem(e: KeyboardEvent | PointerEvent, activeItem: HTMLElement, previousItem?: HTMLElement) {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus) {\n      if (manageTabindex) {\n        setActiveKeyListItem(items, activeItem);\n      }\n\n      focusElement(activeItem);\n      e.preventDefault();\n    }\n\n    const detail = {\n      activeItem,\n      previousItem,\n      code: e instanceof KeyboardEvent ? e.code : null,\n      metaKey: e.ctrlKey || e.metaKey,\n      items\n    };\n    activeItem.dispatchEvent(new CustomEvent('nve-key-change', { bubbles: true, composed: true, detail }));\n  }\n}\n\ninterface KeyListConfig {\n  code: KeynavCode;\n  loop?: boolean;\n  layout?: 'horizontal' | 'vertical' | 'both';\n  dir: string | null | undefined;\n}\n\nfunction resolveArrowDirection(config: KeyListConfig): 'backward' | 'forward' | null {\n  const { code, layout, dir } = config;\n  const start = dir === 'rtl' ? KeynavCode.ArrowRight : KeynavCode.ArrowLeft;\n  const end = dir === 'rtl' ? KeynavCode.ArrowLeft : KeynavCode.ArrowRight;\n\n  if (layout !== 'horizontal') {\n    if (code === KeynavCode.ArrowUp) return 'backward';\n    if (code === KeynavCode.ArrowDown) return 'forward';\n  }\n\n  if (layout !== 'vertical') {\n    if (code === start) return 'backward';\n    if (code === end) return 'forward';\n  }\n\n  return null;\n}\n\nfunction resolveSpecialKey(code: KeynavCode): 'home' | 'end' | 'pageup' | 'pagedown' | null {\n  if (code === KeynavCode.End) return 'end';\n  if (code === KeynavCode.Home) return 'home';\n  if (code === KeynavCode.PageUp) return 'pageup';\n  if (code === KeynavCode.PageDown) return 'pagedown';\n  return null;\n}\n\nfunction navigateWithLoop(current: number, step: number, options: { limit: number; loop: boolean | undefined }) {\n  const { limit, loop } = options;\n  const next = current + step;\n  if (next >= 0 && next <= limit) return next;\n  return loop ? (step < 0 ? limit : 0) : current;\n}\n\nexport function getNextKeyListItem(item: HTMLElement, items: HTMLElement[], config: KeyListConfig) {\n  let next = items.indexOf(item);\n  const previous = next;\n  const itemCount = items.length - 1;\n  const direction = resolveArrowDirection(config);\n\n  switch (direction ?? resolveSpecialKey(config.code)) {\n    case 'backward':\n      next = navigateWithLoop(next, -1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'forward':\n      next = navigateWithLoop(next, 1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'end':\n      next = itemCount;\n      break;\n    case 'home':\n      next = 0;\n      break;\n    case 'pageup':\n      next = Math.max(0, next - 4);\n      break;\n    case 'pagedown':\n      next = Math.min(itemCount, next + 4);\n      break;\n    case null:\n      break;\n  }\n\n  return { next, previous };\n}\n"],"mappings":"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"}

package/dist/internal/controllers/popover.examples.json

@@ -2,7 +2,7 @@
   "entrypoint": "@nvidia-elements/core/internal/controllers/popover.examples.json",
   "items": [
     {
-      "id": "core-internal-controllers-popover_anchor",
+      "id": "internal-controllers-popover-anchor",
       "name": "Anchor",
       "template": "<nve-tooltip id=\"popover-1\" anchor=\"btn-2\">tooltip 1</nve-tooltip>\n<nve-tooltip id=\"popover-2\" anchor=\"btn-1\">tooltip 2</nve-tooltip>\n<div nve-layout=\"row gap:xs align:center\">\n  <nve-button id=\"btn-1\" popovertarget=\"popover-1\">button 1</nve-button>\n  <nve-button id=\"btn-2\" popovertarget=\"popover-2\">button 2</nve-button>\n</div>\n",
       "summary": "Anchor-based positioning where popovers anchor to specific elements rather than their triggers.",
@@ -13,7 +13,7 @@
       ]
     },
     {
-      "id": "core-internal-controllers-popover_nested",
+      "id": "internal-controllers-popover-nested",
       "name": "Nested",
       "template": "<style>\n  #root-inner {\n    height: 2000px;\n  }\n</style>\n<nve-dialog closable modal>\n  <h3 nve-text=\"heading\">Dialog</h3>\n  <p nve-text=\"body\" style=\"margin-bottom: 48px\">hello there</p>\n  <nve-button id=\"dropdown-btn\">search</nve-button>\n  <nve-dropdown anchor=\"dropdown-btn\" closable position=\"bottom\" alignment=\"start\">\n    <nve-search rounded>\n      <label>search dataset</label>\n      <nve-icon-button\n        id=\"tooltip-btn\"\n        icon-name=\"information-circle-stroke\"\n        container=\"flat\"\n        aria-label=\"more details\"\n        slot=\"label\"\n      ></nve-icon-button>\n      <input type=\"search\" placeholder=\"search\" />\n    </nve-search>\n    <nve-tooltip anchor=\"tooltip-btn\" position=\"top\">hello there</nve-tooltip>\n  </nve-dropdown>\n</nve-dialog>\n<nve-notification closable position=\"bottom\" alignment=\"end\">\n  <h3 nve-text=\"label\">notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
       "summary": "Nested popovers within dialogs and notifications, with proper layering and stacking order.",
@@ -24,7 +24,7 @@
       ]
     },
     {
-      "id": "core-internal-controllers-popover_programmatic-trigger",
+      "id": "internal-controllers-popover-programmatic-trigger",
       "name": "ProgrammaticTrigger",
       "template": "<nve-toast hidden close-timeout=\"3000\">hello there</nve-toast>\n<nve-button>open after 2s</nve-button>\n<script type=\"module\">\n  const toast = document.querySelector(\"nve-toast\");\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", async () => {\n    await new Promise((r) => setTimeout(r, 2000)); // do an async task then open the popover\n    toast.showPopover();\n  });\n</script>\n",
       "summary": "Programmatic popover control with async operations before showing the popover.",
@@ -35,7 +35,7 @@
       ]
     },
     {
-      "id": "core-internal-controllers-popover_interactive",
+      "id": "internal-controllers-popover-interactive",
       "name": "Interactive",
       "template": "<div nve-layout=\"row align:center gap:xl\" style=\"height: 300px\">\n  <nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n  <nve-button popovertarget=\"tooltip\">tooltip</nve-button>\n  <nve-toast id=\"toast\" close-timeout=\"1500\">copied!</nve-toast>\n  <nve-button popovertarget=\"toast\">toast</nve-button>\n  <nve-drawer id=\"drawer\" closable modal>\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Title</h3>\n    </nve-drawer-header>\n    <p nve-text=\"body\">some text content in a drawer</p>\n  </nve-drawer>\n  <nve-button popovertarget=\"drawer\">drawer</nve-button>\n  <nve-dropdown id=\"dropdown\" closable>\n    <h3 nve-text=\"heading\">Title</h3>\n    <p nve-text=\"body\">some text content in a dropdown</p>\n  </nve-dropdown>\n  <nve-button popovertarget=\"dropdown\">dropdown</nve-button>\n  <nve-dialog id=\"dialog\" closable modal>\n    <h3 nve-text=\"heading\">Title</h3>\n    <p nve-text=\"body\">some text content in a closable dialog</p>\n  </nve-dialog>\n  <nve-button popovertarget=\"dialog\">dialog</nve-button>\n  <nve-notification id=\"notification\" closable position=\"bottom\" alignment=\"end\" close-timeout=\"2000\">\n    <h3 nve-text=\"label\">notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-button popovertarget=\"notification\">notification snackbar</nve-button>\n</div>\n",
       "summary": "Interactive showcase of all popover types (tooltip, toast, drawer, dropdown, dialog, notification) using modern popovertarget API.",
@@ -44,7 +44,7 @@
       "tags": []
     },
     {
-      "id": "core-internal-controllers-popover_legacy-interactive",
+      "id": "internal-controllers-popover-legacy-interactive",
       "name": "LegacyInteractive",
       "template": "<div nve-layout=\"row align:center gap:xl\" style=\"height: 300px\">\n  <nve-tooltip trigger=\"tooltip-btn\" behavior-trigger position=\"top\" hidden>hello there</nve-tooltip>\n  <nve-button id=\"tooltip-btn\">tooltip</nve-button>\n  <nve-button id=\"toast-btn\">toast</nve-button>\n  <nve-toast trigger=\"toast-btn\" behavior-trigger position=\"top\" close-timeout=\"1500\" hidden>copied!</nve-toast>\n  <nve-button id=\"drawer-btn\" size=\"sm\">drawer</nve-button>\n  <nve-drawer trigger=\"drawer-btn\" behavior-trigger hidden closable modal>\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Title</h3>\n    </nve-drawer-header>\n    <p nve-text=\"body\">some text content in a drawer</p>\n  </nve-drawer>\n  <nve-button id=\"dropdown-btn\">dropdown</nve-button>\n  <nve-dropdown trigger=\"dropdown-btn\" behavior-trigger closable hidden>\n    <h3 nve-text=\"heading\">Title</h3>\n    <p nve-text=\"body\">some text content in a dropdown</p>\n  </nve-dropdown>\n  <nve-button id=\"dialog-btn\">dialog</nve-button>\n  <nve-dialog trigger=\"dialog-btn\" behavior-trigger closable modal hidden>\n    <h3 nve-text=\"heading\">Title</h3>\n    <p nve-text=\"body\">some text content in a closable dialog</p>\n  </nve-dialog>\n  <nve-button id=\"notification-btn\">notification snackbar</nve-button>\n  <nve-notification\n    trigger=\"notification-btn\"\n    behavior-trigger\n    hidden\n    closable\n    position=\"bottom\"\n    alignment=\"end\"\n    close-timeout=\"2000\"\n  >\n    <h3 nve-text=\"label\">notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</div>\n",
       "summary": "Legacy implementation showing all popover types using the older trigger/behavior-trigger API for backward compatibility.",
@@ -56,7 +56,7 @@
       ]
     },
     {
-      "id": "core-internal-controllers-popover_closable",
+      "id": "internal-controllers-popover-closable",
       "name": "Closable",
       "template": "<nve-button popovertarget=\"popover\">open dialog</nve-button>\n<nve-dialog id=\"popover\" modal>\n  <p nve-text=\"body\">Press \"escape\" key to close.</p>\n</nve-dialog>\n",
       "summary": "Simple modal dialog with keyboard accessibility, including escape key to close functionality.",
@@ -67,7 +67,7 @@
       ]
     },
     {
-      "id": "core-internal-controllers-popover_invoker-command",
+      "id": "internal-controllers-popover-invoker-command",
       "name": "InvokerCommand",
       "template": "<nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n<nve-button commandfor=\"popover\" command=\"show-popover\">show-popover</nve-button>\n<nve-toggletip id=\"popover\">\n  toggletip\n  <nve-button commandfor=\"popover\" command=\"hide-popover\">hide-popover</nve-button>\n</nve-toggletip>\n",
       "summary": "example of declarative popovers using the Invoker Commands API",
@@ -76,7 +76,7 @@
       "tags": []
     },
     {
-      "id": "core-internal-controllers-popover_event-bubbling",
+      "id": "internal-controllers-popover-event-bubbling",
       "name": "EventBubbling",
       "template": "<div style=\"width: 100vw; height: 100vh\">\n  <p nve-text=\"body\" id=\"event-example\">event:</p>\n  <nve-button popovertarget=\"event-example-dialog\">open</nve-button>\n  <nve-dialog id=\"event-example-dialog\" closable modal (close)=\"close($event)\" (open)=\"open($event)\">\n    <nve-dialog-header>Header</nve-dialog-header>\n    <div>\n      <nve-button popovertarget=\"event-example-dropdown\">show dropdown</nve-button>\n    </div>\n    <nve-dropdown id=\"event-example-dropdown\"> dropdown content </nve-dropdown>\n  </nve-dialog>\n</div>\n<script type=\"module\">\n  const dialog = document.querySelector(\"#event-example-dialog\");\n  const eventLabel = document.querySelector(\"#event-example\");\n  // Custom events like many standard DOM events bubble. By listening to\n  // larger DOM trees check which element dispatched the source event\n  dialog.addEventListener(\"open\", (e) => {\n    eventLabel.innerText = \"open: \" + e.target.localName;\n  });\n  dialog.addEventListener(\"close\", (e) => {\n    eventLabel.innerText = \"close: \" + e.target.localName;\n  });\n</script>\n",
       "summary": "Custom events like many standard DOM events bubble. When listening to larger DOM trees, check which element dispatched the source event.",

package/dist/internal/controllers/type-button.controller.examples.json

@@ -2,7 +2,7 @@
   "entrypoint": "@nvidia-elements/core/internal/controllers/type-button.controller.examples.json",
   "items": [
     {
-      "id": "core-internal-controllers-type-button.controller_type-button-demo",
+      "id": "internal-controllers-type-button.controller-type-button-demo",
       "name": "TypeButtonDemo",
       "template": "<ui-button>button</ui-button>\n<ui-button pressed>pressed</ui-button>\n<ui-button expanded>expanded</ui-button>\n<ui-button selected>selected</ui-button>\n<ui-button disabled>disabled</ui-button>\n<ui-button><a href=\"#\">link</a></ui-button>\n<form id=\"type-button-demo-form\" style=\"display: inline-flex\">\n  <ui-button type=\"submit\">submit</ui-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#type-button-demo-form\");\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    alert(\"submit!\");\n  });\n</script>\n",
       "summary": "Custom button element using BaseButton with pressed, expanded, disabled, and link states.",

package/dist/internal/controllers/type-popover.controller.examples.json

@@ -2,7 +2,7 @@
   "entrypoint": "@nvidia-elements/core/internal/controllers/type-popover.controller.examples.json",
   "items": [
     {
-      "id": "core-internal-controllers-type-popover.controller_default",
+      "id": "internal-controllers-type-popover.controller",
       "name": "Default",
       "template": "<style>\n  #root-inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    width: 100%;\n    height: 100vh;\n  }\n</style>\n<ui-popover id=\"type-popover\">popover</ui-popover>\n<nve-button popovertarget=\"type-popover\">toggle</nve-button>\n",
       "summary": "Basic popover toggled by a button using the native popovertarget API.",
@@ -13,7 +13,7 @@
       ]
     },
     {
-      "id": "core-internal-controllers-type-popover.controller_alignment",
+      "id": "internal-controllers-type-popover.controller-alignment",
       "name": "Alignment",
       "template": "<nve-card id=\"card\" style=\"width: 450px; height: 300px\"></nve-card>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"top\" alignment=\"start\">top start</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"top\">top center</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"top\" alignment=\"end\">top end</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"right\" alignment=\"start\">right start</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"right\">right center</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"right\" alignment=\"end\">right end</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"bottom\" alignment=\"start\">bottom start</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"bottom\">bottom center</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"bottom\" alignment=\"end\">bottom end</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"left\" alignment=\"start\">left start</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"left\">left center</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"left\" alignment=\"end\">left end</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"center\">center</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"top\" alignment=\"start\">top start</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"top\">top center</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"top\" alignment=\"end\">top end</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"right\" alignment=\"start\">right start</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"right\">right center</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"right\" alignment=\"end\">right end</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"bottom\" alignment=\"start\">bottom start</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"bottom\">bottom center</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"bottom\" alignment=\"end\">bottom end</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"left\" alignment=\"start\">left start</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"left\">left center</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"left\" alignment=\"end\">left end</ui-popover>\n",
       "summary": "Popover positioning and alignment options across all anchor and viewport placements.",

package/dist/internal/controllers/type-touch.controller.examples.json

@@ -2,7 +2,7 @@
   "entrypoint": "@nvidia-elements/core/internal/controllers/type-touch.controller.examples.json",
   "items": [
     {
-      "id": "core-internal-controllers-type-touch.controller_touch-demo",
+      "id": "internal-controllers-type-touch.controller-touch-demo",
       "name": "TouchDemo",
       "template": "<type-touch-controller-demo-element></type-touch-controller-demo-element>\n<script type=\"module\">\n  const element = document.querySelector(\"type-touch-controller-demo-element\");\n  const container = document.querySelector(\"#touch-demo-container\");\n  element.addEventListener(\"nve-touch-start\", (e) => console.log(e.type));\n  element.addEventListener(\"nve-touch-move\", (position) => {\n    console.log(position.type);\n    element.style.left = position.x + \"px\";\n    element.style.top = position.y + \"px\";\n  });\n  element.addEventListener(\"nve-touch-end\", (e) => console.log(e.type));\n</script>\n",
       "summary": "Touch controller with drag-to-move behavior dispatching start, move, and end events.",

package/dist/internal/services/global.service.js

@@ -19,7 +19,7 @@ var a = class {
 				i18nRegistry: {},
 				audit: {}
 			}
-		}, globalThis.NVE_ELEMENTS.state.versions = Array.from(new Set([...globalThis.NVE_ELEMENTS.state.versions, "0.0.10"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["0.0.10"] = i(), globalThis.NVE_ELEMENTS.state.versions.length > 1 && globalThis.NVE_ELEMENTS.state.env !== "production" && console.warn(e(), `\n\n${JSON.stringify(globalThis.NVE_ELEMENTS.state.versions, null, 2)}`);
+		}, globalThis.NVE_ELEMENTS.state.versions = Array.from(new Set([...globalThis.NVE_ELEMENTS.state.versions, "0.0.11"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["0.0.11"] = i(), globalThis.NVE_ELEMENTS.state.versions.length > 1 && globalThis.NVE_ELEMENTS.state.env !== "production" && console.warn(e(), `\n\n${JSON.stringify(globalThis.NVE_ELEMENTS.state.versions, null, 2)}`);
 	}
 	get state() {
 		return globalThis.NVE_ELEMENTS.state;

package/dist/logo/logo.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/logo/logo.examples.json",
   "items": [
     {
-      "id": "core-logo_default",
+      "id": "logo",
       "name": "Default",
       "template": "<nve-logo aria-label=\"NVIDIA\"></nve-logo>\n",
       "summary": "Default NVIDIA logo with aria-label for accessibility. Use for brand identification in headers, footers, and loading states.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-logo_size",
+      "id": "logo-size",
       "name": "Size",
       "template": "<div nve-layout=\"row gap:xs\">\n  <nve-logo size=\"sm\" color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n</div>\n",
       "summary": "Logo size variants (sm, md, lg) for different contexts. Use smaller sizes for dense layouts like toolbars, larger sizes for prominent brand placement.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-logo_slotted-icons",
+      "id": "logo-slotted-icons",
       "name": "SlottedIcons",
       "template": "<div nve-layout=\"row gap:xs\">\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose large\" size=\"lg\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose medium\" size=\"md\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose small\" size=\"sm\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n</div>\n",
       "summary": "Custom icons slotted into the logo container. Ideal for product icons, team badges, or custom brand marks within the standard logo shape.",
@@ -34,7 +34,7 @@
       ]
     },
     {
-      "id": "core-logo_color",
+      "id": "logo-color",
       "name": "Color",
       "template": "<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-logo aria-label=\"NVIDIA\"></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": "All available logo color options. Use colors to differentiate products, teams, or categories within NVIDIA applications.",
@@ -43,7 +43,7 @@
       "tags": []
     },
     {
-      "id": "core-logo_light-theme",
+      "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\"></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.",
@@ -54,7 +54,7 @@
       ]
     },
     {
-      "id": "core-logo_dark-theme",
+      "id": "logo-dark-theme",
       "name": "DarkTheme",
       "template": "<div nve-theme=\"root dark\" nve-layout=\"row gap:xs align:wrap pad:sm\">\n  <nve-logo aria-label=\"NVIDIA\"></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 dark theme backgrounds. Ensures proper contrast and visibility when used in dark mode interfaces.",

package/dist/logo/logo2.js

@@ -12,7 +12,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-logo",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	render() {

package/dist/menu/menu-item2.js

@@ -13,7 +13,7 @@ var s = class extends t {
 	static {
 		this.metadata = {
 			tag: "nve-menu-item",
-			version: "0.0.10",
+			version: "0.0.11",
 			parents: ["nve-menu"]
 		};
 	}

package/dist/menu/menu.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/menu/menu.examples.json",
   "items": [
     {
-      "id": "core-menu_default",
+      "id": "menu",
       "name": "Default",
       "template": "<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",
       "summary": "Basic menu with simple text items for the default menu structure and styling.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-menu_dropdown",
+      "id": "menu-dropdown",
       "name": "Dropdown",
       "template": "<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",
       "summary": "Menu with keyboard navigation and ARIA disclosure pattern inside a dropdown. Use when menu items need accessible focus management and arrow key navigation.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-menu_selected",
+      "id": "menu-selected",
       "name": "Selected",
       "template": "<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",
       "summary": "Menu with a selected item showing the visual state for user-selected options.",
@@ -32,7 +32,7 @@
       "tags": []
     },
     {
-      "id": "core-menu_current",
+      "id": "menu-current",
       "name": "Current",
       "template": "<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",
       "summary": "Menu with a current page item showing the visual state for the active/current page in navigation.",
@@ -41,7 +41,7 @@
       "tags": []
     },
     {
-      "id": "core-menu_border-background",
+      "id": "menu-border-background",
       "name": "BorderBackground",
       "template": "<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",
       "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>`",
@@ -52,7 +52,7 @@
       ]
     },
     {
-      "id": "core-menu_disabled",
+      "id": "menu-disabled",
       "name": "Disabled",
       "template": "<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",
       "summary": "Menu with disabled items showing unavailable options while maintaining visual context.",
@@ -63,7 +63,7 @@
       ]
     },
     {
-      "id": "core-menu_icons",
+      "id": "menu-icons",
       "name": "Icons",
       "template": "<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",
       "summary": "Menu items with icons to add visual context and improve usability.",
@@ -72,7 +72,7 @@
       "tags": []
     },
     {
-      "id": "core-menu_links",
+      "id": "menu-links",
       "name": "Links",
       "template": "<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",
       "summary": "Menu items with links for navigation functionality within menu structures.",
@@ -81,7 +81,7 @@
       "tags": []
     },
     {
-      "id": "core-menu_suffix",
+      "id": "menu-suffix",
       "name": "Suffix",
       "template": "<nve-menu>\n  <nve-menu-item><kbd slot=\"suffix\" nve-text=\"code flat\">CMD + C</kbd></nve-menu-item>\n</nve-menu>\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.",
@@ -90,7 +90,7 @@
       "tags": []
     },
     {
-      "id": "core-menu_scroll",
+      "id": "menu-scroll",
       "name": "Scroll",
       "template": "<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",
       "summary": "Menu with constrained height showing scrollable behavior when content exceeds container limits.",
@@ -101,7 +101,7 @@
       ]
     },
     {
-      "id": "core-menu_complex",
+      "id": "menu-complex",
       "name": "Complex",
       "template": "<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> <nve-logo color=\"pink-rose\" size=\"sm\">Db</nve-logo> Debugger </nve-menu-item>\n    <nve-menu-item> <nve-logo color=\"blue-cobalt\" size=\"sm\">TM</nve-logo> Task Manager </nve-menu-item>\n    <nve-menu-item> <nve-logo color=\"yellow-nova\" size=\"sm\">CI</nve-logo> CI Services </nve-menu-item>\n    <nve-divider></nve-divider>\n    <nve-menu-item> <nve-logo size=\"sm\"></nve-logo> All Apps </nve-menu-item>\n  </nve-menu>\n</nve-dropdown>\n",
       "summary": "Use a dropdown menu with search and branded logos for application selection interfaces.",
@@ -112,7 +112,7 @@
       ]
     },
     {
-      "id": "core-menu_vertical-navigation-drawer",
+      "id": "menu-vertical-navigation-drawer",
       "name": "VerticalNavigationDrawer",
       "template": "<nve-page>\n  <nve-page-header>\n    <nve-logo slot=\"prefix\" size=\"sm\"></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.",
@@ -123,7 +123,7 @@
       ]
     },
     {
-      "id": "core-menu_vertical-navigation-panel",
+      "id": "menu-vertical-navigation-panel",
       "name": "VerticalNavigationPanel",
       "template": "<nve-page>\n  <nve-page-header>\n    <nve-logo slot=\"prefix\" size=\"sm\"></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.",
@@ -134,7 +134,7 @@
       ]
     },
     {
-      "id": "core-menu_item-tooltip",
+      "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\" open-delay=\"2000\" id=\"menu-tooltip\">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.",
@@ -146,7 +146,7 @@
       ]
     },
     {
-      "id": "core-menu_danger-status",
+      "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",
       "summary": "Menu items with danger status styling for destructive actions like delete or logout operations.",

package/dist/menu/menu2.js

@@ -16,7 +16,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-menu",
-			version: "0.0.10",
+			version: "0.0.11",
 			children: ["nve-menu-item", "nve-divider"]
 		};
 	}

package/dist/month/month.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/month/month.examples.json",
   "items": [
     {
-      "id": "core-month_default",
+      "id": "month",
       "name": "Default",
       "template": "<nve-month>\n  <label>label</label>\n  <input type=\"month\" />\n  <nve-control-message>message</nve-control-message>\n</nve-month>\n",
       "summary": "Basic month picker with label and validation message. Use for selecting a month and year in forms, such as expiry dates or report periods.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-month_datalist",
+      "id": "month-datalist",
       "name": "Datalist",
       "template": "<nve-month>\n  <label>label</label>\n  <input type=\"month\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"2018-04\"></option>\n    <option value=\"2018-05\"></option>\n    <option value=\"2018-06\"></option>\n  </datalist>\n</nve-month>\n",
       "summary": "Month picker with predefined suggestions via datalist. Ideal for guiding users toward common or expected month selections.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-month_vertical",
+      "id": "month-vertical",
       "name": "Vertical",
       "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-month>\n    <label>label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n  <nve-month>\n    <label>disabled</label>\n    <input type=\"month\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n  <nve-month>\n    <label>success</label>\n    <input type=\"month\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-month>\n  <nve-month>\n    <label>error</label>\n    <input type=\"month\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-month>\n</div>\n",
       "summary": "Vertical layout month inputs showing all validation states including disabled, success, and error. Use for stacked form layouts where labels appear above inputs.",
@@ -32,7 +32,7 @@
       ]
     },
     {
-      "id": "core-month_horizontal",
+      "id": "month-horizontal",
       "name": "Horizontal",
       "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-month layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n  <nve-month layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"month\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n  <nve-month layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"month\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-month>\n  <nve-month layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"month\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-month>\n</div>\n",
       "summary": "Horizontal layout month inputs with side-by-side labels. Ideal for compact forms or when aligning labels with other horizontal form controls.",

package/dist/month/month2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-month",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	static {

package/dist/notification/notification-group2.js

@@ -20,7 +20,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-notification-group",
-			version: "0.0.10",
+			version: "0.0.11",
 			children: ["nve-notification"]
 		};
 	}