@nvidia-elements/core 2.0.4 → 2.1.1
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 +22 -0
- package/dist/_virtual/{_@oxc-project_runtime@0.133.0 → _@oxc-project_runtime@0.139.0}/helpers/esm/decorate.js +2 -2
- package/dist/accordion/accordion.d.ts +17 -12
- package/dist/accordion/accordion2.js +5 -5
- package/dist/accordion/accordion2.js.map +1 -1
- package/dist/accordion/define.d.ts +1 -1
- package/dist/alert/alert-group.d.ts +6 -4
- package/dist/alert/alert-group2.js +2 -2
- package/dist/alert/alert-group2.js.map +1 -1
- package/dist/alert/alert.d.ts +7 -6
- package/dist/alert/alert2.js +2 -2
- package/dist/alert/alert2.js.map +1 -1
- package/dist/alert/define.d.ts +1 -1
- package/dist/avatar/avatar-group.d.ts +2 -2
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar.d.ts +4 -3
- package/dist/avatar/avatar2.js +2 -2
- package/dist/avatar/avatar2.js.map +1 -1
- package/dist/avatar/define.d.ts +1 -1
- package/dist/badge/badge.d.ts +8 -6
- package/dist/badge/badge2.js +2 -2
- package/dist/badge/badge2.js.map +1 -1
- package/dist/badge/define.d.ts +1 -1
- package/dist/breadcrumb/breadcrumb.d.ts +5 -4
- package/dist/breadcrumb/breadcrumb2.js +2 -2
- package/dist/breadcrumb/breadcrumb2.js.map +1 -1
- package/dist/breadcrumb/define.d.ts +1 -1
- package/dist/bundle.d.ts +136 -67
- package/dist/bundles/index.d.ts +152 -0
- package/dist/bundles/index.js +4 -4
- package/dist/button/button.d.ts +5 -4
- package/dist/button/button2.js +2 -2
- package/dist/button/button2.js.map +1 -1
- package/dist/button/define.d.ts +1 -1
- package/dist/button-group/button-group.d.ts +6 -4
- package/dist/button-group/button-group2.js +2 -2
- package/dist/button-group/button-group2.js.map +1 -1
- package/dist/button-group/define.d.ts +1 -1
- package/dist/card/card.d.ts +13 -9
- package/dist/card/card2.js +5 -5
- package/dist/card/card2.js.map +1 -1
- package/dist/card/define.d.ts +1 -1
- package/dist/chat-message/chat-message.d.ts +4 -3
- package/dist/chat-message/chat-message2.js +2 -2
- package/dist/chat-message/chat-message2.js.map +1 -1
- package/dist/chat-message/define.d.ts +1 -1
- package/dist/checkbox/checkbox-group.d.ts +2 -2
- package/dist/checkbox/checkbox-group2.js +2 -2
- package/dist/checkbox/checkbox.d.ts +3 -2
- package/dist/checkbox/checkbox2.js +2 -2
- package/dist/checkbox/checkbox2.js.map +1 -1
- package/dist/checkbox/define.d.ts +1 -1
- package/dist/color/color.d.ts +6 -5
- package/dist/color/color2.js +2 -2
- package/dist/color/color2.js.map +1 -1
- package/dist/color/define.d.ts +1 -1
- package/dist/combobox/combobox.d.ts +13 -11
- package/dist/combobox/combobox2.js +2 -2
- package/dist/combobox/combobox2.js.map +1 -1
- package/dist/combobox/define.d.ts +1 -1
- package/dist/copy-button/copy-button.d.ts +8 -7
- package/dist/copy-button/copy-button2.js +2 -2
- package/dist/copy-button/copy-button2.js.map +1 -1
- package/dist/copy-button/define.d.ts +1 -1
- package/dist/custom-elements-jsx.d.ts +52 -0
- package/dist/custom-elements-vue.d.ts +52 -0
- package/dist/custom-elements.json +518 -1
- package/dist/data.html.json +388 -349
- package/dist/date/date.d.ts +6 -5
- package/dist/date/date2.js +2 -2
- package/dist/date/date2.js.map +1 -1
- package/dist/date/define.d.ts +1 -1
- package/dist/datetime/datetime.d.ts +6 -5
- package/dist/datetime/datetime2.js +2 -2
- package/dist/datetime/datetime2.js.map +1 -1
- package/dist/datetime/define.d.ts +1 -1
- package/dist/dialog/define.d.ts +1 -1
- package/dist/dialog/dialog-footer.d.ts +3 -2
- package/dist/dialog/dialog-footer2.js +2 -2
- package/dist/dialog/dialog-footer2.js.map +1 -1
- package/dist/dialog/dialog-header.d.ts +3 -2
- package/dist/dialog/dialog-header2.js +2 -2
- package/dist/dialog/dialog-header2.js.map +1 -1
- package/dist/dialog/dialog.d.ts +7 -5
- package/dist/dialog/dialog2.js +2 -2
- package/dist/dialog/dialog2.js.map +1 -1
- package/dist/divider/define.d.ts +1 -1
- package/dist/divider/divider.d.ts +5 -3
- package/dist/divider/divider2.js +2 -2
- package/dist/divider/divider2.js.map +1 -1
- package/dist/dot/define.d.ts +1 -1
- package/dist/dot/dot.d.ts +4 -3
- package/dist/dot/dot2.js +2 -2
- package/dist/dot/dot2.js.map +1 -1
- package/dist/drawer/define.d.ts +1 -1
- package/dist/drawer/drawer-content.d.ts +2 -2
- package/dist/drawer/drawer-content2.js +2 -2
- package/dist/drawer/drawer-footer.d.ts +3 -2
- package/dist/drawer/drawer-footer2.js +2 -2
- package/dist/drawer/drawer-footer2.js.map +1 -1
- package/dist/drawer/drawer-header.d.ts +3 -2
- package/dist/drawer/drawer-header2.js +2 -2
- package/dist/drawer/drawer-header2.js.map +1 -1
- package/dist/drawer/drawer.d.ts +7 -5
- package/dist/drawer/drawer2.js +2 -2
- package/dist/drawer/drawer2.js.map +1 -1
- package/dist/dropdown/define.d.ts +1 -1
- package/dist/dropdown/dropdown-footer.d.ts +3 -2
- package/dist/dropdown/dropdown-footer2.js +2 -2
- package/dist/dropdown/dropdown-footer2.js.map +1 -1
- package/dist/dropdown/dropdown-header.d.ts +3 -2
- package/dist/dropdown/dropdown-header2.js +2 -2
- package/dist/dropdown/dropdown-header2.js.map +1 -1
- package/dist/dropdown/dropdown.d.ts +7 -5
- package/dist/dropdown/dropdown2.js +2 -2
- package/dist/dropdown/dropdown2.js.map +1 -1
- package/dist/dropdown-group/define.d.ts +1 -1
- package/dist/dropdown-group/dropdown-group.d.ts +4 -3
- package/dist/dropdown-group/dropdown-group.js +2 -2
- package/dist/dropdown-group/dropdown-group.js.map +1 -1
- package/dist/dropzone/define.d.ts +1 -1
- package/dist/dropzone/dropzone.d.ts +13 -12
- package/dist/dropzone/dropzone.util.d.ts +1 -1
- package/dist/dropzone/dropzone.util.js.map +1 -1
- package/dist/dropzone/dropzone2.js +2 -2
- package/dist/dropzone/dropzone2.js.map +1 -1
- package/dist/file/define.d.ts +1 -1
- package/dist/file/file.d.ts +3 -2
- package/dist/file/file2.js +1 -1
- package/dist/file/file2.js.map +1 -1
- package/dist/format-datetime/define.d.ts +1 -1
- package/dist/format-datetime/format-datetime.d.ts +3 -2
- package/dist/format-datetime/format-datetime2.js +2 -2
- package/dist/format-datetime/format-datetime2.js.map +1 -1
- package/dist/format-number/define.d.ts +1 -1
- package/dist/format-number/format-number.d.ts +3 -2
- package/dist/format-number/format-number2.js +3 -3
- package/dist/format-number/format-number2.js.map +1 -1
- package/dist/format-relative-time/define.d.ts +1 -1
- package/dist/format-relative-time/format-relative-time.d.ts +3 -2
- package/dist/format-relative-time/format-relative-time2.js +2 -2
- package/dist/format-relative-time/format-relative-time2.js.map +1 -1
- package/dist/forms/control/control.d.ts +5 -3
- package/dist/forms/control/control2.js +2 -2
- package/dist/forms/control/control2.js.map +1 -1
- package/dist/forms/control-group/control-group.d.ts +5 -3
- package/dist/forms/control-group/control-group2.js +2 -2
- package/dist/forms/control-group/control-group2.js.map +1 -1
- package/dist/forms/control-message/control-message.d.ts +5 -4
- package/dist/forms/control-message/control-message2.js +2 -2
- package/dist/forms/control-message/control-message2.js.map +1 -1
- package/dist/forms/define.d.ts +1 -1
- package/dist/forms/utils/layout.d.ts +2 -2
- package/dist/forms/utils/layout.js +1 -1
- package/dist/forms/utils/layout.js.map +1 -1
- package/dist/forms/utils/states.d.ts +2 -2
- package/dist/forms/utils/states.js +1 -1
- package/dist/forms/utils/states.js.map +1 -1
- package/dist/gauge/define.d.ts +6 -0
- package/dist/gauge/define.js +7 -0
- package/dist/gauge/define.js.map +1 -0
- package/dist/gauge/gauge.d.ts +53 -0
- package/dist/gauge/gauge.examples.js +6 -0
- package/dist/gauge/gauge.examples.js.map +1 -0
- package/dist/gauge/gauge.examples.json +147 -0
- package/dist/gauge/gauge.js +6 -0
- package/dist/gauge/gauge.js.map +1 -0
- package/dist/gauge/gauge2.js +106 -0
- package/dist/gauge/gauge2.js.map +1 -0
- package/dist/gauge/index.d.ts +1 -0
- package/dist/gauge/index.js +2 -0
- package/dist/grid/cell/cell.d.ts +3 -2
- package/dist/grid/cell/cell2.js +1 -1
- package/dist/grid/cell/cell2.js.map +1 -1
- package/dist/grid/column/column.d.ts +5 -3
- package/dist/grid/column/column2.js +2 -2
- package/dist/grid/column/column2.js.map +1 -1
- package/dist/grid/define.d.ts +1 -1
- package/dist/grid/footer/footer.d.ts +2 -2
- package/dist/grid/footer/footer2.js +2 -2
- package/dist/grid/grid.d.ts +7 -5
- package/dist/grid/grid2.js +2 -2
- package/dist/grid/grid2.js.map +1 -1
- package/dist/grid/header/header.d.ts +5 -3
- package/dist/grid/header/header2.js +2 -2
- package/dist/grid/header/header2.js.map +1 -1
- package/dist/grid/placeholder/placeholder.d.ts +2 -2
- package/dist/grid/placeholder/placeholder2.js +1 -1
- package/dist/grid/row/row.d.ts +3 -2
- package/dist/grid/row/row2.js +2 -2
- package/dist/grid/row/row2.js.map +1 -1
- package/dist/icon/define.d.ts +1 -1
- package/dist/icon/icon.d.ts +7 -5
- package/dist/icon/icon2.js +3 -3
- package/dist/icon/icon2.js.map +1 -1
- package/dist/icon/icons.js.map +1 -1
- package/dist/icon-button/define.d.ts +1 -1
- package/dist/icon-button/icon-button.d.ts +7 -5
- package/dist/icon-button/icon-button2.js +2 -2
- package/dist/icon-button/icon-button2.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/input/define.d.ts +1 -1
- package/dist/input/input-group.d.ts +3 -2
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input-group2.js.map +1 -1
- package/dist/input/input.d.ts +4 -3
- package/dist/input/input2.js +2 -2
- package/dist/input/input2.js.map +1 -1
- package/dist/internal/controllers/audit.controller.d.ts +1 -1
- package/dist/internal/controllers/i18n.controller.d.ts +3 -3
- package/dist/internal/controllers/i18n.controller.js +1 -1
- package/dist/internal/controllers/i18n.controller.js.map +1 -1
- package/dist/internal/controllers/keynav-grid.controller.d.ts +1 -1
- package/dist/internal/controllers/keynav-grid.controller.js.map +1 -1
- package/dist/internal/controllers/keynav-list.controller.d.ts +1 -1
- package/dist/internal/controllers/keynav-list.controller.js.map +1 -1
- package/dist/internal/controllers/state-expanded.controller.d.ts +1 -1
- package/dist/internal/controllers/state-highlighted.controller.d.ts +1 -1
- package/dist/internal/controllers/state-scroll.controller.d.ts +1 -1
- package/dist/internal/controllers/state-selected.controller.d.ts +1 -1
- package/dist/internal/controllers/state-selected.controller.js.map +1 -1
- package/dist/internal/controllers/type-anchor.controller.d.ts +1 -1
- package/dist/internal/controllers/type-anchor.controller.js.map +1 -1
- package/dist/internal/controllers/type-closable.controller.d.ts +1 -1
- package/dist/internal/controllers/type-expandable.controller.d.ts +1 -1
- package/dist/internal/controllers/type-native-popover.controller.d.ts +2 -2
- package/dist/internal/controllers/type-native-popover.controller.js.map +1 -1
- package/dist/internal/controllers/type-native-popover.utils.js.map +1 -1
- package/dist/internal/controllers/type-selectable.controller.d.ts +1 -1
- package/dist/internal/controllers/type-ssr.controller.d.ts +1 -1
- package/dist/internal/controllers/type-ssr.controller.js.map +1 -1
- package/dist/internal/controllers/type-touch.controller.d.ts +2 -2
- package/dist/internal/controllers/type-touch.controller.js.map +1 -1
- package/dist/internal/decorators/host-attr.d.ts +2 -2
- package/dist/internal/services/global.service.d.ts +1 -1
- package/dist/internal/services/global.service.js +1 -1
- package/dist/internal/services/global.service.js.map +1 -1
- package/dist/internal/services/global.utils.js.map +1 -1
- package/dist/internal/services/i18n.service.js.map +1 -1
- package/dist/internal/services/transition.service.js.map +1 -1
- package/dist/internal/styles/index.d.ts +1 -1
- package/dist/internal/types/index.d.ts +3 -3
- package/dist/internal/utils/a11y.js.map +1 -1
- package/dist/internal/utils/audit-logs.js +1 -1
- package/dist/internal/utils/audit.js.map +1 -1
- package/dist/internal/utils/dom.d.ts +1 -1
- package/dist/internal/utils/dom.js +10 -10
- package/dist/internal/utils/dom.js.map +1 -1
- package/dist/internal/utils/focus.js.map +1 -1
- package/dist/internal/utils/objects.js.map +1 -1
- package/dist/internal/utils/strings.js +1 -1
- package/dist/internal/utils/strings.js.map +1 -1
- package/dist/logo/define.d.ts +1 -1
- package/dist/logo/logo.d.ts +4 -3
- package/dist/logo/logo2.js +2 -2
- package/dist/logo/logo2.js.map +1 -1
- package/dist/menu/define.d.ts +1 -1
- package/dist/menu/menu-item.d.ts +4 -3
- package/dist/menu/menu-item2.js +2 -2
- package/dist/menu/menu-item2.js.map +1 -1
- package/dist/menu/menu.d.ts +5 -4
- package/dist/menu/menu2.js +2 -2
- package/dist/menu/menu2.js.map +1 -1
- package/dist/month/define.d.ts +1 -1
- package/dist/month/month.d.ts +6 -5
- package/dist/month/month2.js +2 -2
- package/dist/month/month2.js.map +1 -1
- package/dist/notification/define.d.ts +1 -1
- package/dist/notification/notification-group.d.ts +5 -3
- package/dist/notification/notification-group2.js +2 -2
- package/dist/notification/notification-group2.js.map +1 -1
- package/dist/notification/notification.d.ts +10 -7
- package/dist/notification/notification2.js +2 -2
- package/dist/notification/notification2.js.map +1 -1
- package/dist/page/define.d.ts +1 -1
- package/dist/page/page-panel/page-panel-content.d.ts +3 -2
- 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 +3 -2
- package/dist/page/page-panel/page-panel-footer2.js +2 -2
- package/dist/page/page-panel/page-panel-footer2.js.map +1 -1
- package/dist/page/page-panel/page-panel-header.d.ts +3 -2
- package/dist/page/page-panel/page-panel-header2.js +2 -2
- package/dist/page/page-panel/page-panel-header2.js.map +1 -1
- package/dist/page/page-panel/page-panel.d.ts +5 -4
- package/dist/page/page-panel/page-panel2.js +2 -2
- package/dist/page/page-panel/page-panel2.js.map +1 -1
- package/dist/page/page.d.ts +3 -2
- package/dist/page/page2.js +2 -2
- package/dist/page/page2.js.map +1 -1
- package/dist/page-header/define.d.ts +1 -1
- package/dist/page-header/page-header.d.ts +3 -2
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-header/page-header2.js.map +1 -1
- package/dist/page-loader/define.d.ts +1 -1
- package/dist/page-loader/page-loader.d.ts +6 -4
- package/dist/page-loader/page-loader2.js +2 -2
- package/dist/page-loader/page-loader2.js.map +1 -1
- package/dist/pagination/define.d.ts +1 -1
- package/dist/pagination/pagination.d.ts +9 -8
- package/dist/pagination/pagination2.js +2 -2
- package/dist/pagination/pagination2.js.map +1 -1
- package/dist/panel/define.d.ts +1 -1
- package/dist/panel/panel.d.ts +14 -10
- package/dist/panel/panel2.js +5 -5
- package/dist/panel/panel2.js.map +1 -1
- package/dist/password/define.d.ts +1 -1
- package/dist/password/password.d.ts +6 -5
- package/dist/password/password2.js +2 -2
- package/dist/password/password2.js.map +1 -1
- package/dist/polyfills/custom-state-set.js.map +1 -1
- package/dist/polyfills/index.d.ts +13 -0
- package/dist/preferences-input/define.d.ts +1 -1
- package/dist/preferences-input/preferences-input.d.ts +14 -13
- package/dist/preferences-input/preferences-input2.js +2 -2
- package/dist/preferences-input/preferences-input2.js.map +1 -1
- package/dist/progress-bar/define.d.ts +1 -1
- package/dist/progress-bar/progress-bar.d.ts +4 -3
- package/dist/progress-bar/progress-bar2.js +2 -2
- package/dist/progress-bar/progress-bar2.js.map +1 -1
- package/dist/progress-ring/define.d.ts +1 -1
- package/dist/progress-ring/progress-ring.d.ts +8 -6
- package/dist/progress-ring/progress-ring2.js +4 -4
- package/dist/progress-ring/progress-ring2.js.map +1 -1
- package/dist/progressive-filter-chip/define.d.ts +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip.d.ts +8 -7
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +2 -2
- package/dist/progressive-filter-chip/progressive-filter-chip2.js.map +1 -1
- package/dist/pulse/define.d.ts +1 -1
- package/dist/pulse/pulse.d.ts +5 -4
- package/dist/pulse/pulse2.js +2 -2
- package/dist/pulse/pulse2.js.map +1 -1
- package/dist/radio/define.d.ts +1 -1
- package/dist/radio/radio-group.d.ts +2 -2
- package/dist/radio/radio-group2.js +2 -2
- package/dist/radio/radio.d.ts +3 -2
- package/dist/radio/radio2.js +2 -2
- package/dist/radio/radio2.js.map +1 -1
- package/dist/range/define.d.ts +1 -1
- package/dist/range/range.d.ts +6 -4
- package/dist/range/range2.js +2 -2
- package/dist/range/range2.js.map +1 -1
- package/dist/resize-handle/define.d.ts +1 -1
- package/dist/resize-handle/resize-handle.d.ts +7 -6
- package/dist/resize-handle/resize-handle2.js +2 -2
- package/dist/resize-handle/resize-handle2.js.map +1 -1
- package/dist/search/define.d.ts +1 -1
- package/dist/search/search.d.ts +6 -5
- package/dist/search/search2.js +2 -2
- package/dist/search/search2.js.map +1 -1
- package/dist/select/define.d.ts +1 -1
- package/dist/select/select.d.ts +12 -10
- package/dist/select/select2.js +2 -2
- package/dist/select/select2.js.map +1 -1
- package/dist/skeleton/define.d.ts +1 -1
- package/dist/skeleton/skeleton.d.ts +4 -3
- package/dist/skeleton/skeleton2.js +2 -2
- package/dist/skeleton/skeleton2.js.map +1 -1
- package/dist/sort-button/define.d.ts +1 -1
- package/dist/sort-button/sort-button.d.ts +6 -5
- package/dist/sort-button/sort-button2.js +2 -2
- package/dist/sort-button/sort-button2.js.map +1 -1
- package/dist/sparkline/define.d.ts +1 -1
- package/dist/sparkline/sparkline.d.ts +6 -4
- package/dist/sparkline/sparkline.utils.d.ts +1 -1
- package/dist/sparkline/sparkline.utils.js.map +1 -1
- package/dist/sparkline/sparkline2.js +2 -2
- package/dist/sparkline/sparkline2.js.map +1 -1
- package/dist/star-rating/define.d.ts +1 -1
- package/dist/star-rating/star-rating.d.ts +6 -5
- package/dist/star-rating/star-rating2.js +2 -2
- package/dist/star-rating/star-rating2.js.map +1 -1
- package/dist/steps/define.d.ts +1 -1
- package/dist/steps/steps.d.ts +12 -9
- package/dist/steps/steps2.js +3 -3
- package/dist/steps/steps2.js.map +1 -1
- package/dist/switch/define.d.ts +1 -1
- package/dist/switch/switch-group.d.ts +2 -2
- package/dist/switch/switch-group2.js +2 -2
- package/dist/switch/switch.d.ts +3 -2
- package/dist/switch/switch2.js +2 -2
- package/dist/switch/switch2.js.map +1 -1
- package/dist/tabs/define.d.ts +1 -1
- package/dist/tabs/tabs-group.d.ts +5 -3
- package/dist/tabs/tabs-group2.js +2 -2
- package/dist/tabs/tabs-group2.js.map +1 -1
- package/dist/tabs/tabs.d.ts +10 -7
- package/dist/tabs/tabs2.js +3 -3
- package/dist/tabs/tabs2.js.map +1 -1
- package/dist/tag/define.d.ts +1 -1
- package/dist/tag/tag.d.ts +7 -6
- package/dist/tag/tag2.js +2 -2
- package/dist/tag/tag2.js.map +1 -1
- package/dist/textarea/define.d.ts +1 -1
- package/dist/textarea/textarea.d.ts +3 -2
- package/dist/textarea/textarea2.js +1 -1
- package/dist/textarea/textarea2.js.map +1 -1
- package/dist/time/define.d.ts +1 -1
- package/dist/time/time.d.ts +6 -5
- package/dist/time/time2.js +2 -2
- package/dist/time/time2.js.map +1 -1
- package/dist/toast/define.d.ts +1 -1
- package/dist/toast/toast.d.ts +8 -6
- package/dist/toast/toast2.js +2 -2
- package/dist/toast/toast2.js.map +1 -1
- package/dist/toggletip/define.d.ts +1 -1
- package/dist/toggletip/toggletip-footer.d.ts +3 -2
- package/dist/toggletip/toggletip-footer2.js +2 -2
- package/dist/toggletip/toggletip-footer2.js.map +1 -1
- package/dist/toggletip/toggletip-header.d.ts +3 -2
- package/dist/toggletip/toggletip-header2.js +2 -2
- package/dist/toggletip/toggletip-header2.js.map +1 -1
- package/dist/toggletip/toggletip.d.ts +7 -5
- package/dist/toggletip/toggletip2.js +2 -2
- package/dist/toggletip/toggletip2.js.map +1 -1
- package/dist/toolbar/define.d.ts +1 -1
- package/dist/toolbar/toolbar.d.ts +6 -4
- package/dist/toolbar/toolbar2.js +2 -2
- package/dist/toolbar/toolbar2.js.map +1 -1
- package/dist/tooltip/define.d.ts +1 -1
- package/dist/tooltip/tooltip.d.ts +5 -3
- package/dist/tooltip/tooltip2.js +2 -2
- package/dist/tooltip/tooltip2.js.map +1 -1
- package/dist/tree/define.d.ts +1 -1
- package/dist/tree/tree-node.d.ts +7 -6
- package/dist/tree/tree-node2.js +2 -2
- package/dist/tree/tree-node2.js.map +1 -1
- package/dist/tree/tree.d.ts +6 -4
- package/dist/tree/tree2.js +2 -2
- package/dist/tree/tree2.js.map +1 -1
- package/dist/week/define.d.ts +1 -1
- package/dist/week/week.d.ts +6 -5
- package/dist/week/week2.js +2 -2
- package/dist/week/week2.js.map +1 -1
- package/package.json +23 -11
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch2.js","names":[],"sources":["../../src/switch/switch.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './switch.css?inline';\n\n/**\n * @element nve-switch\n * @description A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/switch\n * @cssprop --cursor\n * @cssprop --border-radius\n * @cssprop --border-width\n * @cssprop --border\n * @cssprop --background\n * @cssprop --width\n * @cssprop --height\n * @cssprop --anchor-width\n * @cssprop --anchor-height\n * @cssprop --anchor-border-radius\n * @cssprop --anchor-background\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n */\n@audit()\nexport class Switch extends Control {\n @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-switch',\n version: '0.0.0',\n children: ['label', 'input', 'nve-control-message']\n };\n}\n"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"switch2.js","names":[],"sources":["../../src/switch/switch.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './switch.css?inline';\n\n/**\n * @element nve-switch\n * @description A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.\n * @documentation https://nvidia.github.io/elements/docs/elements/switch/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/switch\n * @cssprop --cursor\n * @cssprop --border-radius\n * @cssprop --border-width\n * @cssprop --border\n * @cssprop --background\n * @cssprop --width\n * @cssprop --height\n * @cssprop --anchor-width\n * @cssprop --anchor-height\n * @cssprop --anchor-border-radius\n * @cssprop --anchor-background\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n */\n@audit()\nexport class Switch extends Control {\n @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-switch',\n version: '0.0.0',\n children: ['label', 'input', 'nve-control-message']\n };\n}\n"],"mappings":";;;;;;;AA6BO,IAAA,IAAA,cAAqB,EAAQ;;iCAC6B;;;gBAElC,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAS;GAAqB;EACpD;;AACF;GATG,EAAS,EAAE,WAAW,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,UAFvC,EAAM,CAAA,GAAA,CAAA"}
|
package/dist/tabs/define.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import { PropertyValues
|
|
1
|
+
import type { PropertyValues } from 'lit';
|
|
2
|
+
import { LitElement } from 'lit';
|
|
2
3
|
/** Arranges the tab strip and slot-matched panels: stacked column (`top`), or sidebar row with tabs at inline-start (`start`) or inline-end (`end`). */
|
|
3
4
|
export type TabsGroupAlignment = 'top' | 'start' | 'end';
|
|
4
5
|
/**
|
|
5
6
|
* @element nve-tabs-group
|
|
6
7
|
* @description Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.
|
|
8
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/tabs/
|
|
7
9
|
* @since 1.67.0
|
|
8
10
|
* @entrypoint \@nvidia-elements/core/tabs
|
|
9
11
|
* @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.
|
|
@@ -16,7 +18,7 @@ export type TabsGroupAlignment = 'top' | 'start' | 'end';
|
|
|
16
18
|
*/
|
|
17
19
|
export declare class TabsGroup extends LitElement {
|
|
18
20
|
#private;
|
|
19
|
-
static styles: import(
|
|
21
|
+
static styles: import("lit").CSSResult[];
|
|
20
22
|
static readonly metadata: {
|
|
21
23
|
tag: string;
|
|
22
24
|
version: string;
|
|
@@ -43,7 +45,7 @@ export declare class TabsGroup extends LitElement {
|
|
|
43
45
|
* Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable
|
|
44
46
|
* `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.
|
|
45
47
|
*/
|
|
46
|
-
render(): import(
|
|
48
|
+
render(): import("lit").TemplateResult<1>;
|
|
47
49
|
connectedCallback(): void;
|
|
48
50
|
firstUpdated(): void;
|
|
49
51
|
disconnectedCallback(): void;
|
package/dist/tabs/tabs-group2.js
CHANGED
|
@@ -2,7 +2,7 @@ import { audit as e } from "../internal/controllers/audit.controller.js";
|
|
|
2
2
|
import { generateId as t, sameOrderedStringArray as n, uniqueNonEmptyStrings as r } from "../internal/utils/dom.js";
|
|
3
3
|
import { attachInternals as i } from "../internal/utils/a11y.js";
|
|
4
4
|
import { useStyles as a } from "../internal/styles/index.js";
|
|
5
|
-
import
|
|
5
|
+
import o from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
6
6
|
import { Tabs as s } from "./tabs2.js";
|
|
7
7
|
import c from "./tabs-group.js";
|
|
8
8
|
import { LitElement as l, html as u } from "lit";
|
|
@@ -33,7 +33,7 @@ var m, h = class extends l {
|
|
|
33
33
|
static {
|
|
34
34
|
this.metadata = {
|
|
35
35
|
tag: "nve-tabs-group",
|
|
36
|
-
version: "2.
|
|
36
|
+
version: "2.1.1",
|
|
37
37
|
children: ["nve-tabs"]
|
|
38
38
|
};
|
|
39
39
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs-group2.js","names":["#observeTabs","#syncFromTabs","#syncPanels","#getTabItems","#isSelectableTab","#setActiveTab","#handleDefaultSlotChange","#handlePanelSlotChange","#handleCommand","#tabsObserver","#getTabsElement","#resolveSelectedTab","#commitState","#getPanelSlots","#syncPanelSlot"],"sources":["../../src/tabs/tabs-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 { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n attachInternals,\n audit,\n generateId,\n sameOrderedStringArray,\n uniqueNonEmptyStrings,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { Tabs, type TabsItem } from './tabs.js';\nimport styles from './tabs-group.css?inline';\n\n/** Invoker command source for `--toggle` (e.g. `nve-tabs-item` with `value`). */\ntype TabsGroupCommandSource = HTMLElement & {\n disabled?: boolean;\n value?: string | null;\n};\n\n/** `command` event from Invoker Commands; `source` is the control that fired. */\ntype TabsGroupCommandEvent = Event & {\n command?: string;\n source?: TabsGroupCommandSource | null;\n};\n\n/** Payload for the composed `select` event when the active tab value changes via command. */\ntype TabsGroupSelectDetail = { value: string };\n\n/** Arranges the tab strip and slot-matched panels: stacked column (`top`), or sidebar row with tabs at inline-start (`start`) or inline-end (`end`). */\nexport type TabsGroupAlignment = 'top' | 'start' | 'end';\n\n/**\n * @element nve-tabs-group\n * @description Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.\n * @since 1.67.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.\n * @event select - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection\n * @slot - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.\n * @slot {value} - Named panel content where the slot name matches a nve-tabs-item value.\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\nexport class TabsGroup extends LitElement {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-tabs-group',\n version: '0.0.0',\n children: ['nve-tabs']\n };\n\n /** Options for observing the slotted `nve-tabs` subtree (tab list / item attribute changes). */\n protected static readonly subtreeObserverInit = {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['disabled', 'id', 'selected', 'value']\n } as const satisfies MutationObserverInit;\n\n @queryAssignedElements({ flatten: true }) private defaultSlotElements!: HTMLElement[];\n\n /**\n * Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at\n * inline-start (`start`) or inline-end (`end`) beside the panel region.\n */\n @property({ type: String, reflect: true }) alignment: TabsGroupAlignment = 'top';\n\n @state() private panelValues: string[] = [];\n\n @state() private selectedValue = '';\n\n /** @private */\n declare _internals: ElementInternals;\n\n #tabsObserver?: MutationObserver;\n\n /**\n * Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable\n * `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.\n */\n render() {\n return html`\n <div internal-host>\n <slot @slotchange=${this.#handleDefaultSlotChange}></slot>\n ${this.panelValues.map(value => html`<slot name=${value} @slotchange=${this.#handlePanelSlotChange}></slot>`)}\n </div>\n `;\n }\n\n // --- Lifecycle & command ---\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'group';\n this.addEventListener('command', this.#handleCommand as EventListener);\n }\n\n firstUpdated() {\n void this.updateComplete.then(() => {\n if (!this.isConnected) {\n return;\n }\n\n this.#syncFromTabs();\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('command', this.#handleCommand as EventListener);\n this.#tabsObserver?.disconnect();\n }\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (!this.#tabsObserver) {\n this.#observeTabs();\n }\n\n // `@state()` fields are not in `PropertyValues<this>` keys; cast for membership checks.\n const props = changedProperties as ReadonlyMap<PropertyKey, unknown>;\n if (props.has('panelValues') || props.has('selectedValue')) {\n this.#syncPanels();\n }\n }\n\n #handleDefaultSlotChange = (): void => {\n this.#observeTabs();\n this.#syncFromTabs();\n };\n\n #handlePanelSlotChange = (): void => {\n this.#syncPanels();\n };\n\n /**\n * Handles Invoker `--toggle` on a tab item: selects the matching `nve-tabs-item` and syncs panels.\n * Ignores non-toggle commands and invokers without a non-empty string `value`.\n */\n #handleCommand = (event: TabsGroupCommandEvent): void => {\n if (event.command !== '--toggle') {\n return;\n }\n\n const value = event.source?.value;\n if (typeof value !== 'string' || !value.length) {\n return;\n }\n\n const tabItems = this.#getTabItems();\n const tabItem = tabItems.find(item => this.#isSelectableTab(item) && item.value === value);\n if (!tabItem) {\n return;\n }\n\n this.#setActiveTab(tabItems, tabItem, { emitEvent: true });\n };\n\n // --- Tab strip sync (tabs → state) ---\n\n /** Attaches a single `MutationObserver` on the slotted `nve-tabs` element to mirror tab list changes into state. */\n #observeTabs(): void {\n this.#tabsObserver?.disconnect();\n\n const tabs = this.#getTabsElement();\n if (!tabs) {\n return;\n }\n\n this.#tabsObserver = new MutationObserver(() => this.#syncFromTabs());\n this.#tabsObserver.observe(tabs, TabsGroup.subtreeObserverInit);\n }\n\n /**\n * Reads the current tab items: derives ordered `panelValues` for render, resolves which tab should be active,\n * and commits selection. Called on slot change, subtree mutations, and after mount.\n */\n #syncFromTabs(): void {\n const tabItems = this.#getTabItems();\n const nextPanelValues = uniqueNonEmptyStrings(tabItems.map(item => item.value));\n\n const selectedTab = this.#resolveSelectedTab(tabItems);\n\n if (!selectedTab) {\n tabItems.forEach(item => (item.selected = false));\n this.#commitState(nextPanelValues, '');\n return;\n }\n\n this.#setActiveTab(tabItems, selectedTab, { emitEvent: false, nextPanelValues });\n }\n\n /**\n * Sets exactly one selected tab, updates `panelValues` / `selectedValue`, and optionally dispatches `select`.\n *\n * @param emitEvent - When true (command path), dispatches `select` if selection actually changed.\n */\n #setActiveTab(\n tabItems: TabsItem[],\n nextTab: TabsItem,\n options: { emitEvent: boolean; nextPanelValues?: string[] }\n ): void {\n const { emitEvent } = options;\n const nextPanelValues = options.nextPanelValues ?? uniqueNonEmptyStrings(tabItems.map(item => item.value));\n // True when the effective selection differs from the prior committed state (value, flags, or multi-select).\n // `select` is only dispatched when both `emitEvent` (invoker/command path) and `changed` are true.\n const changed =\n this.selectedValue !== nextTab.value ||\n !nextTab.selected ||\n tabItems.some(item => item !== nextTab && item.selected);\n\n tabItems.forEach(item => {\n item.selected = item === nextTab;\n });\n\n this.#commitState(nextPanelValues, nextTab.value);\n\n if (emitEvent && changed) {\n this.dispatchEvent(\n new CustomEvent<TabsGroupSelectDetail>('select', {\n bubbles: true,\n composed: true,\n detail: { value: nextTab.value }\n })\n );\n }\n }\n\n /** Updates reactive state for panel slot names and the active tab value without touching the tab items. */\n #commitState(nextPanelValues: string[], nextSelectedValue: string): void {\n if (!sameOrderedStringArray(this.panelValues, nextPanelValues)) {\n this.panelValues = nextPanelValues;\n }\n\n if (this.selectedValue !== nextSelectedValue) {\n this.selectedValue = nextSelectedValue;\n }\n }\n\n // --- Panel sync (state → panels & ARIA) ---\n\n /** For each named panel slot, wires `hidden` and tab↔panel ARIA ids to match `selectedValue`. */\n #syncPanels(): void {\n const tabItems = this.#getTabItems();\n const tabMap = new Map(\n tabItems.filter(item => this.#isSelectableTab(item)).map(item => [item.value, item] satisfies [string, TabsItem])\n );\n\n this.#getPanelSlots().forEach(slot => {\n this.#syncPanelSlot(slot, tabMap);\n });\n }\n\n /**\n * If no selectable tab exists for `slot.name`, hides all assigned nodes. Otherwise shows only the panel(s)\n * for the active value and assigns `role=\"tabpanel\"` / `aria-labelledby` when missing.\n */\n #syncPanelSlot(slot: HTMLSlotElement, tabMap: ReadonlyMap<string, TabsItem>): void {\n const tabItem = tabMap.get(slot.name);\n const panels = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n if (!tabItem) {\n panels.forEach(panel => {\n panel.hidden = true;\n });\n return;\n }\n\n tabItem.id ||= generateId();\n\n panels.forEach((panel, index) => {\n panel.id ||= generateId();\n\n if (!tabItem.hasAttribute('aria-controls') && index === 0) {\n tabItem.setAttribute('aria-controls', panel.id);\n }\n\n if (!panel.hasAttribute('aria-labelledby')) {\n panel.setAttribute('aria-labelledby', tabItem.id);\n }\n\n if (!panel.hasAttribute('role')) {\n panel.setAttribute('role', 'tabpanel');\n }\n\n const isActive = slot.name === this.selectedValue;\n panel.hidden = !isActive;\n });\n }\n\n // --- DOM queries ---\n\n /** Resolves the single slotted `nve-tabs` (default slot), with a light-DOM fallback for edge timing. */\n #getTabsElement(): Tabs | undefined {\n const el =\n this.defaultSlotElements.find(element => element.localName === Tabs.metadata.tag) ??\n this.querySelector(Tabs.metadata.tag);\n return el instanceof Tabs ? el : undefined;\n }\n\n #getTabItems(): TabsItem[] {\n return Array.from(this.#getTabsElement()?.querySelectorAll<TabsItem>('nve-tabs-item') ?? []);\n }\n\n #getPanelSlots(): HTMLSlotElement[] {\n return Array.from(this.renderRoot.querySelectorAll<HTMLSlotElement>('slot[name]'));\n }\n\n /** Selectable tabs have a non-empty `value` and are not `disabled`. */\n #isSelectableTab(tabItem: TabsItem): tabItem is TabsItem & { value: string } {\n return typeof tabItem.value === 'string' && tabItem.value.length > 0 && !tabItem.disabled;\n }\n\n /** Prefer the selectable tab that is already selected; otherwise the first selectable tab. */\n #resolveSelectedTab(tabItems: readonly TabsItem[]): TabsItem | undefined {\n return (\n tabItems.find(item => this.#isSelectableTab(item) && item.selected) ??\n tabItems.find(item => this.#isSelectableTab(item))\n );\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabs-group2.js","names":["#observeTabs","#syncFromTabs","#syncPanels","#getTabItems","#isSelectableTab","#setActiveTab","#handleDefaultSlotChange","#handlePanelSlotChange","#handleCommand","#tabsObserver","#getTabsElement","#resolveSelectedTab","#commitState","#getPanelSlots","#syncPanelSlot"],"sources":["../../src/tabs/tabs-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 { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n attachInternals,\n audit,\n generateId,\n sameOrderedStringArray,\n uniqueNonEmptyStrings,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { Tabs, type TabsItem } from './tabs.js';\nimport styles from './tabs-group.css?inline';\n\n/** Invoker command source for `--toggle` (e.g. `nve-tabs-item` with `value`). */\ntype TabsGroupCommandSource = HTMLElement & {\n disabled?: boolean;\n value?: string | null;\n};\n\n/** `command` event from Invoker Commands; `source` is the control that fired. */\ntype TabsGroupCommandEvent = Event & {\n command?: string;\n source?: TabsGroupCommandSource | null;\n};\n\n/** Payload for the composed `select` event when the active tab value changes via command. */\ntype TabsGroupSelectDetail = { value: string };\n\n/** Arranges the tab strip and slot-matched panels: stacked column (`top`), or sidebar row with tabs at inline-start (`start`) or inline-end (`end`). */\nexport type TabsGroupAlignment = 'top' | 'start' | 'end';\n\n/**\n * @element nve-tabs-group\n * @description Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.\n * @documentation https://nvidia.github.io/elements/docs/elements/tabs/\n * @since 1.67.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.\n * @event select - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection\n * @slot - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.\n * @slot {value} - Named panel content where the slot name matches a nve-tabs-item value.\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\nexport class TabsGroup extends LitElement {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-tabs-group',\n version: '0.0.0',\n children: ['nve-tabs']\n };\n\n /** Options for observing the slotted `nve-tabs` subtree (tab list / item attribute changes). */\n protected static readonly subtreeObserverInit = {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['disabled', 'id', 'selected', 'value']\n } as const satisfies MutationObserverInit;\n\n @queryAssignedElements({ flatten: true }) private defaultSlotElements!: HTMLElement[];\n\n /**\n * Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at\n * inline-start (`start`) or inline-end (`end`) beside the panel region.\n */\n @property({ type: String, reflect: true }) alignment: TabsGroupAlignment = 'top';\n\n @state() private panelValues: string[] = [];\n\n @state() private selectedValue = '';\n\n /** @private */\n declare _internals: ElementInternals;\n\n #tabsObserver?: MutationObserver;\n\n /**\n * Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable\n * `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.\n */\n render() {\n return html`\n <div internal-host>\n <slot @slotchange=${this.#handleDefaultSlotChange}></slot>\n ${this.panelValues.map(value => html`<slot name=${value} @slotchange=${this.#handlePanelSlotChange}></slot>`)}\n </div>\n `;\n }\n\n // --- Lifecycle & command ---\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'group';\n this.addEventListener('command', this.#handleCommand as EventListener);\n }\n\n firstUpdated() {\n void this.updateComplete.then(() => {\n if (!this.isConnected) {\n return;\n }\n\n this.#syncFromTabs();\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('command', this.#handleCommand as EventListener);\n this.#tabsObserver?.disconnect();\n }\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (!this.#tabsObserver) {\n this.#observeTabs();\n }\n\n // `@state()` fields are not in `PropertyValues<this>` keys; cast for membership checks.\n const props = changedProperties as ReadonlyMap<PropertyKey, unknown>;\n if (props.has('panelValues') || props.has('selectedValue')) {\n this.#syncPanels();\n }\n }\n\n #handleDefaultSlotChange = (): void => {\n this.#observeTabs();\n this.#syncFromTabs();\n };\n\n #handlePanelSlotChange = (): void => {\n this.#syncPanels();\n };\n\n /**\n * Handles Invoker `--toggle` on a tab item: selects the matching `nve-tabs-item` and syncs panels.\n * Ignores non-toggle commands and invokers without a non-empty string `value`.\n */\n #handleCommand = (event: TabsGroupCommandEvent): void => {\n if (event.command !== '--toggle') {\n return;\n }\n\n const value = event.source?.value;\n if (typeof value !== 'string' || !value.length) {\n return;\n }\n\n const tabItems = this.#getTabItems();\n const tabItem = tabItems.find(item => this.#isSelectableTab(item) && item.value === value);\n if (!tabItem) {\n return;\n }\n\n this.#setActiveTab(tabItems, tabItem, { emitEvent: true });\n };\n\n // --- Tab strip sync (tabs → state) ---\n\n /** Attaches a single `MutationObserver` on the slotted `nve-tabs` element to mirror tab list changes into state. */\n #observeTabs(): void {\n this.#tabsObserver?.disconnect();\n\n const tabs = this.#getTabsElement();\n if (!tabs) {\n return;\n }\n\n this.#tabsObserver = new MutationObserver(() => this.#syncFromTabs());\n this.#tabsObserver.observe(tabs, TabsGroup.subtreeObserverInit);\n }\n\n /**\n * Reads the current tab items: derives ordered `panelValues` for render, resolves which tab should be active,\n * and commits selection. Called on slot change, subtree mutations, and after mount.\n */\n #syncFromTabs(): void {\n const tabItems = this.#getTabItems();\n const nextPanelValues = uniqueNonEmptyStrings(tabItems.map(item => item.value));\n\n const selectedTab = this.#resolveSelectedTab(tabItems);\n\n if (!selectedTab) {\n tabItems.forEach(item => (item.selected = false));\n this.#commitState(nextPanelValues, '');\n return;\n }\n\n this.#setActiveTab(tabItems, selectedTab, { emitEvent: false, nextPanelValues });\n }\n\n /**\n * Sets exactly one selected tab, updates `panelValues` / `selectedValue`, and optionally dispatches `select`.\n *\n * @param emitEvent - When true (command path), dispatches `select` if selection actually changed.\n */\n #setActiveTab(\n tabItems: TabsItem[],\n nextTab: TabsItem,\n options: { emitEvent: boolean; nextPanelValues?: string[] }\n ): void {\n const { emitEvent } = options;\n const nextPanelValues = options.nextPanelValues ?? uniqueNonEmptyStrings(tabItems.map(item => item.value));\n // True when the effective selection differs from the prior committed state (value, flags, or multi-select).\n // `select` is only dispatched when both `emitEvent` (invoker/command path) and `changed` are true.\n const changed =\n this.selectedValue !== nextTab.value ||\n !nextTab.selected ||\n tabItems.some(item => item !== nextTab && item.selected);\n\n tabItems.forEach(item => {\n item.selected = item === nextTab;\n });\n\n this.#commitState(nextPanelValues, nextTab.value);\n\n if (emitEvent && changed) {\n this.dispatchEvent(\n new CustomEvent<TabsGroupSelectDetail>('select', {\n bubbles: true,\n composed: true,\n detail: { value: nextTab.value }\n })\n );\n }\n }\n\n /** Updates reactive state for panel slot names and the active tab value without touching the tab items. */\n #commitState(nextPanelValues: string[], nextSelectedValue: string): void {\n if (!sameOrderedStringArray(this.panelValues, nextPanelValues)) {\n this.panelValues = nextPanelValues;\n }\n\n if (this.selectedValue !== nextSelectedValue) {\n this.selectedValue = nextSelectedValue;\n }\n }\n\n // --- Panel sync (state → panels & ARIA) ---\n\n /** For each named panel slot, wires `hidden` and tab↔panel ARIA ids to match `selectedValue`. */\n #syncPanels(): void {\n const tabItems = this.#getTabItems();\n const tabMap = new Map(\n tabItems.filter(item => this.#isSelectableTab(item)).map(item => [item.value, item] satisfies [string, TabsItem])\n );\n\n this.#getPanelSlots().forEach(slot => {\n this.#syncPanelSlot(slot, tabMap);\n });\n }\n\n /**\n * If no selectable tab exists for `slot.name`, hides all assigned nodes. Otherwise shows only the panel(s)\n * for the active value and assigns `role=\"tabpanel\"` / `aria-labelledby` when missing.\n */\n #syncPanelSlot(slot: HTMLSlotElement, tabMap: ReadonlyMap<string, TabsItem>): void {\n const tabItem = tabMap.get(slot.name);\n const panels = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n if (!tabItem) {\n panels.forEach(panel => {\n panel.hidden = true;\n });\n return;\n }\n\n tabItem.id ||= generateId();\n\n panels.forEach((panel, index) => {\n panel.id ||= generateId();\n\n if (!tabItem.hasAttribute('aria-controls') && index === 0) {\n tabItem.setAttribute('aria-controls', panel.id);\n }\n\n if (!panel.hasAttribute('aria-labelledby')) {\n panel.setAttribute('aria-labelledby', tabItem.id);\n }\n\n if (!panel.hasAttribute('role')) {\n panel.setAttribute('role', 'tabpanel');\n }\n\n const isActive = slot.name === this.selectedValue;\n panel.hidden = !isActive;\n });\n }\n\n // --- DOM queries ---\n\n /** Resolves the single slotted `nve-tabs` (default slot), with a light-DOM fallback for edge timing. */\n #getTabsElement(): Tabs | undefined {\n const el =\n this.defaultSlotElements.find(element => element.localName === Tabs.metadata.tag) ??\n this.querySelector(Tabs.metadata.tag);\n return el instanceof Tabs ? el : undefined;\n }\n\n #getTabItems(): TabsItem[] {\n return Array.from(this.#getTabsElement()?.querySelectorAll<TabsItem>('nve-tabs-item') ?? []);\n }\n\n #getPanelSlots(): HTMLSlotElement[] {\n return Array.from(this.renderRoot.querySelectorAll<HTMLSlotElement>('slot[name]'));\n }\n\n /** Selectable tabs have a non-empty `value` and are not `disabled`. */\n #isSelectableTab(tabItem: TabsItem): tabItem is TabsItem & { value: string } {\n return typeof tabItem.value === 'string' && tabItem.value.length > 0 && !tabItem.disabled;\n }\n\n /** Prefer the selectable tab that is already selected; otherwise the first selectable tab. */\n #resolveSelectedTab(tabItems: readonly TabsItem[]): TabsItem | undefined {\n return (\n tabItems.find(item => this.#isSelectableTab(item) && item.selected) ??\n tabItems.find(item => this.#isSelectableTab(item))\n );\n }\n}\n"],"mappings":"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"}
|
package/dist/tabs/tabs.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import { PropertyValues
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
import type { PropertyValues } from 'lit';
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
import type { KeynavListConfig } from '@nvidia-elements/core/internal';
|
|
4
|
+
declare const TabsItem_base: import("@nvidia-elements/forms/mixins").ButtonFormControlMixinReturn<typeof LitElement>;
|
|
4
5
|
/**
|
|
5
6
|
* @element nve-tabs-item
|
|
6
7
|
* @description Represents an individual tab within a tablist, providing a selectable button for switching between content views.
|
|
8
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/tabs/
|
|
7
9
|
* @since 0.10.0
|
|
8
10
|
* @entrypoint \@nvidia-elements/core/tabs
|
|
9
11
|
* @slot - default slot for content
|
|
@@ -25,13 +27,13 @@ export declare class TabsItem extends TabsItem_base {
|
|
|
25
27
|
* Determines which tab item the user selects, defaults to false.
|
|
26
28
|
*/
|
|
27
29
|
selected: boolean;
|
|
28
|
-
static styles: import(
|
|
30
|
+
static styles: import("lit").CSSResult[];
|
|
29
31
|
static readonly metadata: {
|
|
30
32
|
tag: string;
|
|
31
33
|
version: string;
|
|
32
34
|
parents: string[];
|
|
33
35
|
};
|
|
34
|
-
render(): import(
|
|
36
|
+
render(): import("lit").TemplateResult<1>;
|
|
35
37
|
constructor();
|
|
36
38
|
connectedCallback(): void;
|
|
37
39
|
updated(props: PropertyValues<this>): void;
|
|
@@ -39,6 +41,7 @@ export declare class TabsItem extends TabsItem_base {
|
|
|
39
41
|
/**
|
|
40
42
|
* @element nve-tabs
|
|
41
43
|
* @description Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.
|
|
44
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/tabs/
|
|
42
45
|
* @since 0.10.0
|
|
43
46
|
* @entrypoint \@nvidia-elements/core/tabs
|
|
44
47
|
* @slot - default slot for tab-item
|
|
@@ -64,7 +67,7 @@ export declare class Tabs extends LitElement {
|
|
|
64
67
|
* Determines whether the tabs should handle selection behavior vs. defaults to off.
|
|
65
68
|
*/
|
|
66
69
|
behaviorSelect: boolean;
|
|
67
|
-
static styles: import(
|
|
70
|
+
static styles: import("lit").CSSResult[];
|
|
68
71
|
static readonly metadata: {
|
|
69
72
|
tag: string;
|
|
70
73
|
version: string;
|
|
@@ -75,7 +78,7 @@ export declare class Tabs extends LitElement {
|
|
|
75
78
|
private items;
|
|
76
79
|
/** @private */
|
|
77
80
|
_internals: ElementInternals;
|
|
78
|
-
render(): import(
|
|
81
|
+
render(): import("lit").TemplateResult<1>;
|
|
79
82
|
connectedCallback(): void;
|
|
80
83
|
disconnectedCallback(): void;
|
|
81
84
|
updated(props: PropertyValues<this>): void;
|
package/dist/tabs/tabs2.js
CHANGED
|
@@ -4,7 +4,7 @@ import { keyNavigationList as i } from "../internal/controllers/keynav-list.cont
|
|
|
4
4
|
import { attachInternals as a } from "../internal/utils/a11y.js";
|
|
5
5
|
import { stateSelected as o } from "../internal/controllers/state-selected.controller.js";
|
|
6
6
|
import { useStyles as s } from "../internal/styles/index.js";
|
|
7
|
-
import
|
|
7
|
+
import c from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
8
8
|
import l from "./tabs.global.js";
|
|
9
9
|
import u from "./tabs-item.js";
|
|
10
10
|
import d from "./tabs.js";
|
|
@@ -20,7 +20,7 @@ var _ = class extends h(f) {
|
|
|
20
20
|
static {
|
|
21
21
|
this.metadata = {
|
|
22
22
|
tag: "nve-tabs-item",
|
|
23
|
-
version: "2.
|
|
23
|
+
version: "2.1.1",
|
|
24
24
|
parents: ["nve-tabs"]
|
|
25
25
|
};
|
|
26
26
|
}
|
|
@@ -53,7 +53,7 @@ var v = class extends f {
|
|
|
53
53
|
static {
|
|
54
54
|
this.metadata = {
|
|
55
55
|
tag: "nve-tabs",
|
|
56
|
-
version: "2.
|
|
56
|
+
version: "2.1.1",
|
|
57
57
|
children: ["nve-tabs-item"]
|
|
58
58
|
};
|
|
59
59
|
}
|
package/dist/tabs/tabs2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs2.js","names":["#selectTab","#onClick"],"sources":["../../src/tabs/tabs.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 { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n stateSelected,\n useStyles,\n keyNavigationList,\n attachInternals,\n audit,\n appendRootNodeStyle,\n appendAnchorName,\n removeAnchorName\n} from '@nvidia-elements/core/internal';\nimport globalStyles from './tabs.global.css?inline';\nimport tabsItemStyleSheet from './tabs-item.css?inline';\nimport tabsStyleSheet from './tabs.css?inline';\n\n/**\n * @element nve-tabs-item\n * @description Represents an individual tab within a tablist, providing a selectable button for switching between content views.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for content\n * @cssprop --font-size\n * @cssprop --width\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --height\n * @cssprop --cursor\n * @cssprop --text-transform\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@stateSelected<TabsItem>()\nexport class TabsItem extends ButtonFormControlMixin(LitElement) {\n /**\n * Determines which tab item the user selects, defaults to false.\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n static styles = useStyles([tabsItemStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-tabs-item',\n version: '0.0.0',\n parents: ['nve-tabs']\n };\n\n render() {\n return html`\n <div internal-host focus-within>\n <slot></slot>\n </div>\n `;\n }\n\n constructor() {\n super();\n this.type = 'button';\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._internals.role = 'tab';\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n\n if (props.has('selected')) {\n if (this.selected) {\n appendAnchorName(this, '--selected');\n } else {\n removeAnchorName(this, '--selected');\n }\n }\n }\n}\n\n/**\n * @element nve-tabs\n * @description Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for tab-item\n * @cssprop --gap\n * @cssprop --indicator-background\n * @cssprop --indicator-border-radius\n * @cssprop --indicator-height\n * @cssprop --border-inset\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@keyNavigationList<Tabs>()\nexport class Tabs extends LitElement {\n /**\n * Determines whether the tabs should display in a vertical layout vs. defaulting to horizontal.\n */\n @property({ type: Boolean, reflect: true }) vertical = false;\n\n /**\n * Determines whether the tabs should display a border on selected items vs. defaults to show border.\n */\n @property({ type: Boolean, reflect: true }) borderless = false;\n\n /**\n * Determines whether the tabs should handle selection behavior vs. defaults to off.\n */\n @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n static styles = useStyles([tabsStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-tabs',\n version: '0.0.0',\n children: ['nve-tabs-item']\n };\n\n /** @private */\n get keynavListConfig(): KeynavListConfig {\n return {\n items: this.items,\n layout: this.vertical ? 'vertical' : 'horizontal'\n };\n }\n\n @queryAssignedElements() private items!: TabsItem[];\n\n /** @private */\n declare _internals: ElementInternals;\n\n #selectTab(tabItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n if (!this.behaviorSelect || !tabItem.matches('nve-tabs-item') || tabItem.disabled) {\n return;\n }\n\n this.keynavListConfig.items.forEach((i: HTMLElement) => ((i as TabsItem).selected = false));\n tabItem.selected = true;\n }\n\n render() {\n return html`\n <div internal-host>\n <slot></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n appendRootNodeStyle(this, globalStyles);\n attachInternals(this);\n this._internals.role = 'tablist';\n this.addEventListener('click', this.#onClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#onClick);\n }\n\n #onClick = (e: Event) => {\n this.#selectTab(e.target as HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean });\n };\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"tabs2.js","names":["#selectTab","#onClick"],"sources":["../../src/tabs/tabs.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 { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n stateSelected,\n useStyles,\n keyNavigationList,\n attachInternals,\n audit,\n appendRootNodeStyle,\n appendAnchorName,\n removeAnchorName\n} from '@nvidia-elements/core/internal';\nimport globalStyles from './tabs.global.css?inline';\nimport tabsItemStyleSheet from './tabs-item.css?inline';\nimport tabsStyleSheet from './tabs.css?inline';\n\n/**\n * @element nve-tabs-item\n * @description Represents an individual tab within a tablist, providing a selectable button for switching between content views.\n * @documentation https://nvidia.github.io/elements/docs/elements/tabs/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for content\n * @cssprop --font-size\n * @cssprop --width\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --height\n * @cssprop --cursor\n * @cssprop --text-transform\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@stateSelected<TabsItem>()\nexport class TabsItem extends ButtonFormControlMixin(LitElement) {\n /**\n * Determines which tab item the user selects, defaults to false.\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n static styles = useStyles([tabsItemStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-tabs-item',\n version: '0.0.0',\n parents: ['nve-tabs']\n };\n\n render() {\n return html`\n <div internal-host focus-within>\n <slot></slot>\n </div>\n `;\n }\n\n constructor() {\n super();\n this.type = 'button';\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._internals.role = 'tab';\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n\n if (props.has('selected')) {\n if (this.selected) {\n appendAnchorName(this, '--selected');\n } else {\n removeAnchorName(this, '--selected');\n }\n }\n }\n}\n\n/**\n * @element nve-tabs\n * @description Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.\n * @documentation https://nvidia.github.io/elements/docs/elements/tabs/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for tab-item\n * @cssprop --gap\n * @cssprop --indicator-background\n * @cssprop --indicator-border-radius\n * @cssprop --indicator-height\n * @cssprop --border-inset\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@keyNavigationList<Tabs>()\nexport class Tabs extends LitElement {\n /**\n * Determines whether the tabs should display in a vertical layout vs. defaulting to horizontal.\n */\n @property({ type: Boolean, reflect: true }) vertical = false;\n\n /**\n * Determines whether the tabs should display a border on selected items vs. defaults to show border.\n */\n @property({ type: Boolean, reflect: true }) borderless = false;\n\n /**\n * Determines whether the tabs should handle selection behavior vs. defaults to off.\n */\n @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n static styles = useStyles([tabsStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-tabs',\n version: '0.0.0',\n children: ['nve-tabs-item']\n };\n\n /** @private */\n get keynavListConfig(): KeynavListConfig {\n return {\n items: this.items,\n layout: this.vertical ? 'vertical' : 'horizontal'\n };\n }\n\n @queryAssignedElements() private items!: TabsItem[];\n\n /** @private */\n declare _internals: ElementInternals;\n\n #selectTab(tabItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n if (!this.behaviorSelect || !tabItem.matches('nve-tabs-item') || tabItem.disabled) {\n return;\n }\n\n this.keynavListConfig.items.forEach((i: HTMLElement) => ((i as TabsItem).selected = false));\n tabItem.selected = true;\n }\n\n render() {\n return html`\n <div internal-host>\n <slot></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n appendRootNodeStyle(this, globalStyles);\n attachInternals(this);\n this._internals.role = 'tablist';\n this.addEventListener('click', this.#onClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#onClick);\n }\n\n #onClick = (e: Event) => {\n this.#selectTab(e.target as HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean });\n };\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;AA6CO,IAAA,IAAA,cAAuB,EAAuB,CAAU,CAAC,CAAC;;gBAM/C,EAAU,CAAC,CAAkB,CAAC;;;kBAEnB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,cAAc;EAEZ,AADA,MAAM,mBAnB+C,IAoBrD,KAAK,OAAO;CACd;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAGnC,AAFA,MAAM,QAAQ,CAAK,GAEf,EAAM,IAAI,UAAU,MAClB,KAAK,WACP,EAAiB,MAAM,YAAY,IAEnC,EAAiB,MAAM,YAAY;CAGzC;AACF;GAvCG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,UAN3C,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA;AA+DlB,IAAA,IAAA,cAAmB,EAAW;;+BAIoB,sBAKE,0BAKmB,eAqDhE,MAAa;GACvB,KAAKA,GAAW,EAAE,MAA+F;EACnH;;;gBArDgB,EAAU,CAAC,CAAc,CAAC;;;kBAEf;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,eAAe;EAC5B;;CAGA,IAAI,mBAAqC;EACvC,OAAO;GACL,OAAO,KAAK;GACZ,QAAQ,KAAK,WAAW,aAAa;EACvC;CACF;CAOA,GAAW,GAAgG;EACrG,CAAC,KAAK,kBAAkB,CAAC,EAAQ,QAAQ,eAAe,KAAK,EAAQ,aAIzE,KAAK,iBAAiB,MAAM,SAAS,MAAoB,EAAgB,WAAW,EAAM,GAC1F,EAAQ,WAAW;CACrB;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY,GACtC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,WACvB,KAAK,iBAAiB,SAAS,KAAKC,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAKA,EAAQ;CACjD;CAEA;CAIA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,kBAAkB,KAAK,WAAW,aAAa;CACjE;AACF;GAvEG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKzC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAKzC,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,MAkBxD,EAAsB,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAlCxB,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA"}
|
package/dist/tag/define.d.ts
CHANGED
package/dist/tag/tag.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import { Color, Prominence } from '
|
|
3
|
-
import { Icon } from '
|
|
4
|
-
declare const Tag_base: import(
|
|
2
|
+
import type { Color, Prominence } from '@nvidia-elements/core/internal';
|
|
3
|
+
import { Icon } from '@nvidia-elements/core/icon';
|
|
4
|
+
declare const Tag_base: import("@nvidia-elements/forms/mixins").ButtonFormControlMixinReturn<typeof LitElement>;
|
|
5
5
|
/**
|
|
6
6
|
* @element nve-tag
|
|
7
7
|
* @description A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.
|
|
8
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/tag/
|
|
8
9
|
* @since 0.10.0
|
|
9
10
|
* @entrypoint \@nvidia-elements/core/tag
|
|
10
11
|
* @slot - default slot for content
|
|
@@ -26,7 +27,7 @@ declare const Tag_base: import('@nvidia-elements/forms/mixins').ButtonFormContro
|
|
|
26
27
|
*/
|
|
27
28
|
export declare class Tag extends Tag_base {
|
|
28
29
|
#private;
|
|
29
|
-
static styles: import(
|
|
30
|
+
static styles: import("lit").CSSResult[];
|
|
30
31
|
static readonly metadata: {
|
|
31
32
|
tag: string;
|
|
32
33
|
version: string;
|
|
@@ -41,10 +42,10 @@ export declare class Tag extends Tag_base {
|
|
|
41
42
|
/** Determines the visual prominence or weight */
|
|
42
43
|
prominence?: Extract<Prominence, 'emphasis'>;
|
|
43
44
|
/** Updates internal string values for internationalization. */
|
|
44
|
-
i18n: Partial<import(
|
|
45
|
+
i18n: Partial<import("@nvidia-elements/core/internal").I18nStrings & {
|
|
45
46
|
__set: boolean;
|
|
46
47
|
}>;
|
|
47
|
-
render(): import(
|
|
48
|
+
render(): import("lit").TemplateResult<1>;
|
|
48
49
|
constructor();
|
|
49
50
|
}
|
|
50
51
|
export {};
|
package/dist/tag/tag2.js
CHANGED
|
@@ -2,7 +2,7 @@ import { I18nController as e } from "../internal/controllers/i18n.controller.js"
|
|
|
2
2
|
import { TypeClosableController as t } from "../internal/controllers/type-closable.controller.js";
|
|
3
3
|
import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
|
|
4
4
|
import { colorStateStyles as r, useStyles as i } from "../internal/styles/index.js";
|
|
5
|
-
import
|
|
5
|
+
import a from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
6
6
|
import { Icon as o } from "../icon/icon2.js";
|
|
7
7
|
import s from "./tag.js";
|
|
8
8
|
import { LitElement as c, html as l } from "lit";
|
|
@@ -17,7 +17,7 @@ var p = class extends d(c) {
|
|
|
17
17
|
static {
|
|
18
18
|
this.metadata = {
|
|
19
19
|
tag: "nve-tag",
|
|
20
|
-
version: "2.
|
|
20
|
+
version: "2.1.1"
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
23
|
static {
|
package/dist/tag/tag2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag2.js","names":["#typeClosableController","#i18nController"],"sources":["../../src/tag/tag.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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { Color, Prominence } from '@nvidia-elements/core/internal';\nimport {\n I18nController,\n TypeClosableController,\n useStyles,\n colorStateStyles,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './tag.css?inline';\n\n/**\n * @element nve-tag\n * @description A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tag\n * @slot - default slot for content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --cursor\n * @cssprop --height\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --text-decoration\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\n@scopedRegistry()\nexport class Tag extends ButtonFormControlMixin(LitElement) {\n static styles = useStyles([colorStateStyles, styles]);\n\n static readonly metadata = {\n tag: 'nve-tag',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n /** Determines if tag is closable, if true, the component renders a close icon. */\n @property({ type: Boolean }) closable = false;\n\n /** Determines the color of the tag. */\n @property({ type: String, reflect: true }) color: Color;\n\n /** Determines the visual prominence or weight */\n @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /** Updates internal string values for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n #typeClosableController = new TypeClosableController(this);\n\n render() {\n return html`\n <div internal-host interaction-state focus-within>\n <slot></slot>\n ${this.closable ? html`<nve-icon part=\"icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" name=\"cancel\" size=\"sm\" role=\"img\" aria-label=${ifDefined(this.i18n.close)}></nve-icon>` : ''}\n </div>\n `;\n }\n\n constructor() {\n super();\n this.type = 'button';\n }\n}\n"],"mappings":";;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"tag2.js","names":["#typeClosableController","#i18nController"],"sources":["../../src/tag/tag.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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { Color, Prominence } from '@nvidia-elements/core/internal';\nimport {\n I18nController,\n TypeClosableController,\n useStyles,\n colorStateStyles,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './tag.css?inline';\n\n/**\n * @element nve-tag\n * @description A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.\n * @documentation https://nvidia.github.io/elements/docs/elements/tag/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tag\n * @slot - default slot for content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --cursor\n * @cssprop --height\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --text-decoration\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\n@scopedRegistry()\nexport class Tag extends ButtonFormControlMixin(LitElement) {\n static styles = useStyles([colorStateStyles, styles]);\n\n static readonly metadata = {\n tag: 'nve-tag',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n /** Determines if tag is closable, if true, the component renders a close icon. */\n @property({ type: Boolean }) closable = false;\n\n /** Determines the color of the tag. */\n @property({ type: String, reflect: true }) color: Color;\n\n /** Determines the visual prominence or weight */\n @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /** Updates internal string values for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n #typeClosableController = new TypeClosableController(this);\n\n render() {\n return html`\n <div internal-host interaction-state focus-within>\n <slot></slot>\n ${this.closable ? html`<nve-icon part=\"icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" name=\"cancel\" size=\"sm\" role=\"img\" aria-label=${ifDefined(this.i18n.close)}></nve-icon>` : ''}\n </div>\n `;\n }\n\n constructor() {\n super();\n this.type = 'button';\n }\n}\n"],"mappings":";;;;;;;;;;;;AA0CO,IAAA,IAAA,cAAkB,EAAuB,CAAU,CAAC,CAAC;;gBAC1C,EAAU,CAAC,GAAkB,CAAM,CAAC;;;kBAEzB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAWA;CAKA;CAEA,SAAS;EACP,OAAO,CAAI,kEAGL,KAAK,WAAW,CAAI,uCAAsC,KAAKA,GAAwB,MAAM,EAAE,oEAAkE,EAAU,KAAK,KAAK,KAAK,EAAE,iBAAgB,GAAG;CAGvN;CAEA,cAAc;EAEZ,AADA,MAAM,mBAzBgC,cAQA,IAAI,EAAqB,IAAI,eAGlC,KAAKC,GAAgB,gBAE9B,IAAI,EAAuB,IAAI,GAavD,KAAK,OAAO;CACd;AACF;GA5BG,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAG1B,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,cAAA,KAAA,CAAA,MAKxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAzB3B,EAAe,CAAA,GAAA,CAAA"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { CSSResult } from 'lit';
|
|
2
|
-
import { Control } from '
|
|
1
|
+
import type { CSSResult } from 'lit';
|
|
2
|
+
import { Control } from '@nvidia-elements/core/forms';
|
|
3
3
|
/**
|
|
4
4
|
* @element nve-textarea
|
|
5
5
|
* @description A textarea is a control that enables users to enter and edit text.
|
|
6
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/textarea/
|
|
6
7
|
* @since 0.3.0
|
|
7
8
|
* @entrypoint \@nvidia-elements/core/textarea
|
|
8
9
|
* @cssprop --padding
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea2.js","names":[],"sources":["../../src/textarea/textarea.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './textarea.css?inline';\n\n/**\n * @element nve-textarea\n * @description A textarea is a control that enables users to enter and edit text.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/textarea\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --width\n * @cssprop --min-height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --cursor\n * @cssprop --border\n * @cssprop --color\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n */\nexport class Textarea extends Control {\n static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-textarea',\n version: '0.0.0'\n };\n}\n"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"textarea2.js","names":[],"sources":["../../src/textarea/textarea.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './textarea.css?inline';\n\n/**\n * @element nve-textarea\n * @description A textarea is a control that enables users to enter and edit text.\n * @documentation https://nvidia.github.io/elements/docs/elements/textarea/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/textarea\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --width\n * @cssprop --min-height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --cursor\n * @cssprop --border\n * @cssprop --color\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n */\nexport class Textarea extends Control {\n static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-textarea',\n version: '0.0.0'\n };\n}\n"],"mappings":";;;;AA0BA,IAAa,IAAb,cAA8B,EAAQ;;gBACP,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;AACF"}
|
package/dist/time/define.d.ts
CHANGED
package/dist/time/time.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { ContainerElement } from '
|
|
2
|
-
import { Control } from '
|
|
3
|
-
import { IconButton } from '
|
|
1
|
+
import type { ContainerElement } from '@nvidia-elements/core/internal';
|
|
2
|
+
import { Control } from '@nvidia-elements/core/forms';
|
|
3
|
+
import { IconButton } from '@nvidia-elements/core/icon-button';
|
|
4
4
|
/**
|
|
5
5
|
* @element nve-time
|
|
6
6
|
* @description A time picker is a control that enables users to choose a time value.
|
|
7
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/time/
|
|
7
8
|
* @since 0.3.0
|
|
8
9
|
* @entrypoint \@nvidia-elements/core/time
|
|
9
10
|
* @cssprop --padding
|
|
@@ -22,7 +23,7 @@ export declare class Time extends Control implements ContainerElement {
|
|
|
22
23
|
* Use when embedding within another container such as a toolbar.
|
|
23
24
|
*/
|
|
24
25
|
container?: 'flat';
|
|
25
|
-
static styles: import(
|
|
26
|
+
static styles: import("lit").CSSResult[];
|
|
26
27
|
static readonly metadata: {
|
|
27
28
|
tag: string;
|
|
28
29
|
version: string;
|
|
@@ -30,5 +31,5 @@ export declare class Time extends Control implements ContainerElement {
|
|
|
30
31
|
static elementDefinitions: {
|
|
31
32
|
[IconButton.metadata.tag]: typeof IconButton;
|
|
32
33
|
};
|
|
33
|
-
protected get suffixContent(): import(
|
|
34
|
+
protected get suffixContent(): import("lit").TemplateResult<1>;
|
|
34
35
|
}
|
package/dist/time/time2.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
|
|
2
2
|
import { useStyles as t } from "../internal/styles/index.js";
|
|
3
|
-
import
|
|
3
|
+
import n from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
4
4
|
import { Control as r } from "../forms/control/control2.js";
|
|
5
5
|
import { IconButton as i } from "../icon-button/icon-button2.js";
|
|
6
6
|
import { inputStyles as a } from "../input/input2.js";
|
|
@@ -19,7 +19,7 @@ var l = class extends r {
|
|
|
19
19
|
static {
|
|
20
20
|
this.metadata = {
|
|
21
21
|
tag: "nve-time",
|
|
22
|
-
version: "2.
|
|
22
|
+
version: "2.1.1"
|
|
23
23
|
};
|
|
24
24
|
}
|
|
25
25
|
static {
|
package/dist/time/time2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"time2.js","names":[],"sources":["../../src/time/time.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 { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport styles from './time.css?inline';\n\n/**\n * @element nve-time\n * @description A time picker is a control that enables users to choose a time value.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/time\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The clock icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time\n */\n@scopedRegistry()\nexport class Time extends Control implements ContainerElement {\n /**\n * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n * Use when embedding within another container such as a toolbar.\n */\n @property({ type: String, reflect: true }) container?: 'flat';\n\n static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n static readonly metadata = {\n tag: 'nve-time',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton\n };\n\n protected get suffixContent() {\n return html`<nve-icon-button part=\"icon-button\" .ariaLabel=${this.i18n.expand} icon-name=\"clock\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n }\n}\n"],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"time2.js","names":[],"sources":["../../src/time/time.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 { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport styles from './time.css?inline';\n\n/**\n * @element nve-time\n * @description A time picker is a control that enables users to choose a time value.\n * @documentation https://nvidia.github.io/elements/docs/elements/time/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/time\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The clock icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time\n */\n@scopedRegistry()\nexport class Time extends Control implements ContainerElement {\n /**\n * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n * Use when embedding within another container such as a toolbar.\n */\n @property({ type: String, reflect: true }) container?: 'flat';\n\n static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n static readonly metadata = {\n tag: 'nve-time',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton\n };\n\n protected get suffixContent() {\n return html`<nve-icon-button part=\"icon-button\" .ariaLabel=${this.i18n.expand} icon-name=\"clock\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n }\n}\n"],"mappings":";;;;;;;;;;AA6BO,IAAA,IAAA,cAAmB,EAAoC;;gBAO5C,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,mDAAkD,KAAK,KAAK,OAAO,iDAA+C,KAAK,WAAW;CAC/I;AACF;GAhBG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,UAN1C,EAAe,CAAA,GAAA,CAAA"}
|
package/dist/toast/define.d.ts
CHANGED
package/dist/toast/toast.d.ts
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import { IconButton } from '
|
|
3
|
-
import { PopoverAlign, PopoverPosition, PopoverType, SupportStatus
|
|
4
|
-
import {
|
|
2
|
+
import { IconButton } from '@nvidia-elements/core/icon-button';
|
|
3
|
+
import type { PopoverAlign, PopoverPosition, PopoverType, SupportStatus } from '@nvidia-elements/core/internal';
|
|
4
|
+
import { TypeNativePopoverController } from '@nvidia-elements/core/internal';
|
|
5
|
+
import { Icon } from '@nvidia-elements/core/icon';
|
|
5
6
|
/**
|
|
6
7
|
* @element nve-toast
|
|
7
8
|
* @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
|
|
9
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/toast/
|
|
8
10
|
* @since 0.6.0
|
|
9
11
|
* @entrypoint \@nvidia-elements/core/toast
|
|
10
12
|
* @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)
|
|
@@ -30,7 +32,7 @@ import { Icon } from '../icon';
|
|
|
30
32
|
*/
|
|
31
33
|
export declare class Toast extends LitElement {
|
|
32
34
|
#private;
|
|
33
|
-
static styles: import(
|
|
35
|
+
static styles: import("lit").CSSResult[];
|
|
34
36
|
static readonly metadata: {
|
|
35
37
|
tag: string;
|
|
36
38
|
version: string;
|
|
@@ -82,7 +84,7 @@ export declare class Toast extends LitElement {
|
|
|
82
84
|
/**
|
|
83
85
|
* Updates internal string values for internationalization.
|
|
84
86
|
*/
|
|
85
|
-
i18n: Partial<import(
|
|
87
|
+
i18n: Partial<import("@nvidia-elements/core/internal").I18nStrings & {
|
|
86
88
|
__set: boolean;
|
|
87
89
|
}>;
|
|
88
90
|
/** @private */
|
|
@@ -90,6 +92,6 @@ export declare class Toast extends LitElement {
|
|
|
90
92
|
protected typeNativePopoverController: TypeNativePopoverController<Toast>;
|
|
91
93
|
/** @private */
|
|
92
94
|
_internals: ElementInternals;
|
|
93
|
-
render(): import(
|
|
95
|
+
render(): import("lit").TemplateResult<1>;
|
|
94
96
|
connectedCallback(): void;
|
|
95
97
|
}
|
package/dist/toast/toast2.js
CHANGED
|
@@ -6,7 +6,7 @@ import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
|
|
|
6
6
|
import { useStyles as a } from "../internal/styles/index.js";
|
|
7
7
|
import { popoverStyles as o } from "../internal/styles/popover2.js";
|
|
8
8
|
import { statusIcons as s } from "../internal/types/index.js";
|
|
9
|
-
import
|
|
9
|
+
import c from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
|
|
10
10
|
import { Icon as l } from "../icon/icon2.js";
|
|
11
11
|
import { IconButton as u } from "../icon-button/icon-button2.js";
|
|
12
12
|
import d from "./toast.js";
|
|
@@ -23,7 +23,7 @@ var g = class extends f {
|
|
|
23
23
|
static {
|
|
24
24
|
this.metadata = {
|
|
25
25
|
tag: "nve-toast",
|
|
26
|
-
version: "2.
|
|
26
|
+
version: "2.1.1"
|
|
27
27
|
};
|
|
28
28
|
}
|
|
29
29
|
static {
|
package/dist/toast/toast2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast2.js","names":["#i18nController"],"sources":["../../src/toast/toast.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 { property } from 'lit/decorators/property.js';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverPosition, PopoverType, SupportStatus } from '@nvidia-elements/core/internal';\nimport {\n attachInternals,\n audit,\n excessiveInstanceLimit,\n I18nController,\n popoverStyles,\n scopedRegistry,\n statusIcons,\n TypeNativePopoverController,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { Icon, type IconName } from '@nvidia-elements/core/icon';\nimport styles from './toast.css?inline';\n\n/**\n * @element nve-toast\n * @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/toast\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the toast opens.\n * @event close - Dispatched when the toast closes.\n * @slot - default content slot\n * @slot prefix - custom status icon slot\n * @cssprop --padding\n * @cssprop --justify-content\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --box-shadow\n * @cssprop --gap\n * @csspart prefix-icon - The prefix icon slot\n * @csspart icon-button - The close icon button element\n * @cssprop --animation-duration - Duration of toast open/close animations\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@scopedRegistry()\n@audit({ excessiveInstanceLimit })\nexport class Toast extends LitElement {\n static styles = useStyles([popoverStyles, styles]);\n\n static readonly metadata = {\n tag: 'nve-toast',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton,\n [Icon.metadata.tag]: Icon\n };\n\n /**\n * (optional) By default the popover automatically anchors itself relative to the trigger element.\n * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n */\n @property({ type: String }) anchor: string | HTMLElement;\n\n /**\n * @deprecated Use the popover API instead.\n * The trigger defines what element triggers an `open` interaction event.\n * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n */\n @property({ type: String }) trigger: string | HTMLElement;\n\n /**\n * Sets the side position of the popover relative to the provided anchor element.\n */\n @property({ type: String, reflect: true }) position: PopoverPosition = 'top';\n\n /**\n * Sets the alignment of the popover relative to the provided anchor element.\n */\n @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n /**\n * Sets the visual prominence of the toast.\n */\n @property({ type: String, reflect: true }) prominence: 'muted';\n\n /**\n * @deprecated Use the popover API instead.\n * Determines if popover visibility behavior should be automatically controlled by the trigger.\n */\n @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n /**\n * Determines if a close button should render within toast.\n */\n @property({ type: Boolean }) closable = false;\n\n /**\n * A delayed `close` event occurs after the provided millisecond value elapses.\n */\n @property({ type: Number, attribute: 'close-timeout' }) closeTimeout = 0;\n\n /**\n * Visual treatment to represent a support status.\n */\n @property({ type: String, reflect: true }) status: SupportStatus;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /**\n * Updates internal string values for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n /** @private */\n readonly popoverType: PopoverType = 'manual';\n\n protected typeNativePopoverController = new TypeNativePopoverController<Toast>(this);\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`\n <div internal-host>\n <slot name=\"prefix\"><nve-icon part=\"prefix-icon\" .name=${statusIcons[this.status] as IconName} .ariaLabel=${(this.i18n as Record<string, string>)[this.status] ?? this.i18n.information}></nve-icon></slot>\n ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${this.hidePopover} icon-name=\"cancel\" container=\"flat\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : nothing}\n <slot></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'alert';\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"toast2.js","names":["#i18nController"],"sources":["../../src/toast/toast.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 { property } from 'lit/decorators/property.js';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverPosition, PopoverType, SupportStatus } from '@nvidia-elements/core/internal';\nimport {\n attachInternals,\n audit,\n excessiveInstanceLimit,\n I18nController,\n popoverStyles,\n scopedRegistry,\n statusIcons,\n TypeNativePopoverController,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { Icon, type IconName } from '@nvidia-elements/core/icon';\nimport styles from './toast.css?inline';\n\n/**\n * @element nve-toast\n * @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @documentation https://nvidia.github.io/elements/docs/elements/toast/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/toast\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the toast opens.\n * @event close - Dispatched when the toast closes.\n * @slot - default content slot\n * @slot prefix - custom status icon slot\n * @cssprop --padding\n * @cssprop --justify-content\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --box-shadow\n * @cssprop --gap\n * @csspart prefix-icon - The prefix icon slot\n * @csspart icon-button - The close icon button element\n * @cssprop --animation-duration - Duration of toast open/close animations\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@scopedRegistry()\n@audit({ excessiveInstanceLimit })\nexport class Toast extends LitElement {\n static styles = useStyles([popoverStyles, styles]);\n\n static readonly metadata = {\n tag: 'nve-toast',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton,\n [Icon.metadata.tag]: Icon\n };\n\n /**\n * (optional) By default the popover automatically anchors itself relative to the trigger element.\n * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n */\n @property({ type: String }) anchor: string | HTMLElement;\n\n /**\n * @deprecated Use the popover API instead.\n * The trigger defines what element triggers an `open` interaction event.\n * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n */\n @property({ type: String }) trigger: string | HTMLElement;\n\n /**\n * Sets the side position of the popover relative to the provided anchor element.\n */\n @property({ type: String, reflect: true }) position: PopoverPosition = 'top';\n\n /**\n * Sets the alignment of the popover relative to the provided anchor element.\n */\n @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n /**\n * Sets the visual prominence of the toast.\n */\n @property({ type: String, reflect: true }) prominence: 'muted';\n\n /**\n * @deprecated Use the popover API instead.\n * Determines if popover visibility behavior should be automatically controlled by the trigger.\n */\n @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n /**\n * Determines if a close button should render within toast.\n */\n @property({ type: Boolean }) closable = false;\n\n /**\n * A delayed `close` event occurs after the provided millisecond value elapses.\n */\n @property({ type: Number, attribute: 'close-timeout' }) closeTimeout = 0;\n\n /**\n * Visual treatment to represent a support status.\n */\n @property({ type: String, reflect: true }) status: SupportStatus;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /**\n * Updates internal string values for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n /** @private */\n readonly popoverType: PopoverType = 'manual';\n\n protected typeNativePopoverController = new TypeNativePopoverController<Toast>(this);\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`\n <div internal-host>\n <slot name=\"prefix\"><nve-icon part=\"prefix-icon\" .name=${statusIcons[this.status] as IconName} .ariaLabel=${(this.i18n as Record<string, string>)[this.status] ?? this.i18n.information}></nve-icon></slot>\n ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${this.hidePopover} icon-name=\"cancel\" container=\"flat\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : nothing}\n <slot></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'alert';\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkDO,IAAA,IAAA,cAAoB,EAAW;;+BA6BmC,uBAqB/B,wBAK+B,aAO/B,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB,yBAGpB,6CAEI,IAAI,EAAmC,IAAI;;;gBAvEnE,EAAU,CAAC,GAAe,CAAM,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B;IACzB,EAAW,SAAS,MAAM;IAC1B,EAAK,SAAS,MAAM;EACvB;;CAmDA;CAeA,SAAS;EACP,OAAO,CAAI,8EAEkD,EAAY,KAAK,QAAoB,gBAAe,KAAK,KAAgC,KAAK,WAAW,KAAK,KAAK,YAAY,sBACtL,KAAK,WAAW,CAAI,mFAAkF,KAAK,YAAY,oDAAkD,KAAK,KAAK,MAAM,wBAAuB,EAAQ;CAIhO;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;GA3EG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAKzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAMxC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,MAKxE,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAK1B,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAgB,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,MAKrD,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UArE3B,EAAe,GACf,EAAM,EAAE,wBAAA,GAAuB,CAAC,CAAA,GAAA,CAAA"}
|
|
@@ -2,6 +2,7 @@ import { LitElement } from 'lit';
|
|
|
2
2
|
/**
|
|
3
3
|
* @element nve-toggletip-footer
|
|
4
4
|
* @description Provides a designated area at the bottom of a toggletip for actions or supplementary information.
|
|
5
|
+
* @documentation https://nvidia.github.io/elements/docs/elements/toggletip/
|
|
5
6
|
* @since 0.38.0
|
|
6
7
|
* @entrypoint \@nvidia-elements/core/toggletip
|
|
7
8
|
* @slot - default slot for the toggletip footer
|
|
@@ -11,12 +12,12 @@ import { LitElement } from 'lit';
|
|
|
11
12
|
* @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
|
|
12
13
|
*/
|
|
13
14
|
export declare class ToggletipFooter extends LitElement {
|
|
14
|
-
static styles: import(
|
|
15
|
+
static styles: import("lit").CSSResult[];
|
|
15
16
|
static readonly metadata: {
|
|
16
17
|
tag: string;
|
|
17
18
|
version: string;
|
|
18
19
|
parents: string[];
|
|
19
20
|
};
|
|
20
|
-
render(): import(
|
|
21
|
+
render(): import("lit").TemplateResult<1>;
|
|
21
22
|
connectedCallback(): void;
|
|
22
23
|
}
|