@nvidia-elements/core 2.15.5 → 2.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (140) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/accordion/accordion2.js +4 -4
  3. package/dist/alert/alert-group2.js +1 -1
  4. package/dist/alert/alert2.js +1 -1
  5. package/dist/avatar/avatar-group2.js +1 -1
  6. package/dist/avatar/avatar2.js +1 -1
  7. package/dist/badge/badge2.js +1 -1
  8. package/dist/breadcrumb/breadcrumb2.js +1 -1
  9. package/dist/bundle.d.ts +4 -0
  10. package/dist/bundles/index.d.ts +58 -0
  11. package/dist/bundles/index.js +73 -6
  12. package/dist/button/button2.js +1 -1
  13. package/dist/button-group/button-group2.js +1 -1
  14. package/dist/card/card2.js +4 -4
  15. package/dist/chat-message/chat-message2.js +1 -1
  16. package/dist/checkbox/checkbox-group2.js +1 -1
  17. package/dist/checkbox/checkbox2.js +1 -1
  18. package/dist/color/color2.js +1 -1
  19. package/dist/combobox/combobox2.js +1 -1
  20. package/dist/copy-button/copy-button2.js +1 -1
  21. package/dist/custom-elements-jsx.d.ts +46 -0
  22. package/dist/custom-elements-vue.d.ts +46 -0
  23. package/dist/custom-elements.json +271 -0
  24. package/dist/data.html.json +37 -0
  25. package/dist/date/date2.js +1 -1
  26. package/dist/datetime/datetime2.js +1 -1
  27. package/dist/dialog/dialog-footer2.js +1 -1
  28. package/dist/dialog/dialog-header2.js +1 -1
  29. package/dist/dialog/dialog2.js +1 -1
  30. package/dist/divider/divider2.js +1 -1
  31. package/dist/dot/dot2.js +1 -1
  32. package/dist/drag-handle/drag-handle2.js +1 -1
  33. package/dist/drawer/drawer-content2.js +1 -1
  34. package/dist/drawer/drawer-footer2.js +1 -1
  35. package/dist/drawer/drawer-header2.js +1 -1
  36. package/dist/drawer/drawer2.js +1 -1
  37. package/dist/dropdown/dropdown-footer2.js +1 -1
  38. package/dist/dropdown/dropdown-header2.js +1 -1
  39. package/dist/dropdown/dropdown2.js +1 -1
  40. package/dist/dropdown-group/dropdown-group.js +1 -1
  41. package/dist/dropzone/dropzone2.js +1 -1
  42. package/dist/file/file2.js +1 -1
  43. package/dist/format-bytes/format-bytes2.js +1 -1
  44. package/dist/format-datetime/format-datetime2.js +1 -1
  45. package/dist/format-number/format-number2.js +1 -1
  46. package/dist/format-relative-time/format-relative-time2.js +1 -1
  47. package/dist/format-truncate/format-truncate2.js +1 -1
  48. package/dist/forms/control/control2.js +1 -1
  49. package/dist/forms/control-group/control-group2.js +1 -1
  50. package/dist/forms/control-message/control-message2.js +1 -1
  51. package/dist/gauge/gauge2.js +1 -1
  52. package/dist/grid/cell/cell2.js +1 -1
  53. package/dist/grid/column/column2.js +1 -1
  54. package/dist/grid/footer/footer2.js +1 -1
  55. package/dist/grid/grid2.js +1 -1
  56. package/dist/grid/header/header2.js +1 -1
  57. package/dist/grid/placeholder/placeholder2.js +1 -1
  58. package/dist/grid/row/row2.js +1 -1
  59. package/dist/icon/icon2.js +2 -2
  60. package/dist/icon-button/icon-button2.js +1 -1
  61. package/dist/iframe/define.d.ts +6 -0
  62. package/dist/iframe/define.js +7 -0
  63. package/dist/iframe/define.js.map +1 -0
  64. package/dist/iframe/iframe.d.ts +28 -0
  65. package/dist/iframe/iframe.examples.js +6 -0
  66. package/dist/iframe/iframe.examples.js.map +1 -0
  67. package/dist/iframe/iframe.examples.json +59 -0
  68. package/dist/iframe/iframe.js +6 -0
  69. package/dist/iframe/iframe.js.map +1 -0
  70. package/dist/iframe/iframe2.js +183 -0
  71. package/dist/iframe/iframe2.js.map +1 -0
  72. package/dist/iframe/index.d.ts +1 -0
  73. package/dist/iframe/index.js +2 -0
  74. package/dist/index.js +1 -1
  75. package/dist/input/input-group2.js +1 -1
  76. package/dist/input/input2.js +1 -1
  77. package/dist/internal/services/global.service.js +1 -1
  78. package/dist/logo/logo2.js +1 -1
  79. package/dist/menu/menu-group2.js +1 -1
  80. package/dist/menu/menu-item2.js +1 -1
  81. package/dist/menu/menu2.js +1 -1
  82. package/dist/month/month2.js +1 -1
  83. package/dist/notification/notification-group2.js +1 -1
  84. package/dist/notification/notification2.js +1 -1
  85. package/dist/page/page-panel/page-panel-content2.js +1 -1
  86. package/dist/page/page-panel/page-panel-footer2.js +1 -1
  87. package/dist/page/page-panel/page-panel-header2.js +1 -1
  88. package/dist/page/page-panel/page-panel2.js +1 -1
  89. package/dist/page/page2.js +1 -1
  90. package/dist/page-header/page-header2.js +1 -1
  91. package/dist/page-loader/page-loader2.js +1 -1
  92. package/dist/pagination/pagination2.js +1 -1
  93. package/dist/panel/panel2.js +4 -4
  94. package/dist/password/password2.js +1 -1
  95. package/dist/preferences-input/preferences-input2.js +1 -1
  96. package/dist/progress-bar/progress-bar2.js +1 -1
  97. package/dist/progress-dot/define.d.ts +6 -0
  98. package/dist/progress-dot/define.js +7 -0
  99. package/dist/progress-dot/define.js.map +1 -0
  100. package/dist/progress-dot/index.d.ts +1 -0
  101. package/dist/progress-dot/index.js +2 -0
  102. package/dist/progress-dot/progress-dot.d.ts +33 -0
  103. package/dist/progress-dot/progress-dot.examples.js +6 -0
  104. package/dist/progress-dot/progress-dot.examples.js.map +1 -0
  105. package/dist/progress-dot/progress-dot.examples.json +64 -0
  106. package/dist/progress-dot/progress-dot.js +6 -0
  107. package/dist/progress-dot/progress-dot.js.map +1 -0
  108. package/dist/progress-dot/progress-dot2.js +40 -0
  109. package/dist/progress-dot/progress-dot2.js.map +1 -0
  110. package/dist/progress-ring/progress-ring2.js +1 -1
  111. package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
  112. package/dist/pulse/pulse2.js +1 -1
  113. package/dist/radio/radio-group2.js +1 -1
  114. package/dist/radio/radio2.js +1 -1
  115. package/dist/range/range2.js +1 -1
  116. package/dist/resize-handle/resize-handle2.js +1 -1
  117. package/dist/search/search2.js +1 -1
  118. package/dist/select/select2.js +1 -1
  119. package/dist/skeleton/skeleton2.js +1 -1
  120. package/dist/sort-button/sort-button2.js +1 -1
  121. package/dist/sparkline/sparkline2.js +1 -1
  122. package/dist/star-rating/star-rating2.js +1 -1
  123. package/dist/steps/steps2.js +2 -2
  124. package/dist/switch/switch-group2.js +1 -1
  125. package/dist/switch/switch2.js +1 -1
  126. package/dist/tabs/tabs-group2.js +1 -1
  127. package/dist/tabs/tabs2.js +2 -2
  128. package/dist/tag/tag2.js +1 -1
  129. package/dist/textarea/textarea2.js +1 -1
  130. package/dist/time/time2.js +1 -1
  131. package/dist/toast/toast2.js +1 -1
  132. package/dist/toggletip/toggletip-footer2.js +1 -1
  133. package/dist/toggletip/toggletip-header2.js +1 -1
  134. package/dist/toggletip/toggletip2.js +1 -1
  135. package/dist/toolbar/toolbar2.js +1 -1
  136. package/dist/tooltip/tooltip2.js +1 -1
  137. package/dist/tree/tree-node2.js +1 -1
  138. package/dist/tree/tree2.js +1 -1
  139. package/dist/week/week2.js +1 -1
  140. package/package.json +26 -1
package/dist/iframe/iframe2.js ADDED
@@ -0,0 +1,183 @@
1
+ import { useStyles as e } from "../internal/styles/index.js";
2
+ import t from "./iframe.js";
3
+ import { LitElement as n, html as r } from "lit";
4
+ //#region src/iframe/iframe.ts
5
+ function i(e) {
6
+ return typeof e == "object" && !!e && "resize" in e && e.resize === !0 && "documentId" in e && typeof e.documentId == "number" && "width" in e && typeof e.width == "number" && (!("height" in e) || typeof e.height == "number");
7
+ }
8
+ var a = (e) => `
9
+ <script type="module">
10
+ window.addEventListener('message', event => {
11
+ if (event.source !== window.parent || typeof event.data !== 'string') {
12
+ return;
13
+ }
14
+
15
+ let message;
16
+ try {
17
+ message = JSON.parse(event.data);
18
+ } catch {
19
+ return;
20
+ }
21
+
22
+ if (typeof message !== 'object' || message === null || typeof message.theme !== 'string') {
23
+ return;
24
+ }
25
+
26
+ document.documentElement.setAttribute('nve-theme', message.theme);
27
+ document.documentElement.style.colorScheme = message.theme;
28
+ });
29
+
30
+ let nativeHeight = CSS.supports('frame-sizing', 'content-height') && typeof window.requestResize === 'function';
31
+ let previousWidth;
32
+ const resizeObserver = new ResizeObserver((entries) => {
33
+ for (const entry of entries) {
34
+ if (entry.target === document.body) {
35
+ const width = entry.borderBoxSize[0].inlineSize;
36
+ if (nativeHeight) {
37
+ try {
38
+ window.requestResize();
39
+ } catch {
40
+ // Native sizing can reject the document even when the API exists.
41
+ nativeHeight = false;
42
+ }
43
+ if (nativeHeight && width === previousWidth) {
44
+ continue;
45
+ }
46
+ }
47
+ previousWidth = width;
48
+ const size = nativeHeight
49
+ ? { resize: true, documentId: ${e}, width }
50
+ : { resize: true, documentId: ${e}, width, height: entry.borderBoxSize[0].blockSize };
51
+ window.parent.postMessage(JSON.stringify(size), '*');
52
+ }
53
+ }
54
+ });
55
+ resizeObserver.observe(document.body);
56
+ <\/script>
57
+ `, o = class extends n {
58
+ static {
59
+ this.styles = e([t]);
60
+ }
61
+ static {
62
+ this.metadata = {
63
+ tag: "nve-iframe",
64
+ version: "2.16.0"
65
+ };
66
+ }
67
+ static get observedAttributes() {
68
+ return [...super.observedAttributes, "aria-label"];
69
+ }
70
+ get #e() {
71
+ return this.querySelector("template:not([slot])");
72
+ }
73
+ get #t() {
74
+ return this.querySelector("template[slot=\"head\"]");
75
+ }
76
+ get #n() {
77
+ return this.shadowRoot?.querySelector("iframe") ?? null;
78
+ }
79
+ get #r() {
80
+ return this.closest("[nve-theme]");
81
+ }
82
+ #i = 0;
83
+ #a;
84
+ #o;
85
+ #s;
86
+ #c;
87
+ render() {
88
+ return r`<iframe internal-host title="${this.ariaLabel ?? ""}" sandbox="allow-scripts" @load="${this.#m}"></iframe>`;
89
+ }
90
+ connectedCallback() {
91
+ super.connectedCallback(), globalThis.window.addEventListener("message", this.#g), this.hasUpdated && (this.#u(), this.#d(), this.#f(), this.#p(), this.#l());
92
+ }
93
+ attributeChangedCallback(e, t, n) {
94
+ super.attributeChangedCallback(e, t, n), e === "aria-label" && t !== n && this.requestUpdate();
95
+ }
96
+ firstUpdated(e) {
97
+ super.firstUpdated(e), this.#u(), this.#d(), this.#f(), this.#p(), this.#l();
98
+ }
99
+ disconnectedCallback() {
100
+ super.disconnectedCallback(), this.#a?.disconnect(), this.#o?.disconnect(), this.#s?.disconnect(), this.#c?.disconnect(), this.#a = void 0, this.#o = void 0, this.#s = void 0, this.#c = void 0, globalThis.window.removeEventListener("message", this.#g);
101
+ }
102
+ #l() {
103
+ let e = this.#n;
104
+ if (e === null) return;
105
+ this.#i++, this.style.setProperty("--_height", "0px"), CSS.supports("frame-sizing", "content-height") && (e.style.height = getComputedStyle(e).height);
106
+ let t = this.#r?.getAttribute("nve-theme") ?? "";
107
+ e.srcdoc = `
108
+ <!DOCTYPE html>
109
+ <html nve-theme="${t}" style="color-scheme: ${t}">
110
+ <head>
111
+ <meta name="responsive-embedded-sizing" content="allow-origins=*">
112
+ <style>
113
+ html { box-sizing: border-box; }
114
+ *, *:before, *:after { box-sizing: inherit; }
115
+ html, body { margin: 0; overflow: hidden; }
116
+ html { width: 100vw; }
117
+ </style>
118
+ ${this.#t?.innerHTML ?? ""}
119
+ </head>
120
+ <body nve-text="body">
121
+ ${this.#e?.innerHTML ?? ""}
122
+ ${a(this.#i)}
123
+ </body>
124
+ </html>
125
+ `;
126
+ }
127
+ #u() {
128
+ this.#a?.disconnect();
129
+ let e = this.#e;
130
+ e ? (this.#a = new MutationObserver(() => this.#l()), this.#a.observe(e.content, {
131
+ childList: !0,
132
+ subtree: !0,
133
+ characterData: !0,
134
+ attributes: !0
135
+ })) : this.#a = void 0;
136
+ }
137
+ #d() {
138
+ this.#o?.disconnect();
139
+ let e = this.#t;
140
+ e ? (this.#o = new MutationObserver(() => this.#l()), this.#o.observe(e.content, {
141
+ childList: !0,
142
+ subtree: !0,
143
+ characterData: !0,
144
+ attributes: !0
145
+ })) : this.#o = void 0;
146
+ }
147
+ #f() {
148
+ this.#s || (this.#s = new MutationObserver(() => {
149
+ this.#u(), this.#d(), this.#l();
150
+ }), this.#s.observe(this, { childList: !0 }));
151
+ }
152
+ #p() {
153
+ let e = this.#r;
154
+ e && !this.#c && (this.#c = new MutationObserver(() => this.#h()), this.#c.observe(e, { attributeFilter: ["nve-theme"] }));
155
+ }
156
+ #m = () => {
157
+ let e = this.#n, t = this.#i;
158
+ requestAnimationFrame(() => {
159
+ this.isConnected && t === this.#i && e?.style.removeProperty("height");
160
+ }), this.#h();
161
+ };
162
+ #h = () => {
163
+ let e = this.#r?.getAttribute("nve-theme"), t = this.#n?.contentWindow;
164
+ if (e == null || t == null) return;
165
+ let n = { theme: e };
166
+ t.postMessage(JSON.stringify(n), "*");
167
+ };
168
+ #g = (e) => {
169
+ let t = this.#n;
170
+ if (t === null || e.source !== t.contentWindow || typeof e.data != "string") return;
171
+ let n;
172
+ try {
173
+ n = JSON.parse(e.data);
174
+ } catch {
175
+ return;
176
+ }
177
+ !i(n) || n.documentId !== this.#i || (this.style.setProperty("--_width", `${n.width}px`), this.style.setProperty("--_height", n.height === void 0 ? "auto" : `${n.height}px`));
178
+ };
179
+ };
180
+ //#endregion
181
+ export { o as Iframe };
182
+
183
+ //# sourceMappingURL=iframe2.js.map
package/dist/iframe/iframe2.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"iframe2.js","names":[],"sources":["../../src/iframe/iframe.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html, type PropertyValues } from 'lit';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './iframe.css?inline';\n\ntype ResizeMessage = {\n resize: true;\n documentId: number;\n width: number;\n height?: number;\n};\n\ntype ThemeMessage = {\n theme: string;\n};\n\nfunction isResizeMessage(value: unknown): value is ResizeMessage {\n return (\n typeof value === 'object' &&\n value !== null &&\n 'resize' in value &&\n value.resize === true &&\n 'documentId' in value &&\n typeof value.documentId === 'number' &&\n 'width' in value &&\n typeof value.width === 'number' &&\n (!('height' in value) || typeof value.height === 'number')\n );\n}\n\nconst iframeScript = (documentId: number) => /* html */ `\n <script type=\"module\">\n window.addEventListener('message', event => {\n if (event.source !== window.parent || typeof event.data !== 'string') {\n return;\n }\n\n let message;\n try {\n message = JSON.parse(event.data);\n } catch {\n return;\n }\n\n if (typeof message !== 'object' || message === null || typeof message.theme !== 'string') {\n return;\n }\n\n document.documentElement.setAttribute('nve-theme', message.theme);\n document.documentElement.style.colorScheme = message.theme;\n });\n\n let nativeHeight = CSS.supports('frame-sizing', 'content-height') && typeof window.requestResize === 'function';\n let previousWidth;\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n if (entry.target === document.body) {\n const width = entry.borderBoxSize[0].inlineSize;\n if (nativeHeight) {\n try {\n window.requestResize();\n } catch {\n // Native sizing can reject the document even when the API exists.\n nativeHeight = false;\n }\n if (nativeHeight && width === previousWidth) {\n continue;\n }\n }\n previousWidth = width;\n const size = nativeHeight\n ? { resize: true, documentId: ${documentId}, width }\n : { resize: true, documentId: ${documentId}, width, height: entry.borderBoxSize[0].blockSize };\n window.parent.postMessage(JSON.stringify(size), '*');\n }\n }\n });\n resizeObserver.observe(document.body);\n </script>\n`;\n\n/**\n * @element nve-iframe\n * @description An iframe component that syncs with the parent document's theme and template content. Use when needing to render dynamically generated or isolated content.\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/iframe\n * @documentation https://nvidia.github.io/elements/docs/elements/iframe/\n * @slot - A template containing the iframe body content.\n * @slot head - A template containing content inserted into the iframe head.\n * @cssprop --border\n * @cssprop --width\n * @cssprop --height\n * @beta\n */\nexport class Iframe extends LitElement {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-iframe',\n version: '0.0.0'\n };\n\n static get observedAttributes() {\n return [...super.observedAttributes, 'aria-label'];\n }\n\n get #template() {\n return this.querySelector<HTMLTemplateElement>('template:not([slot])');\n }\n\n get #headTemplate() {\n return this.querySelector<HTMLTemplateElement>('template[slot=\"head\"]');\n }\n\n get #iframe() {\n return this.shadowRoot?.querySelector<HTMLIFrameElement>('iframe') ?? null;\n }\n\n get #themeHost() {\n return this.closest<HTMLElement>('[nve-theme]');\n }\n\n #documentId = 0;\n #templateObserver?: MutationObserver;\n #headTemplateObserver?: MutationObserver;\n #lightDomObserver?: MutationObserver;\n #themeObserver?: MutationObserver;\n\n render() {\n return html`<iframe\n internal-host\n title=${this.ariaLabel ?? ''}\n sandbox=\"allow-scripts\"\n @load=${this.#handleLoad}\n ></iframe>`;\n }\n\n connectedCallback() {\n super.connectedCallback();\n globalThis.window.addEventListener('message', this.#handleResizeMessage);\n if (this.hasUpdated) {\n this.#setupTemplateUpdates();\n this.#setupTemplateHeadUpdates();\n this.#setupLightDomUpdates();\n this.#setupThemeUpdates();\n this.#updateSource();\n }\n }\n\n attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\n super.attributeChangedCallback(name, oldValue, newValue);\n if (name === 'aria-label' && oldValue !== newValue) {\n this.requestUpdate();\n }\n }\n\n firstUpdated(props: PropertyValues<this>) {\n super.firstUpdated(props);\n this.#setupTemplateUpdates();\n this.#setupTemplateHeadUpdates();\n this.#setupLightDomUpdates();\n this.#setupThemeUpdates();\n this.#updateSource();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#templateObserver?.disconnect();\n this.#headTemplateObserver?.disconnect();\n this.#lightDomObserver?.disconnect();\n this.#themeObserver?.disconnect();\n this.#templateObserver = undefined;\n this.#headTemplateObserver = undefined;\n this.#lightDomObserver = undefined;\n this.#themeObserver = undefined;\n globalThis.window.removeEventListener('message', this.#handleResizeMessage);\n }\n\n // <head> and <body> can't be slotted https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template#usage_notes\n #updateSource() {\n const iframe = this.#iframe;\n if (iframe === null) {\n return;\n }\n\n // Start each document with the initial height rather than the previous resize result.\n this.#documentId++;\n this.style.setProperty('--_height', '0px');\n if (CSS.supports('frame-sizing', 'content-height')) {\n // Keep the initial viewport until the new document finishes loading.\n iframe.style.height = getComputedStyle(iframe).height;\n }\n const theme = this.#themeHost?.getAttribute('nve-theme') ?? '';\n iframe.srcdoc = `\n <!DOCTYPE html>\n <html nve-theme=\"${theme}\" style=\"color-scheme: ${theme}\">\n <head>\n <meta name=\"responsive-embedded-sizing\" content=\"allow-origins=*\">\n <style>\n html { box-sizing: border-box; }\n *, *:before, *:after { box-sizing: inherit; }\n html, body { margin: 0; overflow: hidden; }\n html { width: 100vw; }\n </style>\n ${this.#headTemplate?.innerHTML ?? ''}\n </head>\n <body nve-text=\"body\">\n ${this.#template?.innerHTML ?? ''}\n ${iframeScript(this.#documentId)}\n </body>\n </html>\n `;\n }\n\n #setupTemplateUpdates() {\n this.#templateObserver?.disconnect();\n const template = this.#template;\n if (template) {\n this.#templateObserver = new MutationObserver(() => this.#updateSource());\n this.#templateObserver.observe(template.content, {\n childList: true,\n subtree: true,\n characterData: true,\n attributes: true\n });\n } else {\n this.#templateObserver = undefined;\n }\n }\n\n #setupTemplateHeadUpdates() {\n this.#headTemplateObserver?.disconnect();\n const headTemplate = this.#headTemplate;\n if (headTemplate) {\n this.#headTemplateObserver = new MutationObserver(() => this.#updateSource());\n this.#headTemplateObserver.observe(headTemplate.content, {\n childList: true,\n subtree: true,\n characterData: true,\n attributes: true\n });\n } else {\n this.#headTemplateObserver = undefined;\n }\n }\n\n #setupLightDomUpdates() {\n if (!this.#lightDomObserver) {\n this.#lightDomObserver = new MutationObserver(() => {\n this.#setupTemplateUpdates();\n this.#setupTemplateHeadUpdates();\n this.#updateSource();\n });\n this.#lightDomObserver.observe(this, { childList: true });\n }\n }\n\n #setupThemeUpdates() {\n const themeHost = this.#themeHost;\n if (themeHost && !this.#themeObserver) {\n this.#themeObserver = new MutationObserver(() => this.#syncTheme());\n this.#themeObserver.observe(themeHost, { attributeFilter: ['nve-theme'] });\n }\n }\n\n #handleLoad = () => {\n const iframe = this.#iframe;\n const documentId = this.#documentId;\n requestAnimationFrame(() => {\n if (this.isConnected && documentId === this.#documentId) {\n iframe?.style.removeProperty('height');\n }\n });\n this.#syncTheme();\n };\n\n #syncTheme = () => {\n const theme = this.#themeHost?.getAttribute('nve-theme');\n const contentWindow = this.#iframe?.contentWindow;\n if (theme === null || theme === undefined || contentWindow === null || contentWindow === undefined) {\n return;\n }\n\n const message: ThemeMessage = { theme };\n // Sandboxed srcdoc documents have opaque origins, so authenticate messages by their window reference.\n contentWindow.postMessage(JSON.stringify(message), '*');\n };\n\n #handleResizeMessage = (event: MessageEvent<unknown>) => {\n const iframe = this.#iframe;\n if (iframe === null || event.source !== iframe.contentWindow || typeof event.data !== 'string') {\n return;\n }\n\n let message: unknown;\n try {\n message = JSON.parse(event.data);\n } catch {\n return;\n }\n\n if (!isResizeMessage(message) || message.documentId !== this.#documentId) {\n return;\n }\n\n this.style.setProperty('--_width', `${message.width}px`);\n this.style.setProperty('--_height', message.height === undefined ? 'auto' : `${message.height}px`);\n };\n}\n"],"mappings":";;;;AAkBA,SAAS,EAAgB,GAAwC;CAC/D,OACE,OAAO,KAAU,cACjB,KACA,YAAY,KACZ,EAAM,WAAW,MACjB,gBAAgB,KAChB,OAAO,EAAM,cAAe,YAC5B,WAAW,KACX,OAAO,EAAM,SAAU,aACtB,EAAE,YAAY,MAAU,OAAO,EAAM,UAAW;AAErD;AAEA,IAAM,KAAgB,MAAkC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAyCZ,EAAW;4CACX,EAAW;;;;;;;GAsB1C,IAAb,cAA4B,EAAW;;EACrB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,WAAW,qBAAqB;EAC9B,OAAO,CAAC,GAAG,MAAM,oBAAoB,YAAY;CACnD;CAEA,IAAI,KAAY;EACd,OAAO,KAAK,cAAmC,sBAAsB;CACvE;CAEA,IAAI,KAAgB;EAClB,OAAO,KAAK,cAAmC,yBAAuB;CACxE;CAEA,IAAI,KAAU;EACZ,OAAO,KAAK,YAAY,cAAiC,QAAQ,KAAK;CACxE;CAEA,IAAI,KAAa;EACf,OAAO,KAAK,QAAqB,aAAa;CAChD;CAEA,KAAc;CACd;CACA;CACA;CACA;CAEA,SAAS;EACP,OAAO,CAAI,gCAED,KAAK,aAAa,GAAG,mCAErB,KAAK,GAAY;CAE7B;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,WAAW,OAAO,iBAAiB,WAAW,KAAK,EAAoB,GACnE,KAAK,eACP,KAAK,GAAsB,GAC3B,KAAK,GAA0B,GAC/B,KAAK,GAAsB,GAC3B,KAAK,GAAmB,GACxB,KAAK,GAAc;CAEvB;CAEA,yBAAyB,GAAc,GAAyB,GAAyB;EAEvF,AADA,MAAM,yBAAyB,GAAM,GAAU,CAAQ,GACnD,MAAS,gBAAgB,MAAa,KACxC,KAAK,cAAc;CAEvB;CAEA,aAAa,GAA6B;EAMxC,AALA,MAAM,aAAa,CAAK,GACxB,KAAK,GAAsB,GAC3B,KAAK,GAA0B,GAC/B,KAAK,GAAsB,GAC3B,KAAK,GAAmB,GACxB,KAAK,GAAc;CACrB;CAEA,uBAAuB;EAUrB,AATA,MAAM,qBAAqB,GAC3B,KAAK,IAAmB,WAAW,GACnC,KAAK,IAAuB,WAAW,GACvC,KAAK,IAAmB,WAAW,GACnC,KAAK,IAAgB,WAAW,GAChC,KAAK,KAAoB,KAAA,GACzB,KAAK,KAAwB,KAAA,GAC7B,KAAK,KAAoB,KAAA,GACzB,KAAK,KAAiB,KAAA,GACtB,WAAW,OAAO,oBAAoB,WAAW,KAAK,EAAoB;CAC5E;CAGA,KAAgB;EACd,IAAM,IAAS,KAAK;EACpB,IAAI,MAAW,MACb;EAMF,AAFA,KAAK,MACL,KAAK,MAAM,YAAY,aAAa,KAAK,GACrC,IAAI,SAAS,gBAAgB,gBAAgB,MAE/C,EAAO,MAAM,SAAS,iBAAiB,CAAM,CAAC,CAAC;EAEjD,IAAM,IAAQ,KAAK,IAAY,aAAa,WAAW,KAAK;EAC5D,EAAO,SAAS;;yBAEK,EAAM,yBAAyB,EAAM;;;;;;;;;UASpD,KAAK,IAAe,aAAa,GAAA;;;UAGjC,KAAK,IAAW,aAAa,GAAA;UAC7B,EAAa,KAAK,EAAW,EAAA;;;;CAIrC;CAEA,KAAwB;EACtB,KAAK,IAAmB,WAAW;EACnC,IAAM,IAAW,KAAK;EACtB,AAAI,KACF,KAAK,KAAoB,IAAI,uBAAuB,KAAK,GAAc,CAAC,GACxE,KAAK,GAAkB,QAAQ,EAAS,SAAS;GAC/C,WAAW;GACX,SAAS;GACT,eAAe;GACf,YAAY;EACd,CAAC,KAED,KAAK,KAAoB,KAAA;CAE7B;CAEA,KAA4B;EAC1B,KAAK,IAAuB,WAAW;EACvC,IAAM,IAAe,KAAK;EAC1B,AAAI,KACF,KAAK,KAAwB,IAAI,uBAAuB,KAAK,GAAc,CAAC,GAC5E,KAAK,GAAsB,QAAQ,EAAa,SAAS;GACvD,WAAW;GACX,SAAS;GACT,eAAe;GACf,YAAY;EACd,CAAC,KAED,KAAK,KAAwB,KAAA;CAEjC;CAEA,KAAwB;EACtB,AAAK,KAAK,OACR,KAAK,KAAoB,IAAI,uBAAuB;GAGlD,AAFA,KAAK,GAAsB,GAC3B,KAAK,GAA0B,GAC/B,KAAK,GAAc;EACrB,CAAC,GACD,KAAK,GAAkB,QAAQ,MAAM,EAAE,WAAW,GAAK,CAAC;CAE5D;CAEA,KAAqB;EACnB,IAAM,IAAY,KAAK;EACvB,AAAI,KAAa,CAAC,KAAK,OACrB,KAAK,KAAiB,IAAI,uBAAuB,KAAK,GAAW,CAAC,GAClE,KAAK,GAAe,QAAQ,GAAW,EAAE,iBAAiB,CAAC,WAAW,EAAE,CAAC;CAE7E;CAEA,WAAoB;EAClB,IAAM,IAAS,KAAK,IACd,IAAa,KAAK;EAMxB,AALA,4BAA4B;GAC1B,AAAI,KAAK,eAAe,MAAe,KAAK,MAC1C,GAAQ,MAAM,eAAe,QAAQ;EAEzC,CAAC,GACD,KAAK,GAAW;CAClB;CAEA,WAAmB;EACjB,IAAM,IAAQ,KAAK,IAAY,aAAa,WAAW,GACjD,IAAgB,KAAK,IAAS;EACpC,IAAI,KAAU,QAA+B,KAAkB,MAC7D;EAGF,IAAM,IAAwB,EAAE,SAAM;EAEtC,EAAc,YAAY,KAAK,UAAU,CAAO,GAAG,GAAG;CACxD;CAEA,MAAwB,MAAiC;EACvD,IAAM,IAAS,KAAK;EACpB,IAAI,MAAW,QAAQ,EAAM,WAAW,EAAO,iBAAiB,OAAO,EAAM,QAAS,UACpF;EAGF,IAAI;EACJ,IAAI;GACF,IAAU,KAAK,MAAM,EAAM,IAAI;EACjC,QAAQ;GACN;EACF;EAEI,CAAC,EAAgB,CAAO,KAAK,EAAQ,eAAe,KAAK,OAI7D,KAAK,MAAM,YAAY,YAAY,GAAG,EAAQ,MAAM,GAAG,GACvD,KAAK,MAAM,YAAY,aAAa,EAAQ,WAAW,KAAA,IAAY,SAAS,GAAG,EAAQ,OAAO,GAAG;CACnG;AACF"}
package/dist/iframe/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './iframe.js';
package/dist/iframe/index.js ADDED
@@ -0,0 +1,2 @@
1
+ import { Iframe as e } from "./iframe2.js";
2
+ export { e as Iframe };
package/dist/index.js CHANGED
@@ -2,7 +2,7 @@ import { I18nService as e } from "./internal/services/i18n.service.js";
2
2
  import { getThemeTokens as t } from "./internal/utils/dom.js";
3
3
  import { statusIcons as n } from "./internal/types/index.js";
4
4
  //#region src/index.ts
5
- var r = "2.15.5", i = "@nvidia-elements";
5
+ var r = "2.16.0", i = "@nvidia-elements";
6
6
  //#endregion
7
7
  export { e as I18nService, i as SCOPE, r as VERSION, t as getThemeTokens, n as statusIcons };
8
8
 
package/dist/input/input-group2.js CHANGED
@@ -11,7 +11,7 @@ var a = class extends n {
11
11
  static {
12
12
  this.metadata = {
13
13
  tag: "nve-input-group",
14
- version: "2.15.5"
14
+ version: "2.16.0"
15
15
  };
16
16
  }
17
17
  async connectedCallback() {
package/dist/input/input2.js CHANGED
@@ -14,7 +14,7 @@ var a = r, o = class extends n {
14
14
  static {
15
15
  this.metadata = {
16
16
  tag: "nve-input",
17
- version: "2.15.5"
17
+ version: "2.16.0"
18
18
  };
19
19
  }
20
20
  };
package/dist/internal/services/global.service.js CHANGED
@@ -19,7 +19,7 @@ var a = class {
19
19
  i18nRegistry: {},
20
20
  audit: {}
21
21
  }
22
- }, globalThis.NVE_ELEMENTS.state.versions = Array.from(/* @__PURE__ */ new Set([...globalThis.NVE_ELEMENTS.state.versions, "2.15.5"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["2.15.5"] = 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)}`);
22
+ }, globalThis.NVE_ELEMENTS.state.versions = Array.from(/* @__PURE__ */ new Set([...globalThis.NVE_ELEMENTS.state.versions, "2.16.0"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["2.16.0"] = 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)}`);
23
23
  }
24
24
  get state() {
25
25
  return globalThis.NVE_ELEMENTS.state;
package/dist/logo/logo2.js CHANGED
@@ -12,7 +12,7 @@ var c = class extends a {
12
12
  static {
13
13
  this.metadata = {
14
14
  tag: "nve-logo",
15
- version: "2.15.5"
15
+ version: "2.16.0"
16
16
  };
17
17
  }
18
18
  render() {
package/dist/menu/menu-group2.js CHANGED
@@ -21,7 +21,7 @@ var d = class extends c {
21
21
  static {
22
22
  this.metadata = {
23
23
  tag: "nve-menu-group",
24
- version: "2.15.5",
24
+ version: "2.16.0",
25
25
  children: ["nve-menu"]
26
26
  };
27
27
  }
package/dist/menu/menu-item2.js CHANGED
@@ -13,7 +13,7 @@ var c = class extends s(i) {
13
13
  static {
14
14
  this.metadata = {
15
15
  tag: "nve-menu-item",
16
- version: "2.15.5",
16
+ version: "2.16.0",
17
17
  parents: ["nve-menu"]
18
18
  };
19
19
  }
package/dist/menu/menu2.js CHANGED
@@ -17,7 +17,7 @@ var f = class extends c {
17
17
  static {
18
18
  this.metadata = {
19
19
  tag: "nve-menu",
20
- version: "2.15.5",
20
+ version: "2.16.0",
21
21
  children: ["nve-menu-item", "nve-divider"]
22
22
  };
23
23
  }
package/dist/month/month2.js CHANGED
@@ -19,7 +19,7 @@ var l = class extends r {
19
19
  static {
20
20
  this.metadata = {
21
21
  tag: "nve-month",
22
- version: "2.15.5"
22
+ version: "2.16.0"
23
23
  };
24
24
  }
25
25
  static {
package/dist/notification/notification-group2.js CHANGED
@@ -20,7 +20,7 @@ var l = class extends o {
20
20
  static {
21
21
  this.metadata = {
22
22
  tag: "nve-notification-group",
23
- version: "2.15.5",
23
+ version: "2.16.0",
24
24
  children: ["nve-notification"]
25
25
  };
26
26
  }
package/dist/notification/notification2.js CHANGED
@@ -34,7 +34,7 @@ var m = class extends d {
34
34
  static {
35
35
  this.metadata = {
36
36
  tag: "nve-notification",
37
- version: "2.15.5"
37
+ version: "2.16.0"
38
38
  };
39
39
  }
40
40
  static {
package/dist/page/page-panel/page-panel-content2.js CHANGED
@@ -9,7 +9,7 @@ var i = class extends n {
9
9
  static {
10
10
  this.metadata = {
11
11
  tag: "nve-page-panel-content",
12
- version: "2.15.5"
12
+ version: "2.16.0"
13
13
  };
14
14
  }
15
15
  render() {
package/dist/page/page-panel/page-panel-footer2.js CHANGED
@@ -14,7 +14,7 @@ var o = class extends i {
14
14
  static {
15
15
  this.metadata = {
16
16
  tag: "nve-page-panel-footer",
17
- version: "2.15.5"
17
+ version: "2.16.0"
18
18
  };
19
19
  }
20
20
  render() {
package/dist/page/page-panel/page-panel-header2.js CHANGED
@@ -14,7 +14,7 @@ var o = class extends i {
14
14
  static {
15
15
  this.metadata = {
16
16
  tag: "nve-page-panel-header",
17
- version: "2.15.5"
17
+ version: "2.16.0"
18
18
  };
19
19
  }
20
20
  render() {
package/dist/page/page-panel/page-panel2.js CHANGED
@@ -18,7 +18,7 @@ var f = class extends l {
18
18
  static {
19
19
  this.metadata = {
20
20
  tag: "nve-page-panel",
21
- version: "2.15.5",
21
+ version: "2.16.0",
22
22
  parents: ["nve-page"]
23
23
  };
24
24
  }
package/dist/page/page2.js CHANGED
@@ -16,7 +16,7 @@ var c = class extends a {
16
16
  static {
17
17
  this.metadata = {
18
18
  tag: "nve-page",
19
- version: "2.15.5"
19
+ version: "2.16.0"
20
20
  };
21
21
  }
22
22
  static {
package/dist/page-header/page-header2.js CHANGED
@@ -12,7 +12,7 @@ var s = class extends a {
12
12
  static {
13
13
  this.metadata = {
14
14
  tag: "nve-page-header",
15
- version: "2.15.5"
15
+ version: "2.16.0"
16
16
  };
17
17
  }
18
18
  render() {
package/dist/page-loader/page-loader2.js CHANGED
@@ -18,7 +18,7 @@ var u = class extends s {
18
18
  static {
19
19
  this.metadata = {
20
20
  tag: "nve-page-loader",
21
- version: "2.15.5"
21
+ version: "2.16.0"
22
22
  };
23
23
  }
24
24
  static {
package/dist/pagination/pagination2.js CHANGED
@@ -21,7 +21,7 @@ var g = class extends h(d) {
21
21
  static {
22
22
  this.metadata = {
23
23
  tag: "nve-pagination",
24
- version: "2.15.5",
24
+ version: "2.16.0",
25
25
  valueSchema: { type: "number" }
26
26
  };
27
27
  }
package/dist/panel/panel2.js CHANGED
@@ -21,7 +21,7 @@ var g = class extends f {
21
21
  static {
22
22
  this.metadata = {
23
23
  tag: "nve-panel-header",
24
- version: "2.15.5"
24
+ version: "2.16.0"
25
25
  };
26
26
  }
27
27
  render() {
@@ -37,7 +37,7 @@ var g = class extends f {
37
37
  static {
38
38
  this.metadata = {
39
39
  tag: "nve-panel-content",
40
- version: "2.15.5"
40
+ version: "2.16.0"
41
41
  };
42
42
  }
43
43
  render() {
@@ -50,7 +50,7 @@ var g = class extends f {
50
50
  static {
51
51
  this.metadata = {
52
52
  tag: "nve-panel-footer",
53
- version: "2.15.5"
53
+ version: "2.16.0"
54
54
  };
55
55
  }
56
56
  render() {
@@ -69,7 +69,7 @@ var g = class extends f {
69
69
  static {
70
70
  this.metadata = {
71
71
  tag: "nve-panel",
72
- version: "2.15.5"
72
+ version: "2.16.0"
73
73
  };
74
74
  }
75
75
  static {
package/dist/password/password2.js CHANGED
@@ -23,7 +23,7 @@ var u = class extends r {
23
23
  static {
24
24
  this.metadata = {
25
25
  tag: "nve-password",
26
- version: "2.15.5"
26
+ version: "2.16.0"
27
27
  };
28
28
  }
29
29
  static {
package/dist/preferences-input/preferences-input2.js CHANGED
@@ -43,7 +43,7 @@ var x = class extends g(d) {
43
43
  static {
44
44
  this.metadata = {
45
45
  tag: "nve-preferences-input",
46
- version: "2.15.5",
46
+ version: "2.16.0",
47
47
  valueSchema: {
48
48
  type: "object",
49
49
  properties: {
package/dist/progress-bar/progress-bar2.js CHANGED
@@ -16,7 +16,7 @@ var c = class extends i {
16
16
  static {
17
17
  this.metadata = {
18
18
  tag: "nve-progress-bar",
19
- version: "2.15.5"
19
+ version: "2.16.0"
20
20
  };
21
21
  }
22
22
  render() {
package/dist/progress-dot/define.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ProgressDot } from '@nvidia-elements/core/progress-dot';
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ 'nve-progress-dot': ProgressDot;
5
+ }
6
+ }
package/dist/progress-dot/define.js ADDED
@@ -0,0 +1,7 @@
1
+ import { define as e } from "../internal/utils/dom.js";
2
+ import { ProgressDot as t } from "./progress-dot2.js";
3
+ //#region src/progress-dot/define.ts
4
+ e(t);
5
+ //#endregion
6
+
7
+ //# sourceMappingURL=define.js.map
package/dist/progress-dot/define.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"define.js","names":[],"sources":["../../src/progress-dot/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/core/internal';\nimport { ProgressDot } from '@nvidia-elements/core/progress-dot';\n\ndefine(ProgressDot);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-progress-dot': ProgressDot;\n }\n}\n"],"mappings":";;;AAMA,EAAO,CAAW"}
package/dist/progress-dot/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './progress-dot.js';
package/dist/progress-dot/index.js ADDED
@@ -0,0 +1,2 @@
1
+ import { ProgressDot as e } from "./progress-dot2.js";
2
+ export { e as ProgressDot };
package/dist/progress-dot/progress-dot.d.ts ADDED
@@ -0,0 +1,33 @@
1
+ import { LitElement, type PropertyValues } from 'lit';
2
+ import type { Size } from '@nvidia-elements/core/internal';
3
+ /**
4
+ * @element nve-progress-dot
5
+ * @description An inline visual indicator that shows the progress of an ongoing task with an unknown completion percentage.
6
+ * @documentation https://nvidia.github.io/elements/docs/elements/progress-dot/
7
+ * @since 0.0.0
8
+ * @entrypoint \@nvidia-elements/core/progress-dot
9
+ * @cssprop --color - Dot color. Defaults to the inherited text color.
10
+ * @cssprop --width - Indicator width.
11
+ * @cssprop --height - Indicator height.
12
+ * @cssprop --animation-duration - Duration of one animation cycle. Set to 0s for static dots.
13
+ * @aria https://www.w3.org/TR/wai-aria-1.2/#progressbar
14
+ */
15
+ export declare class ProgressDot extends LitElement {
16
+ #private;
17
+ static styles: import("lit").CSSResult[];
18
+ static readonly metadata: {
19
+ tag: string;
20
+ version: string;
21
+ };
22
+ /** @private */
23
+ _internals: ElementInternals;
24
+ /** Controls the indicator size. */
25
+ size: Size;
26
+ /** Enables updating the default loading label for internationalization. */
27
+ i18n: Partial<import("@nvidia-elements/core/internal").I18nStrings & {
28
+ __set: boolean;
29
+ }>;
30
+ render(): import("lit-html").TemplateResult<1>;
31
+ connectedCallback(): void;
32
+ updated(props: PropertyValues<this>): void;
33
+ }
package/dist/progress-dot/progress-dot.examples.js ADDED
@@ -0,0 +1,6 @@
1
+ //#region src/progress-dot/progress-dot.examples.ts
2
+ var e = "";
3
+ //#endregion
4
+ export { e as default };
5
+
6
+ //# sourceMappingURL=progress-dot.examples.js.map
package/dist/progress-dot/progress-dot.examples.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"progress-dot.examples.js","names":[],"sources":["../../src/progress-dot/progress-dot.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/progress-dot/define.js';\n\nexport default {\n title: 'Elements/Progress Dot',\n component: 'nve-progress-dot'\n};\n\n/**\n * @summary Indeterminate dots communicate ongoing work when a completion percentage is unavailable.\n */\nexport const Default = {\n render: () => html`<nve-progress-dot aria-label=\"Loading results\"></nve-progress-dot>`\n};\n\n/**\n * @summary Three indicator sizes fit loading feedback into compact rows or spacious panels.\n */\nexport const Size = {\n render: () => html`\n <div nve-layout=\"row gap:sm align:vertical-center\">\n <nve-progress-dot size=\"sm\" aria-label=\"Loading results\"></nve-progress-dot>\n <nve-progress-dot size=\"md\" aria-label=\"Loading results\"></nve-progress-dot>\n <nve-progress-dot size=\"lg\" aria-label=\"Loading results\"></nve-progress-dot>\n </div>\n `\n};\n\n/**\n * @summary An adjacent label describes the pending task and supplies the indicator's accessible name.\n */\nexport const WithText = {\n render: () => html`\n <div nve-layout=\"row gap:xs\">\n <span id=\"progress-dot-label\" nve-text=\"body sm muted\">Thinking</span><nve-progress-dot size=\"sm\" aria-labelledby=\"progress-dot-label\"></nve-progress-dot>\n </div>\n `\n};\n\n/**\n * @summary Button indicators inherit text color to keep loading feedback visible across button treatments.\n */\nexport const WithButton = {\n render: () => html`\n <div nve-layout=\"row gap:sm\">\n <nve-button disabled aria-busy=\"true\">\n <nve-progress-dot size=\"sm\" aria-hidden=\"true\"></nve-progress-dot>\n Saving…\n </nve-button>\n <nve-button interaction=\"emphasis\" disabled aria-busy=\"true\">\n <nve-progress-dot size=\"sm\" aria-hidden=\"true\"></nve-progress-dot>\n Saving…\n </nve-button>\n </div>\n `\n};\n\n/**\n * @summary Custom color, dimensions, and timing adapt loading feedback to its surrounding interface.\n * @tags theme\n */\nexport const CustomStyles = {\n render: () => html`\n <nve-progress-dot\n aria-label=\"Loading results\"\n style=\"--color: var(--nve-sys-support-accent-color); --width: var(--nve-ref-size-1000); --height: var(--nve-ref-size-600); --animation-duration: 2s\"\n ></nve-progress-dot>\n `\n};\n\n/**\n * @summary Static dots keep loading feedback visible when animation is unnecessary or distracting.\n * @tags test-case\n */\nexport const Static = {\n render: () => html`\n <nve-progress-dot aria-label=\"Loading results\" style=\"--animation-duration: 0s\"></nve-progress-dot>\n `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
package/dist/progress-dot/progress-dot.examples.json ADDED
@@ -0,0 +1,64 @@
1
+ {
2
+ "element": "nve-progress-dot",
3
+ "entrypoint": "@nvidia-elements/core/progress-dot/progress-dot.examples.json",
4
+ "items": [
5
+ {
6
+ "id": "progress-dot",
7
+ "name": "Default",
8
+ "template": "<nve-progress-dot aria-label=\"Loading results\"></nve-progress-dot>\n",
9
+ "summary": "Indeterminate dots communicate ongoing work when a completion percentage is unavailable.",
10
+ "description": "",
11
+ "composition": false,
12
+ "tags": []
13
+ },
14
+ {
15
+ "id": "progress-dot-size",
16
+ "name": "Size",
17
+ "template": "<div nve-layout=\"row gap:sm align:vertical-center\">\n <nve-progress-dot size=\"sm\" aria-label=\"Loading results\"></nve-progress-dot>\n <nve-progress-dot size=\"md\" aria-label=\"Loading results\"></nve-progress-dot>\n <nve-progress-dot size=\"lg\" aria-label=\"Loading results\"></nve-progress-dot>\n</div>\n",
18
+ "summary": "Three indicator sizes fit loading feedback into compact rows or spacious panels.",
19
+ "description": "",
20
+ "composition": false,
21
+ "tags": []
22
+ },
23
+ {
24
+ "id": "progress-dot-with-text",
25
+ "name": "WithText",
26
+ "template": "<div nve-layout=\"row gap:xs\"><span id=\"progress-dot-label\" nve-text=\"body sm muted\">Thinking</span><nve-progress-dot size=\"sm\" aria-labelledby=\"progress-dot-label\"></nve-progress-dot></div>\n",
27
+ "summary": "An adjacent label describes the pending task and supplies the indicator's accessible name.",
28
+ "description": "",
29
+ "composition": false,
30
+ "tags": []
31
+ },
32
+ {
33
+ "id": "progress-dot-with-button",
34
+ "name": "WithButton",
35
+ "template": "<div nve-layout=\"row gap:sm\">\n <nve-button disabled aria-busy=\"true\">\n <nve-progress-dot size=\"sm\" aria-hidden=\"true\"></nve-progress-dot>\n Saving…\n </nve-button>\n <nve-button interaction=\"emphasis\" disabled aria-busy=\"true\">\n <nve-progress-dot size=\"sm\" aria-hidden=\"true\"></nve-progress-dot>\n Saving…\n </nve-button>\n</div>\n",
36
+ "summary": "Button indicators inherit text color to keep loading feedback visible across button treatments.",
37
+ "description": "",
38
+ "composition": false,
39
+ "tags": []
40
+ },
41
+ {
42
+ "id": "progress-dot-custom-styles",
43
+ "name": "CustomStyles",
44
+ "template": "<nve-progress-dot aria-label=\"Loading results\" style=\"--color: var(--nve-sys-support-accent-color); --width: var(--nve-ref-size-1000); --height: var(--nve-ref-size-600); --animation-duration: 2s\"></nve-progress-dot>\n",
45
+ "summary": "Custom color, dimensions, and timing adapt loading feedback to its surrounding interface.",
46
+ "description": "",
47
+ "composition": false,
48
+ "tags": [
49
+ "theme"
50
+ ]
51
+ },
52
+ {
53
+ "id": "progress-dot-static",
54
+ "name": "Static",
55
+ "template": "<nve-progress-dot aria-label=\"Loading results\" style=\"--animation-duration: 0s\"></nve-progress-dot>\n",
56
+ "summary": "Static dots keep loading feedback visible when animation is unnecessary or distracting.",
57
+ "description": "",
58
+ "composition": false,
59
+ "tags": [
60
+ "test-case"
61
+ ]
62
+ }
63
+ ]
64
+ }
package/dist/progress-dot/progress-dot.js ADDED
@@ -0,0 +1,6 @@
1
+ //#region src/progress-dot/progress-dot.css?inline
2
+ var e = ":host{--color: currentColor;--width: var(--nve-ref-size-500);--height: var(--nve-ref-size-500);--animation-duration: calc(var(--nve-ref-animation-duration-400) * 1.5);display:inline-flex;color:inherit}:host([size=\"sm\"]){--width: var(--nve-ref-size-400);--height: var(--nve-ref-size-400)}:host([size=\"lg\"]){--width: var(--nve-ref-size-600);--height: var(--nve-ref-size-600)}[internal-host]{width:var(--width);height:var(--height);display:flex;align-items:center;justify-content:center}svg{width:100%;height:100%;fill:var(--color)}circle{opacity:1;transform-box:fill-box;transform-origin:center;animation:breathe var(--animation-duration) ease-in-out infinite}circle:nth-child(2){animation-delay:calc(var(--animation-duration) * 2 / 15)}circle:nth-child(3){animation-delay:calc(var(--animation-duration) * 4 / 15)}@keyframes breathe{0%,60%,to{opacity:var(--nve-ref-opacity-300);transform:scale(.7)}30%{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){circle{animation:none}}@container style(--nve-ref-animation-duration-150: 0){circle{animation:none}}";
3
+ //#endregion
4
+ export { e as default };
5
+
6
+ //# sourceMappingURL=progress-dot.js.map
package/dist/progress-dot/progress-dot.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"progress-dot.js","names":[],"sources":["../../src/progress-dot/progress-dot.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n --color: currentColor;\n --width: var(--nve-ref-size-500);\n --height: var(--nve-ref-size-500);\n --animation-duration: calc(var(--nve-ref-animation-duration-400) * 1.5);\n display: inline-flex;\n color: inherit;\n}\n\n:host([size='sm']) {\n --width: var(--nve-ref-size-400);\n --height: var(--nve-ref-size-400);\n}\n\n:host([size='lg']) {\n --width: var(--nve-ref-size-600);\n --height: var(--nve-ref-size-600);\n}\n\n[internal-host] {\n width: var(--width);\n height: var(--height);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\nsvg {\n width: 100%;\n height: 100%;\n fill: var(--color);\n}\n\ncircle {\n opacity: 1;\n transform-box: fill-box;\n transform-origin: center;\n animation: breathe var(--animation-duration) ease-in-out infinite;\n}\n\ncircle:nth-child(2) {\n animation-delay: calc(var(--animation-duration) * 2 / 15);\n}\n\ncircle:nth-child(3) {\n animation-delay: calc(var(--animation-duration) * 4 / 15);\n}\n\n@keyframes breathe {\n 0%,\n 60%,\n 100% {\n opacity: var(--nve-ref-opacity-300);\n transform: scale(0.7);\n }\n\n 30% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n circle {\n animation: none;\n }\n}\n\n/* A zero short-duration token means the active theme suppresses motion. */\n@container style(--nve-ref-animation-duration-150: 0) {\n circle {\n animation: none;\n }\n}\n"],"mappings":""}