@nvidia-elements/core 2.19.0 → 2.20.0

package/dist/internal/index.js

@@ -1,36 +1,153 @@
+import { __exportAll as ee, __reExport as te } from "../_virtual/_rolldown/runtime.js";
 import { LogService as e } from "./services/log.service.js";
 import { auditParentElement as t } from "./utils/audit.js";
 import { DOCS_URL as n, formatFileSize as r, shiftLeft as i } from "./utils/strings.js";
-import { AuditController as a, audit as o, excessiveInstanceLimit as s } from "./controllers/audit.controller.js";
-import { GestureController as c } from "./controllers/gesture.controller.js";
-import { I18nService as l, I18nService_ as u } from "./services/i18n.service.js";
-import { I18nController as d, i18n as f } from "./controllers/i18n.controller.js";
-import { KeyStateController as p } from "./controllers/key-state.controller.js";
-import { debounce as m, onChildListMutation as h, stopEvent as g, throttle as _ } from "./utils/events.js";
-import { focusElement as v, focusElementTimeout as y, getActiveElement as b, initializeKeyListItems as x, isFocusable as S, isImmediateRootActiveElement as C, isSimpleFocusable as w, onListboxActivate as T, setActiveKeyListItem as E } from "./utils/focus.js";
-import { KeynavCode as D, appendAnchorName as O, appendRootNodeStyle as k, applySlotContentStates as A, clickOutsideElementBounds as j, createGhostElement as M, endOfScrollBox as N, generateId as P, getAnchorNames as F, getAttributeChanges as I, getAttributeListChanges as L, getChildren as R, getCustomElementRegistry as z, getDisplayValue as B, getElementUpdate as V, getFlattenedDOMTree as H, getFlattenedFocusableItems as U, getPropertyChanges as W, getThemeTokens as G, hasHorizontalScrollBar as K, hasInvalidDOMGrid as q, hasScrollBar as J, isContextMenuClick as Y, matchesElementName as X, openEyeDropper as Z, parseTokenNumber as Q, removeAnchorName as $, removeEmptySlotWhitespace as ee, removeEmptyTextNode as te, sameOrderedStringArray as ne, sameRenderRoot as re, scrollBarWidth as ie, slotContainsOnlyWhitespace as ae, styleSheetToString as oe, uniqueNonEmptyStrings as se, validKeyNavigationCode as ce } from "./utils/dom.js";
-import { KeyNavigationGridController as le, getNextKeyGridItem as ue, keyNavigationGrid as de } from "./controllers/keynav-grid.controller.js";
-import { KeyNavigationListController as fe, getNextKeyListItem as pe, keyNavigationList as me } from "./controllers/keynav-list.controller.js";
-import { KeyNavigationSpatialController as he } from "./controllers/keynav-spatial.controller.js";
-import { associateAriaDescribedBy as ge, associateAriaLabel as _e, associateControlGroup as ve, associateDataList as ye, associateLabel as be, attachInternals as xe } from "./utils/a11y.js";
-import { StateExpandedController as Se, stateExpanded as Ce } from "./controllers/state-expanded.controller.js";
-import { StateHighlightedController as we, stateHighlighted as Te } from "./controllers/state-highlighted.controller.js";
-import { StateScrollController as Ee, stateScroll as De } from "./controllers/state-scroll.controller.js";
-import { StateSelectedController as Oe, stateSelected as ke } from "./controllers/state-selected.controller.js";
-import { TypeAnchorController as Ae, typeAnchor as je } from "./controllers/type-anchor.controller.js";
-import { TypeClosableController as Me } from "./controllers/type-closable.controller.js";
-import { TypeExpandableController as Ne } from "./controllers/type-expandable.controller.js";
-import { TypeSelectableController as Pe } from "./controllers/type-selectable.controller.js";
-import { TypeNativePopoverController as Fe } from "./controllers/type-native-popover.controller.js";
-import { TypeSSRController as Ie, typeSSR as Le } from "./controllers/type-ssr.controller.js";
-import { hostAttr as Re } from "./decorators/host-attr.js";
-import { scopedRegistry as ze } from "./decorators/scoped-registry.js";
-import { colorStateStyles as Be, statusStateStyles as Ve, supportStateStyles as He, useStyles as Ue } from "./styles/index.js";
-import { supportsCSSLegacyInsetArea as We, supportsCSSPositionArea as Ge, supportsNativeCSSAnchorPosition as Ke } from "./utils/supports.js";
-import { popoverStyles as qe } from "./styles/popover2.js";
-import { TransitionService as Je } from "./services/transition.service.js";
-import { statusIcons as Ye } from "./types/index.js";
-import { formatStandardNumber as Xe, getDifference as Ze, isObject as Qe, parseVersion as $e } from "./utils/objects.js";
-import { createLightDismiss as et, onKeys as tt } from "./utils/keynav.js";
-import { finiteOr as nt, nonnegativeFiniteOr as rt, positiveFiniteOr as it } from "./utils/numeric.js";
-export { a as AuditController, n as DOCS_URL, c as GestureController, d as I18nController, l as I18nService, u as I18nService_, le as KeyNavigationGridController, fe as KeyNavigationListController, he as KeyNavigationSpatialController, p as KeyStateController, D as KeynavCode, e as LogService, Se as StateExpandedController, we as StateHighlightedController, Ee as StateScrollController, Oe as StateSelectedController, Je as TransitionService, Ae as TypeAnchorController, Me as TypeClosableController, Ne as TypeExpandableController, Fe as TypeNativePopoverController, Ie as TypeSSRController, Pe as TypeSelectableController, O as appendAnchorName, k as appendRootNodeStyle, A as applySlotContentStates, ge as associateAriaDescribedBy, _e as associateAriaLabel, ve as associateControlGroup, ye as associateDataList, be as associateLabel, xe as attachInternals, o as audit, t as auditParentElement, j as clickOutsideElementBounds, Be as colorStateStyles, M as createGhostElement, et as createLightDismiss, m as debounce, N as endOfScrollBox, s as excessiveInstanceLimit, nt as finiteOr, v as focusElement, y as focusElementTimeout, r as formatFileSize, Xe as formatStandardNumber, P as generateId, b as getActiveElement, F as getAnchorNames, I as getAttributeChanges, L as getAttributeListChanges, R as getChildren, z as getCustomElementRegistry, Ze as getDifference, B as getDisplayValue, V as getElementUpdate, H as getFlattenedDOMTree, U as getFlattenedFocusableItems, ue as getNextKeyGridItem, pe as getNextKeyListItem, W as getPropertyChanges, G as getThemeTokens, K as hasHorizontalScrollBar, q as hasInvalidDOMGrid, J as hasScrollBar, Re as hostAttr, f as i18n, x as initializeKeyListItems, Y as isContextMenuClick, S as isFocusable, C as isImmediateRootActiveElement, Qe as isObject, w as isSimpleFocusable, de as keyNavigationGrid, me as keyNavigationList, X as matchesElementName, rt as nonnegativeFiniteOr, h as onChildListMutation, tt as onKeys, T as onListboxActivate, Z as openEyeDropper, Q as parseTokenNumber, $e as parseVersion, qe as popoverStyles, it as positiveFiniteOr, $ as removeAnchorName, ee as removeEmptySlotWhitespace, te as removeEmptyTextNode, ne as sameOrderedStringArray, re as sameRenderRoot, ze as scopedRegistry, ie as scrollBarWidth, E as setActiveKeyListItem, i as shiftLeft, ae as slotContainsOnlyWhitespace, Ce as stateExpanded, Te as stateHighlighted, De as stateScroll, ke as stateSelected, Ye as statusIcons, Ve as statusStateStyles, g as stopEvent, oe as styleSheetToString, He as supportStateStyles, We as supportsCSSLegacyInsetArea, Ge as supportsCSSPositionArea, Ke as supportsNativeCSSAnchorPosition, _ as throttle, je as typeAnchor, Le as typeSSR, se as uniqueNonEmptyStrings, Ue as useStyles, ce as validKeyNavigationCode };
+import { AuditController as a, audit as o, excessiveInstanceLimit as ne } from "./controllers/audit.controller.js";
+import { GestureController as s } from "./controllers/gesture.controller.js";
+import { KeyStateController as c } from "./controllers/key-state.controller.js";
+import { debounce as l, onChildListMutation as u, stopEvent as d, throttle as f } from "./utils/events.js";
+import { focusElement as p, focusElementTimeout as m, getActiveElement as h, initializeKeyListItems as g, isFocusable as _, isImmediateRootActiveElement as v, isSimpleFocusable as y, onListboxActivate as b, setActiveKeyListItem as x } from "./utils/focus.js";
+import { KeynavCode as S, appendAnchorName as C, appendRootNodeStyle as w, applySlotContentStates as T, clickOutsideElementBounds as E, createGhostElement as D, endOfScrollBox as O, generateId as k, getAnchorNames as A, getAttributeChanges as j, getAttributeListChanges as M, getChildren as N, getCustomElementRegistry as P, getDisplayValue as F, getElementUpdate as I, getFlattenedDOMTree as L, getFlattenedFocusableItems as R, getPropertyChanges as z, getThemeTokens as B, hasHorizontalScrollBar as V, hasInvalidDOMGrid as H, hasScrollBar as U, isContextMenuClick as W, matchesElementName as G, openEyeDropper as K, parseTokenNumber as q, removeAnchorName as J, removeEmptySlotWhitespace as Y, removeEmptyTextNode as X, sameOrderedStringArray as Z, sameRenderRoot as Q, scrollBarWidth as re, slotContainsOnlyWhitespace as ie, styleSheetToString as ae, uniqueNonEmptyStrings as oe, validKeyNavigationCode as $ } from "./utils/dom.js";
+import { KeyNavigationGridController as se, getNextKeyGridItem as ce, keyNavigationGrid as le } from "./controllers/keynav-grid.controller.js";
+import { KeyNavigationListController as ue, getNextKeyListItem as de, keyNavigationList as fe } from "./controllers/keynav-list.controller.js";
+import { KeyNavigationSpatialController as pe } from "./controllers/keynav-spatial.controller.js";
+import { associateAriaDescribedBy as me, associateAriaLabel as he, associateControlGroup as ge, associateDataList as _e, associateLabel as ve, attachInternals as ye } from "./utils/a11y.js";
+import { StateExpandedController as be, stateExpanded as xe } from "./controllers/state-expanded.controller.js";
+import { StateHighlightedController as Se, stateHighlighted as Ce } from "./controllers/state-highlighted.controller.js";
+import { StateScrollController as we, stateScroll as Te } from "./controllers/state-scroll.controller.js";
+import { StateSelectedController as Ee, stateSelected as De } from "./controllers/state-selected.controller.js";
+import { TypeAnchorController as Oe, typeAnchor as ke } from "./controllers/type-anchor.controller.js";
+import { TypeClosableController as Ae } from "./controllers/type-closable.controller.js";
+import { TypeExpandableController as je } from "./controllers/type-expandable.controller.js";
+import { TypeSelectableController as Me } from "./controllers/type-selectable.controller.js";
+import { TypeNativePopoverController as Ne } from "./controllers/type-native-popover.controller.js";
+import { TypeSSRController as Pe, typeSSR as Fe } from "./controllers/type-ssr.controller.js";
+import { hostAttr as Ie } from "./decorators/host-attr.js";
+import { scopedRegistry as Le } from "./decorators/scoped-registry.js";
+import { colorStateStyles as Re, statusStateStyles as ze, supportStateStyles as Be, useStyles as Ve } from "./styles/index.js";
+import { supportsCSSLegacyInsetArea as He, supportsCSSPositionArea as Ue, supportsNativeCSSAnchorPosition as We } from "./utils/supports.js";
+import { popoverStyles as Ge } from "./styles/popover2.js";
+import { TransitionService as Ke } from "./services/transition.service.js";
+import { statusIcons as qe } from "./types/index.js";
+import { formatStandardNumber as Je, getDifference as Ye, isObject as Xe, parseVersion as Ze } from "./utils/objects.js";
+import { createLightDismiss as Qe, onKeys as $e } from "./utils/keynav.js";
+import { finiteOr as et, nonnegativeFiniteOr as tt, positiveFiniteOr as nt } from "./utils/numeric.js";
+export * from "@nvidia-elements/foundations/internal/i18n";
+//#region src/internal/index.ts
+var rt = /* @__PURE__ */ ee({
+	AuditController: () => a,
+	DOCS_URL: () => n,
+	GestureController: () => s,
+	KeyNavigationGridController: () => se,
+	KeyNavigationListController: () => ue,
+	KeyNavigationSpatialController: () => pe,
+	KeyStateController: () => c,
+	KeynavCode: () => S,
+	LogService: () => e,
+	StateExpandedController: () => be,
+	StateHighlightedController: () => Se,
+	StateScrollController: () => we,
+	StateSelectedController: () => Ee,
+	TransitionService: () => Ke,
+	TypeAnchorController: () => Oe,
+	TypeClosableController: () => Ae,
+	TypeExpandableController: () => je,
+	TypeNativePopoverController: () => Ne,
+	TypeSSRController: () => Pe,
+	TypeSelectableController: () => Me,
+	appendAnchorName: () => C,
+	appendRootNodeStyle: () => w,
+	applySlotContentStates: () => T,
+	associateAriaDescribedBy: () => me,
+	associateAriaLabel: () => he,
+	associateControlGroup: () => ge,
+	associateDataList: () => _e,
+	associateLabel: () => ve,
+	attachInternals: () => ye,
+	audit: () => o,
+	auditParentElement: () => t,
+	clickOutsideElementBounds: () => E,
+	colorStateStyles: () => Re,
+	createGhostElement: () => D,
+	createLightDismiss: () => Qe,
+	debounce: () => l,
+	endOfScrollBox: () => O,
+	excessiveInstanceLimit: () => 50,
+	finiteOr: () => et,
+	focusElement: () => p,
+	focusElementTimeout: () => m,
+	formatFileSize: () => r,
+	formatStandardNumber: () => Je,
+	generateId: () => k,
+	getActiveElement: () => h,
+	getAnchorNames: () => A,
+	getAttributeChanges: () => j,
+	getAttributeListChanges: () => M,
+	getChildren: () => N,
+	getCustomElementRegistry: () => P,
+	getDifference: () => Ye,
+	getDisplayValue: () => F,
+	getElementUpdate: () => I,
+	getFlattenedDOMTree: () => L,
+	getFlattenedFocusableItems: () => R,
+	getNextKeyGridItem: () => ce,
+	getNextKeyListItem: () => de,
+	getPropertyChanges: () => z,
+	getThemeTokens: () => B,
+	hasHorizontalScrollBar: () => V,
+	hasInvalidDOMGrid: () => H,
+	hasScrollBar: () => U,
+	hostAttr: () => Ie,
+	initializeKeyListItems: () => g,
+	isContextMenuClick: () => W,
+	isFocusable: () => _,
+	isImmediateRootActiveElement: () => v,
+	isObject: () => Xe,
+	isSimpleFocusable: () => y,
+	keyNavigationGrid: () => le,
+	keyNavigationList: () => fe,
+	matchesElementName: () => G,
+	nonnegativeFiniteOr: () => tt,
+	onChildListMutation: () => u,
+	onKeys: () => $e,
+	onListboxActivate: () => b,
+	openEyeDropper: () => K,
+	parseTokenNumber: () => q,
+	parseVersion: () => Ze,
+	popoverStyles: () => Ge,
+	positiveFiniteOr: () => nt,
+	removeAnchorName: () => J,
+	removeEmptySlotWhitespace: () => Y,
+	removeEmptyTextNode: () => X,
+	sameOrderedStringArray: () => Z,
+	sameRenderRoot: () => Q,
+	scopedRegistry: () => Le,
+	scrollBarWidth: () => re,
+	setActiveKeyListItem: () => x,
+	shiftLeft: () => i,
+	slotContainsOnlyWhitespace: () => ie,
+	stateExpanded: () => xe,
+	stateHighlighted: () => Ce,
+	stateScroll: () => Te,
+	stateSelected: () => De,
+	statusIcons: () => qe,
+	statusStateStyles: () => ze,
+	stopEvent: () => d,
+	styleSheetToString: () => ae,
+	supportStateStyles: () => Be,
+	supportsCSSLegacyInsetArea: () => He,
+	supportsCSSPositionArea: () => Ue,
+	supportsNativeCSSAnchorPosition: () => We,
+	throttle: () => f,
+	typeAnchor: () => ke,
+	typeSSR: () => Fe,
+	uniqueNonEmptyStrings: () => oe,
+	useStyles: () => Ve,
+	validKeyNavigationCode: () => $
+});
+import * as it from "@nvidia-elements/foundations/internal/i18n";
+te(rt, it);
+//#endregion
+export { a as AuditController, n as DOCS_URL, s as GestureController, se as KeyNavigationGridController, ue as KeyNavigationListController, pe as KeyNavigationSpatialController, c as KeyStateController, S as KeynavCode, e as LogService, be as StateExpandedController, Se as StateHighlightedController, we as StateScrollController, Ee as StateSelectedController, Ke as TransitionService, Oe as TypeAnchorController, Ae as TypeClosableController, je as TypeExpandableController, Ne as TypeNativePopoverController, Pe as TypeSSRController, Me as TypeSelectableController, C as appendAnchorName, w as appendRootNodeStyle, T as applySlotContentStates, me as associateAriaDescribedBy, he as associateAriaLabel, ge as associateControlGroup, _e as associateDataList, ve as associateLabel, ye as attachInternals, o as audit, t as auditParentElement, E as clickOutsideElementBounds, Re as colorStateStyles, D as createGhostElement, Qe as createLightDismiss, l as debounce, O as endOfScrollBox, ne as excessiveInstanceLimit, et as finiteOr, p as focusElement, m as focusElementTimeout, r as formatFileSize, Je as formatStandardNumber, k as generateId, h as getActiveElement, A as getAnchorNames, j as getAttributeChanges, M as getAttributeListChanges, N as getChildren, P as getCustomElementRegistry, Ye as getDifference, F as getDisplayValue, I as getElementUpdate, L as getFlattenedDOMTree, R as getFlattenedFocusableItems, ce as getNextKeyGridItem, de as getNextKeyListItem, z as getPropertyChanges, B as getThemeTokens, V as hasHorizontalScrollBar, H as hasInvalidDOMGrid, U as hasScrollBar, Ie as hostAttr, g as initializeKeyListItems, rt as internal_exports, W as isContextMenuClick, _ as isFocusable, v as isImmediateRootActiveElement, Xe as isObject, y as isSimpleFocusable, le as keyNavigationGrid, fe as keyNavigationList, G as matchesElementName, tt as nonnegativeFiniteOr, u as onChildListMutation, $e as onKeys, b as onListboxActivate, K as openEyeDropper, q as parseTokenNumber, Ze as parseVersion, Ge as popoverStyles, nt as positiveFiniteOr, J as removeAnchorName, Y as removeEmptySlotWhitespace, X as removeEmptyTextNode, Z as sameOrderedStringArray, Q as sameRenderRoot, Le as scopedRegistry, re as scrollBarWidth, x as setActiveKeyListItem, i as shiftLeft, ie as slotContainsOnlyWhitespace, xe as stateExpanded, Ce as stateHighlighted, Te as stateScroll, De as stateSelected, qe as statusIcons, ze as statusStateStyles, d as stopEvent, ae as styleSheetToString, Be as supportStateStyles, He as supportsCSSLegacyInsetArea, Ue as supportsCSSPositionArea, We as supportsNativeCSSAnchorPosition, f as throttle, ke as typeAnchor, Fe as typeSSR, oe as uniqueNonEmptyStrings, Ve as useStyles, $ as validKeyNavigationCode };
+
+//# sourceMappingURL=index.js.map

package/dist/internal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/internal/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/**\n * @internal private common utilities for Elements\n */\nexport * from './controllers/audit.controller.js';\nexport * from './controllers/gesture.controller.js';\nexport * from './controllers/key-state.controller.js';\nexport * from './controllers/keynav-grid.controller.js';\nexport * from './controllers/keynav-list.controller.js';\nexport * from './controllers/keynav-spatial.controller.js';\nexport * from './controllers/state-expanded.controller.js';\nexport * from './controllers/state-highlighted.controller.js';\nexport * from './controllers/state-scroll.controller.js';\nexport * from './controllers/state-selected.controller.js';\nexport * from './controllers/type-anchor.controller.js';\nexport * from './controllers/type-closable.controller.js';\nexport * from './controllers/type-expandable.controller.js';\nexport * from './controllers/type-selectable.controller.js';\nexport * from './controllers/type-native-popover.controller.js';\nexport * from './controllers/type-ssr.controller.js';\nexport * from './decorators/host-attr.js';\nexport * from './decorators/scoped-registry.js';\nexport * from './styles/index.js';\nexport * from './styles/popover.js';\nexport * from '@nvidia-elements/foundations/internal/i18n';\nexport * from './services/log.service.js';\nexport * from './services/transition.service.js';\nexport * from './types/index.js';\nexport * from './utils/a11y.js';\nexport * from './utils/audit.js';\nexport * from './utils/dom.js';\nexport * from './utils/events.js';\nexport * from './utils/objects.js';\nexport * from './utils/strings.js';\nexport * from './utils/focus.js';\nexport * from './utils/keynav.js';\nexport * from './utils/numeric.js';\nexport * from './utils/supports.js';\n"],"mappings":""}

package/dist/internal/types/index.d.ts

@@ -1,6 +1,6 @@
 import type { TemplateResult } from 'lit';
 import type { IconName } from './icons.js';
-import type { I18nStrings } from '../services/i18n.service.js';
+import type { I18nStrings } from '@nvidia-elements/foundations/internal/i18n';
 export type Color = 'red-cardinal' | 'gray-slate' | 'gray-denim' | 'blue-indigo' | 'blue-cobalt' | 'blue-sky' | 'teal-cyan' | 'green-mint' | 'teal-seafoam' | 'green-grass' | 'yellow-amber' | 'orange-pumpkin' | 'red-tomato' | 'pink-magenta' | 'purple-plum' | 'purple-violet' | 'purple-lavender' | 'pink-rose' | 'green-jade' | 'lime-pear' | 'yellow-nova' | 'brand-green';
 /** Controls the visual scale of an element to match its importance and available space.
  * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.

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 './icons.js';\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 */\nexport type Container = 'inline' | 'flat' | 'inset' | 'full';\n\n/** Controls the visual density of an element to match its context and available space.\n * - `compact` - Reduces visual weight and spacing for dense layouts or secondary elements with less visual prominence.\n * - `default` - Standard size that works well in most contexts and provides balanced visibility.\n */\nexport type Density = 'compact' | 'default';\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\nexport type InterestEvent = Event & {\n  source: HTMLElement;\n};\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. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */\n  anchor?: string | HTMLElement;\n\n  /** Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */\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 an `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',\n  undefined: 'information-circle',\n  default: 'information-circle',\n  accent: 'information-circle',\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  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 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":";AAqZA,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"}
+{"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 './icons.js';\nimport type { I18nStrings } from '@nvidia-elements/foundations/internal/i18n';\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 */\nexport type Container = 'inline' | 'flat' | 'inset' | 'full';\n\n/** Controls the visual density of an element to match its context and available space.\n * - `compact` - Reduces visual weight and spacing for dense layouts or secondary elements with less visual prominence.\n * - `default` - Standard size that works well in most contexts and provides balanced visibility.\n */\nexport type Density = 'compact' | 'default';\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\nexport type InterestEvent = Event & {\n  source: HTMLElement;\n};\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. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */\n  anchor?: string | HTMLElement;\n\n  /** Defines the element that triggers an `open` interaction event. Set the property to an element or its ID within the same render root. The HTML attribute accepts only the element ID. */\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 an `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',\n  undefined: 'information-circle',\n  default: 'information-circle',\n  accent: 'information-circle',\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  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 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":";AAqZA,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/joystick/define.d.ts

@@ -0,0 +1,6 @@
+import { Joystick } from '@nvidia-elements/core/joystick';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-joystick': Joystick;
+    }
+}

package/dist/joystick/define.js

@@ -0,0 +1,7 @@
+import { Joystick as e } from "./joystick2.js";
+import { define as t } from "@nvidia-elements/foundations/internal/define";
+//#region src/joystick/define.ts
+t(e);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/joystick/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/joystick/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Joystick } from '@nvidia-elements/core/joystick';\n\ndefine(Joystick);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-joystick': Joystick;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAQ"}

package/dist/joystick/index.d.ts

@@ -0,0 +1 @@
+export * from './joystick.js';

package/dist/joystick/index.js

@@ -0,0 +1,2 @@
+import { Joystick as e } from "./joystick2.js";
+export { e as Joystick };

package/dist/joystick/joystick.d.ts

@@ -0,0 +1,126 @@
+import { LitElement, type PropertyValues } from 'lit';
+import { type Size } from '@nvidia-elements/core/internal';
+export interface JoystickValue {
+    readonly x: number;
+    readonly y: number;
+}
+export type JoystickConstraint = 'circle' | 'square' | 'horizontal' | 'vertical';
+export type JoystickRelease = 'center' | 'hold';
+export interface JoystickInteractionStart {
+    readonly source: 'pointer' | 'keyboard';
+}
+export interface JoystickInteractionEnd extends JoystickInteractionStart {
+    readonly reason: 'release' | 'escape' | 'pointer-cancel' | 'lost-capture' | 'blur' | 'hidden' | 'disabled' | 'readonly' | 'configuration-change' | 'reset' | 'disconnect';
+}
+declare const Joystick_base: import("@nvidia-elements/forms/mixins").FormControlMixinReturn<typeof LitElement, JoystickValue>;
+/**
+ * @element nve-joystick
+ * @description A joystick selects a normalized two-axis vector with pointer or keyboard input.
+ * Applications own physical units, coordinate frames, input shaping, publishing cadence, recording clocks,
+ * command-outcome feedback, and alternative controls when needed.
+ *
+ * Give each joystick an accessible name with a label, aria-label, or aria-labelledby.
+ * Editable controls use the application role to receive two-axis keyboard input.
+ * The default accessible description includes both normalized coordinates, keyboard instructions, and release behavior.
+ * A locked axis stays at zero; an absent value reads "No position." Disabled and read-only controls omit instructions.
+ * Coordinates use up to six decimal places and the document language for number formatting.
+ * An explicit aria-description or aria-describedby replaces the default focus description through standard ARIA precedence;
+ * it does not disable live announcements.
+ * @documentation https://nvidia.github.io/elements/docs/elements/joystick/
+ * @since 0.0.0
+ * @entrypoint \@nvidia-elements/core/joystick
+ * @property {JoystickValue | undefined} value - The normalized vector: positive x points right and positive y points down, independent of text direction. Assign a complete finite object within the selected constraint. Invalid vectors throw TypeError without replacing the previous value. Programmatic writes do not dispatch input or change events. Use undefined for an absent sample and a zero vector for recorded neutral input. Set readOnly before assigning replay ownership. User input can replace external writes during an interaction.
+ * @attribute {string} value - A JSON object containing normalized x and y coordinates.
+ * @event input - Dispatched after user input changes the vector, including a return to neutral. Read .value for the current vector. A held position does not generate repeated events. Publish commands at an application-controlled cadence.
+ * @event change - Dispatched after a normal interaction completes and produces input. Cancellation sends any necessary neutral input without change.
+ * @event interaction-start - Dispatched with the pointer or keyboard source after setting :state(active), including engagement at neutral.
+ * @event interaction-end - Dispatched with the source and terminal reason after clearing :state(active). Interruption first sends any necessary neutral input. Reset restores the declared default without value events. Detached events cannot bubble to former ancestors.
+ * @cssprop --width
+ * @cssprop --height
+ * @cssprop --background
+ * @cssprop --opacity - Background opacity when the opacity flag is present. Defaults to 0.6. The border, crosshair, thumb, and focus indicator keep their opacity.
+ * @cssprop --border
+ * @cssprop --thumb-width
+ * @cssprop --thumb-height
+ * @cssprop --thumb-background
+ * @cssprop --thumb-border
+ * @stable false
+ */
+export declare class Joystick extends Joystick_base {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        valueSchema: {
+            type: 'object';
+            properties: {
+                x: {
+                    type: 'number';
+                    minimum: number;
+                    maximum: number;
+                };
+                y: {
+                    type: 'number';
+                    minimum: number;
+                    maximum: number;
+                };
+            };
+            required: string[];
+            additionalProperties: boolean;
+        };
+    };
+    /**
+     * Constrains the movement region or selects one axis. Circle limits vector magnitude to one;
+     * square permits both axes at full scale and a magnitude of up to Math.SQRT2.
+     * With equally scaled planar velocity axes, square corners allow about 41% greater speed.
+     * Mixed forward-velocity and turning-rate axes have no common physical magnitude.
+     * Changing the constraint projects the current value silently and cancels an active interaction.
+     */
+    constraint: JoystickConstraint;
+    /** Sets surface and thumb size. At the default font size, sm is 104px, md is 130px, and lg is 156px. */
+    size: Size;
+    /** Enables background transparency using the --opacity CSS custom property. */
+    opacity: boolean;
+    /**
+     * Determines whether normal release returns to center or holds the final vector.
+     * Interrupted interactions return to neutral in either mode. Form reset restores the declared default instead.
+     */
+    release: JoystickRelease;
+    /**
+     * Sets the normalized increment for each arrow key press. Repeated presses continue adjusting;
+     * releasing the final arrow applies the release behavior. Escape cancels the interaction.
+     * Invalid steps fall back to 0.1. Modifier shortcuts and locked-axis directions remain available to the browser.
+     */
+    keyboardStep: number;
+    /**
+     * Controls automatic position announcements. Focused user input produces polite announcements at most every 500 ms.
+     * A quick tap in center mode reports the input coordinates and the return to center.
+     * Escape announces the resulting coordinates without a separate cancellation message.
+     * Programmatic writes and read-only playback update the description without live announcements.
+     * Set off when the application supplies spoken output, the position description on focus remains available.
+     */
+    announce: 'polite' | 'off';
+    /** Enables updating internal string values for internationalization. */
+    i18n: Partial<import("@nvidia-elements/core/internal").I18nStrings & {
+        __set: boolean;
+    }>;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get disabled(): boolean;
+    set disabled(value: boolean | unknown);
+    get readOnly(): boolean;
+    set readOnly(value: boolean | unknown);
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    willUpdate(changes: PropertyValues<this>): void;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    updateValue(value: JoystickValue): void;
+    reset(): void;
+    formStateRestoreCallback(state: unknown, _reason?: string): void;
+    _updateFormState(): void;
+}
+export {};

package/dist/joystick/joystick.examples.js

@@ -0,0 +1,6 @@
+//#region src/joystick/joystick.examples.ts
+var e = "";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=joystick.examples.js.map

package/dist/joystick/joystick.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"joystick.examples.js","names":[],"sources":["../../src/joystick/joystick.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/joystick/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/range/define.js';\n\nexport default { title: 'Elements/Joystick', component: 'nve-joystick' };\n\n/**\n * @summary Select a direction and intensity with a circular movement region. Release the pointer or arrow keys to return to center.\n * @description Both axes use normalized values from -1 to 1. Applications can derive length with Math.hypot(x, y) and angle with Math.atan2(-y, x). This angle uses radians from the rightward direction with counterclockwise positive rotation. Use undefined at neutral. Keep these derived quantities outside the writable value. The angle does not describe the robot's heading.\n */\nexport const Default = {\n  render: () => html`<nve-joystick aria-label=\"Movement\"></nve-joystick>`\n};\n\n/**\n * @summary Choose small, medium, or large controls to fit the available space. Each size scales the movement surface and thumb together.\n */\nexport const Size = {\n  render: () => html`\n    <div nve-layout=\"row gap:lg align:wrap\">\n      <nve-joystick aria-label=\"Small movement\" size=\"sm\"></nve-joystick>\n      <nve-joystick aria-label=\"Medium movement\" size=\"md\"></nve-joystick>\n      <nve-joystick aria-label=\"Large movement\" size=\"lg\"></nve-joystick>\n    </div>\n  `\n};\n\n/**\n * @summary Overlay a joystick with a translucent background on a checkered scene. Keep the border and thumb at full opacity for contrast.\n * @tags theme\n */\nexport const Opacity = {\n  render: () => html`\n    <div\n      nve-layout=\"row align:center pad:lg\"\n      style=\"\n        width: 100%;\n        min-height: 16rem;\n        background: repeating-conic-gradient(\n            var(--nve-sys-layer-container-background) 0% 25%,\n            var(--nve-sys-layer-canvas-background) 0% 50%\n          )\n          center / 2rem 2rem;\n      \"\n    >\n      <nve-joystick aria-label=\"Movement\" opacity></nve-joystick>\n    </div>\n  `\n};\n\n/**\n * @summary Compare circular, square, and single-axis movement regions. Choose a constraint that matches the available commands.\n * @description Circle bounds normalized magnitude to one. Square allows independent full-scale axes and a magnitude of up to Math.SQRT2. Use circle for planar direction and intensity, or square for independent limits such as forward velocity and turning rate. Equally scaled planar velocity axes can produce about 41% greater diagonal speed with square input.\n */\nexport const Constraints = {\n  render: () => html`\n    <div nve-layout=\"row gap:lg align:wrap\">\n      <nve-joystick aria-label=\"Circular movement\"></nve-joystick>\n      <nve-joystick aria-label=\"Independent axes\" constraint=\"square\"></nve-joystick>\n      <nve-joystick aria-label=\"Turn\" constraint=\"horizontal\"></nve-joystick>\n      <nve-joystick aria-label=\"Vertical movement\" constraint=\"vertical\"></nve-joystick>\n    </div>\n  `\n};\n\n/**\n * @summary Keep the last position after release for persistent target selection. Press Escape during an interaction to return to center.\n */\nexport const Hold = {\n  render: () => html`<nve-joystick aria-label=\"Persistent target\" release=\"hold\"></nve-joystick>`\n};\n\n/**\n * @summary Display recorded input without generating control events. Use read-only state for inspection and disabled state for unavailable controls.\n * @description Set readOnly to true before assigning recorded vectors through .value. Use undefined for an absent sample and a zero vector for recorded neutral input. The recording layer captures source, sample time, engagement transitions, and mapping configuration. Preserve its clock during replay and avoid applying input shaping to recorded samples again.\n */\nexport const States = {\n  render: () => html`\n    <div nve-layout=\"row gap:lg align:wrap\">\n      <nve-joystick aria-label=\"Recorded input\" readonly value='{\"x\":0.4,\"y\":-0.6}'></nve-joystick>\n      <nve-joystick aria-label=\"Unavailable control\" disabled></nve-joystick>\n    </div>\n  `\n};\n\n/**\n * @summary Map travel and turn input to body-frame velocities in meters and radians per second. Engage either joystick to update its command axes.\n * @description Input maps to ROS body axes: x-forward, y-left, z-up, with positive yaw counterclockwise. Travel uses square constraints for independent axis limits; use circle to bound normalized translation magnitude. The illustrative maxima are 1 m/s forward, 0.5 m/s lateral, and 1 rad/s yaw. Each control's :state(active) CSS custom state gates its displayed velocity. Interaction events refresh the readouts. The application chooses its limits and publishes the latest command at its own cadence, including while input remains stationary.\n */\nexport const TravelTurn = {\n  render: () => html`\n    <div id=\"joystick-travel-turn\" nve-layout=\"column gap:lg\">\n      <div nve-layout=\"row gap:lg align:wrap\">\n        <div nve-layout=\"column gap:sm\">\n          <label for=\"joystick-travel\">Travel</label>\n          <nve-joystick id=\"joystick-travel\" constraint=\"square\"></nve-joystick>\n          <output data-travel style=\"width: 170px\">Released: x 0.00, y 0.00</output>\n        </div>\n        <div nve-layout=\"column gap:sm\">\n          <label for=\"joystick-turn\">Turn</label>\n          <nve-joystick id=\"joystick-turn\" constraint=\"horizontal\"></nve-joystick>\n          <output data-turn>Released: x 0.00, y 0.00</output>\n        </div>\n      </div>\n      <output data-command>vx 0.00 m/s, vy 0.00 m/s, wz 0.00 rad/s</output>\n    </div>\n    <script type=\"module\">\n      const group = document.querySelector('#joystick-travel-turn');\n      const travel = group.querySelector('#joystick-travel');\n      const turn = group.querySelector('#joystick-turn');\n      const maxForwardMps = 1;\n      const maxLateralMps = 0.5;\n      const maxYawRadps = 1;\n\n      function describe(control) {\n        const value = control.value;\n        const state = control.matches(':state(active)') ? 'Engaged' : 'Released';\n        return state + ': ' + (value ? 'x ' + value.x.toFixed(2) + ', y ' + value.y.toFixed(2) : 'No sample');\n      }\n\n      function update() {\n        group.querySelector('[data-travel]').textContent = describe(travel);\n        group.querySelector('[data-turn]').textContent = describe(turn);\n        const translation = travel.matches(':state(active)') ? travel.value : undefined;\n        const rotation = turn.matches(':state(active)') ? turn.value : undefined;\n        const command = {\n          vx: -(translation?.y ?? 0) * maxForwardMps,\n          vy: -(translation?.x ?? 0) * maxLateralMps,\n          wz: -(rotation?.x ?? 0) * maxYawRadps\n        };\n        group.querySelector('[data-command]').textContent =\n          'vx ' + command.vx.toFixed(2) + ' m/s, vy ' + command.vy.toFixed(2) + ' m/s, wz ' + command.wz.toFixed(2) + ' rad/s';\n      }\n\n      for (const type of ['input', 'interaction-start', 'interaction-end']) group.addEventListener(type, update);\n      await customElements.whenDefined('nve-joystick');\n      update();\n    </script>\n  `\n};\n\n/**\n * @summary Adjust a radial dead zone and response curve before mapping input to commands. Compare the shaped vector with the unchanged joystick value.\n * @description A dead zone of zero and response exponent of one leave circular input unchanged. The dead zone makes neutral easier to select; a larger exponent provides finer control near neutral. The remaining range scales back to full output at the boundary and preserves direction. Shaping produces a separate command vector without rewriting .value. Map it to physical units afterward. Apply filtering in one input layer to avoid processing hardware or recorded samples twice. [ROS joystick parameters](https://github.com/ros-drivers/joystick_drivers/blob/ros2/joy/README.md)\n */\nexport const InputShaping = {\n  render: () => html`\n    <div id=\"joystick-shaping\" nve-layout=\"column gap:md\">\n      <nve-joystick aria-label=\"Movement\" constraint=\"circle\"></nve-joystick>\n      <nve-range>\n        <label for=\"joystick-deadzone\">Dead zone</label>\n        <input id=\"joystick-deadzone\" type=\"range\" min=\"0\" max=\"0.5\" step=\"0.01\" value=\"0\" />\n      </nve-range>\n      <nve-range>\n        <label for=\"joystick-response\">Response exponent</label>\n        <input id=\"joystick-response\" type=\"range\" min=\"1\" max=\"3\" step=\"0.1\" value=\"1\" />\n      </nve-range>\n      <output data-settings>Dead zone 0.00, response 1.0</output>\n      <output data-raw>Raw: x 0.00, y 0.00</output>\n      <output data-shaped>Shaped: x 0.00, y 0.00</output>\n    </div>\n    <script type=\"module\">\n      const group = document.querySelector('#joystick-shaping');\n      const joystick = group.querySelector('nve-joystick');\n      const deadzone = group.querySelector('#joystick-deadzone');\n      const response = group.querySelector('#joystick-response');\n\n      function shape(value, deadzone, exponent) {\n        const magnitude = Math.hypot(value.x, value.y);\n        if (magnitude <= deadzone) return { x: 0, y: 0 };\n        const strength = ((magnitude - deadzone) / (1 - deadzone)) ** exponent;\n        return { x: value.x / magnitude * strength, y: value.y / magnitude * strength };\n      }\n\n      function update() {\n        const raw = joystick.value ?? { x: 0, y: 0 };\n        const shaped = shape(raw, deadzone.valueAsNumber, response.valueAsNumber);\n        group.querySelector('[data-settings]').textContent =\n          'Dead zone ' + deadzone.valueAsNumber.toFixed(2) + ', response ' + response.valueAsNumber.toFixed(1);\n        group.querySelector('[data-raw]').textContent = 'Raw: x ' + raw.x.toFixed(2) + ', y ' + raw.y.toFixed(2);\n        group.querySelector('[data-shaped]').textContent = 'Shaped: x ' + shaped.x.toFixed(2) + ', y ' + shaped.y.toFixed(2);\n      }\n\n      group.addEventListener('input', update);\n      await customElements.whenDefined('nve-joystick');\n      update();\n    </script>\n  `\n};\n\n/**\n * @summary Submit both axes as separate named fields and restore the declared position with form reset. Use held values when selecting persistent form targets.\n */\nexport const Form = {\n  render: () => html`\n    <form nve-layout=\"column gap:md\">\n      <label for=\"joystick-form\">Target</label>\n      <nve-joystick id=\"joystick-form\" name=\"target\" release=\"hold\" value='{\"x\":0.2,\"y\":-0.3}'></nve-joystick>\n      <nve-button type=\"reset\">Reset target</nve-button>\n    </form>\n  `\n};\n\n/**\n * @summary Override joystickPosition through i18n to localize spoken coordinates while keeping built-in position announcements.\n */\nexport const AccessibleFeedback = {\n  render: () => html`\n    <nve-joystick aria-label=\"Movement\" i18n='{\"joystickPosition\":\"Horizontal {x}, vertical {y}.\"}'></nve-joystick>\n  `\n};\n\n/**\n * @summary Supply application announcements with a labeled output. Disable built-in announcements to avoid duplicate feedback.\n */\nexport const ExternalFeedback = {\n  render: () => html`\n    <div id=\"joystick-external-feedback\" nve-layout=\"column gap:md\">\n      <nve-joystick aria-label=\"Target\" announce=\"off\" release=\"hold\"></nve-joystick>\n      <output aria-live=\"polite\" aria-atomic=\"true\">Target: X 0, Y 0</output>\n    </div>\n    <script type=\"module\">\n      const root = document.querySelector('#joystick-external-feedback');\n      const joystick = root.querySelector('nve-joystick');\n      const output = root.querySelector('output');\n      joystick.addEventListener('change', () => {\n        const value = joystick.value;\n        output.textContent = value ? 'Target: X ' + value.x + ', Y ' + value.y : 'No target';\n      });\n    </script>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}