@nvidia-elements/core 2.15.5 → 2.17.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.
- package/CHANGELOG.md +26 -0
- package/dist/accordion/accordion2.js +4 -4
- package/dist/alert/alert-group2.js +1 -1
- package/dist/alert/alert2.js +1 -1
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar2.js +1 -1
- package/dist/badge/badge2.js +1 -1
- package/dist/breadcrumb/breadcrumb2.js +1 -1
- package/dist/bundle.d.ts +4 -0
- package/dist/bundles/index.d.ts +63 -0
- package/dist/bundles/index.js +73 -6
- package/dist/button/button2.js +1 -1
- package/dist/button-group/button-group2.js +1 -1
- package/dist/card/card2.js +4 -4
- package/dist/chat-message/chat-message2.js +1 -1
- package/dist/checkbox/checkbox-group2.js +1 -1
- package/dist/checkbox/checkbox2.js +1 -1
- package/dist/color/color2.js +1 -1
- package/dist/combobox/combobox2.js +1 -1
- package/dist/copy-button/copy-button2.js +1 -1
- package/dist/custom-elements-jsx.d.ts +49 -0
- package/dist/custom-elements-vue.d.ts +49 -0
- package/dist/custom-elements.json +370 -55
- package/dist/data.html.json +42 -0
- package/dist/date/date2.js +1 -1
- package/dist/datetime/datetime2.js +1 -1
- package/dist/dialog/dialog-footer2.js +1 -1
- package/dist/dialog/dialog-header2.js +1 -1
- package/dist/dialog/dialog2.js +1 -1
- package/dist/divider/divider2.js +1 -1
- package/dist/dot/dot2.js +1 -1
- package/dist/drag-handle/drag-handle2.js +1 -1
- package/dist/drawer/drawer-content2.js +1 -1
- package/dist/drawer/drawer-footer2.js +1 -1
- package/dist/drawer/drawer-header2.js +1 -1
- package/dist/drawer/drawer2.js +1 -1
- package/dist/dropdown/dropdown-footer2.js +1 -1
- package/dist/dropdown/dropdown-header2.js +1 -1
- package/dist/dropdown/dropdown2.js +1 -1
- package/dist/dropdown-group/dropdown-group.js +1 -1
- package/dist/dropzone/dropzone2.js +1 -1
- package/dist/file/file2.js +1 -1
- package/dist/format-bytes/format-bytes2.js +1 -1
- package/dist/format-datetime/format-datetime2.js +1 -1
- package/dist/format-number/format-number2.js +1 -1
- package/dist/format-relative-time/format-relative-time2.js +1 -1
- package/dist/format-truncate/format-truncate2.js +1 -1
- package/dist/forms/control/control2.js +1 -1
- package/dist/forms/control-group/control-group2.js +1 -1
- package/dist/forms/control-message/control-message2.js +1 -1
- package/dist/gauge/gauge2.js +1 -1
- package/dist/grid/cell/cell2.js +1 -1
- package/dist/grid/column/column2.js +1 -1
- package/dist/grid/footer/footer2.js +1 -1
- package/dist/grid/grid2.js +1 -1
- package/dist/grid/header/header2.js +1 -1
- package/dist/grid/placeholder/placeholder2.js +1 -1
- package/dist/grid/row/row2.js +1 -1
- package/dist/icon/icon2.js +2 -2
- package/dist/icon-button/icon-button.d.ts +5 -0
- package/dist/icon-button/icon-button2.js +3 -3
- package/dist/icon-button/icon-button2.js.map +1 -1
- package/dist/iframe/define.d.ts +6 -0
- package/dist/iframe/define.js +7 -0
- package/dist/iframe/define.js.map +1 -0
- package/dist/iframe/iframe.d.ts +28 -0
- package/dist/iframe/iframe.examples.js +6 -0
- package/dist/iframe/iframe.examples.js.map +1 -0
- package/dist/iframe/iframe.examples.json +59 -0
- package/dist/iframe/iframe.js +6 -0
- package/dist/iframe/iframe.js.map +1 -0
- package/dist/iframe/iframe2.js +183 -0
- package/dist/iframe/iframe2.js.map +1 -0
- package/dist/iframe/index.d.ts +1 -0
- package/dist/iframe/index.js +2 -0
- package/dist/index.js +1 -1
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input2.js +1 -1
- package/dist/internal/controllers/keynav-grid.controller.js +93 -62
- package/dist/internal/controllers/keynav-grid.controller.js.map +1 -1
- package/dist/internal/services/global.service.js +1 -1
- package/dist/internal/utils/events.d.ts +6 -1
- package/dist/internal/utils/events.js +22 -4
- package/dist/internal/utils/events.js.map +1 -1
- package/dist/logo/logo2.js +1 -1
- package/dist/menu/menu-group2.js +1 -1
- package/dist/menu/menu-item2.js +1 -1
- package/dist/menu/menu2.js +1 -1
- package/dist/month/month2.js +1 -1
- package/dist/notification/notification-group2.js +1 -1
- package/dist/notification/notification2.js +1 -1
- package/dist/page/page-panel/page-panel-content2.js +1 -1
- package/dist/page/page-panel/page-panel-footer2.js +1 -1
- package/dist/page/page-panel/page-panel-header2.js +1 -1
- package/dist/page/page-panel/page-panel2.js +1 -1
- package/dist/page/page2.js +1 -1
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/page-loader2.js +1 -1
- package/dist/pagination/pagination2.js +1 -1
- package/dist/panel/panel2.js +4 -4
- package/dist/password/password2.js +1 -1
- package/dist/preferences-input/preferences-input2.js +1 -1
- package/dist/progress-bar/progress-bar2.js +1 -1
- package/dist/progress-dot/define.d.ts +6 -0
- package/dist/progress-dot/define.js +7 -0
- package/dist/progress-dot/define.js.map +1 -0
- package/dist/progress-dot/index.d.ts +1 -0
- package/dist/progress-dot/index.js +2 -0
- package/dist/progress-dot/progress-dot.d.ts +33 -0
- package/dist/progress-dot/progress-dot.examples.js +6 -0
- package/dist/progress-dot/progress-dot.examples.js.map +1 -0
- package/dist/progress-dot/progress-dot.examples.json +64 -0
- package/dist/progress-dot/progress-dot.js +6 -0
- package/dist/progress-dot/progress-dot.js.map +1 -0
- package/dist/progress-dot/progress-dot2.js +40 -0
- package/dist/progress-dot/progress-dot2.js.map +1 -0
- package/dist/progress-ring/progress-ring2.js +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
- package/dist/pulse/pulse2.js +1 -1
- package/dist/radio/radio-group2.js +1 -1
- package/dist/radio/radio2.js +1 -1
- package/dist/range/range2.js +1 -1
- package/dist/resize-handle/resize-handle2.js +1 -1
- package/dist/search/search2.js +1 -1
- package/dist/select/select2.js +1 -1
- package/dist/skeleton/skeleton2.js +1 -1
- package/dist/sort-button/sort-button2.js +1 -1
- package/dist/sparkline/sparkline2.js +1 -1
- package/dist/star-rating/star-rating2.js +1 -1
- package/dist/steps/steps2.js +2 -2
- package/dist/switch/switch-group2.js +1 -1
- package/dist/switch/switch2.js +1 -1
- package/dist/tabs/tabs-group2.js +1 -1
- package/dist/tabs/tabs2.js +2 -2
- package/dist/tag/tag2.js +1 -1
- package/dist/textarea/textarea2.js +1 -1
- package/dist/time/time2.js +1 -1
- package/dist/toast/toast2.js +1 -1
- package/dist/toggletip/toggletip-footer2.js +1 -1
- package/dist/toggletip/toggletip-header.js +1 -1
- package/dist/toggletip/toggletip-header.js.map +1 -1
- package/dist/toggletip/toggletip-header2.js +1 -1
- package/dist/toggletip/toggletip.examples.js.map +1 -1
- package/dist/toggletip/toggletip.examples.json +1 -1
- package/dist/toggletip/toggletip2.js +1 -1
- package/dist/toolbar/toolbar2.js +1 -1
- package/dist/tooltip/tooltip2.js +1 -1
- package/dist/tree/tree-node2.js +1 -1
- package/dist/tree/tree2.js +1 -1
- package/dist/week/week2.js +1 -1
- package/package.json +26 -1
|
@@ -11,11 +11,29 @@ function t(e, t, n = {}) {
|
|
|
11
11
|
...n
|
|
12
12
|
}), r;
|
|
13
13
|
}
|
|
14
|
-
function n(e, t) {
|
|
15
|
-
let
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
function n(e, t, { trailing: n = !1 } = {}) {
|
|
15
|
+
let r, i, a = (...o) => {
|
|
16
|
+
if (r !== void 0) {
|
|
17
|
+
n && (i = o);
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
e(...o), r = setTimeout(() => {
|
|
21
|
+
if (r = void 0, i) {
|
|
22
|
+
let e = i;
|
|
23
|
+
i = void 0, a(...e);
|
|
24
|
+
}
|
|
25
|
+
}, t);
|
|
18
26
|
};
|
|
27
|
+
return Object.assign(a, {
|
|
28
|
+
flush() {
|
|
29
|
+
if (!i) return;
|
|
30
|
+
let t = i;
|
|
31
|
+
i = void 0, e(...t);
|
|
32
|
+
},
|
|
33
|
+
cancel() {
|
|
34
|
+
clearTimeout(r), r = void 0, i = void 0;
|
|
35
|
+
}
|
|
36
|
+
});
|
|
19
37
|
}
|
|
20
38
|
function r(e, t = 0) {
|
|
21
39
|
let n;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"events.js","names":[],"sources":["../../../src/internal/utils/events.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function stopEvent(event: Event) {\n event?.preventDefault();\n event?.stopPropagation();\n}\n\nexport function onChildListMutation(\n element: HTMLElement,\n fn: (mutation?: MutationRecord) => void,\n options: MutationObserverInit = {}\n) {\n const observer = new MutationObserver(mutations => {\n for (const mutation of mutations) {\n if (mutation.type === 'childList') {\n fn(mutation);\n }\n\n if (options.attributes && mutation.type === 'attributes') {\n fn(mutation);\n }\n }\n });\n observer.observe(element, { childList: true, ...options });\n return observer;\n}\n\nexport function throttle(func: (...args:
|
|
1
|
+
{"version":3,"file":"events.js","names":[],"sources":["../../../src/internal/utils/events.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function stopEvent(event: Event) {\n event?.preventDefault();\n event?.stopPropagation();\n}\n\nexport function onChildListMutation(\n element: HTMLElement,\n fn: (mutation?: MutationRecord) => void,\n options: MutationObserverInit = {}\n) {\n const observer = new MutationObserver(mutations => {\n for (const mutation of mutations) {\n if (mutation.type === 'childList') {\n fn(mutation);\n }\n\n if (options.attributes && mutation.type === 'attributes') {\n fn(mutation);\n }\n }\n });\n observer.observe(element, { childList: true, ...options });\n return observer;\n}\n\nexport function throttle<Args extends unknown[]>(\n func: (...args: Args) => void,\n limit: number,\n { trailing = false }: { trailing?: boolean } = {}\n) {\n let timer: ReturnType<typeof setTimeout> | undefined;\n let pending: Args | undefined;\n\n const throttled = (...args: Args): void => {\n if (timer !== undefined) {\n if (trailing) pending = args;\n return;\n }\n\n func(...args);\n timer = setTimeout(() => {\n timer = undefined;\n if (pending) {\n const nextArgs = pending;\n pending = undefined;\n throttled(...nextArgs);\n }\n }, limit);\n };\n\n return Object.assign(throttled, {\n flush() {\n if (!pending) return;\n const args = pending;\n pending = undefined;\n func(...args);\n },\n cancel() {\n clearTimeout(timer);\n timer = undefined;\n pending = undefined;\n }\n });\n}\n\nexport function debounce(func: (...args: unknown[]) => void, timeout = 0) {\n let timer: ReturnType<typeof setTimeout> | undefined;\n return (...args: unknown[]) => {\n clearTimeout(timer);\n /* istanbul ignore next */\n timer = setTimeout(() => {\n func(...args);\n }, timeout);\n };\n}\n"],"mappings":";AAGA,SAAgB,EAAU,GAAc;CAEtC,AADA,GAAO,eAAe,GACtB,GAAO,gBAAgB;AACzB;AAEA,SAAgB,EACd,GACA,GACA,IAAgC,CAAC,GACjC;CACA,IAAM,IAAW,IAAI,kBAAiB,MAAa;EACjD,KAAK,IAAM,KAAY,GAKrB,AAJI,EAAS,SAAS,eACpB,EAAG,CAAQ,GAGT,EAAQ,cAAc,EAAS,SAAS,gBAC1C,EAAG,CAAQ;CAGjB,CAAC;CAED,OADA,EAAS,QAAQ,GAAS;EAAE,WAAW;EAAM,GAAG;CAAQ,CAAC,GAClD;AACT;AAEA,SAAgB,EACd,GACA,GACA,EAAE,cAAW,OAAkC,CAAC,GAChD;CACA,IAAI,GACA,GAEE,KAAa,GAAG,MAAqB;EACzC,IAAI,MAAU,KAAA,GAAW;GACvB,AAAI,MAAU,IAAU;GACxB;EACF;EAGA,AADA,EAAK,GAAG,CAAI,GACZ,IAAQ,iBAAiB;GAEvB,IADA,IAAQ,KAAA,GACJ,GAAS;IACX,IAAM,IAAW;IAEjB,AADA,IAAU,KAAA,GACV,EAAU,GAAG,CAAQ;GACvB;EACF,GAAG,CAAK;CACV;CAEA,OAAO,OAAO,OAAO,GAAW;EAC9B,QAAQ;GACN,IAAI,CAAC,GAAS;GACd,IAAM,IAAO;GAEb,AADA,IAAU,KAAA,GACV,EAAK,GAAG,CAAI;EACd;EACA,SAAS;GAGP,AAFA,aAAa,CAAK,GAClB,IAAQ,KAAA,GACR,IAAU,KAAA;EACZ;CACF,CAAC;AACH;AAEA,SAAgB,EAAS,GAAoC,IAAU,GAAG;CACxE,IAAI;CACJ,QAAQ,GAAG,MAAoB;;EAG7B,AAFA,aAAa,CAAK,GAElB,IAAQ,iBAAiB;GACvB,EAAK,GAAG,CAAI;EACd,GAAG,CAAO;CACZ;AACF"}
|
package/dist/logo/logo2.js
CHANGED
package/dist/menu/menu-group2.js
CHANGED
package/dist/menu/menu-item2.js
CHANGED
package/dist/menu/menu2.js
CHANGED
package/dist/month/month2.js
CHANGED
package/dist/page/page2.js
CHANGED
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.
|
|
24
|
+
version: "2.17.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.
|
|
40
|
+
version: "2.17.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.
|
|
53
|
+
version: "2.17.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.
|
|
72
|
+
version: "2.17.0"
|
|
73
73
|
};
|
|
74
74
|
}
|
|
75
75
|
static {
|
|
@@ -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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './progress-dot.js';
|
|
@@ -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
|
+
}
|
|
@@ -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"}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
|
@@ -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":""}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { I18nController as e } from "../internal/controllers/i18n.controller.js";
|
|
2
|
+
import { attachInternals as t } from "../internal/utils/a11y.js";
|
|
3
|
+
import { useStyles as n } from "../internal/styles/index.js";
|
|
4
|
+
import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
|
|
5
|
+
import i from "./progress-dot.js";
|
|
6
|
+
import { LitElement as a, html as o } from "lit";
|
|
7
|
+
import { property as s } from "lit/decorators/property.js";
|
|
8
|
+
//#region src/progress-dot/progress-dot.ts
|
|
9
|
+
var c = class extends a {
|
|
10
|
+
constructor(...t) {
|
|
11
|
+
super(...t), this.size = "md", this.#e = new e(this), this.i18n = this.#e.i18n;
|
|
12
|
+
}
|
|
13
|
+
static {
|
|
14
|
+
this.styles = n([i]);
|
|
15
|
+
}
|
|
16
|
+
static {
|
|
17
|
+
this.metadata = {
|
|
18
|
+
tag: "nve-progress-dot",
|
|
19
|
+
version: "2.17.0"
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
#e;
|
|
23
|
+
render() {
|
|
24
|
+
return o`<div internal-host><svg viewBox="0 0 36 36" aria-hidden="true"><circle cx="5" cy="18" r="3"></circle><circle cx="18" cy="18" r="3"></circle><circle cx="31" cy="18" r="3"></circle></svg></div>`;
|
|
25
|
+
}
|
|
26
|
+
connectedCallback() {
|
|
27
|
+
super.connectedCallback(), t(this), this._internals.role = "progressbar";
|
|
28
|
+
}
|
|
29
|
+
updated(e) {
|
|
30
|
+
super.updated(e), this._internals.ariaLabel = this.i18n.loading ?? null;
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
r([s({
|
|
34
|
+
type: String,
|
|
35
|
+
reflect: !0
|
|
36
|
+
})], c.prototype, "size", void 0), r([s({ type: Object })], c.prototype, "i18n", void 0);
|
|
37
|
+
//#endregion
|
|
38
|
+
export { c as ProgressDot };
|
|
39
|
+
|
|
40
|
+
//# sourceMappingURL=progress-dot2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"progress-dot2.js","names":[],"sources":["../../src/progress-dot/progress-dot.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Size } from '@nvidia-elements/core/internal';\nimport { attachInternals, I18nController, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './progress-dot.css?inline';\n\n/**\n * @element nve-progress-dot\n * @description An inline visual indicator that shows the progress of an ongoing task with an unknown completion percentage.\n * @documentation https://nvidia.github.io/elements/docs/elements/progress-dot/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/progress-dot\n * @cssprop --color - Dot color. Defaults to the inherited text color.\n * @cssprop --width - Indicator width.\n * @cssprop --height - Indicator height.\n * @cssprop --animation-duration - Duration of one animation cycle. Set to 0s for static dots.\n * @aria https://www.w3.org/TR/wai-aria-1.2/#progressbar\n */\nexport class ProgressDot extends LitElement {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-progress-dot',\n version: '0.0.0'\n };\n\n /** @private */\n declare _internals: ElementInternals;\n\n /** Controls the indicator size. */\n @property({ type: String, reflect: true }) size: Size = 'md';\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /** Enables updating the default loading label for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n render() {\n return html`\n <div internal-host>\n <svg viewBox=\"0 0 36 36\" aria-hidden=\"true\">\n <circle cx=\"5\" cy=\"18\" r=\"3\"></circle>\n <circle cx=\"18\" cy=\"18\" r=\"3\"></circle>\n <circle cx=\"31\" cy=\"18\" r=\"3\"></circle>\n </svg>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'progressbar';\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n this._internals.ariaLabel = this.i18n.loading ?? null;\n }\n}\n"],"mappings":";;;;;;;;AAqBA,IAAa,IAAb,cAAiC,EAAW;;EAiBP,aALqB,KAAA,OAAA,MAEhB,KAAA,KAAA,IAAI,EAAqB,IAAI,GAGlC,KAAA,OAAA,KAAK,GAAgB;;;EAhBxC,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAQA;CAKA,SAAS;EACP,OAAO,CAAI;CASb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,YAAY,KAAK,KAAK,WAAW;CACnD;AACF;AA7BG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA"}
|
package/dist/pulse/pulse2.js
CHANGED
package/dist/radio/radio2.js
CHANGED
package/dist/range/range2.js
CHANGED
package/dist/search/search2.js
CHANGED
package/dist/select/select2.js
CHANGED
package/dist/steps/steps2.js
CHANGED
|
@@ -23,7 +23,7 @@ var v = class extends h(d) {
|
|
|
23
23
|
static {
|
|
24
24
|
this.metadata = {
|
|
25
25
|
tag: "nve-steps-item",
|
|
26
|
-
version: "2.
|
|
26
|
+
version: "2.17.0",
|
|
27
27
|
parents: ["nve-steps"]
|
|
28
28
|
};
|
|
29
29
|
}
|
|
@@ -69,7 +69,7 @@ var y = class extends d {
|
|
|
69
69
|
static {
|
|
70
70
|
this.metadata = {
|
|
71
71
|
tag: "nve-steps",
|
|
72
|
-
version: "2.
|
|
72
|
+
version: "2.17.0",
|
|
73
73
|
children: ["nve-steps-item"]
|
|
74
74
|
};
|
|
75
75
|
}
|