@nvidia-elements/core 0.2.3 → 2.0.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 +64 -1
- package/NOTICE.md +4 -4
- package/dist/_virtual/{_@oxc-project_runtime@0.130.0 → _@oxc-project_runtime@0.132.0}/helpers/decorate.js +1 -1
- package/dist/accordion/accordion-header.js +1 -1
- package/dist/accordion/accordion-header.js.map +1 -1
- package/dist/accordion/accordion.d.ts +4 -7
- package/dist/accordion/accordion.examples.js.map +1 -1
- package/dist/accordion/accordion.examples.json +1 -12
- package/dist/accordion/accordion.js +1 -1
- package/dist/accordion/accordion.js.map +1 -1
- package/dist/accordion/accordion2.js +9 -12
- package/dist/accordion/accordion2.js.map +1 -1
- package/dist/alert/alert-group.d.ts +1 -1
- package/dist/alert/alert-group2.js +2 -2
- package/dist/alert/alert.d.ts +1 -1
- package/dist/alert/alert.js +1 -1
- package/dist/alert/alert.js.map +1 -1
- package/dist/alert/alert2.js +2 -2
- package/dist/avatar/avatar-group.d.ts +1 -1
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar.d.ts +1 -1
- package/dist/avatar/avatar2.js +2 -2
- package/dist/badge/badge.d.ts +3 -3
- package/dist/badge/badge.js +1 -1
- package/dist/badge/badge.js.map +1 -1
- package/dist/badge/badge2.js +4 -5
- package/dist/badge/badge2.js.map +1 -1
- package/dist/breadcrumb/breadcrumb.d.ts +1 -6
- package/dist/breadcrumb/breadcrumb.js +1 -1
- package/dist/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/breadcrumb/breadcrumb2.js +2 -2
- package/dist/breadcrumb/breadcrumb2.js.map +1 -1
- package/dist/bundle.d.ts +14 -0
- package/dist/bundles/index.d.ts +831 -95
- package/dist/bundles/index.js +4 -4
- package/dist/button/button.d.ts +3 -3
- package/dist/button/button.js +1 -1
- package/dist/button/button.js.map +1 -1
- package/dist/button/button2.js +2 -2
- package/dist/button/button2.js.map +1 -1
- package/dist/button-group/button-group.d.ts +1 -1
- package/dist/button-group/button-group2.js +2 -2
- package/dist/card/card-header.js +1 -1
- package/dist/card/card-header.js.map +1 -1
- package/dist/card/card.d.ts +4 -7
- package/dist/card/card2.js +6 -6
- package/dist/card/card2.js.map +1 -1
- package/dist/chat-message/chat-message.d.ts +1 -1
- package/dist/chat-message/chat-message2.js +2 -2
- package/dist/checkbox/checkbox-group2.js +2 -2
- package/dist/checkbox/checkbox2.js +2 -2
- package/dist/color/color.d.ts +1 -1
- package/dist/color/color2.js +2 -2
- package/dist/combobox/combobox.d.ts +2 -8
- package/dist/combobox/combobox.examples.js.map +1 -1
- package/dist/combobox/combobox2.js +3 -6
- package/dist/combobox/combobox2.js.map +1 -1
- package/dist/copy-button/copy-button.d.ts +1 -1
- package/dist/copy-button/copy-button2.js +3 -3
- package/dist/copy-button/copy-button2.js.map +1 -1
- package/dist/custom-elements-jsx.d.ts +32 -37
- package/dist/custom-elements-vue.d.ts +32 -37
- package/dist/custom-elements.json +275 -394
- package/dist/data.html.json +75 -28
- package/dist/data.snippets.json +28 -28
- package/dist/date/date.d.ts +1 -1
- package/dist/date/date2.js +2 -2
- package/dist/datetime/datetime.d.ts +1 -1
- package/dist/datetime/datetime2.js +2 -2
- package/dist/dialog/dialog-footer.d.ts +1 -1
- package/dist/dialog/dialog-footer2.js +2 -2
- package/dist/dialog/dialog-header.d.ts +1 -1
- package/dist/dialog/dialog-header2.js +2 -2
- package/dist/dialog/dialog.d.ts +1 -1
- package/dist/dialog/dialog.examples.js.map +1 -1
- package/dist/dialog/dialog2.js +2 -2
- package/dist/divider/divider.d.ts +1 -1
- package/dist/divider/divider2.js +2 -2
- package/dist/dot/dot.d.ts +1 -1
- package/dist/dot/dot2.js +2 -2
- package/dist/drawer/drawer-content.d.ts +1 -1
- package/dist/drawer/drawer-content2.js +2 -2
- package/dist/drawer/drawer-footer.d.ts +1 -1
- package/dist/drawer/drawer-footer2.js +2 -2
- package/dist/drawer/drawer-header.d.ts +1 -1
- package/dist/drawer/drawer-header2.js +2 -2
- package/dist/drawer/drawer.d.ts +1 -1
- package/dist/drawer/drawer2.js +2 -2
- package/dist/dropdown/dropdown-footer.d.ts +1 -1
- package/dist/dropdown/dropdown-footer2.js +2 -2
- package/dist/dropdown/dropdown-header.d.ts +1 -1
- package/dist/dropdown/dropdown-header2.js +2 -2
- package/dist/dropdown/dropdown.d.ts +1 -1
- package/dist/dropdown/dropdown2.js +2 -2
- package/dist/dropdown-group/dropdown-group.d.ts +1 -1
- package/dist/dropdown-group/dropdown-group.js +2 -2
- package/dist/dropzone/dropzone.d.ts +1 -1
- package/dist/dropzone/dropzone2.js +2 -2
- package/dist/file/file2.js +1 -1
- package/dist/format-datetime/format-datetime.d.ts +1 -1
- package/dist/format-datetime/format-datetime2.js +2 -2
- package/dist/format-number/format-number.d.ts +1 -1
- package/dist/format-number/format-number2.js +2 -2
- package/dist/format-relative-time/format-relative-time.d.ts +1 -1
- package/dist/format-relative-time/format-relative-time2.js +2 -2
- package/dist/forms/control/control2.js +2 -2
- package/dist/forms/control-group/control-group.d.ts +1 -1
- package/dist/forms/control-group/control-group.js +1 -1
- package/dist/forms/control-group/control-group.js.map +1 -1
- package/dist/forms/control-group/control-group2.js +2 -2
- package/dist/forms/control-message/control-message.d.ts +1 -1
- package/dist/forms/control-message/control-message2.js +2 -2
- package/dist/grid/cell/cell.d.ts +1 -1
- package/dist/grid/cell/cell2.js +1 -1
- package/dist/grid/column/column.d.ts +1 -1
- package/dist/grid/column/column2.js +2 -2
- package/dist/grid/footer/footer.d.ts +1 -1
- package/dist/grid/footer/footer2.js +2 -2
- package/dist/grid/grid.d.ts +3 -2
- package/dist/grid/grid.examples.js.map +1 -1
- package/dist/grid/grid2.js +35 -27
- package/dist/grid/grid2.js.map +1 -1
- package/dist/grid/header/header.d.ts +1 -1
- package/dist/grid/header/header2.js +2 -2
- package/dist/grid/placeholder/placeholder.d.ts +1 -1
- package/dist/grid/placeholder/placeholder2.js +1 -1
- package/dist/grid/row/row.d.ts +1 -1
- package/dist/grid/row/row2.js +2 -2
- package/dist/icon/icon.d.ts +1 -1
- package/dist/icon/icon2.js +17 -9
- package/dist/icon/icon2.js.map +1 -1
- package/dist/icon/icons.d.ts +0 -2
- package/dist/icon/icons.js.map +1 -1
- package/dist/icon-button/icon-button.d.ts +1 -1
- package/dist/icon-button/icon-button.js +1 -1
- package/dist/icon-button/icon-button.js.map +1 -1
- package/dist/icon-button/icon-button2.js +2 -2
- package/dist/index.js +1 -1
- package/dist/input/input-group.examples.js.map +1 -1
- package/dist/input/input-group.examples.json +11 -0
- package/dist/input/input-group.js +1 -1
- package/dist/input/input-group.js.map +1 -1
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input2.js +2 -2
- package/dist/internal/controllers/state-scroll.controller.d.ts +1 -0
- package/dist/internal/controllers/state-scroll.controller.js +25 -8
- package/dist/internal/controllers/state-scroll.controller.js.map +1 -1
- package/dist/internal/controllers/type-command.controller.d.ts +0 -4
- package/dist/internal/controllers/type-command.controller.js +6 -9
- package/dist/internal/controllers/type-command.controller.js.map +1 -1
- package/dist/internal/controllers/type-native-popover.controller.js +28 -21
- package/dist/internal/controllers/type-native-popover.controller.js.map +1 -1
- package/dist/internal/services/global.service.js +1 -1
- package/dist/internal/types/index.d.ts +0 -10
- package/dist/internal/types/index.js +0 -3
- package/dist/internal/types/index.js.map +1 -1
- package/dist/logo/logo.d.ts +1 -1
- package/dist/logo/logo2.js +2 -2
- package/dist/menu/menu-item.d.ts +1 -1
- package/dist/menu/menu-item2.js +2 -2
- package/dist/menu/menu.d.ts +1 -1
- package/dist/menu/menu.examples.js.map +1 -1
- package/dist/menu/menu.examples.json +1 -1
- package/dist/menu/menu2.js +2 -2
- package/dist/month/month.d.ts +1 -1
- package/dist/month/month2.js +2 -2
- package/dist/notification/notification-group.d.ts +1 -1
- package/dist/notification/notification-group2.js +2 -2
- package/dist/notification/notification.d.ts +2 -1
- package/dist/notification/notification.examples.js.map +1 -1
- package/dist/notification/notification.examples.json +0 -11
- package/dist/notification/notification2.js +18 -10
- package/dist/notification/notification2.js.map +1 -1
- package/dist/page/page-panel/page-panel-content.d.ts +1 -1
- package/dist/page/page-panel/page-panel-content2.js +1 -1
- package/dist/page/page-panel/page-panel-footer.d.ts +1 -1
- package/dist/page/page-panel/page-panel-footer2.js +2 -2
- package/dist/page/page-panel/page-panel-header.d.ts +1 -1
- package/dist/page/page-panel/page-panel-header2.js +2 -2
- package/dist/page/page-panel/page-panel.d.ts +2 -17
- package/dist/page/page-panel/page-panel.global.js +1 -1
- package/dist/page/page-panel/page-panel.global.js.map +1 -1
- package/dist/page/page-panel/page-panel2.js +16 -39
- package/dist/page/page-panel/page-panel2.js.map +1 -1
- package/dist/page/page.d.ts +1 -1
- package/dist/page/page.examples.js.map +1 -1
- package/dist/page/page.examples.json +0 -32
- package/dist/page/page2.js +2 -2
- package/dist/page-header/page-header.d.ts +1 -1
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/page-loader.d.ts +1 -1
- package/dist/page-loader/page-loader2.js +2 -2
- package/dist/pagination/pagination.d.ts +1 -1
- package/dist/pagination/pagination2.js +2 -2
- package/dist/panel/panel.d.ts +8 -5
- package/dist/panel/panel.examples.js.map +1 -1
- package/dist/panel/panel2.js +5 -5
- package/dist/panel/panel2.js.map +1 -1
- package/dist/password/password.d.ts +1 -1
- package/dist/password/password2.js +2 -2
- package/dist/preferences-input/preferences-input.d.ts +1 -1
- package/dist/preferences-input/preferences-input2.js +2 -2
- package/dist/progress-bar/progress-bar.d.ts +1 -1
- package/dist/progress-bar/progress-bar2.js +2 -2
- package/dist/progress-ring/progress-ring.d.ts +1 -3
- package/dist/progress-ring/progress-ring2.js +9 -14
- package/dist/progress-ring/progress-ring2.js.map +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip.d.ts +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +2 -2
- package/dist/pulse/pulse.d.ts +1 -1
- package/dist/pulse/pulse2.js +2 -2
- package/dist/radio/radio-group2.js +2 -2
- package/dist/radio/radio2.js +2 -2
- package/dist/range/range.d.ts +1 -1
- package/dist/range/range2.js +2 -2
- package/dist/resize-handle/resize-handle.d.ts +1 -1
- package/dist/resize-handle/resize-handle2.js +2 -2
- package/dist/search/search.d.ts +1 -1
- package/dist/search/search2.js +2 -2
- package/dist/select/select.d.ts +2 -2
- package/dist/select/select2.js +2 -2
- package/dist/skeleton/skeleton.d.ts +1 -1
- package/dist/skeleton/skeleton2.js +2 -2
- package/dist/sort-button/sort-button.d.ts +1 -1
- package/dist/sort-button/sort-button2.js +2 -2
- package/dist/sparkline/sparkline.d.ts +1 -1
- package/dist/sparkline/sparkline2.js +2 -2
- package/dist/star-rating/star-rating.d.ts +1 -1
- package/dist/star-rating/star-rating2.js +2 -2
- package/dist/steps/steps.d.ts +2 -2
- package/dist/steps/steps2.js +3 -3
- package/dist/switch/switch-group2.js +2 -2
- package/dist/switch/switch2.js +2 -2
- package/dist/tabs/tabs-group.d.ts +1 -1
- package/dist/tabs/tabs-group2.js +2 -2
- package/dist/tabs/tabs-item.js +1 -1
- package/dist/tabs/tabs-item.js.map +1 -1
- package/dist/tabs/tabs.d.ts +2 -6
- package/dist/tabs/tabs.global.js +1 -1
- package/dist/tabs/tabs.global.js.map +1 -1
- package/dist/tabs/tabs.js +1 -1
- package/dist/tabs/tabs.js.map +1 -1
- package/dist/tabs/tabs2.js +3 -3
- package/dist/tabs/tabs2.js.map +1 -1
- package/dist/tag/tag.d.ts +1 -1
- package/dist/tag/tag2.js +2 -2
- package/dist/textarea/textarea2.js +1 -1
- package/dist/time/time.d.ts +1 -1
- package/dist/time/time2.js +2 -2
- package/dist/toast/toast.d.ts +3 -4
- package/dist/toast/toast2.js +3 -3
- package/dist/toast/toast2.js.map +1 -1
- package/dist/toggletip/toggletip-footer.d.ts +1 -1
- package/dist/toggletip/toggletip-footer2.js +2 -2
- package/dist/toggletip/toggletip-header.d.ts +1 -1
- package/dist/toggletip/toggletip-header2.js +2 -2
- package/dist/toggletip/toggletip.d.ts +1 -1
- package/dist/toggletip/toggletip.examples.js.map +1 -1
- package/dist/toggletip/toggletip2.js +2 -2
- package/dist/toolbar/toolbar.d.ts +1 -1
- package/dist/toolbar/toolbar2.js +2 -2
- package/dist/tooltip/tooltip.d.ts +1 -1
- package/dist/tooltip/tooltip2.js +2 -2
- package/dist/tree/tree-node.d.ts +1 -1
- package/dist/tree/tree-node2.js +2 -2
- package/dist/tree/tree.d.ts +1 -1
- package/dist/tree/tree2.js +2 -2
- package/dist/week/week.d.ts +1 -1
- package/dist/week/week2.js +2 -2
- package/package.json +15 -15
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,66 @@
|
|
|
1
|
+
## 2.0.0 (2026-06-08)
|
|
2
|
+
|
|
3
|
+
* chore(ci): release scope fix ([102f9a3](https://github.com/NVIDIA/elements/commit/102f9a3))
|
|
4
|
+
* chore(release): @nvidia-elements/forms-v2.0.0 [skip ci] ([59f3a66](https://github.com/NVIDIA/elements/commit/59f3a66))
|
|
5
|
+
* chore(release): @nvidia-elements/styles-v2.0.0 [skip ci] ([f44d145](https://github.com/NVIDIA/elements/commit/f44d145))
|
|
6
|
+
* chore(release): @nvidia-elements/themes-v2.0.0 [skip ci] ([9ffdbd2](https://github.com/NVIDIA/elements/commit/9ffdbd2))
|
|
7
|
+
* feat(cli)!: promote to stable public release ([ab93fca](https://github.com/NVIDIA/elements/commit/ab93fca))
|
|
8
|
+
* feat(code)!: promote to stable public release ([eb00327](https://github.com/NVIDIA/elements/commit/eb00327))
|
|
9
|
+
* feat(core)!: promote to stable public release ([cb2859d](https://github.com/NVIDIA/elements/commit/cb2859d))
|
|
10
|
+
* feat(forms)!: promote to stable public release ([dc67f62](https://github.com/NVIDIA/elements/commit/dc67f62))
|
|
11
|
+
* feat(lint)!: promote to stable public release ([583e44f](https://github.com/NVIDIA/elements/commit/583e44f))
|
|
12
|
+
* feat(markdown)!: promote to stable public release ([aa807eb](https://github.com/NVIDIA/elements/commit/aa807eb))
|
|
13
|
+
* feat(monaco)!: promote to stable public release ([78c8007](https://github.com/NVIDIA/elements/commit/78c8007))
|
|
14
|
+
* feat(styles)!: promote to stable public release ([f07f114](https://github.com/NVIDIA/elements/commit/f07f114))
|
|
15
|
+
* feat(themes)!: promote to stable public release ([9c7352f](https://github.com/NVIDIA/elements/commit/9c7352f))
|
|
16
|
+
|
|
17
|
+
### BREAKING CHANGE
|
|
18
|
+
|
|
19
|
+
* Promotes to the stable public 2.0 release line.
|
|
20
|
+
|
|
21
|
+
Signed-off-by: Cory Rylan <crylan@nvidia.com>
|
|
22
|
+
* Promotes to the stable public 2.0 release line.
|
|
23
|
+
|
|
24
|
+
Signed-off-by: Cory Rylan <crylan@nvidia.com>
|
|
25
|
+
* Promotes to the stable public 2.0 release line.
|
|
26
|
+
|
|
27
|
+
Signed-off-by: Cory Rylan <crylan@nvidia.com>
|
|
28
|
+
* Promotes to the stable public 2.0 release line.
|
|
29
|
+
|
|
30
|
+
Signed-off-by: Cory Rylan <crylan@nvidia.com>
|
|
31
|
+
* Promotes to the stable public 2.0 release line.
|
|
32
|
+
|
|
33
|
+
Signed-off-by: Cory Rylan <crylan@nvidia.com>
|
|
34
|
+
* Promotes to the stable public 2.0 release line.
|
|
35
|
+
|
|
36
|
+
Signed-off-by: Cory Rylan <crylan@nvidia.com>
|
|
37
|
+
* Promotes to the stable public 2.0 release line.
|
|
38
|
+
|
|
39
|
+
Signed-off-by: Cory Rylan <crylan@nvidia.com>
|
|
40
|
+
* Promotes to the stable public 2.0 release line.
|
|
41
|
+
|
|
42
|
+
Signed-off-by: Cory Rylan <crylan@nvidia.com>
|
|
43
|
+
* Promotes to the stable public 2.0 release line.
|
|
44
|
+
|
|
45
|
+
Signed-off-by: Cory Rylan <crylan@nvidia.com>
|
|
46
|
+
|
|
47
|
+
## <small>0.2.4 (2026-06-06)</small>
|
|
48
|
+
|
|
49
|
+
* chore(ci): update dependencies ([02fa6b5](https://github.com/NVIDIA/elements/commit/02fa6b5))
|
|
50
|
+
* chore(docs): cleanup starter links ([0195089](https://github.com/NVIDIA/elements/commit/0195089))
|
|
51
|
+
* chore(docs): update deprecations ([1e49a3b](https://github.com/NVIDIA/elements/commit/1e49a3b))
|
|
52
|
+
* chore(release): @nvidia-elements/cli-v0.3.0 [skip ci] ([94a0a99](https://github.com/NVIDIA/elements/commit/94a0a99))
|
|
53
|
+
* chore(release): @nvidia-elements/cli-v0.3.1 [skip ci] ([a867d59](https://github.com/NVIDIA/elements/commit/a867d59))
|
|
54
|
+
* chore(release): @nvidia-elements/monaco-v0.0.12 [skip ci] ([e72e4f9](https://github.com/NVIDIA/elements/commit/e72e4f9))
|
|
55
|
+
* chore(release): @nvidia-elements/styles-v0.0.10 [skip ci] ([39a66fc](https://github.com/NVIDIA/elements/commit/39a66fc))
|
|
56
|
+
* chore(starters): enable lit library starter ([06d0f39](https://github.com/NVIDIA/elements/commit/06d0f39))
|
|
57
|
+
* fix(cli): build approval for mcp-app ([ae62914](https://github.com/NVIDIA/elements/commit/ae62914))
|
|
58
|
+
* fix(core): remove deprecations ([50b89f8](https://github.com/NVIDIA/elements/commit/50b89f8))
|
|
59
|
+
* fix(styles): deprecation removals ([98f2c2c](https://github.com/NVIDIA/elements/commit/98f2c2c))
|
|
60
|
+
* feat(cli): enable lit-library starter support ([9333b0a](https://github.com/NVIDIA/elements/commit/9333b0a))
|
|
61
|
+
* feat(lint): deprecation rules ([8cf8337](https://github.com/NVIDIA/elements/commit/8cf8337))
|
|
62
|
+
* feat(starters): mcp-app support ([3548972](https://github.com/NVIDIA/elements/commit/3548972))
|
|
63
|
+
|
|
1
64
|
## <small>0.2.3 (2026-06-03)</small>
|
|
2
65
|
|
|
3
66
|
* chore(ci): update lighthouse ([f1fb184](https://github.com/NVIDIA/elements/commit/f1fb184))
|
|
@@ -182,4 +245,4 @@
|
|
|
182
245
|
|
|
183
246
|
## 0.0.0
|
|
184
247
|
|
|
185
|
-
Initial release.
|
|
248
|
+
Initial pre-release.
|
package/NOTICE.md
CHANGED
|
@@ -5,10 +5,10 @@ Copyright 2024-2026 NVIDIA Corporation
|
|
|
5
5
|
|
|
6
6
|
This project includes the following bundled third-party software:
|
|
7
7
|
|
|
8
|
-
- lit v3.3.
|
|
8
|
+
- lit v3.3.3 [BSD-3-Clause]
|
|
9
9
|
Copyright: Google LLC
|
|
10
10
|
|
|
11
|
-
- lit-html v3.3.
|
|
11
|
+
- lit-html v3.3.3 [BSD-3-Clause]
|
|
12
12
|
Copyright: Google LLC
|
|
13
13
|
|
|
14
14
|
This product includes SVG icons derived from the following third-party icon libraries:
|
|
@@ -216,8 +216,8 @@ BSD-3-Clause
|
|
|
216
216
|
|
|
217
217
|
The following bundled components are provided under the BSD-3-Clause license:
|
|
218
218
|
|
|
219
|
-
lit v3.3.
|
|
220
|
-
lit-html v3.3.
|
|
219
|
+
lit v3.3.3 - Copyright Google LLC
|
|
220
|
+
lit-html v3.3.3 - Copyright Google LLC
|
|
221
221
|
|
|
222
222
|
Redistribution and use in source and binary forms, with or without
|
|
223
223
|
modification, are permitted provided that the following conditions are met:
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
//#region \0@oxc-project+runtime@0.
|
|
1
|
+
//#region \0@oxc-project+runtime@0.132.0/helpers/decorate.js
|
|
2
2
|
function e(e, t, n, r) {
|
|
3
3
|
var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
|
|
4
4
|
if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/accordion/accordion-header.css?inline
|
|
2
|
-
var e = ":host{width:100%;--cursor: pointer}[internal-host]{cursor:var(--cursor);color:var(--color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:var(--nve-ref-space-xs)
|
|
2
|
+
var e = ":host{width:100%;--cursor: pointer}[internal-host]{cursor:var(--cursor);color:var(--color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:var(--nve-ref-space-xs)}slot:not([name]){display:block;flex:1}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion-header.js","names":[],"sources":["../../src/accordion/accordion-header.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 width: 100%;\n --cursor: pointer;\n}\n\n[internal-host] {\n cursor: var(--cursor);\n color: var(--color);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--nve-ref-space-xs);\n\n
|
|
1
|
+
{"version":3,"file":"accordion-header.js","names":[],"sources":["../../src/accordion/accordion-header.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 width: 100%;\n --cursor: pointer;\n}\n\n[internal-host] {\n cursor: var(--cursor);\n color: var(--color);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--nve-ref-space-xs);\n}\n\nslot:not([name]) {\n display: block;\n flex: 1;\n}\n"],"mappings":""}
|
|
@@ -9,9 +9,6 @@ import { IconButton } from '../icon-button';
|
|
|
9
9
|
* @slot - default content slot
|
|
10
10
|
* @slot prefix - slot for prefix content
|
|
11
11
|
* @slot suffix - slot for suffix content
|
|
12
|
-
* @slot title - (deprecated)
|
|
13
|
-
* @slot subtitle - (deprecated)
|
|
14
|
-
* @slot actions - (deprecated)
|
|
15
12
|
* @cssprop --cursor
|
|
16
13
|
* @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
|
|
17
14
|
*/
|
|
@@ -23,7 +20,7 @@ export declare class AccordionHeader extends LitElement {
|
|
|
23
20
|
};
|
|
24
21
|
/** @private */
|
|
25
22
|
_internals: ElementInternals;
|
|
26
|
-
render(): import('lit
|
|
23
|
+
render(): import('lit').TemplateResult<1>;
|
|
27
24
|
slot: string;
|
|
28
25
|
connectedCallback(): void;
|
|
29
26
|
}
|
|
@@ -42,7 +39,7 @@ export declare class AccordionContent extends LitElement {
|
|
|
42
39
|
tag: string;
|
|
43
40
|
version: string;
|
|
44
41
|
};
|
|
45
|
-
render(): import('lit
|
|
42
|
+
render(): import('lit').TemplateResult<1>;
|
|
46
43
|
}
|
|
47
44
|
/**
|
|
48
45
|
* @element nve-accordion
|
|
@@ -100,7 +97,7 @@ export declare class Accordion extends LitElement implements ContainerElement {
|
|
|
100
97
|
* Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless)
|
|
101
98
|
*/
|
|
102
99
|
behaviorExpand: boolean;
|
|
103
|
-
render(): import('lit
|
|
100
|
+
render(): import('lit').TemplateResult<1>;
|
|
104
101
|
connectedCallback(): void;
|
|
105
102
|
firstUpdated(props: PropertyValues<this>): Promise<void>;
|
|
106
103
|
}
|
|
@@ -133,7 +130,7 @@ export declare class AccordionGroup extends LitElement {
|
|
|
133
130
|
children: string[];
|
|
134
131
|
};
|
|
135
132
|
private accordions;
|
|
136
|
-
render(): import('lit
|
|
133
|
+
render(): import('lit').TemplateResult<1>;
|
|
137
134
|
connectedCallback(): void;
|
|
138
135
|
disconnectedCallback(): void;
|
|
139
136
|
updated(props: PropertyValues<this>): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.examples.js","names":[],"sources":["../../src/accordion/accordion.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/accordion/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/button/define.js';\n\nexport default {\n title: 'Elements/Accordion',\n component: 'nve-accordion',\n};\n\n/**\n * @summary Basic accordion component for collapsible content sections. Use accordions to progressively disclose information, helping users focus on relevant content while keeping the interface compact and scannable.\n */\nexport const Default = {\n render: () => html`\n<nve-accordion-group behavior-expand>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Workspace Settings</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n</nve-accordion-group>\n `\n};\n\n/**\n * @summary Disabled accordion state for read-only content display. Use when accordion sections are temporarily unavailable or conditionally accessible based on user permissions, providing visual feedback about inaccessible content.\n */\nexport const Disabled = {\n render: () => html`\n<nve-accordion behavior-expand disabled>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Admin Settings</h2>\n <p nve-text=\"body\">Requires administrator access</p>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n</nve-accordion>\n `\n};\n\n\n/**\n * @summary Accordion container variants for different visual emphasis levels. Use default for standard sections, inset for elevated content within cards, and flat for minimal visual weight in dense layouts or sidebars.\n */\nexport const Container = {\n render: () => html`\n<div nve-layout=\"column gap:md\">\n <nve-accordion-group behavior-expand>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n </nve-accordion-group>\n <nve-accordion-group container=\"inset\" behavior-expand>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n </nve-accordion-group>\n <nve-accordion-group container=\"flat\" behavior-expand>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n </nve-accordion-group>\n</div>\n `\n};\n\n/**\n * @summary Accordion with custom CSS transitions for enhanced visual feedback during state changes. Use animated accordions to provide smoother, more polished interactions, particularly in content-heavy interfaces where transitions help users track what changed.\n * @tags test-case\n */\nexport const Animated = {\n render: () => html`\n <nve-accordion behavior-expand style=\"--transition: height 0.3s ease-in-out\">\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Release Notes</h2>\n <p nve-text=\"body\">Version 3.2.0</p>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n `\n};\n\n/**\n * @summary Accordion group allowing only one section expanded at a time, automatically closing others. Use single-expand behavior when content sections are mutually exclusive or when you want to maintain compact vertical space by limiting expanded content to one section.\n */\nexport const BehaviorExpandSingle = {\n render: () => html`\n<nve-accordion-group behavior-expand-single>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Account Settings</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Security</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n</nve-accordion-group>\n `\n};\n\n/**\n * @summary Accordion with custom icon button that changes based on state. Use custom icons to provide more semantic indicators (e.g., plus/minus for add/remove patterns, chevron for expand/collapse).\n * @tags test-case\n */\nexport const CustomIconButton = {\n render: () => html`\n<nve-accordion id=\"custom-icon-button-accordion\">\n <nve-icon-button slot=\"icon-button\" icon-name=\"add\" size=\"sm\" container=\"flat\"></nve-icon-button>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Additional Resources</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n</nve-accordion>\n<script type=\"module\">\n const accordion = document.querySelector('#custom-icon-button-accordion');\n const accordionHeader = accordion.querySelector('nve-accordion-header');\n const iconButton = accordion.querySelector('nve-icon-button');\n accordionHeader.addEventListener('click', () => toggle());\n iconButton.addEventListener('click', () => toggle());\n\n function toggle() {\n accordion.expanded = !accordion.expanded;\n iconButton.iconName = accordion.expanded ? 'minus' : 'add';\n }\n</script>\n `\n};\n\n/**\n * @summary Accordion with action buttons in header for quick operations without expanding. Perfect for list items where users need both to view details and perform actions like edit, delete, or add, keeping common actions immediately accessible.\n */\nexport const WithActions = {\n render: () => html`\n <nve-accordion behavior-expand>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Pipeline Configuration</h2>\n <p nve-text=\"body\">Last updated 2 hours ago <nve-button container=\"inline\">view history</nve-button></p>\n <nve-icon-button container=\"flat\" icon-name=\"add\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n <nve-icon-button container=\"flat\" icon-name=\"delete\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n `\n};\n\n/**\n * @summary Accordion with nested interactive elements like tooltips and popovers. Ensures proper event handling when accordion content contains interactive components, preventing unintended state changes and maintaining smooth user interactions.\n * @tags test-case\n */\nexport const NestedOpenEvent = {\n render: () => html`\n <nve-accordion-group behavior-expand-single>\n <nve-accordion>\n <nve-accordion-header>Details</nve-accordion-header>\n <nve-accordion-content>\n <nve-tooltip id=\"tooltip\">tooltip</nve-tooltip>\n <nve-button popovertarget=\"tooltip\">button</nve-button>\n </nve-accordion-content>\n </nve-accordion>\n </nve-accordion-group>\n `\n};\n\n/**\n * @summary Legacy slot patterns (title, subtitle, actions) for backward compatibility. Deprecated in favor of prefix/suffix slots for more flexible content layout, but maintained to support existing implementations during migration.\n * @tags test-case\n*/\nexport const DeprecatedSlots = {\n /* eslint-disable @nvidia-elements/lint/no-deprecated-slots */\n /* eslint-disable @nvidia-elements/lint/no-unexpected-slot-value */\n render: () => html`\n <nve-accordion behavior-expand>\n <nve-accordion-header>\n <div slot=\"title\">Project Details</div>\n <div slot=\"subtitle\">Last modified today</div>\n <nve-icon-button container=\"flat\" icon-name=\"add\" size=\"sm\" slot=\"actions\"></nve-icon-button>\n <nve-icon-button container=\"flat\" icon-name=\"delete\" size=\"sm\" slot=\"actions\"></nve-icon-button>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n `\n};\n\n/**\n * @summary Basic accordion component for collapsible content sections with expand/collapse functionality.\n * @tags test-case\n */\nexport const Single = {\n render: () => html`\n<nve-accordion-group behavior-expand>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Appearance</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n</nve-accordion-group>\n `\n};\n\n/**\n * @summary Brings together many accordion components for embedded multi-section content organization.\n * @tags test-case\n */\nexport const Multiple = {\n render: () => html`\n<nve-accordion-group behavior-expand>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Account Settings</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Privacy</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n</nve-accordion-group>\n `\n};"],"mappings":";AAGA,IAAA,IAAS"}
|
|
1
|
+
{"version":3,"file":"accordion.examples.js","names":[],"sources":["../../src/accordion/accordion.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/accordion/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/button/define.js';\n\nexport default {\n title: 'Elements/Accordion',\n component: 'nve-accordion',\n};\n\n/**\n * @summary Basic accordion component for collapsible content sections. Use accordions to progressively disclose information, helping users focus on relevant content while keeping the interface compact and scannable.\n */\nexport const Default = {\n render: () => html`\n<nve-accordion-group behavior-expand>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n</nve-accordion-group>\n `\n};\n\n/**\n * @summary Disabled accordion state for read-only content display. Use when accordion sections are temporarily unavailable or conditionally accessible based on user permissions, providing visual feedback about inaccessible content.\n */\nexport const Disabled = {\n render: () => html`\n<nve-accordion behavior-expand disabled>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Admin Settings</h2>\n <p nve-text=\"body\">Requires administrator access</p>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n</nve-accordion>\n `\n};\n\n\n/**\n * @summary Accordion container variants for different visual emphasis levels. Use default for standard sections, inset for elevated content within cards, and flat for minimal visual weight in dense layouts or sidebars.\n */\nexport const Container = {\n render: () => html`\n<div nve-layout=\"column gap:md\">\n <nve-accordion-group behavior-expand>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n </nve-accordion-group>\n <nve-accordion-group container=\"inset\" behavior-expand>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n </nve-accordion-group>\n <nve-accordion-group container=\"flat\" behavior-expand>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n </nve-accordion-group>\n</div>\n `\n};\n\n/**\n * @summary Accordion with custom CSS transitions for enhanced visual feedback during state changes. Use animated accordions to provide smoother, more polished interactions, particularly in content-heavy interfaces where transitions help users track what changed.\n * @tags test-case\n */\nexport const Animated = {\n render: () => html`\n <nve-accordion behavior-expand style=\"--transition: height 0.3s ease-in-out\">\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Release Notes</h2>\n <p nve-text=\"body\">Version 3.2.0</p>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n `\n};\n\n/**\n * @summary Accordion group allowing only one section expanded at a time, automatically closing others. Use single-expand behavior when content sections are mutually exclusive or when you want to maintain compact vertical space by limiting expanded content to one section.\n */\nexport const BehaviorExpandSingle = {\n render: () => html`\n<nve-accordion-group behavior-expand-single>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Account Settings</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Security</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n</nve-accordion-group>\n `\n};\n\n/**\n * @summary Accordion with custom icon button that changes based on state. Use custom icons to provide more semantic indicators (e.g., plus/minus for add/remove patterns, chevron for expand/collapse).\n * @tags test-case\n */\nexport const CustomIconButton = {\n render: () => html`\n<nve-accordion id=\"custom-icon-button-accordion\">\n <nve-icon-button slot=\"icon-button\" icon-name=\"add\" size=\"sm\" container=\"flat\"></nve-icon-button>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Additional Resources</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n</nve-accordion>\n<script type=\"module\">\n const accordion = document.querySelector('#custom-icon-button-accordion');\n const accordionHeader = accordion.querySelector('nve-accordion-header');\n const iconButton = accordion.querySelector('nve-icon-button');\n accordionHeader.addEventListener('click', () => toggle());\n iconButton.addEventListener('click', () => toggle());\n\n function toggle() {\n accordion.expanded = !accordion.expanded;\n iconButton.iconName = accordion.expanded ? 'minus' : 'add';\n }\n</script>\n `\n};\n\n/**\n * @summary Accordion with action buttons in header for quick operations without expanding. Perfect for list items where users need both to view details and perform actions like edit, delete, or add, keeping common actions immediately accessible.\n */\nexport const WithActions = {\n render: () => html`\n <nve-accordion behavior-expand>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Pipeline Configuration</h2>\n <p nve-text=\"body\">Last updated 2 hours ago <nve-button container=\"inline\">view history</nve-button></p>\n <nve-icon-button container=\"flat\" icon-name=\"add\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n <nve-icon-button container=\"flat\" icon-name=\"delete\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n `\n};\n\n/**\n * @summary Accordion with nested interactive elements like tooltips and popovers. Ensures proper event handling when accordion content contains interactive components, preventing unintended state changes and maintaining smooth user interactions.\n * @tags test-case\n */\nexport const NestedOpenEvent = {\n render: () => html`\n <nve-accordion-group behavior-expand-single>\n <nve-accordion>\n <nve-accordion-header>Details</nve-accordion-header>\n <nve-accordion-content>\n <nve-tooltip id=\"tooltip\">tooltip</nve-tooltip>\n <nve-button popovertarget=\"tooltip\">button</nve-button>\n </nve-accordion-content>\n </nve-accordion>\n </nve-accordion-group>\n `\n};\n\n/**\n * @summary Basic accordion component for collapsible content sections with expand/collapse functionality.\n * @tags test-case\n */\nexport const Single = {\n render: () => html`\n<nve-accordion-group behavior-expand>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Appearance</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n</nve-accordion-group>\n `\n};\n\n/**\n * @summary Brings together many accordion components for embedded multi-section content organization.\n * @tags test-case\n */\nexport const Multiple = {\n render: () => html`\n<nve-accordion-group behavior-expand>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Account Settings</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Privacy</h2>\n </nve-accordion-header>\n <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n </nve-accordion>\n</nve-accordion-group>\n `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{
|
|
6
6
|
"id": "accordion",
|
|
7
7
|
"name": "Default",
|
|
8
|
-
"template": "<nve-accordion-group behavior-expand>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\"
|
|
8
|
+
"template": "<nve-accordion-group behavior-expand>\n <nve-accordion>\n <nve-accordion-header>\n <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n </nve-accordion-header>\n <nve-accordion-content\n >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n >\n </nve-accordion>\n</nve-accordion-group>\n",
|
|
9
9
|
"summary": "Basic accordion component for collapsible content sections. Use accordions to progressively disclose information, helping users focus on relevant content while keeping the interface compact and scannable.",
|
|
10
10
|
"description": "",
|
|
11
11
|
"composition": false,
|
|
@@ -80,17 +80,6 @@
|
|
|
80
80
|
"test-case"
|
|
81
81
|
]
|
|
82
82
|
},
|
|
83
|
-
{
|
|
84
|
-
"id": "accordion-deprecated-slots",
|
|
85
|
-
"name": "DeprecatedSlots",
|
|
86
|
-
"template": "<nve-accordion behavior-expand>\n <nve-accordion-header>\n <div slot=\"title\">Project Details</div>\n <div slot=\"subtitle\">Last modified today</div>\n <nve-icon-button container=\"flat\" icon-name=\"add\" size=\"sm\" slot=\"actions\"></nve-icon-button>\n <nve-icon-button container=\"flat\" icon-name=\"delete\" size=\"sm\" slot=\"actions\"></nve-icon-button>\n </nve-accordion-header>\n <nve-accordion-content\n >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n >\n</nve-accordion>\n",
|
|
87
|
-
"summary": "Legacy slot patterns (title, subtitle, actions) for backward compatibility. Deprecated in favor of prefix/suffix slots for more flexible content layout, but maintained to support existing implementations during migration.",
|
|
88
|
-
"description": "",
|
|
89
|
-
"composition": false,
|
|
90
|
-
"tags": [
|
|
91
|
-
"test-case"
|
|
92
|
-
]
|
|
93
|
-
},
|
|
94
83
|
{
|
|
95
84
|
"id": "accordion-single",
|
|
96
85
|
"name": "Single",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/accordion/accordion.css?inline
|
|
2
|
-
var e = ":host{--nve-sys-interaction-background: var(--nve-sys-interaction-background-200);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);--background: var(--nve-sys-layer-container-background);--color: var(--nve-sys-layer-canvas-color);--border-radius: 0;--header-padding: var(--nve-ref-size-300) var(--nve-ref-size-400);--cursor: pointer;--transition: height var(--nve-ref-animation-duration-200) ease-in-out;width:100%;width:stretch;contain:none}[internal-host]{border-radius:var(--border-radius);background:var(--background);color:var(--color);overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:start;height:100%}#header{cursor:var(--cursor);display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:var(--header-padding)}
|
|
2
|
+
var e = ":host{--nve-sys-interaction-background: var(--nve-sys-interaction-background-200);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);--background: var(--nve-sys-layer-container-background);--color: var(--nve-sys-layer-canvas-color);--border-radius: 0;--header-padding: var(--nve-ref-size-300) var(--nve-ref-size-400);--cursor: pointer;--transition: height var(--nve-ref-animation-duration-200) ease-in-out;width:100%;width:stretch;contain:none}[internal-host]{border-radius:var(--border-radius);background:var(--background);color:var(--color);overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:start;height:100%}#header{cursor:var(--cursor);display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:var(--header-padding)}#content{display:block;height:0;transition:var(--transition)}:host(:state(expanded)) #content{height:auto;height:calc-size(max-content,size)}:host([container=\"inset\"]){--border-radius: var(--nve-ref-border-radius-md)}:host([container=\"flat\"]){--background: inherit}:host([disabled]){--cursor: not-allowed}:host([disabled]) ::slotted(nve-accordion-header){--cursor: not-allowed}:host(:not([disabled])) #header:hover nve-icon-button{--color: var(--nve-sys-text-emphasis-color)}nve-icon-button::part(icon){transition:transform var(--nve-ref-animation-duration-200) cubic-bezier(.4,0,.2,1)}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","names":[],"sources":["../../src/accordion/accordion.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 --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n --background: var(--nve-sys-layer-container-background);\n --color: var(--nve-sys-layer-canvas-color);\n --border-radius: 0;\n --header-padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n --cursor: pointer;\n --transition: height var(--nve-ref-animation-duration-200) ease-in-out;\n width: 100%; /* fallback safari */\n width: stretch;\n contain: none;\n}\n\n[internal-host] {\n border-radius: var(--border-radius);\n background: var(--background);\n color: var(--color);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: start;\n height: 100%;\n}\n\n#header {\n cursor: var(--cursor);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding: var(--header-padding);\n}\n\n
|
|
1
|
+
{"version":3,"file":"accordion.js","names":[],"sources":["../../src/accordion/accordion.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 --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n --background: var(--nve-sys-layer-container-background);\n --color: var(--nve-sys-layer-canvas-color);\n --border-radius: 0;\n --header-padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n --cursor: pointer;\n --transition: height var(--nve-ref-animation-duration-200) ease-in-out;\n width: 100%; /* fallback safari */\n width: stretch;\n contain: none;\n}\n\n[internal-host] {\n border-radius: var(--border-radius);\n background: var(--background);\n color: var(--color);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: start;\n height: 100%;\n}\n\n#header {\n cursor: var(--cursor);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding: var(--header-padding);\n}\n\n#content {\n display: block;\n height: 0;\n transition: var(--transition);\n}\n\n:host(:state(expanded)) #content {\n /* fallback for browsers that do not support intrinsic sizing keywords with calc-size() */\n height: auto;\n\n /* https://developer.chrome.com/docs/css-ui/animate-to-height-auto#animate_to_and_from_intrinsic_sizing_keywords_with_calc-size */\n height: calc-size(max-content, size);\n}\n\n:host([container='inset']) {\n --border-radius: var(--nve-ref-border-radius-md);\n}\n\n:host([container='flat']) {\n --background: inherit;\n}\n\n:host([disabled]) {\n --cursor: not-allowed;\n}\n\n:host([disabled]) ::slotted(nve-accordion-header) {\n --cursor: not-allowed;\n}\n\n:host(:not([disabled])) #header:hover nve-icon-button {\n --color: var(--nve-sys-text-emphasis-color);\n}\n\nnve-icon-button::part(icon) {\n transition: transform var(--nve-ref-animation-duration-200) cubic-bezier(0.4, 0, 0.2, 1);\n}\n"],"mappings":""}
|
|
@@ -8,7 +8,7 @@ import { TypeExpandableController as o } from "../internal/controllers/type-expa
|
|
|
8
8
|
import { hostAttr as s } from "../internal/decorators/host-attr.js";
|
|
9
9
|
import { scopedRegistry as c } from "../internal/decorators/scoped-registry.js";
|
|
10
10
|
import { useStyles as l } from "../internal/styles/index.js";
|
|
11
|
-
import { __decorate as u } from "../_virtual/_@oxc-project_runtime@0.
|
|
11
|
+
import { __decorate as u } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
|
|
12
12
|
import { IconButton as d } from "../icon-button/icon-button2.js";
|
|
13
13
|
import f from "./accordion.js";
|
|
14
14
|
import p from "./accordion-header.js";
|
|
@@ -28,11 +28,11 @@ var b = class extends g {
|
|
|
28
28
|
static {
|
|
29
29
|
this.metadata = {
|
|
30
30
|
tag: "nve-accordion-header",
|
|
31
|
-
version: "0.
|
|
31
|
+
version: "2.0.0"
|
|
32
32
|
};
|
|
33
33
|
}
|
|
34
34
|
render() {
|
|
35
|
-
return _`<div internal-host><slot name="prefix"></slot><
|
|
35
|
+
return _`<div internal-host><slot name="prefix"></slot><slot></slot><slot name="suffix"></slot></div>`;
|
|
36
36
|
}
|
|
37
37
|
connectedCallback() {
|
|
38
38
|
super.connectedCallback(), i(this), this._internals.role = "heading", this._internals.ariaLevel = "2";
|
|
@@ -46,7 +46,7 @@ var x = class extends g {
|
|
|
46
46
|
static {
|
|
47
47
|
this.metadata = {
|
|
48
48
|
tag: "nve-accordion-content",
|
|
49
|
-
version: "0.
|
|
49
|
+
version: "2.0.0"
|
|
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: "0.
|
|
65
|
+
version: "2.0.0",
|
|
66
66
|
children: [
|
|
67
67
|
b.metadata.tag,
|
|
68
68
|
x.metadata.tag,
|
|
@@ -76,22 +76,19 @@ var x = class extends g {
|
|
|
76
76
|
#e;
|
|
77
77
|
#t;
|
|
78
78
|
get #n() {
|
|
79
|
-
return !!(this?.querySelectorAll ? Array.from(this?.querySelectorAll("[slot=\"actions\"]")) : []).length;
|
|
80
|
-
}
|
|
81
|
-
get #r() {
|
|
82
79
|
return this.shadowRoot?.querySelector("slot[name=header]")?.assignedElements()[0];
|
|
83
80
|
}
|
|
84
|
-
#
|
|
81
|
+
#r(e) {
|
|
85
82
|
!this.disabled && (!n(e) || e.id === "internal-trigger") && this.#t.toggle();
|
|
86
83
|
}
|
|
87
84
|
render() {
|
|
88
|
-
return _`<div internal-host
|
|
85
|
+
return _`<div internal-host><div id="header" @click="${(e) => this.#r(e.target)}" .ariaLabel="${this.expanded ? this.i18n.close : this.i18n.expand}" .ariaControls="${"content"}"><slot name="header"></slot><slot name="icon-button"><nve-icon-button part="icon-button" exportparts="icon:icon-button-icon" id="internal-trigger" container="inline" icon-name="caret" direction="${this.expanded ? "up" : "down"}" ?disabled="${this.disabled}" ?pressed="${this.expanded}" .expanded="${this.expanded}" .ariaLabel="${this.expanded ? this.i18n.close : this.i18n.expand}"></nve-icon-button></slot></div><div id="content" .ariaHidden="${!this.expanded}"><slot></slot></div></div>`;
|
|
89
86
|
}
|
|
90
87
|
connectedCallback() {
|
|
91
88
|
super.connectedCallback(), i(this), this._internals.role = "region";
|
|
92
89
|
}
|
|
93
90
|
async firstUpdated(e) {
|
|
94
|
-
super.firstUpdated(e), this.#
|
|
91
|
+
super.firstUpdated(e), this.#n && (this.#n.id ||= r(), this.setAttribute("aria-labelledby", this.#n.id));
|
|
95
92
|
}
|
|
96
93
|
};
|
|
97
94
|
u([v({ type: Object })], S.prototype, "i18n", void 0), u([v({
|
|
@@ -123,7 +120,7 @@ var C = class extends g {
|
|
|
123
120
|
static {
|
|
124
121
|
this.metadata = {
|
|
125
122
|
tag: "nve-accordion-group",
|
|
126
|
-
version: "0.
|
|
123
|
+
version: "2.0.0",
|
|
127
124
|
children: [S.metadata.tag]
|
|
128
125
|
};
|
|
129
126
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion2.js","names":["#i18nController","#hasAction","#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 * @slot title - (deprecated)\n * @slot subtitle - (deprecated)\n * @slot actions - (deprecated)\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 <div id=\"titles\">\n <slot name=\"title\"></slot>\n <slot name=\"subtitle\"></slot>\n </div>\n <slot></slot>\n <div id=\"actions\">\n <slot name=\"actions\"></slot>\n </div>\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 #hasAction(): boolean {\n return !!(this?.querySelectorAll ? Array.from(this?.querySelectorAll<HTMLSlotElement>('[slot=\"actions\"]')) : [])\n .length;\n }\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 class=${this.#hasAction ? 'has-action' : ''}>\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 ? (this.#hasAction ? 'down' : 'up') : this.#hasAction ? 'right' : '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 * @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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"}
|
|
@@ -34,7 +34,7 @@ export declare class AlertGroup extends LitElement {
|
|
|
34
34
|
/** @private */
|
|
35
35
|
_internals: ElementInternals;
|
|
36
36
|
private alerts;
|
|
37
|
-
render(): import('lit
|
|
37
|
+
render(): import('lit').TemplateResult<1>;
|
|
38
38
|
connectedCallback(): void;
|
|
39
39
|
updated(props: PropertyValues<this>): void;
|
|
40
40
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { audit as e } from "../internal/controllers/audit.controller.js";
|
|
2
2
|
import { attachInternals as t } from "../internal/utils/a11y.js";
|
|
3
3
|
import { colorStateStyles as n, supportStateStyles as r, useStyles as i } from "../internal/styles/index.js";
|
|
4
|
-
import { __decorate as a } from "../_virtual/_@oxc-project_runtime@0.
|
|
4
|
+
import { __decorate as a } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
|
|
5
5
|
import { Alert as o } from "./alert2.js";
|
|
6
6
|
import s from "./alert-group.js";
|
|
7
7
|
import { LitElement as c, html as l } from "lit";
|
|
@@ -19,7 +19,7 @@ var f = class extends c {
|
|
|
19
19
|
static {
|
|
20
20
|
this.metadata = {
|
|
21
21
|
tag: "nve-alert-group",
|
|
22
|
-
version: "0.
|
|
22
|
+
version: "2.0.0",
|
|
23
23
|
children: [o.metadata.tag]
|
|
24
24
|
};
|
|
25
25
|
}
|
package/dist/alert/alert.d.ts
CHANGED
package/dist/alert/alert.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/alert/alert.css?inline
|
|
2
|
-
var e = ":host{--gap: var(--nve-ref-space-xs);--font-size: var(--nve-ref-font-size-100);--color: var(--nve-sys-text-emphasis-color);--icon-color: var(--status-color);--icon-size: var(--nve-ref-size-400);--font-weight: var(--nve-ref-font-weight-medium);--justify-content: start;--align-items: center;--min-height: initial;--text-transform: initial;width:auto}[internal-host]{--_icon-cancel-color: var(--color);font-weight:var(--font-weight);font-size:var(--font-size);gap:var(--gap);color:var(--color);justify-content:var(--justify-content);align-items:var(--align-items);text-transform:var(--text-transform);display:flex;line-height:1em;height:100%}slot[part=_content]{display:contents;padding-inline-start:var(--nve-ref-size-600);padding-block-end:var(--nve-ref-size-200)}slot{display:flex;align-items:center;justify-content:var(--justify-content);gap:var(--nve-ref-space-xxs);min-height:var(--min-height)}slot:not([name=actions],[name=prefix],[name=icon]){flex-grow:1}slot[name=prefix],slot[name=actions]{font-weight:var(--nve-ref-font-weight-semibold)}::slotted(nve-button[
|
|
2
|
+
var e = ":host{--gap: var(--nve-ref-space-xs);--font-size: var(--nve-ref-font-size-100);--color: var(--nve-sys-text-emphasis-color);--icon-color: var(--status-color);--icon-size: var(--nve-ref-size-400);--font-weight: var(--nve-ref-font-weight-medium);--justify-content: start;--align-items: center;--min-height: initial;--text-transform: initial;width:auto}[internal-host]{--_icon-cancel-color: var(--color);font-weight:var(--font-weight);font-size:var(--font-size);gap:var(--gap);color:var(--color);justify-content:var(--justify-content);align-items:var(--align-items);text-transform:var(--text-transform);display:flex;line-height:1em;height:100%}slot[part=_content]{display:contents;padding-inline-start:var(--nve-ref-size-600);padding-block-end:var(--nve-ref-size-200)}slot{display:flex;align-items:center;justify-content:var(--justify-content);gap:var(--nve-ref-space-xxs);min-height:var(--min-height)}slot:not([name=actions],[name=prefix],[name=icon]){flex-grow:1}slot[name=prefix],slot[name=actions]{font-weight:var(--nve-ref-font-weight-semibold)}::slotted(nve-button[container=\"flat\"]){--color: inherit}slot[name=actions]{margin-inline-start:auto}slot[name=prefix]{margin-inline-end:var(--nve-ref-space-lg)}nve-icon{--color: var(--icon-color)}nve-icon:not([size=sm]){--width: var(--icon-size);--height: var(--icon-size)}nve-icon[size=sm]{padding:var(--nve-ref-size-50)}nve-icon-button{--color: var(--icon-color);margin-inline-start:auto}::slotted([nve-text]){color:inherit!important}:host([status=\"success\"]),:host([status=\"danger\"]){--color: var(--status-color)}:host([status=\"scheduled\"]),:host([status=\"queued\"]),:host([status=\"pending\"]),:host([status=\"starting\"]),:host([status=\"running\"]),:host([status=\"restarting\"]),:host([status=\"stopping\"]),:host([status=\"finished\"]),:host([status=\"failed\"]),:host([status=\"unknown\"]),:host([status=\"ignored\"]){--color: var(--status-color)}::slotted([slot=\"actions\"]){--color: var(--status-color) !important}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
package/dist/alert/alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.js","names":[],"sources":["../../src/alert/alert.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 --gap: var(--nve-ref-space-xs);\n --font-size: var(--nve-ref-font-size-100);\n --color: var(--nve-sys-text-emphasis-color);\n --icon-color: var(--status-color);\n --icon-size: var(--nve-ref-size-400);\n --font-weight: var(--nve-ref-font-weight-medium);\n --justify-content: start;\n --align-items: center;\n --min-height: initial;\n --text-transform: initial;\n width: auto;\n}\n\n[internal-host] {\n --_icon-cancel-color: var(--color);\n font-weight: var(--font-weight);\n font-size: var(--font-size);\n gap: var(--gap);\n color: var(--color);\n justify-content: var(--justify-content);\n align-items: var(--align-items);\n text-transform: var(--text-transform);\n display: flex;\n line-height: 1em;\n height: 100%;\n}\n\nslot[part='_content'] {\n display: contents;\n padding-inline-start: var(--nve-ref-size-600);\n padding-block-end: var(--nve-ref-size-200);\n}\n\nslot {\n display: flex;\n align-items: center;\n justify-content: var(--justify-content);\n gap: var(--nve-ref-space-xxs);\n min-height: var(--min-height);\n}\n\nslot:not([name='actions'], [name='prefix'], [name='icon']) {\n flex-grow: 1;\n}\n\nslot[name='prefix'],\nslot[name='actions'] {\n font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n::slotted(nve-button[
|
|
1
|
+
{"version":3,"file":"alert.js","names":[],"sources":["../../src/alert/alert.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 --gap: var(--nve-ref-space-xs);\n --font-size: var(--nve-ref-font-size-100);\n --color: var(--nve-sys-text-emphasis-color);\n --icon-color: var(--status-color);\n --icon-size: var(--nve-ref-size-400);\n --font-weight: var(--nve-ref-font-weight-medium);\n --justify-content: start;\n --align-items: center;\n --min-height: initial;\n --text-transform: initial;\n width: auto;\n}\n\n[internal-host] {\n --_icon-cancel-color: var(--color);\n font-weight: var(--font-weight);\n font-size: var(--font-size);\n gap: var(--gap);\n color: var(--color);\n justify-content: var(--justify-content);\n align-items: var(--align-items);\n text-transform: var(--text-transform);\n display: flex;\n line-height: 1em;\n height: 100%;\n}\n\nslot[part='_content'] {\n display: contents;\n padding-inline-start: var(--nve-ref-size-600);\n padding-block-end: var(--nve-ref-size-200);\n}\n\nslot {\n display: flex;\n align-items: center;\n justify-content: var(--justify-content);\n gap: var(--nve-ref-space-xxs);\n min-height: var(--min-height);\n}\n\nslot:not([name='actions'], [name='prefix'], [name='icon']) {\n flex-grow: 1;\n}\n\nslot[name='prefix'],\nslot[name='actions'] {\n font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n::slotted(nve-button[container='flat']) {\n --color: inherit;\n}\n\nslot[name='actions'] {\n margin-inline-start: auto;\n}\n\nslot[name='prefix'] {\n margin-inline-end: var(--nve-ref-space-lg);\n}\n\nnve-icon {\n --color: var(--icon-color);\n}\n\nnve-icon:not([size='sm']) {\n --width: var(--icon-size);\n --height: var(--icon-size);\n}\n\nnve-icon[size='sm'] {\n padding: var(--nve-ref-size-50);\n}\n\nnve-icon-button {\n --color: var(--icon-color);\n margin-inline-start: auto;\n}\n\n::slotted([nve-text]) {\n color: inherit !important;\n}\n\n:host([status='success']),\n:host([status='danger']) {\n --color: var(--status-color);\n}\n\n:host([status='scheduled']),\n:host([status='queued']),\n:host([status='pending']),\n:host([status='starting']),\n:host([status='running']),\n:host([status='restarting']),\n:host([status='stopping']),\n:host([status='finished']),\n:host([status='failed']),\n:host([status='unknown']),\n:host([status='ignored']) {\n --color: var(--status-color);\n}\n\n::slotted([slot='actions']) {\n --color: var(--status-color) !important;\n}\n"],"mappings":""}
|
package/dist/alert/alert2.js
CHANGED
|
@@ -5,7 +5,7 @@ import { TypeClosableController as r } from "../internal/controllers/type-closab
|
|
|
5
5
|
import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
|
|
6
6
|
import { statusStateStyles as a, supportStateStyles as o, useStyles as s } from "../internal/styles/index.js";
|
|
7
7
|
import { statusIcons as c } from "../internal/types/index.js";
|
|
8
|
-
import { __decorate as l } from "../_virtual/_@oxc-project_runtime@0.
|
|
8
|
+
import { __decorate as l } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
|
|
9
9
|
import { Icon as u } from "../icon/icon2.js";
|
|
10
10
|
import { IconButton as d } from "../icon-button/icon-button2.js";
|
|
11
11
|
import f from "./alert.global.js";
|
|
@@ -28,7 +28,7 @@ var v = class extends m {
|
|
|
28
28
|
static {
|
|
29
29
|
this.metadata = {
|
|
30
30
|
tag: "nve-alert",
|
|
31
|
-
version: "0.
|
|
31
|
+
version: "2.0.0"
|
|
32
32
|
};
|
|
33
33
|
}
|
|
34
34
|
static {
|
package/dist/avatar/avatar.d.ts
CHANGED
package/dist/avatar/avatar2.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { colorStateStyles as e, useStyles as t } from "../internal/styles/index.js";
|
|
2
|
-
import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.
|
|
2
|
+
import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
|
|
3
3
|
import r from "./avatar.js";
|
|
4
4
|
import { LitElement as i, html as a } from "lit";
|
|
5
5
|
import { property as o } from "lit/decorators/property.js";
|
|
@@ -11,7 +11,7 @@ var s = class extends i {
|
|
|
11
11
|
static {
|
|
12
12
|
this.metadata = {
|
|
13
13
|
tag: "nve-avatar",
|
|
14
|
-
version: "0.
|
|
14
|
+
version: "2.0.0"
|
|
15
15
|
};
|
|
16
16
|
}
|
|
17
17
|
render() {
|
package/dist/badge/badge.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { PropertyValues, LitElement } from 'lit';
|
|
2
2
|
import { Icon } from '../icon';
|
|
3
|
-
import { TaskStatus, SupportStatus,
|
|
3
|
+
import { TaskStatus, SupportStatus, Color, Prominence } from '../internal';
|
|
4
4
|
/**
|
|
5
5
|
* @element nve-badge
|
|
6
6
|
* @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.
|
|
@@ -28,7 +28,7 @@ export declare class Badge extends LitElement {
|
|
|
28
28
|
/**
|
|
29
29
|
* Visual treatment to represent a ongoing task, support status.
|
|
30
30
|
*/
|
|
31
|
-
status: TaskStatus | SupportStatus
|
|
31
|
+
status: TaskStatus | SupportStatus;
|
|
32
32
|
/**
|
|
33
33
|
* Highlights content to draw attention and convey simple messages.
|
|
34
34
|
*/
|
|
@@ -55,7 +55,7 @@ export declare class Badge extends LitElement {
|
|
|
55
55
|
i18n: Partial<import('../internal').I18nStrings & {
|
|
56
56
|
__set: boolean;
|
|
57
57
|
}>;
|
|
58
|
-
render(): import('lit
|
|
58
|
+
render(): import('lit').TemplateResult<1>;
|
|
59
59
|
connectedCallback(): void;
|
|
60
60
|
updated(props: PropertyValues<this>): void;
|
|
61
61
|
}
|
package/dist/badge/badge.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/badge/badge.css?inline
|
|
2
|
-
var e = ":host{--background: var(--state-color-background);--color: var(--state-color);--gap: var(--nve-ref-space-xs);--font-size: var(--nve-ref-font-size-100);--icon-color: var(--color);--padding: 0 var(--nve-ref-size-200);--border: 0;--border-radius: var(--nve-ref-border-radius-sm);--font-weight: var(--nve-ref-font-weight-semibold);--text-transform: initial;--width: initial;--height: var(--nve-ref-size-600);display:inline-flex}[internal-host]{font-weight:var(--font-weight);font-size:var(--font-size);gap:var(--gap);background:var(--background);color:var(--color);padding:var(--padding);border:var(--border);border-radius:var(--border-radius);width:var(--width);height:var(--height);text-transform:var(--text-transform);display:inline-flex;line-height:1em;place-items:center}slot:not([name]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;line-height:1.15}:host([aria-label]) slot:not([name]){display:contents}::slotted([nve-text]){color:inherit!important}::slotted(a){margin:0!important;color:inherit!important;text-decoration:none!important;line-height:0!important}nve-icon,::slotted(nve-icon){--color: var(--icon-color);--width: var(--nve-ref-size-300);--height: var(--nve-ref-size-300)}:host([status]){--state-color-base: var(--status-color)}:host([
|
|
2
|
+
var e = ":host{--background: var(--state-color-background);--color: var(--state-color);--gap: var(--nve-ref-space-xs);--font-size: var(--nve-ref-font-size-100);--icon-color: var(--color);--padding: 0 var(--nve-ref-size-200);--border: 0;--border-radius: var(--nve-ref-border-radius-sm);--font-weight: var(--nve-ref-font-weight-semibold);--text-transform: initial;--width: initial;--height: var(--nve-ref-size-600);display:inline-flex}[internal-host]{font-weight:var(--font-weight);font-size:var(--font-size);gap:var(--gap);background:var(--background);color:var(--color);padding:var(--padding);border:var(--border);border-radius:var(--border-radius);width:var(--width);height:var(--height);text-transform:var(--text-transform);display:inline-flex;line-height:1em;place-items:center}slot:not([name]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;line-height:1.15}:host([aria-label]) slot:not([name]){display:contents}::slotted([nve-text]){color:inherit!important}::slotted(a){margin:0!important;color:inherit!important;text-decoration:none!important;line-height:0!important}nve-icon,::slotted(nve-icon){--color: var(--icon-color);--width: var(--nve-ref-size-300);--height: var(--nve-ref-size-300)}:host([status]){--state-color-base: var(--status-color)}:host([container=\"flat\"]){--background: var(--nve-sys-background-color);--border-radius: var(--nve-ref-border-radius-sm);--gap: var(--nve-ref-space-xs);--padding: 0;--text-transform: capitalize;--width: initial;--height: initial}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|