@nvidia-elements/core 0.2.2 → 0.2.4

package/dist/internal/index.js

@@ -1,44 +1,43 @@
 import { DOCS_URL as e, formatFileSize as t, shiftLeft as n } from "./utils/strings.js";
 import { deepMerge as r, formatStandardNumber as i, getDifference as a, isObject as o, isObjectLiteral as s, parseVersion as c } from "./utils/objects.js";
 import { GlobalState as l, GlobalStateService as u } from "./services/global.service.js";
-import { focusElement as d, focusElementTimeout as f, getActiveElement as p, initializeKeyListItems as m, isFocusable as h, isSimpleFocusable as g, onListboxActivate as _, setActiveKeyListItem as v } from "./utils/focus.js";
-import { KeynavCode as y, appendAnchorName as b, appendRootNodeStyle as x, applySlotContentStates as S, clickOutsideElementBounds as C, createGhostElement as w, define as T, defineElement as E, endOfScrollBox as D, generateId as O, getAnchorNames as k, getAttributeChanges as A, getAttributeListChanges as j, getChildren as M, getDisplayValue as N, getElementUpdate as P, getFlattenedDOMTree as F, getFlattenedFocusableItems as I, getPropertyChanges as L, getThemeTokens as R, hasHorizontalScrollBar as z, hasInvalidDOMGrid as B, hasScrollBar as V, isContextMenuClick as H, matchesElementName as U, openEyeDropper as W, parseTokenNumber as G, removeAnchorName as K, removeEmptySlotWhitespace as q, removeEmptyTextNode as J, sameOrderedStringArray as Y, sameRenderRoot as X, scrollBarWidth as Z, slotContainsOnlyWhitespace as Q, styleSheetToString as $, supportsScopedRegistry as ee, uniqueNonEmptyStrings as te, validKeyNavigationCode as ne } from "./utils/dom.js";
-import { associateAriaDescribedBy as re, associateAriaLabel as ie, associateControlGroup as ae, associateDataList as oe, associateLabel as se, attachInternals as ce } from "./utils/a11y.js";
-import { StateActiveController as le, stateActive as ue } from "./controllers/state-active.controller.js";
-import { StateDisabledController as de, stateDisabled as fe } from "./controllers/state-disabled.controller.js";
-import { StateExpandedController as pe, stateExpanded as me } from "./controllers/state-expanded.controller.js";
-import { StatePressedController as he, statePressed as ge } from "./controllers/state-pressed.controller.js";
-import { StateSelectedController as _e, stateSelected as ve } from "./controllers/state-selected.controller.js";
-import { TypeButtonController as ye, typeButton as be } from "./controllers/type-button.controller.js";
-import { TypeAnchorController as xe, typeAnchor as Se } from "./controllers/type-anchor.controller.js";
-import { debounce as Ce, onChildListMutation as we, stopEvent as Te, throttle as Ee } from "./utils/events.js";
-import { createLightDismiss as De, onKeys as Oe } from "./utils/keynav.js";
-import { TypeSubmitController as ke, typeSubmit as Ae } from "./controllers/type-submit.controller.js";
-import { LogService as je } from "./services/log.service.js";
-import { TypeNativePopoverTriggerController as Me, typeNativePopoverTrigger as Ne } from "./controllers/type-native-popover-trigger.controller.js";
-import { StateCurrentController as Pe, stateCurrent as Fe } from "./controllers/state-current.controller.js";
-import { TypeCommandController as Ie, typeCommand as Le } from "./controllers/type-command.controller.js";
-import { TypeInterestController as Re, typeInterest as ze } from "./controllers/type-interest.controller.js";
-import { BaseButton as Be } from "./base/button.js";
-import { auditParentElement as Ve, auditSlots as He } from "./utils/audit.js";
-import { AuditController as Ue, audit as We, excessiveInstanceLimit as Ge } from "./controllers/audit.controller.js";
-import { I18nService as Ke, I18nService_ as qe } from "./services/i18n.service.js";
-import { I18nController as Je, i18n as Ye } from "./controllers/i18n.controller.js";
-import { KeyNavigationGridController as Xe, getNextKeyGridItem as Ze, keyNavigationGrid as Qe } from "./controllers/keynav-grid.controller.js";
-import { KeyNavigationListController as $e, getNextKeyListItem as et, keyNavigationList as tt } from "./controllers/keynav-list.controller.js";
-import { StateHighlightedController as nt, stateHighlighted as rt } from "./controllers/state-highlighted.controller.js";
-import { StateScrollController as it, stateScroll as at } from "./controllers/state-scroll.controller.js";
-import { TypeClosableController as ot } from "./controllers/type-closable.controller.js";
-import { TypeExpandableController as st } from "./controllers/type-expandable.controller.js";
-import { TypeSelectableController as ct } from "./controllers/type-selectable.controller.js";
-import { TypeNativePopoverController as lt } from "./controllers/type-native-popover.controller.js";
-import { TypeSSRController as ut, typeSSR as dt } from "./controllers/type-ssr.controller.js";
-import { NveTouchEvent as ft, TypeTouchController as pt, typeTouch as mt } from "./controllers/type-touch.controller.js";
-import { hostAttr as ht } from "./decorators/host-attr.js";
-import { scopedRegistry as gt } from "./decorators/scoped-registry.js";
-import { colorStateStyles as _t, statusStateStyles as vt, supportStateStyles as yt, useStyles as bt } from "./styles/index.js";
-import { supportsCSSLegacyInsetArea as xt, supportsCSSPositionArea as St, supportsNativeCSSAnchorPosition as Ct } from "./utils/supports.js";
-import { popoverStyles as wt } from "./styles/popover2.js";
-import { TransitionService as Tt } from "./services/transition.service.js";
-import { statusIcons as Et } from "./types/index.js";
-export { Ue as AuditController, Be as BaseButton, e as DOCS_URL, l as GlobalState, u as GlobalStateService, Je as I18nController, Ke as I18nService, qe as I18nService_, Xe as KeyNavigationGridController, $e as KeyNavigationListController, y as KeynavCode, je as LogService, ft as NveTouchEvent, le as StateActiveController, Pe as StateCurrentController, de as StateDisabledController, pe as StateExpandedController, nt as StateHighlightedController, he as StatePressedController, it as StateScrollController, _e as StateSelectedController, Tt as TransitionService, xe as TypeAnchorController, ye as TypeButtonController, ot as TypeClosableController, Ie as TypeCommandController, st as TypeExpandableController, Re as TypeInterestController, lt as TypeNativePopoverController, Me as TypeNativePopoverTriggerController, ut as TypeSSRController, ct as TypeSelectableController, ke as TypeSubmitController, pt as TypeTouchController, b as appendAnchorName, x as appendRootNodeStyle, S as applySlotContentStates, re as associateAriaDescribedBy, ie as associateAriaLabel, ae as associateControlGroup, oe as associateDataList, se as associateLabel, ce as attachInternals, We as audit, Ve as auditParentElement, He as auditSlots, C as clickOutsideElementBounds, _t as colorStateStyles, w as createGhostElement, De as createLightDismiss, Ce as debounce, r as deepMerge, T as define, E as defineElement, D as endOfScrollBox, Ge as excessiveInstanceLimit, d as focusElement, f as focusElementTimeout, t as formatFileSize, i as formatStandardNumber, O as generateId, p as getActiveElement, k as getAnchorNames, A as getAttributeChanges, j as getAttributeListChanges, M as getChildren, a as getDifference, N as getDisplayValue, P as getElementUpdate, F as getFlattenedDOMTree, I as getFlattenedFocusableItems, Ze as getNextKeyGridItem, et as getNextKeyListItem, L as getPropertyChanges, R as getThemeTokens, z as hasHorizontalScrollBar, B as hasInvalidDOMGrid, V as hasScrollBar, ht as hostAttr, Ye as i18n, m as initializeKeyListItems, H as isContextMenuClick, h as isFocusable, o as isObject, s as isObjectLiteral, g as isSimpleFocusable, Qe as keyNavigationGrid, tt as keyNavigationList, U as matchesElementName, we as onChildListMutation, Oe as onKeys, _ as onListboxActivate, W as openEyeDropper, G as parseTokenNumber, c as parseVersion, wt as popoverStyles, K as removeAnchorName, q as removeEmptySlotWhitespace, J as removeEmptyTextNode, Y as sameOrderedStringArray, X as sameRenderRoot, gt as scopedRegistry, Z as scrollBarWidth, v as setActiveKeyListItem, n as shiftLeft, Q as slotContainsOnlyWhitespace, ue as stateActive, Fe as stateCurrent, fe as stateDisabled, me as stateExpanded, rt as stateHighlighted, ge as statePressed, at as stateScroll, ve as stateSelected, Et as statusIcons, vt as statusStateStyles, Te as stopEvent, $ as styleSheetToString, yt as supportStateStyles, xt as supportsCSSLegacyInsetArea, St as supportsCSSPositionArea, Ct as supportsNativeCSSAnchorPosition, ee as supportsScopedRegistry, Ee as throttle, Se as typeAnchor, be as typeButton, Le as typeCommand, ze as typeInterest, Ne as typeNativePopoverTrigger, dt as typeSSR, Ae as typeSubmit, mt as typeTouch, te as uniqueNonEmptyStrings, bt as useStyles, ne as validKeyNavigationCode };
+import { auditParentElement as d, auditSlots as f } from "./utils/audit.js";
+import { AuditController as p, audit as m, excessiveInstanceLimit as h } from "./controllers/audit.controller.js";
+import { I18nService as g, I18nService_ as _ } from "./services/i18n.service.js";
+import { I18nController as v, i18n as y } from "./controllers/i18n.controller.js";
+import { debounce as b, onChildListMutation as x, stopEvent as S, throttle as C } from "./utils/events.js";
+import { LogService as w } from "./services/log.service.js";
+import { focusElement as T, focusElementTimeout as E, getActiveElement as D, initializeKeyListItems as O, isFocusable as k, isSimpleFocusable as A, onListboxActivate as j, setActiveKeyListItem as M } from "./utils/focus.js";
+import { KeynavCode as N, appendAnchorName as P, appendRootNodeStyle as F, applySlotContentStates as I, clickOutsideElementBounds as L, createGhostElement as R, define as z, defineElement as B, endOfScrollBox as V, generateId as H, getAnchorNames as U, getAttributeChanges as W, getAttributeListChanges as G, getChildren as K, getDisplayValue as q, getElementUpdate as J, getFlattenedDOMTree as Y, getFlattenedFocusableItems as X, getPropertyChanges as Z, getThemeTokens as Q, hasHorizontalScrollBar as $, hasInvalidDOMGrid as ee, hasScrollBar as te, isContextMenuClick as ne, matchesElementName as re, openEyeDropper as ie, parseTokenNumber as ae, removeAnchorName as oe, removeEmptySlotWhitespace as se, removeEmptyTextNode as ce, sameOrderedStringArray as le, sameRenderRoot as ue, scrollBarWidth as de, slotContainsOnlyWhitespace as fe, styleSheetToString as pe, supportsScopedRegistry as me, uniqueNonEmptyStrings as he, validKeyNavigationCode as ge } from "./utils/dom.js";
+import { KeyNavigationGridController as _e, getNextKeyGridItem as ve, keyNavigationGrid as ye } from "./controllers/keynav-grid.controller.js";
+import { KeyNavigationListController as be, getNextKeyListItem as xe, keyNavigationList as Se } from "./controllers/keynav-list.controller.js";
+import { associateAriaDescribedBy as Ce, associateAriaLabel as we, associateControlGroup as Te, associateDataList as Ee, associateLabel as De, attachInternals as Oe } from "./utils/a11y.js";
+import { StateActiveController as ke, stateActive as Ae } from "./controllers/state-active.controller.js";
+import { StateCurrentController as je, stateCurrent as Me } from "./controllers/state-current.controller.js";
+import { StateDisabledController as Ne, stateDisabled as Pe } from "./controllers/state-disabled.controller.js";
+import { StateExpandedController as Fe, stateExpanded as Ie } from "./controllers/state-expanded.controller.js";
+import { StateHighlightedController as Le, stateHighlighted as Re } from "./controllers/state-highlighted.controller.js";
+import { StateScrollController as ze, stateScroll as Be } from "./controllers/state-scroll.controller.js";
+import { StateSelectedController as Ve, stateSelected as He } from "./controllers/state-selected.controller.js";
+import { StatePressedController as Ue, statePressed as We } from "./controllers/state-pressed.controller.js";
+import { TypeAnchorController as Ge, typeAnchor as Ke } from "./controllers/type-anchor.controller.js";
+import { TypeClosableController as qe } from "./controllers/type-closable.controller.js";
+import { TypeCommandController as Je, typeCommand as Ye } from "./controllers/type-command.controller.js";
+import { TypeInterestController as Xe, typeInterest as Ze } from "./controllers/type-interest.controller.js";
+import { TypeExpandableController as Qe } from "./controllers/type-expandable.controller.js";
+import { TypeSelectableController as $e } from "./controllers/type-selectable.controller.js";
+import { TypeButtonController as et, typeButton as tt } from "./controllers/type-button.controller.js";
+import { TypeNativePopoverTriggerController as nt, typeNativePopoverTrigger as rt } from "./controllers/type-native-popover-trigger.controller.js";
+import { TypeNativePopoverController as it } from "./controllers/type-native-popover.controller.js";
+import { TypeSSRController as at, typeSSR as ot } from "./controllers/type-ssr.controller.js";
+import { createLightDismiss as st, onKeys as ct } from "./utils/keynav.js";
+import { TypeSubmitController as lt, typeSubmit as ut } from "./controllers/type-submit.controller.js";
+import { NveTouchEvent as dt, TypeTouchController as ft, typeTouch as pt } from "./controllers/type-touch.controller.js";
+import { hostAttr as mt } from "./decorators/host-attr.js";
+import { scopedRegistry as ht } from "./decorators/scoped-registry.js";
+import { colorStateStyles as gt, statusStateStyles as _t, supportStateStyles as vt, useStyles as yt } from "./styles/index.js";
+import { supportsCSSLegacyInsetArea as bt, supportsCSSPositionArea as xt, supportsNativeCSSAnchorPosition as St } from "./utils/supports.js";
+import { popoverStyles as Ct } from "./styles/popover2.js";
+import { TransitionService as wt } from "./services/transition.service.js";
+import { statusIcons as Tt } from "./types/index.js";
+export { p as AuditController, e as DOCS_URL, l as GlobalState, u as GlobalStateService, v as I18nController, g as I18nService, _ as I18nService_, _e as KeyNavigationGridController, be as KeyNavigationListController, N as KeynavCode, w as LogService, dt as NveTouchEvent, ke as StateActiveController, je as StateCurrentController, Ne as StateDisabledController, Fe as StateExpandedController, Le as StateHighlightedController, Ue as StatePressedController, ze as StateScrollController, Ve as StateSelectedController, wt as TransitionService, Ge as TypeAnchorController, et as TypeButtonController, qe as TypeClosableController, Je as TypeCommandController, Qe as TypeExpandableController, Xe as TypeInterestController, it as TypeNativePopoverController, nt as TypeNativePopoverTriggerController, at as TypeSSRController, $e as TypeSelectableController, lt as TypeSubmitController, ft as TypeTouchController, P as appendAnchorName, F as appendRootNodeStyle, I as applySlotContentStates, Ce as associateAriaDescribedBy, we as associateAriaLabel, Te as associateControlGroup, Ee as associateDataList, De as associateLabel, Oe as attachInternals, m as audit, d as auditParentElement, f as auditSlots, L as clickOutsideElementBounds, gt as colorStateStyles, R as createGhostElement, st as createLightDismiss, b as debounce, r as deepMerge, z as define, B as defineElement, V as endOfScrollBox, h as excessiveInstanceLimit, T as focusElement, E as focusElementTimeout, t as formatFileSize, i as formatStandardNumber, H as generateId, D as getActiveElement, U as getAnchorNames, W as getAttributeChanges, G as getAttributeListChanges, K as getChildren, a as getDifference, q as getDisplayValue, J as getElementUpdate, Y as getFlattenedDOMTree, X as getFlattenedFocusableItems, ve as getNextKeyGridItem, xe as getNextKeyListItem, Z as getPropertyChanges, Q as getThemeTokens, $ as hasHorizontalScrollBar, ee as hasInvalidDOMGrid, te as hasScrollBar, mt as hostAttr, y as i18n, O as initializeKeyListItems, ne as isContextMenuClick, k as isFocusable, o as isObject, s as isObjectLiteral, A as isSimpleFocusable, ye as keyNavigationGrid, Se as keyNavigationList, re as matchesElementName, x as onChildListMutation, ct as onKeys, j as onListboxActivate, ie as openEyeDropper, ae as parseTokenNumber, c as parseVersion, Ct as popoverStyles, oe as removeAnchorName, se as removeEmptySlotWhitespace, ce as removeEmptyTextNode, le as sameOrderedStringArray, ue as sameRenderRoot, ht as scopedRegistry, de as scrollBarWidth, M as setActiveKeyListItem, n as shiftLeft, fe as slotContainsOnlyWhitespace, Ae as stateActive, Me as stateCurrent, Pe as stateDisabled, Ie as stateExpanded, Re as stateHighlighted, We as statePressed, Be as stateScroll, He as stateSelected, Tt as statusIcons, _t as statusStateStyles, S as stopEvent, pe as styleSheetToString, vt as supportStateStyles, bt as supportsCSSLegacyInsetArea, xt as supportsCSSPositionArea, St as supportsNativeCSSAnchorPosition, me as supportsScopedRegistry, C as throttle, Ke as typeAnchor, tt as typeButton, Ye as typeCommand, Ze as typeInterest, rt as typeNativePopoverTrigger, ot as typeSSR, ut as typeSubmit, pt as typeTouch, he as uniqueNonEmptyStrings, yt as useStyles, ge as validKeyNavigationCode };

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.2.2"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["0.2.2"] = 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.2.4"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["0.2.4"] = 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/internal/types/index.d.ts

@@ -141,10 +141,6 @@ export interface NveElement {
      * - `false` - The element allows editing and the user can change its value through interaction.
      */
     readOnly?: boolean;
-    /**
-     * @deprecated Use `readOnly`. The `readonly` attribute remains supported.
-     */
-    readonly?: boolean;
     /** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */
     value?: string;
     /** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) */
@@ -266,12 +262,6 @@ export interface NveElement {
  * - `icon` - Content area for displaying an icon that represents the element's purpose or state.
  */
 export type SlotName = 'default' | 'prefix' | 'suffix' | 'header' | 'footer' | 'actions' | 'icon';
-/** @deprecated Determines the flat container element interaction. */
-export type FlatInteraction = 'flat' | 'flat-emphasize' | `${'flat'}-${Interaction}`;
-/** @deprecated Determines if an element renders with an inverse contrast. */
-export type Inverse = 'inverse';
-/** @deprecated Determines the trend status of an element. Should convey the trend of a metric. */
-export type TrendStatus = 'trend-down' | 'trend-up' | 'trend-neutral';
 /** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.
  * - `emphasis` Shows the interaction targets emphasis or highlighting primary actions.
  * - `destructive` Shows the interaction targets destructive actions such as deleting or removing.

package/dist/internal/types/index.js

@@ -17,9 +17,6 @@ var e = {
 	stopping: "stop-sign",
 	pending: "circle-dash",
 	starting: "circle-dot",
-	"trend-up": "trend-up",
-	"trend-down": "trend-down",
-	"trend-neutral": "minus",
 	ignored: "circle-angled-line"
 };
 //#endregion

package/dist/internal/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/internal/types/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport type { IconName } from '@nvidia-elements/core/icon';\nimport type { I18nStrings } from '../services/i18n.service.js';\n\nexport type Color =\n  | 'red-cardinal'\n  | 'gray-slate'\n  | 'gray-denim'\n  | 'blue-indigo'\n  | 'blue-cobalt'\n  | 'blue-sky'\n  | 'teal-cyan'\n  | 'green-mint'\n  | 'teal-seafoam'\n  | 'green-grass'\n  | 'yellow-amber'\n  | 'orange-pumpkin'\n  | 'red-tomato'\n  | 'pink-magenta'\n  | 'purple-plum'\n  | 'purple-violet'\n  | 'purple-lavender'\n  | 'pink-rose'\n  | 'green-jade'\n  | 'lime-pear'\n  | 'yellow-nova'\n  | 'brand-green';\n\n/** Controls the visual scale of an element to match its importance and available space.\n * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.\n * - `md` - Standard size that works well in most contexts and provides balanced visibility.\n * - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.\n */\nexport type Size = 'sm' | 'md' | 'lg';\n\n/** Controls the visual scale of an element to match its importance and available space.\n * - `xs` - Extra small size for minimal elements or highly dense layouts.\n * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.\n * - `md` - Standard size that works well in most contexts and provides balanced visibility.\n * - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.\n * - `xl` - Extra large size for emphasizing elements or sparse layouts.\n */\nexport type SizeExpanded = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Controls the visual prominence to establish hierarchy and guide user attention.\n * - `emphasis` - Increases visual weight to draw attention and highlight important elements.\n * - `muted` - Reduces visual weight for supporting content that should remain subtle and unobtrusive.\n */\nexport type Prominence = 'emphasis' | 'muted';\n\n/**\n * Determines the container bounds of the element\n * - `flat` Element has white space bounds but reduced visual container.\n * - `inline` Element container reduces to fit within inline content such as a block of text.\n * - `inset` Element container optimizes for embedding or inset placement inside another containing element.\n * - `full` Element container optimizes for filling its container bounds.\n * - `condensed` Element container optimizes for small, summarized or contained spaces.\n */\nexport type Container = 'inline' | 'flat' | 'inset' | 'full' | 'condensed';\n\n/** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n * - `accent` - Highlights important actions or draws attention to primary interactive elements.\n * - `warning` - Indicates cautionary actions that require careful consideration before proceeding.\n * - `success` - Represents positive outcomes, confirmations, or constructive actions.\n * - `danger` - Signals destructive or irreversible actions that need extra attention and confirmation.\n */\nexport type SupportStatus = 'accent' | 'warning' | 'success' | 'danger';\n\n/** Controls how the chart connects intermediate values between points in a data series.\n * - `linear` - Connects points with straight line segments.\n * - `smooth` - Connects points with smooth bezier curves.\n * - `step` - Connects points with horizontal and vertical step segments.\n */\nexport type Interpolation = 'linear' | 'smooth' | 'step';\n\n/** Determines the orientation of an element. */\nexport type Orientation = 'vertical' | 'horizontal';\n\n/** Communicates the current state of a task or process to keep users informed of progress and outcomes.\n * - `scheduled` - Task has a scheduled future execution at a specific time.\n * - `queued` - Task is waiting in line to begin after other tasks complete.\n * - `pending` - Task is awaiting approval, user input, or external conditions before proceeding.\n * - `starting` - Task is initializing and preparing to begin active execution.\n * - `running` - Task is actively executing and making progress.\n * - `restarting` - Task restarts after an interruption or reset.\n * - `stopping` - Task is gracefully shutting down and completing cleanup operations.\n * - `finished` - Task has completed successfully with the expected outcome.\n * - `failed` - Task encountered an error and did not complete as intended.\n * - `unknown` - Task status remains unknown or unavailable.\n * - `ignored` - Task was intentionally skipped or excluded from execution.\n */\nexport type TaskStatus =\n  | 'scheduled'\n  | 'queued'\n  | 'pending'\n  | 'starting'\n  | 'running'\n  | 'restarting'\n  | 'stopping'\n  | 'finished'\n  | 'failed'\n  | 'unknown'\n  | 'ignored';\n\n/**\n * https://open-ui.org/components/popup.research.explainer#api-shape\n * - `auto` light dismiss, focus on open, return to trigger\n * - `manual` no light dismiss, no auto focus\n * - `hint` no light dismiss, no auto focus, open/close on hover/focus\n */\nexport type PopoverType = 'auto' | 'manual' | 'hint' | 'inline';\n\n/** Controls how the popover aligns along the edge of its anchor element.\n * - `start` - Aligns the popover to the beginning edge of the anchor for left or top alignment.\n * - `end` - Aligns the popover to the ending edge of the anchor for right or bottom alignment.\n * - `center` - Centers the popover along the anchor's edge for balanced positioning.\n */\nexport type PopoverAlign = 'start' | 'end' | 'center';\n\n/** Determines the popover position relative to its assigned anchor and alignment.\n * - `top` - Positions the popover above the anchor element.\n * - `bottom` - Positions the popover below the anchor element.\n * - `left` - Positions the popover to the left side of the anchor element.\n * - `right` - Positions the popover to the right side of the anchor element.\n */\nexport type PopoverSides = 'top' | 'bottom' | 'left' | 'right';\n\n/** Controls the placement of the popover relative to its anchor element.\n * - `center` - Centers the popover directly over the anchor element.\n * - `top` - Positions the popover above the anchor element.\n * - `bottom` - Positions the popover below the anchor element.\n * - `left` - Positions the popover to the left side of the anchor element.\n * - `right` - Positions the popover to the right side of the anchor element.\n */\nexport type PopoverPosition = 'center' | 'top' | 'bottom' | 'left' | 'right';\n\n/** Determines the position of an element relative to its anchor */\nexport type Placement = PopoverPosition | `${PopoverSides}-${PopoverAlign}`;\n\n/** Controls the directional arrangement and spacing behavior of the element's content.\n * - `vertical` - Arranges content in a vertical stack with block-level spacing.\n * - `vertical-inline` - Arranges content vertically with compact inline spacing for dense layouts.\n * - `horizontal` - Arranges content in a horizontal row with block-level spacing.\n * - `horizontal-inline` - Arranges content horizontally with compact inline spacing.\n */\nexport type ControlLayout = 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';\n\n/** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n * - `page` - Marks the current page within a set of navigation links.\n * - `step` - Marks the current step within a multi-step process or workflow.\n */\nexport type Current = 'page' | 'step';\n\n/** Controls how data points are visually encoded in a sparkline chart.\n * - `line` - Renders data as a connected line to emphasize macro trend.\n * - `area` - Renders data as a filled area beneath a line to emphasize magnitude over time.\n * - `gradient` - Renders a line with gradient color treatment to communicate value intensity across the series.\n * - `column` - Renders data as vertical columns for easy comparison of discrete values.\n * - `winloss` - Renders outcomes as binary or ternary bars to highlight wins, losses, and optional ties.\n */\nexport type SparklineMark = 'line' | 'area' | 'gradient' | 'column' | 'winloss';\n\nexport interface NveElement {\n  /**\n   * This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)\n   * - `true` - The element has a disabled state and does not accept interaction.\n   * - `false` - The element has an enabled state and accepts interaction.\n   */\n  disabled?: boolean;\n\n  /** Indicates whether the element is currently actively engaged through user interaction. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)\n   * - `true` - The user is pressing or activating the element (mousedown, keydown, or touch).\n   * - `false` - No active user engagement on the element.\n   */\n  active?: boolean;\n\n  /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n   * - `true` - The associated content expands and becomes visible to the user.\n   * - `false` - The associated content collapses and hides from the user.\n   */\n  expanded?: boolean;\n\n  /** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)\n   * - `true` - The button is in the pressed (on) state and the associated action or setting is active.\n   * - `false` - The button is in the unpressed (off) state and the associated action or setting is inactive.\n   */\n  pressed?: boolean;\n\n  /** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n   * - `true` - The element holds selection and represents the user's current choice within the group.\n   * - `false` - The element does not hold selection and the user can choose it.\n   */\n  selected?: boolean;\n\n  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)\n   * - `true` - The element has a readonly state: the user cannot change its value, but can still focus and copy it.\n   * - `false` - The element allows editing and the user can change its value through interaction.\n   */\n  readOnly?: boolean;\n\n  /**\n   * @deprecated Use `readOnly`. The `readonly` attribute remains supported.\n   */\n  readonly?: boolean;\n\n  /** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */\n  value?: string;\n\n  /** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) */\n  name?: string;\n\n  /** Indicates whether the user can dismiss or close the element.\n   * - `true` - The element displays a close control and the user can dismiss it.\n   * - `false` - The user cannot close the element and must dismiss it programmatically.\n   */\n  closable?: boolean;\n\n  /** Enables updating internal string values for internationalization. */\n  i18n?: Partial<I18nStrings & { __set: boolean }>;\n\n  /** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n   * - `page` - Marks the current page within a set of navigation links.\n   * - `step` - Marks the current step within a multi-step process or workflow.\n   */\n  current?: 'page' | 'step';\n\n  /** Controls the horizontal alignment of the element within its container, respecting the text direction. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout)\n   * - `start` - Aligns the element to the beginning of the inline axis (left in LTR, right in RTL).\n   * - `center` - Centers the element along the inline axis for balanced visual positioning.\n   * - `end` - Aligns the element to the end of the inline axis (right in LTR, left in RTL).\n   */\n  inlinePosition?: 'start' | 'center' | 'end';\n\n  /** Controls the vertical alignment of the element within its container. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout)\n   * - `start` - Aligns the element to the top of the block axis for top-aligned positioning.\n   * - `center` - Centers the element along the block axis for balanced vertical positioning.\n   * - `end` - Aligns the element to the bottom of the block axis for bottom-aligned positioning.\n   */\n  blockPosition?: 'start' | 'center' | 'end';\n\n  /** Controls the directional arrangement and spacing behavior of the element's content.\n   * - `vertical` - Arranges content in a vertical stack with block-level spacing.\n   * - `vertical-inline` - Arranges content vertically with compact inline spacing for dense layouts.\n   * - `horizontal` - Arranges content in a horizontal row with block-level spacing.\n   * - `horizontal-inline` - Arranges content horizontally with compact inline spacing.\n   */\n  layout?: 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';\n\n  /** Controls the directional flow of the element's layout and interaction pattern.\n   * - `vertical` - Element orients vertically with top-to-bottom flow.\n   * - `horizontal` - Element orients horizontally with left-to-right flow.\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Controls the visual prominence to establish hierarchy and guide user attention.\n   * - `emphasis` - Increases visual weight to draw attention and highlight important elements.\n   * - `muted` - Reduces visual weight for supporting content that should remain subtle and unobtrusive.\n   */\n  prominence?: 'emphasis' | 'muted';\n\n  /** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.\n   * - `emphasis` Shows the interaction targets emphasis or highlighting primary actions.\n   * - `destructive` Shows the interaction targets destructive actions such as deleting or removing.\n   */\n  interaction?: 'emphasis' | 'destructive';\n\n  /** Defines a base color from the theme color palette */\n  color?:\n    | 'red-cardinal'\n    | 'gray-slate'\n    | 'gray-denim'\n    | 'blue-indigo'\n    | 'blue-cobalt'\n    | 'blue-sky'\n    | 'teal-cyan'\n    | 'green-mint'\n    | 'teal-seafoam'\n    | 'green-grass'\n    | 'yellow-amber'\n    | 'orange-pumpkin'\n    | 'red-tomato'\n    | 'pink-magenta'\n    | 'purple-plum'\n    | 'purple-violet'\n    | 'purple-lavender'\n    | 'pink-rose'\n    | 'green-jade'\n    | 'lime-pear'\n    | 'yellow-nova'\n    | 'brand-green';\n\n  /** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n   * - `accent` - Highlights important actions or draws attention to primary interactive elements.\n   * - `warning` - Indicates cautionary actions that require careful consideration before proceeding.\n   * - `success` - Represents positive outcomes, confirmations, or constructive actions.\n   * - `danger` - Signals destructive or irreversible actions that need extra attention and confirmation.\n   */\n  status?: 'accent' | 'warning' | 'success' | 'danger';\n\n  /** Controls the visual scale of an element to match its importance and available space.\n   * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.\n   * - `md` - Standard size that works well in most contexts and provides balanced visibility.\n   * - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.\n   */\n  size?: 'sm' | 'md' | 'lg';\n\n  /**\n   * Demonstrates different container styles to accommodate visual weight and context.\n   * - `flat` Element has white space bounds but reduced visual container.\n   * - `inline` Element container reduces to fit within inline content such as a block of text.\n   * - `inset` Element container optimizes for embedding or inset placement inside another containing element.\n   * - `full` Element container optimizes for filling its container bounds.\n   */\n  container?: 'inline' | 'flat' | 'inset' | 'full';\n\n  /** Determines the position of an element along both inline and block axis. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) */\n  position?:\n    | 'top-start'\n    | 'top-end'\n    | 'top-center'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'bottom-center'\n    | 'left-start'\n    | 'left-end'\n    | 'left-center'\n    | 'right-start'\n    | 'right-end'\n    | 'right-center';\n\n  /** Determines the alignment of the popover relative to the provided anchor element. */\n  alignment?: 'start' | 'end' | 'center';\n\n  /** Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. */\n  anchor?: string | HTMLElement;\n\n  /** Defines what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. */\n  trigger?: string | HTMLElement;\n\n  /** Defines named content areas where users can insert custom markup into the element.\n   * - `default` - The primary content area for the element.\n   * - `prefix` - Content that appears before the main element content.\n   * - `suffix` - Content that appears after the main element content.\n   * - `header` - Content that appears at the top of the element, used for titles or introductory information.\n   * - `footer` - Content that appears at the bottom of the element, used for supplementary information or actions.\n   * - `actions` - Content area specifically for interactive controls like buttons or links.\n   * - `icon` - Content area for displaying an icon that represents the element's purpose or state.\n   */\n  slots?: 'default' | 'prefix' | 'suffix' | 'header' | 'footer' | 'actions' | 'icon';\n\n  /**\n   * Sets the automatic dismissal time in milliseconds before the element emits a `close` event. Allow ~200-250ms per word for comfortable reading.\n   * - `0` - Warning or error messages requiring immediate acknowledgment.\n   * - `3000` - Brief success or confirmation messages.\n   * - `7000` - Standard informational messages.\n   * - `10000` - Messages with actions or requiring user decision.\n   */\n  closeTimeout?: number;\n\n  /**\n   * Sets the delay in milliseconds before the element emits a `open` event.\n   * - `0` - Keyboard focus interactions (always immediate for accessibility).\n   * - `500` - Dense interfaces with many tooltips to reduce visual noise and prevent accidental triggers.\n   */\n  openDelay?: number;\n\n  /** @private An instance of `ElementInternals` that decorators/controllers set dynamically */\n  _internals: ElementInternals;\n\n  render: TemplateResult;\n}\n\n/** Defines named content areas where users can insert custom markup into the element.\n * - `default` - The primary content area for the element.\n * - `prefix` - Content that appears before the main element content.\n * - `suffix` - Content that appears after the main element content.\n * - `header` - Content that appears at the top of the element, used for titles or introductory information.\n * - `footer` - Content that appears at the bottom of the element, used for supplementary information or actions.\n * - `actions` - Content area specifically for interactive controls like buttons or links.\n * - `icon` - Content area for displaying an icon that represents the element's purpose or state.\n */\nexport type SlotName = 'default' | 'prefix' | 'suffix' | 'header' | 'footer' | 'actions' | 'icon';\n\n/** @deprecated Determines the flat container element interaction. */\nexport type FlatInteraction = 'flat' | 'flat-emphasize' | `${'flat'}-${Interaction}`;\n\n/** @deprecated Determines if an element renders with an inverse contrast. */\nexport type Inverse = 'inverse';\n\n/** @deprecated Determines the trend status of an element. Should convey the trend of a metric. */\nexport type TrendStatus = 'trend-down' | 'trend-up' | 'trend-neutral';\n\n/** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.\n * - `emphasis` Shows the interaction targets emphasis or highlighting primary actions.\n * - `destructive` Shows the interaction targets destructive actions such as deleting or removing.\n */\nexport type Interaction = 'emphasis' | 'destructive';\n\nexport interface ContainerElement {\n  container?: Partial<Container>;\n}\n\n/** An element that renders complex data structures (e.g., arrays, series, matrices) rather than composable UI content and values expressible with primitive attributes. */\nexport interface DataElement<T extends unknown[] | Record<string, unknown>> {\n  data?: T;\n}\n\nexport const statusIcons: { [key: string]: IconName } = {\n  '': 'information-circle-stroke',\n  undefined: 'information-circle-stroke',\n  default: 'information-circle-stroke',\n  accent: 'information-circle-stroke',\n  warning: 'exclamation-triangle',\n  success: 'checkmark-circle',\n  danger: 'exclamation-circle',\n  scheduled: 'clock',\n  failed: 'x-circle',\n  finished: 'checkmark-circle',\n  unknown: 'question-mark-circle',\n  queued: 'bar-pill-stack',\n  running: 'running',\n  restarting: 'refresh',\n  stopping: 'stop-sign',\n  pending: 'circle-dash',\n  starting: 'circle-dot',\n  'trend-up': 'trend-up',\n  'trend-down': 'trend-down',\n  'trend-neutral': 'minus',\n  ignored: 'circle-angled-line'\n} as const;\n\ndeclare global {\n  var NVE_ELEMENTS: {\n    state: {\n      bundle: boolean;\n      env: 'watch' | 'production' | 'development';\n      pageHost: string;\n      moduleHost: string;\n      versions: string[];\n      scopedRegistry: { [key: string]: CustomElementRegistry };\n      elementRegistry: Readonly<{ [key: string]: string }>;\n      i18nRegistry: Readonly<{ [key: string]: string }>;\n      audit: Readonly<{\n        [key: string]: {\n          count?: number;\n          excessiveInstanceLimitAudited?: boolean;\n        };\n      }>;\n    };\n    debug: (log?: (...args: unknown[]) => void) => void;\n  };\n\n  interface HTMLElement {\n    'nve-text': string;\n    'nve-layout': string;\n  }\n\n  interface CustomElementRegistry {\n    initialize(root: ShadowRoot | Document): void;\n  }\n\n  var CustomElementRegistry: {\n    new (): CustomElementRegistry;\n    prototype: CustomElementRegistry;\n  };\n}\n\nexport interface ElementDefinition extends CustomElementConstructor {\n  metadata: { version: string; tag: string };\n  elementDefinitions?: { [key: string]: ElementDefinition };\n  shadowRootOptions?: { customElementRegistry?: CustomElementRegistry | null };\n}\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface OffsetPoint {\n  offsetX: number;\n  offsetY: number;\n}\n\nexport interface Dimensions {\n  width: number;\n  height: number;\n}\n\nexport type Rect = Point & Dimensions;\n\nexport interface Scale {\n  min: number;\n  max: number;\n}\n\n/** https://github.com/tc39/proposal-decorators */\n// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\nexport type LegacyDecoratorTarget = Function & {\n  addInitializer?: (initializer: (instance: any) => void) => void; // eslint-disable-line @typescript-eslint/no-explicit-any\n};\n"],"mappings":";AA0ZA,IAAa,IAA2C;CACtD,IAAI;CACJ,WAAW;CACX,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,WAAW;CACX,QAAQ;CACR,UAAU;CACV,SAAS;CACT,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,UAAU;CACV,SAAS;CACT,UAAU;CACV,YAAY;CACZ,cAAc;CACd,iBAAiB;CACjB,SAAS;AACX"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/internal/types/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport type { IconName } from '@nvidia-elements/core/icon';\nimport type { I18nStrings } from '../services/i18n.service.js';\n\nexport type Color =\n  | 'red-cardinal'\n  | 'gray-slate'\n  | 'gray-denim'\n  | 'blue-indigo'\n  | 'blue-cobalt'\n  | 'blue-sky'\n  | 'teal-cyan'\n  | 'green-mint'\n  | 'teal-seafoam'\n  | 'green-grass'\n  | 'yellow-amber'\n  | 'orange-pumpkin'\n  | 'red-tomato'\n  | 'pink-magenta'\n  | 'purple-plum'\n  | 'purple-violet'\n  | 'purple-lavender'\n  | 'pink-rose'\n  | 'green-jade'\n  | 'lime-pear'\n  | 'yellow-nova'\n  | 'brand-green';\n\n/** Controls the visual scale of an element to match its importance and available space.\n * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.\n * - `md` - Standard size that works well in most contexts and provides balanced visibility.\n * - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.\n */\nexport type Size = 'sm' | 'md' | 'lg';\n\n/** Controls the visual scale of an element to match its importance and available space.\n * - `xs` - Extra small size for minimal elements or highly dense layouts.\n * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.\n * - `md` - Standard size that works well in most contexts and provides balanced visibility.\n * - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.\n * - `xl` - Extra large size for emphasizing elements or sparse layouts.\n */\nexport type SizeExpanded = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Controls the visual prominence to establish hierarchy and guide user attention.\n * - `emphasis` - Increases visual weight to draw attention and highlight important elements.\n * - `muted` - Reduces visual weight for supporting content that should remain subtle and unobtrusive.\n */\nexport type Prominence = 'emphasis' | 'muted';\n\n/**\n * Determines the container bounds of the element\n * - `flat` Element has white space bounds but reduced visual container.\n * - `inline` Element container reduces to fit within inline content such as a block of text.\n * - `inset` Element container optimizes for embedding or inset placement inside another containing element.\n * - `full` Element container optimizes for filling its container bounds.\n * - `condensed` Element container optimizes for small, summarized or contained spaces.\n */\nexport type Container = 'inline' | 'flat' | 'inset' | 'full' | 'condensed';\n\n/** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n * - `accent` - Highlights important actions or draws attention to primary interactive elements.\n * - `warning` - Indicates cautionary actions that require careful consideration before proceeding.\n * - `success` - Represents positive outcomes, confirmations, or constructive actions.\n * - `danger` - Signals destructive or irreversible actions that need extra attention and confirmation.\n */\nexport type SupportStatus = 'accent' | 'warning' | 'success' | 'danger';\n\n/** Controls how the chart connects intermediate values between points in a data series.\n * - `linear` - Connects points with straight line segments.\n * - `smooth` - Connects points with smooth bezier curves.\n * - `step` - Connects points with horizontal and vertical step segments.\n */\nexport type Interpolation = 'linear' | 'smooth' | 'step';\n\n/** Determines the orientation of an element. */\nexport type Orientation = 'vertical' | 'horizontal';\n\n/** Communicates the current state of a task or process to keep users informed of progress and outcomes.\n * - `scheduled` - Task has a scheduled future execution at a specific time.\n * - `queued` - Task is waiting in line to begin after other tasks complete.\n * - `pending` - Task is awaiting approval, user input, or external conditions before proceeding.\n * - `starting` - Task is initializing and preparing to begin active execution.\n * - `running` - Task is actively executing and making progress.\n * - `restarting` - Task restarts after an interruption or reset.\n * - `stopping` - Task is gracefully shutting down and completing cleanup operations.\n * - `finished` - Task has completed successfully with the expected outcome.\n * - `failed` - Task encountered an error and did not complete as intended.\n * - `unknown` - Task status remains unknown or unavailable.\n * - `ignored` - Task was intentionally skipped or excluded from execution.\n */\nexport type TaskStatus =\n  | 'scheduled'\n  | 'queued'\n  | 'pending'\n  | 'starting'\n  | 'running'\n  | 'restarting'\n  | 'stopping'\n  | 'finished'\n  | 'failed'\n  | 'unknown'\n  | 'ignored';\n\n/**\n * https://open-ui.org/components/popup.research.explainer#api-shape\n * - `auto` light dismiss, focus on open, return to trigger\n * - `manual` no light dismiss, no auto focus\n * - `hint` no light dismiss, no auto focus, open/close on hover/focus\n */\nexport type PopoverType = 'auto' | 'manual' | 'hint' | 'inline';\n\n/** Controls how the popover aligns along the edge of its anchor element.\n * - `start` - Aligns the popover to the beginning edge of the anchor for left or top alignment.\n * - `end` - Aligns the popover to the ending edge of the anchor for right or bottom alignment.\n * - `center` - Centers the popover along the anchor's edge for balanced positioning.\n */\nexport type PopoverAlign = 'start' | 'end' | 'center';\n\n/** Determines the popover position relative to its assigned anchor and alignment.\n * - `top` - Positions the popover above the anchor element.\n * - `bottom` - Positions the popover below the anchor element.\n * - `left` - Positions the popover to the left side of the anchor element.\n * - `right` - Positions the popover to the right side of the anchor element.\n */\nexport type PopoverSides = 'top' | 'bottom' | 'left' | 'right';\n\n/** Controls the placement of the popover relative to its anchor element.\n * - `center` - Centers the popover directly over the anchor element.\n * - `top` - Positions the popover above the anchor element.\n * - `bottom` - Positions the popover below the anchor element.\n * - `left` - Positions the popover to the left side of the anchor element.\n * - `right` - Positions the popover to the right side of the anchor element.\n */\nexport type PopoverPosition = 'center' | 'top' | 'bottom' | 'left' | 'right';\n\n/** Determines the position of an element relative to its anchor */\nexport type Placement = PopoverPosition | `${PopoverSides}-${PopoverAlign}`;\n\n/** Controls the directional arrangement and spacing behavior of the element's content.\n * - `vertical` - Arranges content in a vertical stack with block-level spacing.\n * - `vertical-inline` - Arranges content vertically with compact inline spacing for dense layouts.\n * - `horizontal` - Arranges content in a horizontal row with block-level spacing.\n * - `horizontal-inline` - Arranges content horizontally with compact inline spacing.\n */\nexport type ControlLayout = 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';\n\n/** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n * - `page` - Marks the current page within a set of navigation links.\n * - `step` - Marks the current step within a multi-step process or workflow.\n */\nexport type Current = 'page' | 'step';\n\n/** Controls how data points are visually encoded in a sparkline chart.\n * - `line` - Renders data as a connected line to emphasize macro trend.\n * - `area` - Renders data as a filled area beneath a line to emphasize magnitude over time.\n * - `gradient` - Renders a line with gradient color treatment to communicate value intensity across the series.\n * - `column` - Renders data as vertical columns for easy comparison of discrete values.\n * - `winloss` - Renders outcomes as binary or ternary bars to highlight wins, losses, and optional ties.\n */\nexport type SparklineMark = 'line' | 'area' | 'gradient' | 'column' | 'winloss';\n\nexport interface NveElement {\n  /**\n   * This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)\n   * - `true` - The element has a disabled state and does not accept interaction.\n   * - `false` - The element has an enabled state and accepts interaction.\n   */\n  disabled?: boolean;\n\n  /** Indicates whether the element is currently actively engaged through user interaction. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)\n   * - `true` - The user is pressing or activating the element (mousedown, keydown, or touch).\n   * - `false` - No active user engagement on the element.\n   */\n  active?: boolean;\n\n  /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n   * - `true` - The associated content expands and becomes visible to the user.\n   * - `false` - The associated content collapses and hides from the user.\n   */\n  expanded?: boolean;\n\n  /** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)\n   * - `true` - The button is in the pressed (on) state and the associated action or setting is active.\n   * - `false` - The button is in the unpressed (off) state and the associated action or setting is inactive.\n   */\n  pressed?: boolean;\n\n  /** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n   * - `true` - The element holds selection and represents the user's current choice within the group.\n   * - `false` - The element does not hold selection and the user can choose it.\n   */\n  selected?: boolean;\n\n  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)\n   * - `true` - The element has a readonly state: the user cannot change its value, but can still focus and copy it.\n   * - `false` - The element allows editing and the user can change its value through interaction.\n   */\n  readOnly?: boolean;\n\n  /** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */\n  value?: string;\n\n  /** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) */\n  name?: string;\n\n  /** Indicates whether the user can dismiss or close the element.\n   * - `true` - The element displays a close control and the user can dismiss it.\n   * - `false` - The user cannot close the element and must dismiss it programmatically.\n   */\n  closable?: boolean;\n\n  /** Enables updating internal string values for internationalization. */\n  i18n?: Partial<I18nStrings & { __set: boolean }>;\n\n  /** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n   * - `page` - Marks the current page within a set of navigation links.\n   * - `step` - Marks the current step within a multi-step process or workflow.\n   */\n  current?: 'page' | 'step';\n\n  /** Controls the horizontal alignment of the element within its container, respecting the text direction. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout)\n   * - `start` - Aligns the element to the beginning of the inline axis (left in LTR, right in RTL).\n   * - `center` - Centers the element along the inline axis for balanced visual positioning.\n   * - `end` - Aligns the element to the end of the inline axis (right in LTR, left in RTL).\n   */\n  inlinePosition?: 'start' | 'center' | 'end';\n\n  /** Controls the vertical alignment of the element within its container. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout)\n   * - `start` - Aligns the element to the top of the block axis for top-aligned positioning.\n   * - `center` - Centers the element along the block axis for balanced vertical positioning.\n   * - `end` - Aligns the element to the bottom of the block axis for bottom-aligned positioning.\n   */\n  blockPosition?: 'start' | 'center' | 'end';\n\n  /** Controls the directional arrangement and spacing behavior of the element's content.\n   * - `vertical` - Arranges content in a vertical stack with block-level spacing.\n   * - `vertical-inline` - Arranges content vertically with compact inline spacing for dense layouts.\n   * - `horizontal` - Arranges content in a horizontal row with block-level spacing.\n   * - `horizontal-inline` - Arranges content horizontally with compact inline spacing.\n   */\n  layout?: 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';\n\n  /** Controls the directional flow of the element's layout and interaction pattern.\n   * - `vertical` - Element orients vertically with top-to-bottom flow.\n   * - `horizontal` - Element orients horizontally with left-to-right flow.\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Controls the visual prominence to establish hierarchy and guide user attention.\n   * - `emphasis` - Increases visual weight to draw attention and highlight important elements.\n   * - `muted` - Reduces visual weight for supporting content that should remain subtle and unobtrusive.\n   */\n  prominence?: 'emphasis' | 'muted';\n\n  /** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.\n   * - `emphasis` Shows the interaction targets emphasis or highlighting primary actions.\n   * - `destructive` Shows the interaction targets destructive actions such as deleting or removing.\n   */\n  interaction?: 'emphasis' | 'destructive';\n\n  /** Defines a base color from the theme color palette */\n  color?:\n    | 'red-cardinal'\n    | 'gray-slate'\n    | 'gray-denim'\n    | 'blue-indigo'\n    | 'blue-cobalt'\n    | 'blue-sky'\n    | 'teal-cyan'\n    | 'green-mint'\n    | 'teal-seafoam'\n    | 'green-grass'\n    | 'yellow-amber'\n    | 'orange-pumpkin'\n    | 'red-tomato'\n    | 'pink-magenta'\n    | 'purple-plum'\n    | 'purple-violet'\n    | 'purple-lavender'\n    | 'pink-rose'\n    | 'green-jade'\n    | 'lime-pear'\n    | 'yellow-nova'\n    | 'brand-green';\n\n  /** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.\n   * - `accent` - Highlights important actions or draws attention to primary interactive elements.\n   * - `warning` - Indicates cautionary actions that require careful consideration before proceeding.\n   * - `success` - Represents positive outcomes, confirmations, or constructive actions.\n   * - `danger` - Signals destructive or irreversible actions that need extra attention and confirmation.\n   */\n  status?: 'accent' | 'warning' | 'success' | 'danger';\n\n  /** Controls the visual scale of an element to match its importance and available space.\n   * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.\n   * - `md` - Standard size that works well in most contexts and provides balanced visibility.\n   * - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.\n   */\n  size?: 'sm' | 'md' | 'lg';\n\n  /**\n   * Demonstrates different container styles to accommodate visual weight and context.\n   * - `flat` Element has white space bounds but reduced visual container.\n   * - `inline` Element container reduces to fit within inline content such as a block of text.\n   * - `inset` Element container optimizes for embedding or inset placement inside another containing element.\n   * - `full` Element container optimizes for filling its container bounds.\n   */\n  container?: 'inline' | 'flat' | 'inset' | 'full';\n\n  /** Determines the position of an element along both inline and block axis. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) */\n  position?:\n    | 'top-start'\n    | 'top-end'\n    | 'top-center'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'bottom-center'\n    | 'left-start'\n    | 'left-end'\n    | 'left-center'\n    | 'right-start'\n    | 'right-end'\n    | 'right-center';\n\n  /** Determines the alignment of the popover relative to the provided anchor element. */\n  alignment?: 'start' | 'end' | 'center';\n\n  /** Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. */\n  anchor?: string | HTMLElement;\n\n  /** Defines what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. */\n  trigger?: string | HTMLElement;\n\n  /** Defines named content areas where users can insert custom markup into the element.\n   * - `default` - The primary content area for the element.\n   * - `prefix` - Content that appears before the main element content.\n   * - `suffix` - Content that appears after the main element content.\n   * - `header` - Content that appears at the top of the element, used for titles or introductory information.\n   * - `footer` - Content that appears at the bottom of the element, used for supplementary information or actions.\n   * - `actions` - Content area specifically for interactive controls like buttons or links.\n   * - `icon` - Content area for displaying an icon that represents the element's purpose or state.\n   */\n  slots?: 'default' | 'prefix' | 'suffix' | 'header' | 'footer' | 'actions' | 'icon';\n\n  /**\n   * Sets the automatic dismissal time in milliseconds before the element emits a `close` event. Allow ~200-250ms per word for comfortable reading.\n   * - `0` - Warning or error messages requiring immediate acknowledgment.\n   * - `3000` - Brief success or confirmation messages.\n   * - `7000` - Standard informational messages.\n   * - `10000` - Messages with actions or requiring user decision.\n   */\n  closeTimeout?: number;\n\n  /**\n   * Sets the delay in milliseconds before the element emits a `open` event.\n   * - `0` - Keyboard focus interactions (always immediate for accessibility).\n   * - `500` - Dense interfaces with many tooltips to reduce visual noise and prevent accidental triggers.\n   */\n  openDelay?: number;\n\n  /** @private An instance of `ElementInternals` that decorators/controllers set dynamically */\n  _internals: ElementInternals;\n\n  render: TemplateResult;\n}\n\n/** Defines named content areas where users can insert custom markup into the element.\n * - `default` - The primary content area for the element.\n * - `prefix` - Content that appears before the main element content.\n * - `suffix` - Content that appears after the main element content.\n * - `header` - Content that appears at the top of the element, used for titles or introductory information.\n * - `footer` - Content that appears at the bottom of the element, used for supplementary information or actions.\n * - `actions` - Content area specifically for interactive controls like buttons or links.\n * - `icon` - Content area for displaying an icon that represents the element's purpose or state.\n */\nexport type SlotName = 'default' | 'prefix' | 'suffix' | 'header' | 'footer' | 'actions' | 'icon';\n\n/** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.\n * - `emphasis` Shows the interaction targets emphasis or highlighting primary actions.\n * - `destructive` Shows the interaction targets destructive actions such as deleting or removing.\n */\nexport type Interaction = 'emphasis' | 'destructive';\n\nexport interface ContainerElement {\n  container?: Partial<Container>;\n}\n\n/** An element that renders complex data structures (e.g., arrays, series, matrices) rather than composable UI content and values expressible with primitive attributes. */\nexport interface DataElement<T extends unknown[] | Record<string, unknown>> {\n  data?: T;\n}\n\nexport const statusIcons: { [key: string]: IconName } = {\n  '': 'information-circle-stroke',\n  undefined: 'information-circle-stroke',\n  default: 'information-circle-stroke',\n  accent: 'information-circle-stroke',\n  warning: 'exclamation-triangle',\n  success: 'checkmark-circle',\n  danger: 'exclamation-circle',\n  scheduled: 'clock',\n  failed: 'x-circle',\n  finished: 'checkmark-circle',\n  unknown: 'question-mark-circle',\n  queued: 'bar-pill-stack',\n  running: 'running',\n  restarting: 'refresh',\n  stopping: 'stop-sign',\n  pending: 'circle-dash',\n  starting: 'circle-dot',\n  ignored: 'circle-angled-line'\n} as const;\n\ndeclare global {\n  var NVE_ELEMENTS: {\n    state: {\n      bundle: boolean;\n      env: 'watch' | 'production' | 'development';\n      pageHost: string;\n      moduleHost: string;\n      versions: string[];\n      scopedRegistry: { [key: string]: CustomElementRegistry };\n      elementRegistry: Readonly<{ [key: string]: string }>;\n      i18nRegistry: Readonly<{ [key: string]: string }>;\n      audit: Readonly<{\n        [key: string]: {\n          count?: number;\n          excessiveInstanceLimitAudited?: boolean;\n        };\n      }>;\n    };\n    debug: (log?: (...args: unknown[]) => void) => void;\n  };\n\n  interface HTMLElement {\n    'nve-text': string;\n    'nve-layout': string;\n  }\n\n  interface CustomElementRegistry {\n    initialize(root: ShadowRoot | Document): void;\n  }\n\n  var CustomElementRegistry: {\n    new (): CustomElementRegistry;\n    prototype: CustomElementRegistry;\n  };\n}\n\nexport interface ElementDefinition extends CustomElementConstructor {\n  metadata: { version: string; tag: string };\n  elementDefinitions?: { [key: string]: ElementDefinition };\n  shadowRootOptions?: { customElementRegistry?: CustomElementRegistry | null };\n}\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface OffsetPoint {\n  offsetX: number;\n  offsetY: number;\n}\n\nexport interface Dimensions {\n  width: number;\n  height: number;\n}\n\nexport type Rect = Point & Dimensions;\n\nexport interface Scale {\n  min: number;\n  max: number;\n}\n\n/** https://github.com/tc39/proposal-decorators */\n// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\nexport type LegacyDecoratorTarget = Function & {\n  addInitializer?: (initializer: (instance: any) => void) => void; // eslint-disable-line @typescript-eslint/no-explicit-any\n};\n"],"mappings":";AA4YA,IAAa,IAA2C;CACtD,IAAI;CACJ,WAAW;CACX,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,WAAW;CACX,QAAQ;CACR,UAAU;CACV,SAAS;CACT,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,UAAU;CACV,SAAS;CACT,UAAU;CACV,SAAS;AACX"}

package/dist/logo/logo.d.ts

@@ -31,6 +31,6 @@ export declare class Logo extends LitElement {
         version: string;
     };
     _internals: ElementInternals;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
     connectedCallback(): void;
 }

package/dist/logo/logo2.js

@@ -1,18 +1,18 @@
 import { attachInternals as e } from "../internal/utils/a11y.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { colorStateStyles as n, useStyles as r } from "../internal/styles/index.js";
+import { colorStateStyles as t, useStyles as n } from "../internal/styles/index.js";
+import { __decorate as r } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/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";
 //#region src/logo/logo.ts
 var c = class extends a {
 	static {
-		this.styles = r([i, n]);
+		this.styles = n([i, t]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-logo",
-			version: "0.2.2"
+			version: "0.2.4"
 		};
 	}
 	render() {
@@ -22,10 +22,10 @@ var c = class extends a {
 		super.connectedCallback(), e(this), this._internals.role = "img";
 	}
 };
-t([s({
+r([s({
 	type: String,
 	reflect: !0
-})], c.prototype, "color", void 0), t([s({
+})], c.prototype, "color", void 0), r([s({
 	type: String,
 	reflect: !0
 })], c.prototype, "size", void 0);

package/dist/menu/menu-item.d.ts

@@ -1,4 +1,5 @@
-import { BaseButton } from '../internal';
+import { LitElement } from 'lit';
+declare const MenuItem_base: import('@nvidia-elements/forms/mixins').ButtonFormControlMixinReturn<typeof LitElement>;
 /**
  * @element nve-menu-item
  * @description Represents a selectable option within a menu, providing an interactive button for navigation or actions.
@@ -23,7 +24,7 @@ import { BaseButton } from '../internal';
 
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
  */
-export declare class MenuItem extends BaseButton {
+export declare class MenuItem extends MenuItem_base {
     static styles: import('lit').CSSResult[];
     status: 'danger';
     static readonly metadata: {
@@ -32,7 +33,8 @@ export declare class MenuItem extends BaseButton {
         parents: string[];
     };
     static elementDefinitions: {};
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
     constructor();
     connectedCallback(): void;
 }
+export {};

package/dist/menu/menu-item2.js

@@ -1,19 +1,19 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { BaseButton as t } from "../internal/base/button.js";
-import { audit as n } from "../internal/controllers/audit.controller.js";
-import { useStyles as r } from "../internal/styles/index.js";
-import i from "./menu-item.js";
-import { html as a } from "lit";
+import { audit as e } from "../internal/controllers/audit.controller.js";
+import { useStyles as t } from "../internal/styles/index.js";
+import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/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";
+import { ButtonFormControlMixin as s } from "@nvidia-elements/forms/mixins";
 //#region src/menu/menu-item.ts
-var s = class extends t {
+var c = class extends s(i) {
 	static {
-		this.styles = r([i]);
+		this.styles = t([r]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-menu-item",
-			version: "0.2.2",
+			version: "0.2.4",
 			parents: ["nve-menu"]
 		};
 	}
@@ -30,11 +30,11 @@ var s = class extends t {
 		super.connectedCallback(), this._internals.role = "menuitem";
 	}
 };
-e([o({
+n([o({
 	type: String,
 	reflect: !0
-})], s.prototype, "status", void 0), s = e([n()], s);
+})], c.prototype, "status", void 0), c = n([e()], c);
 //#endregion
-export { s as MenuItem };
+export { c as MenuItem };
 
 //# sourceMappingURL=menu-item2.js.map

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 } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { useStyles, BaseButton, 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 * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/menu\n * @slot - default slot for content\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 BaseButton {\n  static styles = useStyles([styles]);\n\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":";;;;;;;;AAiCO,IAAA,IAAA,cAAuB,EAAW;;gBACvB,EAAU,CAAC,CAAM,CAAC;;;kBAIP;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,UAJ1C,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 * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/menu\n * @slot - default slot for content\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  @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":";;;;;;;;AAkCO,IAAA,IAAA,cAAuB,EAAuB,CAAU,EAAE;;gBAC/C,EAAU,CAAC,CAAM,CAAC;;;kBAIP;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,UAJ1C,EAAM,CAAA,GAAA,CAAA"}

package/dist/menu/menu.d.ts

@@ -30,7 +30,7 @@ export declare class Menu extends LitElement {
     /** @private */
     _internals: ElementInternals;
     items: MenuItem[];
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
     firstUpdated(): Promise<void>;
     connectedCallback(): void;
 }

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\" 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  `\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>\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"}

package/dist/menu/menu.examples.json

@@ -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\" 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",
+      "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",
       "summary": "Use a tooltip on a menu item to provide extra context and warnings.",
       "description": "",
       "composition": true,

package/dist/menu/menu2.js

@@ -1,9 +1,9 @@
-import { appendRootNodeStyle as e } from "../internal/utils/dom.js";
-import { attachInternals as t } from "../internal/utils/a11y.js";
-import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { audit as r } from "../internal/controllers/audit.controller.js";
-import { keyNavigationList as i } from "../internal/controllers/keynav-list.controller.js";
-import { useStyles as a } from "../internal/styles/index.js";
+import { audit as e } from "../internal/controllers/audit.controller.js";
+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 { __decorate as a } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
 import o from "./menu.js";
 import s from "./menu.global.js";
 import { LitElement as c, html as l } from "lit";
@@ -11,12 +11,12 @@ import { queryAssignedElements as u } from "lit/decorators/query-assigned-elemen
 //#region src/menu/menu.ts
 var d = class extends c {
 	static {
-		this.styles = a([o]);
+		this.styles = i([o]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-menu",
-			version: "0.2.2",
+			version: "0.2.4",
 			children: ["nve-menu-item", "nve-divider"]
 		};
 	}
@@ -54,10 +54,10 @@ var d = class extends c {
 		await this.updateComplete, this.shadowRoot?.querySelector("[internal-host]")?.addEventListener("scroll", this.#t, { passive: !0 });
 	}
 	connectedCallback() {
-		super.connectedCallback(), t(this), this._internals.role = "menu", e(this, s);
+		super.connectedCallback(), r(this), this._internals.role = "menu", t(this, s);
 	}
 };
-n([u()], d.prototype, "items", void 0), d = n([r(), i()], d);
+a([u()], d.prototype, "items", void 0), d = a([e(), n()], d);
 //#endregion
 export { d as Menu };
 

package/dist/month/month.d.ts

@@ -30,5 +30,5 @@ export declare class Month extends Control implements ContainerElement {
     static elementDefinitions: {
         [IconButton.metadata.tag]: typeof IconButton;
     };
-    protected get suffixContent(): import('lit-html').TemplateResult<1>;
+    protected get suffixContent(): import('lit').TemplateResult<1>;
 }