@nvidia-elements/core 2.1.0 → 2.1.2
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 +21 -0
- package/dist/accordion/accordion.d.ts +4 -0
- package/dist/accordion/accordion2.js +4 -4
- package/dist/accordion/accordion2.js.map +1 -1
- package/dist/alert/alert-group.d.ts +1 -0
- package/dist/alert/alert-group2.js +1 -1
- package/dist/alert/alert-group2.js.map +1 -1
- package/dist/alert/alert.d.ts +1 -0
- package/dist/alert/alert2.js +1 -1
- package/dist/alert/alert2.js.map +1 -1
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar.d.ts +1 -0
- package/dist/avatar/avatar2.js +1 -1
- package/dist/avatar/avatar2.js.map +1 -1
- package/dist/badge/badge.d.ts +1 -0
- package/dist/badge/badge2.js +1 -1
- package/dist/badge/badge2.js.map +1 -1
- package/dist/breadcrumb/breadcrumb.d.ts +1 -0
- package/dist/breadcrumb/breadcrumb2.js +1 -1
- package/dist/breadcrumb/breadcrumb2.js.map +1 -1
- package/dist/bundles/index.d.ts +109 -6
- package/dist/bundles/index.js +1 -1
- package/dist/button/button.d.ts +1 -0
- package/dist/button/button2.js +1 -1
- package/dist/button/button2.js.map +1 -1
- package/dist/button-group/button-group.d.ts +1 -0
- package/dist/button-group/button-group2.js +1 -1
- package/dist/button-group/button-group2.js.map +1 -1
- package/dist/card/card.d.ts +4 -0
- package/dist/card/card2.js +4 -4
- package/dist/card/card2.js.map +1 -1
- package/dist/chat-message/chat-message.d.ts +1 -0
- package/dist/chat-message/chat-message2.js +1 -1
- package/dist/chat-message/chat-message2.js.map +1 -1
- package/dist/checkbox/checkbox-group2.js +1 -1
- package/dist/checkbox/checkbox.d.ts +1 -0
- package/dist/checkbox/checkbox2.js +1 -1
- package/dist/checkbox/checkbox2.js.map +1 -1
- package/dist/color/color.d.ts +1 -0
- package/dist/color/color2.js +1 -1
- package/dist/color/color2.js.map +1 -1
- package/dist/combobox/combobox.d.ts +1 -0
- package/dist/combobox/combobox2.js +1 -1
- package/dist/combobox/combobox2.js.map +1 -1
- package/dist/copy-button/copy-button.d.ts +1 -0
- package/dist/copy-button/copy-button2.js +1 -1
- package/dist/copy-button/copy-button2.js.map +1 -1
- package/dist/custom-elements-jsx.d.ts +6 -6
- package/dist/custom-elements-vue.d.ts +6 -6
- package/dist/custom-elements.json +111 -6
- package/dist/data.html.json +326 -354
- package/dist/date/date.d.ts +1 -0
- package/dist/date/date2.js +1 -1
- package/dist/date/date2.js.map +1 -1
- package/dist/datetime/datetime.d.ts +1 -0
- package/dist/datetime/datetime2.js +1 -1
- package/dist/datetime/datetime2.js.map +1 -1
- package/dist/dialog/dialog-footer.d.ts +1 -0
- package/dist/dialog/dialog-footer2.js +1 -1
- package/dist/dialog/dialog-footer2.js.map +1 -1
- package/dist/dialog/dialog-header.d.ts +1 -0
- package/dist/dialog/dialog-header2.js +1 -1
- package/dist/dialog/dialog-header2.js.map +1 -1
- package/dist/dialog/dialog.d.ts +1 -0
- package/dist/dialog/dialog2.js +1 -1
- package/dist/dialog/dialog2.js.map +1 -1
- package/dist/divider/divider.d.ts +1 -0
- package/dist/divider/divider2.js +1 -1
- package/dist/divider/divider2.js.map +1 -1
- package/dist/dot/dot.d.ts +1 -0
- package/dist/dot/dot2.js +1 -1
- package/dist/dot/dot2.js.map +1 -1
- package/dist/drawer/drawer-content2.js +1 -1
- package/dist/drawer/drawer-footer.d.ts +1 -0
- package/dist/drawer/drawer-footer2.js +1 -1
- package/dist/drawer/drawer-footer2.js.map +1 -1
- package/dist/drawer/drawer-header.d.ts +1 -0
- package/dist/drawer/drawer-header2.js +1 -1
- package/dist/drawer/drawer-header2.js.map +1 -1
- package/dist/drawer/drawer.d.ts +1 -0
- package/dist/drawer/drawer2.js +1 -1
- package/dist/drawer/drawer2.js.map +1 -1
- package/dist/dropdown/dropdown-footer.d.ts +1 -0
- package/dist/dropdown/dropdown-footer2.js +1 -1
- package/dist/dropdown/dropdown-footer2.js.map +1 -1
- package/dist/dropdown/dropdown-header.d.ts +1 -0
- package/dist/dropdown/dropdown-header2.js +1 -1
- package/dist/dropdown/dropdown-header2.js.map +1 -1
- package/dist/dropdown/dropdown.d.ts +1 -0
- package/dist/dropdown/dropdown2.js +1 -1
- package/dist/dropdown/dropdown2.js.map +1 -1
- package/dist/dropdown-group/dropdown-group.d.ts +1 -0
- package/dist/dropdown-group/dropdown-group.js +1 -1
- package/dist/dropdown-group/dropdown-group.js.map +1 -1
- package/dist/dropzone/dropzone.d.ts +1 -0
- package/dist/dropzone/dropzone2.js +1 -1
- package/dist/dropzone/dropzone2.js.map +1 -1
- package/dist/file/file.d.ts +1 -0
- package/dist/file/file2.js +1 -1
- package/dist/file/file2.js.map +1 -1
- package/dist/format-datetime/format-datetime.d.ts +1 -0
- package/dist/format-datetime/format-datetime2.js +1 -1
- package/dist/format-datetime/format-datetime2.js.map +1 -1
- package/dist/format-number/format-number.d.ts +1 -0
- package/dist/format-number/format-number2.js +1 -1
- package/dist/format-number/format-number2.js.map +1 -1
- package/dist/format-relative-time/format-relative-time.d.ts +1 -0
- package/dist/format-relative-time/format-relative-time2.js +1 -1
- package/dist/format-relative-time/format-relative-time2.js.map +1 -1
- package/dist/forms/control/control.d.ts +1 -0
- package/dist/forms/control/control2.js +1 -1
- package/dist/forms/control/control2.js.map +1 -1
- package/dist/forms/control-group/control-group.d.ts +1 -0
- package/dist/forms/control-group/control-group2.js +1 -1
- package/dist/forms/control-group/control-group2.js.map +1 -1
- package/dist/forms/control-message/control-message.d.ts +1 -0
- package/dist/forms/control-message/control-message2.js +1 -1
- package/dist/forms/control-message/control-message2.js.map +1 -1
- package/dist/gauge/gauge.d.ts +1 -0
- package/dist/gauge/gauge2.js +1 -1
- package/dist/gauge/gauge2.js.map +1 -1
- package/dist/grid/cell/cell.d.ts +1 -0
- package/dist/grid/cell/cell2.js +1 -1
- package/dist/grid/cell/cell2.js.map +1 -1
- package/dist/grid/column/column.d.ts +1 -0
- package/dist/grid/column/column2.js +1 -1
- package/dist/grid/column/column2.js.map +1 -1
- package/dist/grid/footer/footer2.js +1 -1
- package/dist/grid/grid.d.ts +1 -0
- package/dist/grid/grid2.js +1 -1
- package/dist/grid/grid2.js.map +1 -1
- package/dist/grid/header/header.d.ts +1 -0
- package/dist/grid/header/header2.js +1 -1
- package/dist/grid/header/header2.js.map +1 -1
- package/dist/grid/placeholder/placeholder2.js +1 -1
- package/dist/grid/row/row.d.ts +1 -0
- package/dist/grid/row/row2.js +1 -1
- package/dist/grid/row/row2.js.map +1 -1
- package/dist/icon/icon.d.ts +1 -0
- package/dist/icon/icon2.js +2 -2
- package/dist/icon/icon2.js.map +1 -1
- package/dist/icon-button/icon-button.d.ts +1 -0
- package/dist/icon-button/icon-button2.js +1 -1
- package/dist/icon-button/icon-button2.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/input/input-group.d.ts +1 -0
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input-group2.js.map +1 -1
- package/dist/input/input.d.ts +1 -0
- package/dist/input/input2.js +1 -1
- package/dist/input/input2.js.map +1 -1
- package/dist/internal/services/global.service.js +1 -1
- package/dist/logo/logo.d.ts +1 -0
- package/dist/logo/logo2.js +1 -1
- package/dist/logo/logo2.js.map +1 -1
- package/dist/menu/menu-item.d.ts +1 -0
- package/dist/menu/menu-item2.js +1 -1
- package/dist/menu/menu-item2.js.map +1 -1
- package/dist/menu/menu.d.ts +1 -0
- package/dist/menu/menu2.js +1 -1
- package/dist/menu/menu2.js.map +1 -1
- package/dist/month/month.d.ts +1 -0
- package/dist/month/month2.js +1 -1
- package/dist/month/month2.js.map +1 -1
- package/dist/notification/notification-group.d.ts +1 -0
- package/dist/notification/notification-group2.js +1 -1
- package/dist/notification/notification-group2.js.map +1 -1
- package/dist/notification/notification.d.ts +1 -0
- package/dist/notification/notification2.js +1 -1
- package/dist/notification/notification2.js.map +1 -1
- package/dist/page/page-panel/page-panel-content.d.ts +1 -0
- package/dist/page/page-panel/page-panel-content2.js +1 -1
- package/dist/page/page-panel/page-panel-content2.js.map +1 -1
- package/dist/page/page-panel/page-panel-footer.d.ts +1 -0
- package/dist/page/page-panel/page-panel-footer2.js +1 -1
- package/dist/page/page-panel/page-panel-footer2.js.map +1 -1
- package/dist/page/page-panel/page-panel-header.d.ts +1 -0
- package/dist/page/page-panel/page-panel-header2.js +1 -1
- package/dist/page/page-panel/page-panel-header2.js.map +1 -1
- package/dist/page/page-panel/page-panel.d.ts +6 -5
- package/dist/page/page-panel/page-panel2.js +1 -1
- package/dist/page/page-panel/page-panel2.js.map +1 -1
- package/dist/page/page.d.ts +1 -0
- package/dist/page/page2.js +1 -1
- package/dist/page/page2.js.map +1 -1
- package/dist/page-header/page-header.d.ts +1 -0
- package/dist/page-header/page-header.global.js +6 -0
- package/dist/page-header/page-header.global.js.map +1 -0
- package/dist/page-header/page-header2.js +12 -10
- package/dist/page-header/page-header2.js.map +1 -1
- package/dist/page-loader/page-loader.d.ts +1 -0
- package/dist/page-loader/page-loader2.js +1 -1
- package/dist/page-loader/page-loader2.js.map +1 -1
- package/dist/pagination/pagination.d.ts +1 -0
- package/dist/pagination/pagination2.js +1 -1
- package/dist/pagination/pagination2.js.map +1 -1
- package/dist/panel/panel.d.ts +4 -0
- package/dist/panel/panel2.js +4 -4
- package/dist/panel/panel2.js.map +1 -1
- package/dist/password/password.d.ts +1 -0
- package/dist/password/password2.js +1 -1
- package/dist/password/password2.js.map +1 -1
- package/dist/preferences-input/preferences-input.d.ts +1 -0
- package/dist/preferences-input/preferences-input2.js +1 -1
- package/dist/preferences-input/preferences-input2.js.map +1 -1
- package/dist/progress-bar/progress-bar.d.ts +1 -0
- package/dist/progress-bar/progress-bar2.js +1 -1
- package/dist/progress-bar/progress-bar2.js.map +1 -1
- package/dist/progress-ring/progress-ring.d.ts +1 -0
- package/dist/progress-ring/progress-ring2.js +1 -1
- package/dist/progress-ring/progress-ring2.js.map +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip.d.ts +1 -0
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip2.js.map +1 -1
- package/dist/pulse/pulse.d.ts +1 -0
- package/dist/pulse/pulse2.js +1 -1
- package/dist/pulse/pulse2.js.map +1 -1
- package/dist/radio/radio-group2.js +1 -1
- package/dist/radio/radio.d.ts +1 -0
- package/dist/radio/radio2.js +1 -1
- package/dist/radio/radio2.js.map +1 -1
- package/dist/range/range.d.ts +1 -0
- package/dist/range/range2.js +1 -1
- package/dist/range/range2.js.map +1 -1
- package/dist/resize-handle/resize-handle.d.ts +1 -0
- package/dist/resize-handle/resize-handle2.js +1 -1
- package/dist/resize-handle/resize-handle2.js.map +1 -1
- package/dist/search/search.d.ts +1 -0
- package/dist/search/search2.js +1 -1
- package/dist/search/search2.js.map +1 -1
- package/dist/select/select.d.ts +1 -0
- package/dist/select/select2.js +1 -1
- package/dist/select/select2.js.map +1 -1
- package/dist/skeleton/skeleton.d.ts +1 -0
- package/dist/skeleton/skeleton2.js +1 -1
- package/dist/skeleton/skeleton2.js.map +1 -1
- package/dist/sort-button/sort-button.d.ts +2 -1
- package/dist/sort-button/sort-button2.js +1 -1
- package/dist/sort-button/sort-button2.js.map +1 -1
- package/dist/sparkline/sparkline.d.ts +1 -0
- package/dist/sparkline/sparkline2.js +1 -1
- package/dist/sparkline/sparkline2.js.map +1 -1
- package/dist/star-rating/star-rating.d.ts +1 -0
- package/dist/star-rating/star-rating2.js +1 -1
- package/dist/star-rating/star-rating2.js.map +1 -1
- package/dist/steps/steps.d.ts +2 -0
- package/dist/steps/steps2.js +2 -2
- package/dist/steps/steps2.js.map +1 -1
- package/dist/switch/switch-group2.js +1 -1
- package/dist/switch/switch.d.ts +1 -0
- package/dist/switch/switch2.js +1 -1
- package/dist/switch/switch2.js.map +1 -1
- package/dist/tabs/tabs-group.d.ts +1 -0
- package/dist/tabs/tabs-group2.js +1 -1
- package/dist/tabs/tabs-group2.js.map +1 -1
- package/dist/tabs/tabs.d.ts +2 -0
- package/dist/tabs/tabs2.js +2 -2
- package/dist/tabs/tabs2.js.map +1 -1
- package/dist/tag/tag.d.ts +1 -0
- package/dist/tag/tag2.js +1 -1
- package/dist/tag/tag2.js.map +1 -1
- package/dist/textarea/textarea.d.ts +1 -0
- package/dist/textarea/textarea2.js +1 -1
- package/dist/textarea/textarea2.js.map +1 -1
- package/dist/time/time.d.ts +1 -0
- package/dist/time/time2.js +1 -1
- package/dist/time/time2.js.map +1 -1
- package/dist/toast/toast.d.ts +1 -0
- package/dist/toast/toast2.js +1 -1
- package/dist/toast/toast2.js.map +1 -1
- package/dist/toggletip/toggletip-footer.d.ts +1 -0
- package/dist/toggletip/toggletip-footer2.js +1 -1
- package/dist/toggletip/toggletip-footer2.js.map +1 -1
- package/dist/toggletip/toggletip-header.d.ts +1 -0
- package/dist/toggletip/toggletip-header2.js +1 -1
- package/dist/toggletip/toggletip-header2.js.map +1 -1
- package/dist/toggletip/toggletip.d.ts +1 -0
- package/dist/toggletip/toggletip2.js +1 -1
- package/dist/toggletip/toggletip2.js.map +1 -1
- package/dist/toolbar/toolbar.d.ts +1 -0
- package/dist/toolbar/toolbar2.js +1 -1
- package/dist/toolbar/toolbar2.js.map +1 -1
- package/dist/tooltip/tooltip.d.ts +1 -0
- package/dist/tooltip/tooltip2.js +1 -1
- package/dist/tooltip/tooltip2.js.map +1 -1
- package/dist/tree/tree-node.d.ts +1 -0
- package/dist/tree/tree-node2.js +1 -1
- package/dist/tree/tree-node2.js.map +1 -1
- package/dist/tree/tree.d.ts +1 -0
- package/dist/tree/tree2.js +1 -1
- package/dist/tree/tree2.js.map +1 -1
- package/dist/week/week.d.ts +1 -0
- package/dist/week/week2.js +1 -1
- package/dist/week/week2.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,24 @@
|
|
|
1
|
+
## <small>2.1.2 (2026-07-20)</small>
|
|
2
|
+
|
|
3
|
+
* chore(ci): indexnow doc updates ([669552f](https://github.com/NVIDIA/elements/commit/669552f))
|
|
4
|
+
* chore(ci): update metrics ([96ebb4b](https://github.com/NVIDIA/elements/commit/96ebb4b))
|
|
5
|
+
* chore(release): @nvidia-elements/code-v2.0.2 [skip ci] ([f69e036](https://github.com/NVIDIA/elements/commit/f69e036))
|
|
6
|
+
* chore(release): @nvidia-elements/markdown-v2.0.2 [skip ci] ([953ef48](https://github.com/NVIDIA/elements/commit/953ef48))
|
|
7
|
+
* chore(release): @nvidia-elements/monaco-v2.0.2 [skip ci] ([12820b1](https://github.com/NVIDIA/elements/commit/12820b1))
|
|
8
|
+
* fix(cli): mute interactions on non tty sessions ([ba3230a](https://github.com/NVIDIA/elements/commit/ba3230a))
|
|
9
|
+
* fix(core): api documentation ([a02b9e2](https://github.com/NVIDIA/elements/commit/a02b9e2))
|
|
10
|
+
* fix(core): page header text wrap issue ([03c481f](https://github.com/NVIDIA/elements/commit/03c481f))
|
|
11
|
+
* feat(lint): add prefer-aria-label-in-compact-containers rule ([130279f](https://github.com/NVIDIA/elements/commit/130279f))
|
|
12
|
+
|
|
13
|
+
## <small>2.1.1 (2026-07-20)</small>
|
|
14
|
+
|
|
15
|
+
* chore(docs): add custom data reference tests ([af48603](https://github.com/NVIDIA/elements/commit/af48603))
|
|
16
|
+
* chore(internals): generate custom data references ([3f2bd36](https://github.com/NVIDIA/elements/commit/3f2bd36))
|
|
17
|
+
* fix(code): include custom data documentation references ([f4efebb](https://github.com/NVIDIA/elements/commit/f4efebb))
|
|
18
|
+
* fix(core): include custom data documentation references ([bf9168c](https://github.com/NVIDIA/elements/commit/bf9168c))
|
|
19
|
+
* fix(markdown): include custom data documentation references ([b887400](https://github.com/NVIDIA/elements/commit/b887400))
|
|
20
|
+
* fix(monaco): include custom data documentation references ([75f42f5](https://github.com/NVIDIA/elements/commit/75f42f5))
|
|
21
|
+
|
|
1
22
|
## 2.1.0 (2026-07-18)
|
|
2
23
|
|
|
3
24
|
* chore(ci): improve test coverage ([4ef2eb3](https://github.com/NVIDIA/elements/commit/4ef2eb3))
|
|
@@ -5,6 +5,7 @@ import { IconButton } from '@nvidia-elements/core/icon-button';
|
|
|
5
5
|
/**
|
|
6
6
|
* @element nve-accordion-header
|
|
7
7
|
* @description Provides the clickable heading region of an accordion that toggles the visibility of associated content.
|
|
8
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/accordion/
|
|
8
9
|
* @since 0.12.0
|
|
9
10
|
* @entrypoint \@nvidia-elements/core/accordion
|
|
10
11
|
* @slot - default content slot
|
|
@@ -28,6 +29,7 @@ export declare class AccordionHeader extends LitElement {
|
|
|
28
29
|
/**
|
|
29
30
|
* @element nve-accordion-content
|
|
30
31
|
* @description Contains the collapsible body content that reveals or hides when the parent accordion expands or collapses.
|
|
32
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/accordion/
|
|
31
33
|
* @since 0.12.0
|
|
32
34
|
* @entrypoint \@nvidia-elements/core/accordion
|
|
33
35
|
* @slot - This is a default/unnamed slot for accordion content
|
|
@@ -45,6 +47,7 @@ export declare class AccordionContent extends LitElement {
|
|
|
45
47
|
/**
|
|
46
48
|
* @element nve-accordion
|
|
47
49
|
* @description An accordion is a vertical stack of interactive headings used to toggle the display of further information.
|
|
50
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/accordion/
|
|
48
51
|
* @since 0.12.0
|
|
49
52
|
* @entrypoint \@nvidia-elements/core/accordion
|
|
50
53
|
* @command --open - use to open the accordion
|
|
@@ -105,6 +108,7 @@ export declare class Accordion extends LitElement implements ContainerElement {
|
|
|
105
108
|
/**
|
|
106
109
|
* @element nve-accordion-group
|
|
107
110
|
* @description Organizes many accordions into a cohesive group, enabling coordinated expand/collapse behavior such as single-item expansion.
|
|
111
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/accordion/
|
|
108
112
|
* @since 0.12.0
|
|
109
113
|
* @entrypoint \@nvidia-elements/core/accordion
|
|
110
114
|
* @cssprop --padding
|
|
@@ -28,7 +28,7 @@ var b = class extends g {
|
|
|
28
28
|
static {
|
|
29
29
|
this.metadata = {
|
|
30
30
|
tag: "nve-accordion-header",
|
|
31
|
-
version: "2.1.
|
|
31
|
+
version: "2.1.2"
|
|
32
32
|
};
|
|
33
33
|
}
|
|
34
34
|
render() {
|
|
@@ -46,7 +46,7 @@ var x = class extends g {
|
|
|
46
46
|
static {
|
|
47
47
|
this.metadata = {
|
|
48
48
|
tag: "nve-accordion-content",
|
|
49
|
-
version: "2.1.
|
|
49
|
+
version: "2.1.2"
|
|
50
50
|
};
|
|
51
51
|
}
|
|
52
52
|
render() {
|
|
@@ -62,7 +62,7 @@ var x = class extends g {
|
|
|
62
62
|
static {
|
|
63
63
|
this.metadata = {
|
|
64
64
|
tag: "nve-accordion",
|
|
65
|
-
version: "2.1.
|
|
65
|
+
version: "2.1.2",
|
|
66
66
|
children: [
|
|
67
67
|
b.metadata.tag,
|
|
68
68
|
x.metadata.tag,
|
|
@@ -120,7 +120,7 @@ var C = class extends g {
|
|
|
120
120
|
static {
|
|
121
121
|
this.metadata = {
|
|
122
122
|
tag: "nve-accordion-group",
|
|
123
|
-
version: "2.1.
|
|
123
|
+
version: "2.1.2",
|
|
124
124
|
children: [S.metadata.tag]
|
|
125
125
|
};
|
|
126
126
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion2.js","names":["#i18nController","#header","#typeExpandableController","#toggle","#updateChildAttributes","#onOpen"],"sources":["../../src/accordion/accordion.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { ContainerElement, Container } from '@nvidia-elements/core/internal';\nimport {\n stateExpanded,\n I18nController,\n TypeExpandableController,\n useStyles,\n attachInternals,\n generateId,\n isFocusable,\n hostAttr,\n audit,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport accordionStyleSheet from './accordion.css?inline';\nimport accordionHeaderStyleSheet from './accordion-header.css?inline';\nimport accordionContentStyleSheet from './accordion-content.css?inline';\nimport accordionGroupStyleSheet from './accordion-group.css?inline';\n\n/**\n * @element nve-accordion-header\n * @description Provides the clickable heading region of an accordion that toggles the visibility of associated content.\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @slot - default content slot\n * @slot prefix - slot for prefix content\n * @slot suffix - slot for suffix content\n * @cssprop --cursor\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\nexport class AccordionHeader extends LitElement {\n static styles = useStyles([accordionHeaderStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-accordion-header',\n version: '0.0.0'\n };\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`\n <div internal-host>\n <slot name=\"prefix\"></slot>\n <slot></slot>\n <slot name=\"suffix\"></slot>\n </div>\n `;\n }\n\n @hostAttr() slot = 'header';\n\n connectedCallback() {\n super.connectedCallback(); // Do not override connectedCallback w/out supering\n attachInternals(this);\n this._internals.role = 'heading';\n this._internals.ariaLevel = '2';\n }\n}\n\n/**\n * @element nve-accordion-content\n * @description Contains the collapsible body content that reveals or hides when the parent accordion expands or collapses.\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @slot - This is a default/unnamed slot for accordion content\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\nexport class AccordionContent extends LitElement {\n static styles = useStyles([accordionContentStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-accordion-content',\n version: '0.0.0'\n };\n\n render() {\n return html`\n <slot></slot>\n `;\n }\n}\n\n/**\n * @element nve-accordion\n * @description An accordion is a vertical stack of interactive headings used to toggle the display of further information.\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @command --open - use to open the accordion\n * @command --close - use to close the accordion\n * @command --toggle - use to toggle the accordion\n * @slot - This is a default/unnamed slot for accordion content\n * @slot icon-button - icon elements to display for expand/collapse\n * @slot header - header element (Use `accordion-header` or custom content)\n * @slot content - content element (Use `accordion-content` or custom content)\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --header-padding\n * @cssprop --cursor\n * @cssprop --transition\n * @csspart icon-button - The toggle icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\n@audit()\n@scopedRegistry()\n@stateExpanded<Accordion>()\nexport class Accordion extends LitElement implements ContainerElement {\n static styles = useStyles([accordionStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-accordion',\n version: '0.0.0',\n children: [AccordionHeader.metadata.tag, AccordionContent.metadata.tag, IconButton.metadata.tag]\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton\n };\n\n /** @private */\n declare _internals: ElementInternals;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n #typeExpandableController = new TypeExpandableController(this);\n\n /**\n * Enables updating internal string values for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n /**\n * Determines the container styles of component. Flat suits nesting accordions within other containers. Inset suits more complex accordions where content needs distinct separation.\n */\n @property({ type: String, reflect: true }) container?: Extract<Container, 'flat' | 'inset'>;\n\n /**\n * Determines whether the accordion expands to display its contents.\n */\n @property({ type: Boolean, reflect: true }) expanded = false;\n\n /**\n * Determines whether the accordion is expandable\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless)\n */\n @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n get #header() {\n return this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=header]')?.assignedElements()[0];\n }\n\n #toggle(element: HTMLElement) {\n if (!this.disabled && (!isFocusable(element) || element.id === 'internal-trigger')) {\n this.#typeExpandableController.toggle();\n }\n }\n\n render() {\n return html`\n <div internal-host>\n <div id=\"header\"\n @click=${(e: Event) => this.#toggle(e.target as HTMLElement)}\n .ariaLabel=${this.expanded ? this.i18n.close : this.i18n.expand}\n .ariaControls=${'content'}\n >\n <slot name=\"header\"></slot>\n\n <slot name=\"icon-button\">\n <nve-icon-button part=\"icon-button\"\n exportparts=\"icon:icon-button-icon\"\n id=\"internal-trigger\"\n container=\"inline\"\n icon-name=\"caret\"\n direction=${this.expanded ? 'up' : 'down'}\n ?disabled=${this.disabled}\n ?pressed=${this.expanded}\n .expanded=${this.expanded}\n .ariaLabel=${this.expanded ? this.i18n.close : this.i18n.expand}\n ></nve-icon-button>\n </slot>\n </div>\n\n <div id=\"content\" .ariaHidden=${!this.expanded}>\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'region';\n }\n\n async firstUpdated(props: PropertyValues<this>) {\n super.firstUpdated(props);\n\n if (this.#header) {\n this.#header.id ||= generateId();\n this.setAttribute('aria-labelledby', this.#header.id);\n }\n }\n}\n\n/**\n * @element nve-accordion-group\n * @description Organizes many accordions into a cohesive group, enabling coordinated expand/collapse behavior such as single-item expansion.\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @cssprop --padding\n * @slot - This is a default slot for accordions within the group\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\n@audit()\nexport class AccordionGroup extends LitElement {\n declare _internals: ElementInternals;\n static styles = useStyles([accordionGroupStyleSheet]);\n\n /**\n * Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless)\n */\n @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n /**\n * Determines whether the accordion should opt-in to stateful expansion of a single accordion at a time\n */\n @property({ type: Boolean, attribute: 'behavior-expand-single' }) behaviorExpandSingle = false;\n\n /** flat (Borderless, container-less accordions), full (default), or inset (Rounded corner, contained accordion) */\n @property({ type: String, reflect: true }) container?: Extract<Container, 'flat' | 'inset'>;\n\n static readonly metadata = {\n tag: 'nve-accordion-group',\n version: '0.0.0',\n children: [Accordion.metadata.tag]\n };\n\n @queryAssignedElements() private accordions!: Accordion[];\n\n render() {\n return html`\n <div internal-host>\n <slot @slotchange=${() => this.#updateChildAttributes()}></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'group';\n this.addEventListener('open', this.#onOpen);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('open', this.#onOpen);\n }\n\n #onOpen = (e: Event) => {\n if (this.behaviorExpandSingle && this.accordions.find(accordion => accordion === e.target)) {\n this.accordions.filter(accordion => accordion !== e.target).forEach(accordion => (accordion.expanded = false));\n }\n };\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n this.#updateChildAttributes();\n }\n\n #updateChildAttributes() {\n this.accordions.forEach(accordion => (accordion.container = this.container));\n this.accordions.forEach(accordion => (accordion.behaviorExpand = this.behaviorExpand || this.behaviorExpandSingle));\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"accordion2.js","names":["#i18nController","#header","#typeExpandableController","#toggle","#updateChildAttributes","#onOpen"],"sources":["../../src/accordion/accordion.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { ContainerElement, Container } from '@nvidia-elements/core/internal';\nimport {\n stateExpanded,\n I18nController,\n TypeExpandableController,\n useStyles,\n attachInternals,\n generateId,\n isFocusable,\n hostAttr,\n audit,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport accordionStyleSheet from './accordion.css?inline';\nimport accordionHeaderStyleSheet from './accordion-header.css?inline';\nimport accordionContentStyleSheet from './accordion-content.css?inline';\nimport accordionGroupStyleSheet from './accordion-group.css?inline';\n\n/**\n * @element nve-accordion-header\n * @description Provides the clickable heading region of an accordion that toggles the visibility of associated content.\n * @documentation https://nvidia.github.io/elements/docs/elements/accordion/\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @slot - default content slot\n * @slot prefix - slot for prefix content\n * @slot suffix - slot for suffix content\n * @cssprop --cursor\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\nexport class AccordionHeader extends LitElement {\n static styles = useStyles([accordionHeaderStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-accordion-header',\n version: '0.0.0'\n };\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`\n <div internal-host>\n <slot name=\"prefix\"></slot>\n <slot></slot>\n <slot name=\"suffix\"></slot>\n </div>\n `;\n }\n\n @hostAttr() slot = 'header';\n\n connectedCallback() {\n super.connectedCallback(); // Do not override connectedCallback w/out supering\n attachInternals(this);\n this._internals.role = 'heading';\n this._internals.ariaLevel = '2';\n }\n}\n\n/**\n * @element nve-accordion-content\n * @description Contains the collapsible body content that reveals or hides when the parent accordion expands or collapses.\n * @documentation https://nvidia.github.io/elements/docs/elements/accordion/\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @slot - This is a default/unnamed slot for accordion content\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\nexport class AccordionContent extends LitElement {\n static styles = useStyles([accordionContentStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-accordion-content',\n version: '0.0.0'\n };\n\n render() {\n return html`\n <slot></slot>\n `;\n }\n}\n\n/**\n * @element nve-accordion\n * @description An accordion is a vertical stack of interactive headings used to toggle the display of further information.\n * @documentation https://nvidia.github.io/elements/docs/elements/accordion/\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @command --open - use to open the accordion\n * @command --close - use to close the accordion\n * @command --toggle - use to toggle the accordion\n * @slot - This is a default/unnamed slot for accordion content\n * @slot icon-button - icon elements to display for expand/collapse\n * @slot header - header element (Use `accordion-header` or custom content)\n * @slot content - content element (Use `accordion-content` or custom content)\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --header-padding\n * @cssprop --cursor\n * @cssprop --transition\n * @csspart icon-button - The toggle icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\n@audit()\n@scopedRegistry()\n@stateExpanded<Accordion>()\nexport class Accordion extends LitElement implements ContainerElement {\n static styles = useStyles([accordionStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-accordion',\n version: '0.0.0',\n children: [AccordionHeader.metadata.tag, AccordionContent.metadata.tag, IconButton.metadata.tag]\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton\n };\n\n /** @private */\n declare _internals: ElementInternals;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n #typeExpandableController = new TypeExpandableController(this);\n\n /**\n * Enables updating internal string values for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n /**\n * Determines the container styles of component. Flat suits nesting accordions within other containers. Inset suits more complex accordions where content needs distinct separation.\n */\n @property({ type: String, reflect: true }) container?: Extract<Container, 'flat' | 'inset'>;\n\n /**\n * Determines whether the accordion expands to display its contents.\n */\n @property({ type: Boolean, reflect: true }) expanded = false;\n\n /**\n * Determines whether the accordion is expandable\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless)\n */\n @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n get #header() {\n return this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=header]')?.assignedElements()[0];\n }\n\n #toggle(element: HTMLElement) {\n if (!this.disabled && (!isFocusable(element) || element.id === 'internal-trigger')) {\n this.#typeExpandableController.toggle();\n }\n }\n\n render() {\n return html`\n <div internal-host>\n <div id=\"header\"\n @click=${(e: Event) => this.#toggle(e.target as HTMLElement)}\n .ariaLabel=${this.expanded ? this.i18n.close : this.i18n.expand}\n .ariaControls=${'content'}\n >\n <slot name=\"header\"></slot>\n\n <slot name=\"icon-button\">\n <nve-icon-button part=\"icon-button\"\n exportparts=\"icon:icon-button-icon\"\n id=\"internal-trigger\"\n container=\"inline\"\n icon-name=\"caret\"\n direction=${this.expanded ? 'up' : 'down'}\n ?disabled=${this.disabled}\n ?pressed=${this.expanded}\n .expanded=${this.expanded}\n .ariaLabel=${this.expanded ? this.i18n.close : this.i18n.expand}\n ></nve-icon-button>\n </slot>\n </div>\n\n <div id=\"content\" .ariaHidden=${!this.expanded}>\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'region';\n }\n\n async firstUpdated(props: PropertyValues<this>) {\n super.firstUpdated(props);\n\n if (this.#header) {\n this.#header.id ||= generateId();\n this.setAttribute('aria-labelledby', this.#header.id);\n }\n }\n}\n\n/**\n * @element nve-accordion-group\n * @description Organizes many accordions into a cohesive group, enabling coordinated expand/collapse behavior such as single-item expansion.\n * @documentation https://nvidia.github.io/elements/docs/elements/accordion/\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @cssprop --padding\n * @slot - This is a default slot for accordions within the group\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\n@audit()\nexport class AccordionGroup extends LitElement {\n declare _internals: ElementInternals;\n static styles = useStyles([accordionGroupStyleSheet]);\n\n /**\n * Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless)\n */\n @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n /**\n * Determines whether the accordion should opt-in to stateful expansion of a single accordion at a time\n */\n @property({ type: Boolean, attribute: 'behavior-expand-single' }) behaviorExpandSingle = false;\n\n /** flat (Borderless, container-less accordions), full (default), or inset (Rounded corner, contained accordion) */\n @property({ type: String, reflect: true }) container?: Extract<Container, 'flat' | 'inset'>;\n\n static readonly metadata = {\n tag: 'nve-accordion-group',\n version: '0.0.0',\n children: [Accordion.metadata.tag]\n };\n\n @queryAssignedElements() private accordions!: Accordion[];\n\n render() {\n return html`\n <div internal-host>\n <slot @slotchange=${() => this.#updateChildAttributes()}></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'group';\n this.addEventListener('open', this.#onOpen);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('open', this.#onOpen);\n }\n\n #onOpen = (e: Event) => {\n if (this.behaviorExpandSingle && this.accordions.find(accordion => accordion === e.target)) {\n this.accordions.filter(accordion => accordion !== e.target).forEach(accordion => (accordion.expanded = false));\n }\n };\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n this.#updateChildAttributes();\n }\n\n #updateChildAttributes() {\n this.accordions.forEach(accordion => (accordion.container = this.container));\n this.accordions.forEach(accordion => (accordion.behaviorExpand = this.behaviorExpand || this.behaviorExpandSingle));\n }\n}\n"],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ import type { Color, Container, Prominence, SupportStatus } from '@nvidia-elemen
|
|
|
4
4
|
/**
|
|
5
5
|
* @element nve-alert-group
|
|
6
6
|
* @description An alert group is an element that displays a group of related and important messages in a way that attracts the user's attention without interrupting the user's task.
|
|
7
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/alert/
|
|
7
8
|
* @since 0.3.0
|
|
8
9
|
* @entrypoint \@nvidia-elements/core/alert
|
|
9
10
|
* @cssprop --gap
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-group2.js","names":["#updateStatus"],"sources":["../../src/alert/alert-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { property } from 'lit/decorators/property.js';\nimport type { Color, Container, Prominence, SupportStatus } from '@nvidia-elements/core/internal';\nimport {\n attachInternals,\n useStyles,\n supportStateStyles,\n audit,\n colorStateStyles\n} from '@nvidia-elements/core/internal';\nimport { Alert } from './alert.js';\nimport styles from './alert-group.css?inline';\n\n/**\n * @element nve-alert-group\n * @description An alert group is an element that displays a group of related and important messages in a way that attracts the user's attention without interrupting the user's task.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/alert\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --background\n * @slot - default slot for nve-alert\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n */\n@audit()\nexport class AlertGroup extends LitElement {\n static styles = useStyles([styles, supportStateStyles, colorStateStyles]);\n\n static readonly metadata = {\n tag: 'nve-alert-group',\n version: '0.0.0',\n children: [Alert.metadata.tag]\n };\n\n /** Defines visual treatment to represent a ongoing task or support status. */\n @property({ type: String, reflect: true }) status?: SupportStatus;\n\n /** Determines the visual prominence or weight, emphasis applies banner style alerts */\n @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n /** Allows colors not defined by semantic status definitions for non-status instances, such as callouts for tutorials or tips on a documentation site. */\n @property({ type: String, reflect: true }) color: Color;\n\n /** Determines the container bounds of the element */\n @property({ type: String, reflect: true }) container?: Extract<Container, 'full'>;\n\n /** @private */\n declare _internals: ElementInternals;\n\n @queryAssignedElements() private alerts!: Alert[];\n\n render() {\n return html`\n <div internal-host>\n <slot @slotchange=${() => this.#updateStatus()}></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'group';\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n this.#updateStatus();\n }\n\n #updateStatus() {\n this.alerts.forEach(alert => (alert.status = this.status));\n }\n}\n"],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"alert-group2.js","names":["#updateStatus"],"sources":["../../src/alert/alert-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { property } from 'lit/decorators/property.js';\nimport type { Color, Container, Prominence, SupportStatus } from '@nvidia-elements/core/internal';\nimport {\n attachInternals,\n useStyles,\n supportStateStyles,\n audit,\n colorStateStyles\n} from '@nvidia-elements/core/internal';\nimport { Alert } from './alert.js';\nimport styles from './alert-group.css?inline';\n\n/**\n * @element nve-alert-group\n * @description An alert group is an element that displays a group of related and important messages in a way that attracts the user's attention without interrupting the user's task.\n * @documentation https://nvidia.github.io/elements/docs/elements/alert/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/alert\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --background\n * @slot - default slot for nve-alert\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n */\n@audit()\nexport class AlertGroup extends LitElement {\n static styles = useStyles([styles, supportStateStyles, colorStateStyles]);\n\n static readonly metadata = {\n tag: 'nve-alert-group',\n version: '0.0.0',\n children: [Alert.metadata.tag]\n };\n\n /** Defines visual treatment to represent a ongoing task or support status. */\n @property({ type: String, reflect: true }) status?: SupportStatus;\n\n /** Determines the visual prominence or weight, emphasis applies banner style alerts */\n @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n /** Allows colors not defined by semantic status definitions for non-status instances, such as callouts for tutorials or tips on a documentation site. */\n @property({ type: String, reflect: true }) color: Color;\n\n /** Determines the container bounds of the element */\n @property({ type: String, reflect: true }) container?: Extract<Container, 'full'>;\n\n /** @private */\n declare _internals: ElementInternals;\n\n @queryAssignedElements() private alerts!: Alert[];\n\n render() {\n return html`\n <div internal-host>\n <slot @slotchange=${() => this.#updateStatus()}></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'group';\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n this.#updateStatus();\n }\n\n #updateStatus() {\n this.alerts.forEach(alert => (alert.status = this.status));\n }\n}\n"],"mappings":";;;;;;;;;;AAmCO,IAAA,IAAA,cAAyB,EAAW;;gBACzB,EAAU;GAAC;GAAQ;GAAoB;EAAgB,CAAC;;;kBAE7C;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,EAAM,SAAS,GAAG;EAC/B;;CAmBA,SAAS;EACP,OAAO,CAAI,+CAEmB,KAAKA,GAAc,EAAE;CAGrD;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAKA,GAAc;CACrB;CAEA,KAAgB;EACd,KAAK,OAAO,SAAQ,MAAU,EAAM,SAAS,KAAK,MAAO;CAC3D;AACF;GAtCG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAKxC,EAAsB,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,UAzBxB,EAAM,CAAA,GAAA,CAAA"}
|
package/dist/alert/alert.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ import type { SupportStatus, TaskStatus } from '@nvidia-elements/core/internal';
|
|
|
5
5
|
/**
|
|
6
6
|
* @element nve-alert
|
|
7
7
|
* @description Alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
|
|
8
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/alert/
|
|
8
9
|
* @since 0.3.0
|
|
9
10
|
* @entrypoint \@nvidia-elements/core/alert
|
|
10
11
|
* @event close - Dispatched when the alert closes within an alert group.
|
package/dist/alert/alert2.js
CHANGED
package/dist/alert/alert2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert2.js","names":["#i18nController","#typeClosableController"],"sources":["../../src/alert/alert.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { SupportStatus, TaskStatus } from '@nvidia-elements/core/internal';\nimport {\n attachInternals,\n I18nController,\n statusIcons,\n TypeClosableController,\n useStyles,\n statusStateStyles,\n supportStateStyles,\n appendRootNodeStyle,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport globalStyles from './alert.global.css?inline';\nimport styles from './alert.css?inline';\n\n/**\n * @element nve-alert\n * @description Alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/alert\n * @event close - Dispatched when the alert closes within an alert group.\n * @command --close - Use to set the alert closed/hidden state.\n * @slot icon - Icon slot renders on the left side of the alert. Icons typically represent the alert's status.\n * @slot prefix - Prefix slot renders between the icon and the content. Prefixes typically represent the alert's status.\n * @slot actions - Actions render on the right side of the alert. Actions are typically buttons, but can also be links. Use actions for steps the user can take to resolve the alert.\n * @slot content - Content for large overflow text.\n * @slot - Default content placed inside of the alert.\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --color\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --font-weight\n * @cssprop --justify-content\n * @cssprop --align-items\n * @cssprop --min-height\n * @cssprop --text-transform\n * @cssprop --height\n * @cssprop --width\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n */\n@scopedRegistry()\nexport class Alert extends LitElement {\n static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n static readonly metadata = {\n tag: 'nve-alert',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon,\n [IconButton.metadata.tag]: IconButton\n };\n\n /** Defines visual treatment to represent a ongoing task or support status. */\n @property({ type: String, reflect: true }) status?: SupportStatus | TaskStatus | 'muted';\n\n /** When used in an `alert-group` the `closable` property enables dismissing alerts within the same group. */\n @property({ type: Boolean }) closable = false;\n\n #typeClosableController = new TypeClosableController(this);\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /** Enables updating internal string values for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n @queryAssignedElements({ slot: 'prefix', flatten: true }) private prefixItems!: HTMLElement[];\n\n @queryAssignedElements({ slot: 'actions', flatten: true }) private actionItems!: HTMLElement[];\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`\n <div internal-host @slotchange=${() => this.requestUpdate()}>\n <slot name=\"icon\"><nve-icon part=\"icon\" role=\"img\" .name=${statusIcons[this.status as string] ?? statusIcons['']} aria-label=${(this.status ? (this.i18n as Record<string, string>)[this.status] : undefined) ?? this.i18n.information ?? 'information'}></nve-icon></slot>\n <slot name=\"prefix\" ?hidden=${!this.prefixItems.length}></slot>\n <slot></slot>\n <slot name=\"actions\" ?hidden=${!this.actionItems.length}></slot>\n ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" icon-name=\"cancel\" size=\"sm\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n </div>\n <slot name=\"content\" part=\"_content\"></slot>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n appendRootNodeStyle(this, globalStyles);\n this._internals.role = 'alert';\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"alert2.js","names":["#i18nController","#typeClosableController"],"sources":["../../src/alert/alert.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { SupportStatus, TaskStatus } from '@nvidia-elements/core/internal';\nimport {\n attachInternals,\n I18nController,\n statusIcons,\n TypeClosableController,\n useStyles,\n statusStateStyles,\n supportStateStyles,\n appendRootNodeStyle,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport globalStyles from './alert.global.css?inline';\nimport styles from './alert.css?inline';\n\n/**\n * @element nve-alert\n * @description Alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.\n * @documentation https://nvidia.github.io/elements/docs/elements/alert/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/alert\n * @event close - Dispatched when the alert closes within an alert group.\n * @command --close - Use to set the alert closed/hidden state.\n * @slot icon - Icon slot renders on the left side of the alert. Icons typically represent the alert's status.\n * @slot prefix - Prefix slot renders between the icon and the content. Prefixes typically represent the alert's status.\n * @slot actions - Actions render on the right side of the alert. Actions are typically buttons, but can also be links. Use actions for steps the user can take to resolve the alert.\n * @slot content - Content for large overflow text.\n * @slot - Default content placed inside of the alert.\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --color\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --font-weight\n * @cssprop --justify-content\n * @cssprop --align-items\n * @cssprop --min-height\n * @cssprop --text-transform\n * @cssprop --height\n * @cssprop --width\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n */\n@scopedRegistry()\nexport class Alert extends LitElement {\n static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n static readonly metadata = {\n tag: 'nve-alert',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon,\n [IconButton.metadata.tag]: IconButton\n };\n\n /** Defines visual treatment to represent a ongoing task or support status. */\n @property({ type: String, reflect: true }) status?: SupportStatus | TaskStatus | 'muted';\n\n /** When used in an `alert-group` the `closable` property enables dismissing alerts within the same group. */\n @property({ type: Boolean }) closable = false;\n\n #typeClosableController = new TypeClosableController(this);\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /** Enables updating internal string values for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n @queryAssignedElements({ slot: 'prefix', flatten: true }) private prefixItems!: HTMLElement[];\n\n @queryAssignedElements({ slot: 'actions', flatten: true }) private actionItems!: HTMLElement[];\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`\n <div internal-host @slotchange=${() => this.requestUpdate()}>\n <slot name=\"icon\"><nve-icon part=\"icon\" role=\"img\" .name=${statusIcons[this.status as string] ?? statusIcons['']} aria-label=${(this.status ? (this.i18n as Record<string, string>)[this.status] : undefined) ?? this.i18n.information ?? 'information'}></nve-icon></slot>\n <slot name=\"prefix\" ?hidden=${!this.prefixItems.length}></slot>\n <slot></slot>\n <slot name=\"actions\" ?hidden=${!this.actionItems.length}></slot>\n ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" icon-name=\"cancel\" size=\"sm\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n </div>\n <slot name=\"content\" part=\"_content\"></slot>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n appendRootNodeStyle(this, globalStyles);\n this._internals.role = 'alert';\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmDO,IAAA,IAAA,cAAoB,EAAW;;+BAiBI,cAEd,IAAI,EAAuB,IAAI,aAEjB,IAAI,EAAqB,IAAI,eAGlC,KAAKA,GAAgB;;;gBAvBxC,EAAU;GAAC;GAAQ;GAAmB;EAAkB,CAAC;;;kBAE9C;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B;IACzB,EAAK,SAAS,MAAM;IACpB,EAAW,SAAS,MAAM;EAC7B;;CAQA;CAEA;CAYA,SAAS;EACP,OAAO,CAAI,yCAC8B,KAAK,cAAc,EAAE,8DACC,EAAY,KAAK,WAAqB,EAAY,IAAI,iBAAe,KAAK,SAAU,KAAK,KAAgC,KAAK,UAAU,KAAA,MAAc,KAAK,KAAK,eAAe,cAAc,mDAC1N,CAAC,KAAK,YAAY,OAAO,sDAExB,CAAC,KAAK,YAAY,OAAO,WACtD,KAAK,WAAW,CAAI,yFAAwF,KAAKC,GAAwB,MAAM,EAAE,8DAA4D,KAAK,KAAK,MAAM,wBAAuB,GAAG;CAI/P;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,EAAoB,MAAM,CAAY,GACtC,KAAK,WAAW,OAAO;CACzB;AACF;GAtCG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAGxC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAO1B,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAEzB,EAAsB;CAAE,MAAM;CAAU,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,MAEvD,EAAsB;CAAE,MAAM;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,UA7B1D,EAAe,CAAA,GAAA,CAAA"}
|
package/dist/avatar/avatar.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import type { Size, Color } from '@nvidia-elements/core/internal';
|
|
|
3
3
|
/**
|
|
4
4
|
* @element nve-avatar
|
|
5
5
|
* @description Avatar represents a user/bot within a UI. Typically with text or image content.
|
|
6
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/avatar/
|
|
6
7
|
* @since 1.20.0
|
|
7
8
|
* @entrypoint \@nvidia-elements/core/avatar
|
|
8
9
|
* @slot - default slot for content
|
package/dist/avatar/avatar2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar2.js","names":[],"sources":["../../src/avatar/avatar.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Size, Color } from '@nvidia-elements/core/internal';\nimport { colorStateStyles } from '@nvidia-elements/core/internal';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './avatar.css?inline';\n\n/**\n * @element nve-avatar\n * @description Avatar represents a user/bot within a UI. Typically with text or image content.\n * @since 1.20.0\n * @entrypoint \\@nvidia-elements/core/avatar\n * @slot - default slot for content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --height\n * @cssprop --width\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --border\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n *\n */\nexport class Avatar extends LitElement {\n static styles = useStyles([styles, colorStateStyles]);\n\n static readonly metadata = {\n tag: 'nve-avatar',\n version: '0.0.0'\n };\n\n /** Sets size of the avatar component. Update size through the `width + height` css props as an alternative. */\n @property({ type: String, reflect: true }) size?: Size | 'xs';\n\n /** Sets the color of the avatar component. */\n @property({ type: String, reflect: true }) color: Color;\n\n render() {\n return html`\n <div internal-host>\n <slot></slot>\n </div>\n `;\n }\n}\n"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"avatar2.js","names":[],"sources":["../../src/avatar/avatar.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Size, Color } from '@nvidia-elements/core/internal';\nimport { colorStateStyles } from '@nvidia-elements/core/internal';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './avatar.css?inline';\n\n/**\n * @element nve-avatar\n * @description Avatar represents a user/bot within a UI. Typically with text or image content.\n * @documentation https://nvidia.github.io/elements/docs/elements/avatar/\n * @since 1.20.0\n * @entrypoint \\@nvidia-elements/core/avatar\n * @slot - default slot for content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --height\n * @cssprop --width\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --border\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n *\n */\nexport class Avatar extends LitElement {\n static styles = useStyles([styles, colorStateStyles]);\n\n static readonly metadata = {\n tag: 'nve-avatar',\n version: '0.0.0'\n };\n\n /** Sets size of the avatar component. Update size through the `width + height` css props as an alternative. */\n @property({ type: String, reflect: true }) size?: Size | 'xs';\n\n /** Sets the color of the avatar component. */\n @property({ type: String, reflect: true }) color: Color;\n\n render() {\n return html`\n <div internal-host>\n <slot></slot>\n </div>\n `;\n }\n}\n"],"mappings":";;;;;;AA4BA,IAAa,IAAb,cAA4B,EAAW;;gBACrB,EAAU,CAAC,GAAQ,CAAgB,CAAC;;;kBAEzB;GACzB,KAAK;GACL,SAAS;EACX;;CAQA,SAAS;EACP,OAAO,CAAI;CAKb;AACF;GAZG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA"}
|
package/dist/badge/badge.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ import type { TaskStatus, SupportStatus, Color, Prominence } from '@nvidia-eleme
|
|
|
5
5
|
/**
|
|
6
6
|
* @element nve-badge
|
|
7
7
|
* @description A visual indicator that communicates a status description of an associated component. Status badges use short text, color, built in icons for quick recognition and render near the relevant content.
|
|
8
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/badge/
|
|
8
9
|
* @since 0.11.0
|
|
9
10
|
* @entrypoint \@nvidia-elements/core/badge
|
|
10
11
|
* @slot - default slot for content
|
package/dist/badge/badge2.js
CHANGED
package/dist/badge/badge2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge2.js","names":["#i18nController","#size","#slotChange","#assignAriaLabel","#assignDefaultIcon"],"sources":["../../src/badge/badge.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport type { TaskStatus, SupportStatus, Color, Prominence } from '@nvidia-elements/core/internal';\nimport {\n useStyles,\n statusIcons,\n statusStateStyles,\n supportStateStyles,\n colorStateStyles,\n attachInternals,\n I18nController,\n typeSSR,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport styles from './badge.css?inline';\n\n/**\n * @element nve-badge\n * @description A visual indicator that communicates a status description of an associated component. Status badges use short text, color, built in icons for quick recognition and render near the relevant content.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/badge\n * @slot - default slot for content\n * @slot prefix-icon - slot for prefix icon\n * @slot suffix-icon - slot for suffix icon\n * @cssprop --background\n * @cssprop --color\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --icon-color\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --text-transform\n * @cssprop --width\n * @cssprop --height\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\n@typeSSR()\n@scopedRegistry()\nexport class Badge extends LitElement {\n /**\n * Visual treatment to represent a ongoing task, support status.\n */\n @property({ type: String, reflect: true }) status: TaskStatus | SupportStatus;\n\n /**\n * Highlights content to draw attention and convey simple messages.\n */\n @property({ type: String, reflect: true }) color: Color;\n\n /**\n * Determines the container styles of component. Flat suits nesting within other containers.\n */\n @property({ type: String, reflect: true }) container?: 'flat';\n\n /** Determines the visual prominence or weight */\n @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n static styles = useStyles([styles, statusStateStyles, supportStateStyles, colorStateStyles]);\n\n static readonly metadata = {\n tag: 'nve-badge',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n get #size() {\n return this.status && statusIcons[this.status] === 'dot' ? 'sm' : 'md';\n }\n\n /** @private */\n declare _internals: ElementInternals;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /**\n * Enables updating internal string values for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n render() {\n return html`\n <div internal-host>\n <slot name=\"prefix-icon\">${this.status ? html`<nve-icon part=\"_icon\" .name=${statusIcons[this.status] ?? ''} .size=${this.#size} aria-hidden=\"true\"></nve-icon>` : nothing}</slot>\n <slot @slotchange=${this.#slotChange}></slot>\n <slot name=\"suffix-icon\"></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'status';\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n this.#assignAriaLabel();\n }\n\n #slotChange() {\n this.#assignAriaLabel();\n this.#assignDefaultIcon();\n }\n\n #assignAriaLabel() {\n this._internals.ariaLabel = this.textContent;\n }\n\n #assignDefaultIcon() {\n const unassignedIcon = this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!\n .assignedElements()\n .find(i => i.matches('nve-icon') && !i.slot);\n if (unassignedIcon) {\n unassignedIcon.slot = 'prefix-icon';\n }\n }\n}\n"],"mappings":";;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"badge2.js","names":["#i18nController","#size","#slotChange","#assignAriaLabel","#assignDefaultIcon"],"sources":["../../src/badge/badge.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport type { TaskStatus, SupportStatus, Color, Prominence } from '@nvidia-elements/core/internal';\nimport {\n useStyles,\n statusIcons,\n statusStateStyles,\n supportStateStyles,\n colorStateStyles,\n attachInternals,\n I18nController,\n typeSSR,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport styles from './badge.css?inline';\n\n/**\n * @element nve-badge\n * @description A visual indicator that communicates a status description of an associated component. Status badges use short text, color, built in icons for quick recognition and render near the relevant content.\n * @documentation https://nvidia.github.io/elements/docs/elements/badge/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/badge\n * @slot - default slot for content\n * @slot prefix-icon - slot for prefix icon\n * @slot suffix-icon - slot for suffix icon\n * @cssprop --background\n * @cssprop --color\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --icon-color\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --text-transform\n * @cssprop --width\n * @cssprop --height\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\n@typeSSR()\n@scopedRegistry()\nexport class Badge extends LitElement {\n /**\n * Visual treatment to represent a ongoing task, support status.\n */\n @property({ type: String, reflect: true }) status: TaskStatus | SupportStatus;\n\n /**\n * Highlights content to draw attention and convey simple messages.\n */\n @property({ type: String, reflect: true }) color: Color;\n\n /**\n * Determines the container styles of component. Flat suits nesting within other containers.\n */\n @property({ type: String, reflect: true }) container?: 'flat';\n\n /** Determines the visual prominence or weight */\n @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n static styles = useStyles([styles, statusStateStyles, supportStateStyles, colorStateStyles]);\n\n static readonly metadata = {\n tag: 'nve-badge',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n get #size() {\n return this.status && statusIcons[this.status] === 'dot' ? 'sm' : 'md';\n }\n\n /** @private */\n declare _internals: ElementInternals;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /**\n * Enables updating internal string values for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n render() {\n return html`\n <div internal-host>\n <slot name=\"prefix-icon\">${this.status ? html`<nve-icon part=\"_icon\" .name=${statusIcons[this.status] ?? ''} .size=${this.#size} aria-hidden=\"true\"></nve-icon>` : nothing}</slot>\n <slot @slotchange=${this.#slotChange}></slot>\n <slot name=\"suffix-icon\"></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'status';\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n this.#assignAriaLabel();\n }\n\n #slotChange() {\n this.#assignAriaLabel();\n this.#assignDefaultIcon();\n }\n\n #assignAriaLabel() {\n this._internals.ariaLabel = this.textContent;\n }\n\n #assignDefaultIcon() {\n const unassignedIcon = this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!\n .assignedElements()\n .find(i => i.matches('nve-icon') && !i.slot);\n if (unassignedIcon) {\n unassignedIcon.slot = 'prefix-icon';\n }\n }\n}\n"],"mappings":";;;;;;;;;;;;AA8CO,IAAA,IAAA,cAAoB,EAAW;;yBAqCI,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB;;;gBAvBxC,EAAU;GAAC;GAAQ;GAAmB;GAAoB;EAAgB,CAAC;;;kBAEhE;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAEA,IAAIC,KAAQ;EACV,OAAO,KAAK,UAAU,EAAY,KAAK,YAAY,QAAQ,OAAO;CACpE;CAKA;CAOA,SAAS;EACP,OAAO,CAAI,+CAEoB,KAAK,SAAS,CAAI,iCAAgC,EAAY,KAAK,WAAW,GAAG,WAAS,KAAKA,GAAM,oCAAmC,EAAQ,4BACvJ,KAAKC,GAAY;CAI3C;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAKC,GAAiB;CACxB;CAEA,KAAc;EAEZ,AADA,KAAKA,GAAiB,GACtB,KAAKC,GAAmB;CAC1B;CAEA,KAAmB;EACjB,KAAK,WAAW,YAAY,KAAK;CACnC;CAEA,KAAqB;EACnB,IAAM,IAAiB,KAAK,WAAY,cAA+B,kBAAkB,CAAC,CACvF,iBAAiB,CAAC,CAClB,MAAK,MAAK,EAAE,QAAQ,UAAU,KAAK,CAAC,EAAE,IAAI;EAC7C,AAAI,MACF,EAAe,OAAO;CAE1B;AACF;GA9EG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAyBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UA5C3B,EAAQ,GACR,EAAe,CAAA,GAAA,CAAA"}
|
|
@@ -4,6 +4,7 @@ import { Icon } from '@nvidia-elements/core/icon';
|
|
|
4
4
|
/**
|
|
5
5
|
* @element nve-breadcrumb
|
|
6
6
|
* @description Breadcrumb is a component that can help users establish their location while navigating a website with complex URLs and navigation paths.
|
|
7
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/breadcrumb/
|
|
7
8
|
* @since 0.11.0
|
|
8
9
|
* @entrypoint \@nvidia-elements/core/breadcrumb
|
|
9
10
|
* @cssprop --gap
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumb2.js","names":["#removeItem","#createItems","#resetItems"],"sources":["../../src/breadcrumb/breadcrumb.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n useStyles,\n keyNavigationList,\n attachInternals,\n generateId,\n isFocusable,\n typeSSR,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport styles from './breadcrumb.css?inline';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport type { Button } from '@nvidia-elements/core/button';\n\n/**\n * @element nve-breadcrumb\n * @description Breadcrumb is a component that can help users establish their location while navigating a website with complex URLs and navigation paths.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/breadcrumb\n * @cssprop --gap\n * @cssprop --height\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --width\n * @cssprop --icon-width\n * @cssprop --icon-height\n * @cssprop --text-decoration\n * @slot - default slot for `nve-button` and anchor elements\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role\n */\n@typeSSR()\n@scopedRegistry()\n@keyNavigationList<Breadcrumb>()\nexport class Breadcrumb extends LitElement {\n get keynavListConfig(): KeynavListConfig {\n return {\n items: Array.from(this.shadowRoot!.querySelectorAll('slot'))\n .flatMap(slot => slot.assignedElements())\n .filter(e => isFocusable(e)) as HTMLElement[]\n };\n }\n\n /** @private */\n declare _internals: ElementInternals;\n\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-breadcrumb',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n @state() private breadcrumbItems: Element[] = [];\n\n render() {\n /* eslint-disable @nvidia-elements/lint/no-unstyled-typography */\n return html`\n <ol internal-host>\n ${this.breadcrumbItems.map(\n (el, idx) => html`\n <li>\n <slot name=${el.slot} @slotchange=${this.#removeItem}></slot>\n ${idx < this.breadcrumbItems.length - 1 ? html`<nve-icon part=\"icon\" separator aria-hidden=\"true\" name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon>` : nothing}\n </li>\n `\n )}\n </ol>\n <slot ?hidden-slot=${!this.breadcrumbItems.length} @slotchange=${this.#createItems}></slot>`;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'navigation';\n }\n\n #removeItem(e: Event) {\n if (!(e.target as HTMLSlotElement).assignedElements().length) {\n this.#resetItems();\n }\n }\n\n #createItems(e: Event) {\n if (e.target && (e.target as HTMLSlotElement).assignedElements().length) {\n this.#resetItems();\n const items = this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!.assignedElements();\n items.filter(i => i.matches('nve-button, nve-icon-button, span, a')).forEach(i => (i.slot = generateId()));\n items\n .filter(i => i.matches('nve-button, nve-icon-button'))\n .forEach((i: Element) => ((i as Button).container = 'inline'));\n this.breadcrumbItems = items.length ? items : this.breadcrumbItems;\n }\n }\n\n #resetItems() {\n Array.from(this.shadowRoot!.querySelectorAll('slot'))\n .flatMap(i => i.assignedElements())\n .forEach(i => (i.slot = ''));\n }\n}\n"],"mappings":";;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"breadcrumb2.js","names":["#removeItem","#createItems","#resetItems"],"sources":["../../src/breadcrumb/breadcrumb.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n useStyles,\n keyNavigationList,\n attachInternals,\n generateId,\n isFocusable,\n typeSSR,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport styles from './breadcrumb.css?inline';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport type { Button } from '@nvidia-elements/core/button';\n\n/**\n * @element nve-breadcrumb\n * @description Breadcrumb is a component that can help users establish their location while navigating a website with complex URLs and navigation paths.\n * @documentation https://nvidia.github.io/elements/docs/elements/breadcrumb/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/breadcrumb\n * @cssprop --gap\n * @cssprop --height\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --width\n * @cssprop --icon-width\n * @cssprop --icon-height\n * @cssprop --text-decoration\n * @slot - default slot for `nve-button` and anchor elements\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role\n */\n@typeSSR()\n@scopedRegistry()\n@keyNavigationList<Breadcrumb>()\nexport class Breadcrumb extends LitElement {\n get keynavListConfig(): KeynavListConfig {\n return {\n items: Array.from(this.shadowRoot!.querySelectorAll('slot'))\n .flatMap(slot => slot.assignedElements())\n .filter(e => isFocusable(e)) as HTMLElement[]\n };\n }\n\n /** @private */\n declare _internals: ElementInternals;\n\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-breadcrumb',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n @state() private breadcrumbItems: Element[] = [];\n\n render() {\n /* eslint-disable @nvidia-elements/lint/no-unstyled-typography */\n return html`\n <ol internal-host>\n ${this.breadcrumbItems.map(\n (el, idx) => html`\n <li>\n <slot name=${el.slot} @slotchange=${this.#removeItem}></slot>\n ${idx < this.breadcrumbItems.length - 1 ? html`<nve-icon part=\"icon\" separator aria-hidden=\"true\" name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon>` : nothing}\n </li>\n `\n )}\n </ol>\n <slot ?hidden-slot=${!this.breadcrumbItems.length} @slotchange=${this.#createItems}></slot>`;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'navigation';\n }\n\n #removeItem(e: Event) {\n if (!(e.target as HTMLSlotElement).assignedElements().length) {\n this.#resetItems();\n }\n }\n\n #createItems(e: Event) {\n if (e.target && (e.target as HTMLSlotElement).assignedElements().length) {\n this.#resetItems();\n const items = this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!.assignedElements();\n items.filter(i => i.matches('nve-button, nve-icon-button, span, a')).forEach(i => (i.slot = generateId()));\n items\n .filter(i => i.matches('nve-button, nve-icon-button'))\n .forEach((i: Element) => ((i as Button).container = 'inline'));\n this.breadcrumbItems = items.length ? items : this.breadcrumbItems;\n }\n }\n\n #resetItems() {\n Array.from(this.shadowRoot!.querySelectorAll('slot'))\n .flatMap(i => i.assignedElements())\n .forEach(i => (i.slot = ''));\n }\n}\n"],"mappings":";;;;;;;;;;;;;AA0CO,IAAA,IAAA,cAAyB,EAAW;;sCAuBK,CAAC;;CAtB/C,IAAI,mBAAqC;EACvC,OAAO,EACL,OAAO,MAAM,KAAK,KAAK,WAAY,iBAAiB,MAAM,CAAC,CAAC,CACzD,SAAQ,MAAQ,EAAK,iBAAiB,CAAC,CAAC,CACxC,QAAO,MAAK,EAAY,CAAC,CAAC,EAC/B;CACF;;gBAKgB,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAIA,SAAS;EAEP,OAAO,CAAI,qBAEP,KAAK,gBAAgB,KACpB,GAAI,MAAQ,CAAI,mBAEF,EAAG,KAAK,iBAAe,KAAKA,GAAY,WACnD,IAAM,KAAK,gBAAgB,SAAS,IAAI,CAAI,8GAA8G,EAAQ,MAGxK,EAAE,2BAEiB,CAAC,KAAK,gBAAgB,OAAO,iBAAe,KAAKC,GAAa;CACrF;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,GAAY,GAAU;EACpB,AAAM,EAAE,OAA2B,iBAAiB,CAAC,CAAC,UACpD,KAAKC,GAAY;CAErB;CAEA,GAAa,GAAU;EACrB,IAAI,EAAE,UAAW,EAAE,OAA2B,iBAAiB,CAAC,CAAC,QAAQ;GACvE,KAAKA,GAAY;GACjB,IAAM,IAAQ,KAAK,WAAY,cAA+B,kBAAkB,CAAC,CAAE,iBAAiB;GAKpG,AAJA,EAAM,QAAO,MAAK,EAAE,QAAQ,sCAAsC,CAAC,CAAC,CAAC,SAAQ,MAAM,EAAE,OAAO,EAAW,CAAE,GACzG,EACG,QAAO,MAAK,EAAE,QAAQ,6BAA6B,CAAC,CAAC,CACrD,SAAS,MAAgB,EAAc,YAAY,QAAS,GAC/D,KAAK,kBAAkB,EAAM,SAAS,IAAQ,KAAK;EACrD;CACF;CAEA,KAAc;EACZ,MAAM,KAAK,KAAK,WAAY,iBAAiB,MAAM,CAAC,CAAC,CAClD,SAAQ,MAAK,EAAE,iBAAiB,CAAC,CAAC,CAClC,SAAQ,MAAM,EAAE,OAAO,EAAG;CAC/B;AACF;GA/CG,EAAM,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA;CA1BR,EAAQ;CACR,EAAe;CACf,EAA8B"}
|