@nvidia-elements/core 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -0
- package/dist/_virtual/{_@oxc-project_runtime@0.128.0 → _@oxc-project_runtime@0.130.0}/helpers/decorate.js +1 -1
- package/dist/accordion/accordion2.js +5 -5
- package/dist/accordion/accordion2.js.map +1 -1
- package/dist/accordion/define.js.map +1 -1
- package/dist/alert/alert-group2.js +2 -2
- package/dist/alert/alert-group2.js.map +1 -1
- package/dist/alert/alert2.js +2 -2
- package/dist/alert/alert2.js.map +1 -1
- package/dist/alert/define.js.map +1 -1
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar-group2.js.map +1 -1
- package/dist/avatar/avatar2.js +2 -2
- package/dist/avatar/avatar2.js.map +1 -1
- package/dist/avatar/define.js.map +1 -1
- package/dist/badge/badge2.js +2 -2
- package/dist/badge/badge2.js.map +1 -1
- package/dist/badge/define.js.map +1 -1
- package/dist/breadcrumb/breadcrumb2.js +2 -2
- package/dist/breadcrumb/breadcrumb2.js.map +1 -1
- package/dist/breadcrumb/define.js.map +1 -1
- package/dist/bundles/index.js +4 -4
- package/dist/button/button.js +1 -1
- package/dist/button/button.js.map +1 -1
- package/dist/button/button2.js +2 -2
- package/dist/button/button2.js.map +1 -1
- package/dist/button/define.js.map +1 -1
- package/dist/button-group/button-group2.js +2 -2
- package/dist/button-group/button-group2.js.map +1 -1
- package/dist/button-group/define.js.map +1 -1
- package/dist/card/card2.js +5 -5
- package/dist/card/card2.js.map +1 -1
- package/dist/card/define.js.map +1 -1
- package/dist/chat-message/chat-message2.js +2 -2
- package/dist/chat-message/chat-message2.js.map +1 -1
- package/dist/chat-message/define.js.map +1 -1
- package/dist/checkbox/checkbox-group2.js +2 -2
- package/dist/checkbox/checkbox-group2.js.map +1 -1
- package/dist/checkbox/checkbox2.js +2 -2
- package/dist/checkbox/checkbox2.js.map +1 -1
- package/dist/checkbox/define.js.map +1 -1
- package/dist/color/color2.js +2 -2
- package/dist/color/color2.js.map +1 -1
- package/dist/color/define.js.map +1 -1
- package/dist/combobox/combobox2.js +2 -2
- package/dist/combobox/combobox2.js.map +1 -1
- package/dist/combobox/define.js.map +1 -1
- package/dist/copy-button/copy-button2.js +2 -2
- package/dist/copy-button/copy-button2.js.map +1 -1
- package/dist/copy-button/define.js.map +1 -1
- package/dist/custom-elements.json +0 -12
- package/dist/data.snippets.json +18 -18
- package/dist/date/date2.js +2 -2
- package/dist/date/date2.js.map +1 -1
- package/dist/date/define.js.map +1 -1
- package/dist/datetime/datetime2.js +2 -2
- package/dist/datetime/datetime2.js.map +1 -1
- package/dist/datetime/define.js.map +1 -1
- package/dist/dialog/define.js.map +1 -1
- package/dist/dialog/dialog-footer2.js +2 -2
- package/dist/dialog/dialog-footer2.js.map +1 -1
- package/dist/dialog/dialog-header2.js +2 -2
- package/dist/dialog/dialog-header2.js.map +1 -1
- package/dist/dialog/dialog2.js +2 -2
- package/dist/dialog/dialog2.js.map +1 -1
- package/dist/divider/define.js.map +1 -1
- package/dist/divider/divider2.js +2 -2
- package/dist/divider/divider2.js.map +1 -1
- package/dist/dot/define.js.map +1 -1
- package/dist/dot/dot2.js +2 -2
- package/dist/dot/dot2.js.map +1 -1
- package/dist/drawer/define.js.map +1 -1
- package/dist/drawer/drawer-content2.js +2 -2
- package/dist/drawer/drawer-content2.js.map +1 -1
- package/dist/drawer/drawer-footer2.js +2 -2
- package/dist/drawer/drawer-footer2.js.map +1 -1
- package/dist/drawer/drawer-header2.js +2 -2
- package/dist/drawer/drawer-header2.js.map +1 -1
- package/dist/drawer/drawer2.js +2 -2
- package/dist/drawer/drawer2.js.map +1 -1
- package/dist/dropdown/define.js.map +1 -1
- package/dist/dropdown/dropdown-footer2.js +2 -2
- package/dist/dropdown/dropdown-footer2.js.map +1 -1
- package/dist/dropdown/dropdown-header2.js +2 -2
- package/dist/dropdown/dropdown-header2.js.map +1 -1
- package/dist/dropdown/dropdown2.js +2 -2
- package/dist/dropdown/dropdown2.js.map +1 -1
- package/dist/dropdown-group/define.js.map +1 -1
- package/dist/dropdown-group/dropdown-group.js +2 -2
- package/dist/dropdown-group/dropdown-group.js.map +1 -1
- package/dist/dropzone/define.js.map +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.js.map +1 -1
- package/dist/file/file2.js +1 -1
- package/dist/file/file2.js.map +1 -1
- package/dist/format-datetime/define.js.map +1 -1
- package/dist/format-datetime/format-datetime2.js +2 -2
- package/dist/format-datetime/format-datetime2.js.map +1 -1
- package/dist/format-number/define.js.map +1 -1
- package/dist/format-number/format-number2.js +2 -2
- package/dist/format-number/format-number2.js.map +1 -1
- package/dist/format-relative-time/define.js.map +1 -1
- 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/control2.js +2 -2
- package/dist/forms/control/control2.js.map +1 -1
- 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-message2.js +2 -2
- package/dist/forms/control-message/control-message2.js.map +1 -1
- package/dist/forms/define.js.map +1 -1
- package/dist/forms/utils/layout.js.map +1 -1
- package/dist/forms/utils/states.js.map +1 -1
- package/dist/grid/cell/cell2.js +1 -1
- package/dist/grid/cell/cell2.js.map +1 -1
- package/dist/grid/column/column2.js +2 -2
- package/dist/grid/column/column2.js.map +1 -1
- package/dist/grid/define.js.map +1 -1
- package/dist/grid/footer/footer2.js +2 -2
- package/dist/grid/footer/footer2.js.map +1 -1
- package/dist/grid/grid2.js +2 -2
- package/dist/grid/grid2.js.map +1 -1
- package/dist/grid/header/header2.js +2 -2
- package/dist/grid/header/header2.js.map +1 -1
- package/dist/grid/placeholder/placeholder2.js +1 -1
- package/dist/grid/placeholder/placeholder2.js.map +1 -1
- package/dist/grid/row/row2.js +2 -2
- package/dist/grid/row/row2.js.map +1 -1
- package/dist/icon/define.js.map +1 -1
- 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/server.js.map +1 -1
- package/dist/icon-button/define.js.map +1 -1
- package/dist/icon-button/icon-button2.js +2 -2
- package/dist/icon-button/icon-button2.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/input/define.js.map +1 -1
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input-group2.js.map +1 -1
- package/dist/input/input2.js +2 -2
- package/dist/input/input2.js.map +1 -1
- package/dist/internal/base/button.js +1 -1
- package/dist/internal/base/button.js.map +1 -1
- package/dist/internal/controllers/audit.controller.js.map +1 -1
- package/dist/internal/controllers/i18n.controller.js.map +1 -1
- package/dist/internal/controllers/keynav-grid.controller.js.map +1 -1
- package/dist/internal/controllers/keynav-list.controller.js.map +1 -1
- package/dist/internal/controllers/state-active.controller.js.map +1 -1
- package/dist/internal/controllers/state-current.controller.js.map +1 -1
- package/dist/internal/controllers/state-disabled.controller.js.map +1 -1
- package/dist/internal/controllers/state-expanded.controller.js.map +1 -1
- package/dist/internal/controllers/state-highlighted.controller.js.map +1 -1
- package/dist/internal/controllers/state-pressed.controller.js.map +1 -1
- package/dist/internal/controllers/state-scroll.controller.js.map +1 -1
- package/dist/internal/controllers/state-selected.controller.js.map +1 -1
- package/dist/internal/controllers/type-anchor.controller.js.map +1 -1
- package/dist/internal/controllers/type-button.controller.js.map +1 -1
- package/dist/internal/controllers/type-closable.controller.js.map +1 -1
- package/dist/internal/controllers/type-command.controller.js.map +1 -1
- package/dist/internal/controllers/type-expandable.controller.js.map +1 -1
- package/dist/internal/controllers/type-interest.controller.js.map +1 -1
- package/dist/internal/controllers/type-native-popover-trigger.controller.js.map +1 -1
- 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.js.map +1 -1
- package/dist/internal/controllers/type-ssr.controller.js.map +1 -1
- package/dist/internal/controllers/type-submit.controller.js.map +1 -1
- package/dist/internal/controllers/type-touch.controller.js.map +1 -1
- package/dist/internal/decorators/host-attr.js.map +1 -1
- package/dist/internal/decorators/scoped-registry.js.map +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 +6 -8
- package/dist/internal/services/global.utils.js.map +1 -1
- package/dist/internal/services/i18n.service.js.map +1 -1
- package/dist/internal/services/log.service.js.map +1 -1
- package/dist/internal/services/transition.service.js.map +1 -1
- package/dist/internal/styles/index.js.map +1 -1
- package/dist/internal/styles/popover2.js.map +1 -1
- package/dist/internal/types/index.js.map +1 -1
- package/dist/internal/utils/a11y.js.map +1 -1
- package/dist/internal/utils/audit-logs.d.ts +0 -1
- package/dist/internal/utils/audit-logs.js +1 -4
- package/dist/internal/utils/audit-logs.js.map +1 -1
- package/dist/internal/utils/audit.js.map +1 -1
- package/dist/internal/utils/dom.js.map +1 -1
- package/dist/internal/utils/events.js.map +1 -1
- package/dist/internal/utils/focus.js.map +1 -1
- package/dist/internal/utils/keynav.js.map +1 -1
- package/dist/internal/utils/objects.js.map +1 -1
- package/dist/internal/utils/strings.js.map +1 -1
- package/dist/internal/utils/supports.js.map +1 -1
- package/dist/logo/define.js.map +1 -1
- package/dist/logo/logo2.js +2 -2
- package/dist/logo/logo2.js.map +1 -1
- package/dist/menu/define.js.map +1 -1
- package/dist/menu/menu-item2.js +2 -2
- package/dist/menu/menu-item2.js.map +1 -1
- package/dist/menu/menu2.js +2 -2
- package/dist/menu/menu2.js.map +1 -1
- package/dist/month/define.js.map +1 -1
- package/dist/month/month2.js +2 -2
- package/dist/month/month2.js.map +1 -1
- package/dist/notification/define.js.map +1 -1
- package/dist/notification/notification-group2.js +2 -2
- package/dist/notification/notification-group2.js.map +1 -1
- package/dist/notification/notification2.js +2 -2
- package/dist/notification/notification2.js.map +1 -1
- package/dist/page/define.js.map +1 -1
- 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-footer2.js +2 -2
- package/dist/page/page-panel/page-panel-footer2.js.map +1 -1
- 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-panel2.js +2 -2
- package/dist/page/page-panel/page-panel2.js.map +1 -1
- package/dist/page/page2.js +2 -2
- package/dist/page/page2.js.map +1 -1
- package/dist/page-header/define.js.map +1 -1
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-header/page-header2.js.map +1 -1
- package/dist/page-loader/define.js.map +1 -1
- package/dist/page-loader/page-loader2.js +2 -2
- package/dist/page-loader/page-loader2.js.map +1 -1
- package/dist/pagination/define.js.map +1 -1
- package/dist/pagination/pagination2.js +2 -2
- package/dist/pagination/pagination2.js.map +1 -1
- package/dist/panel/define.js.map +1 -1
- package/dist/panel/panel2.js +5 -5
- package/dist/panel/panel2.js.map +1 -1
- package/dist/password/define.js.map +1 -1
- 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.js.map +1 -1
- package/dist/preferences-input/define.js.map +1 -1
- package/dist/preferences-input/preferences-input2.js +2 -2
- package/dist/preferences-input/preferences-input2.js.map +1 -1
- package/dist/progress-bar/define.js.map +1 -1
- package/dist/progress-bar/progress-bar2.js +2 -2
- package/dist/progress-bar/progress-bar2.js.map +1 -1
- package/dist/progress-ring/define.js.map +1 -1
- package/dist/progress-ring/progress-ring2.js +2 -2
- package/dist/progress-ring/progress-ring2.js.map +1 -1
- package/dist/progressive-filter-chip/define.js.map +1 -1
- 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.js.map +1 -1
- package/dist/pulse/pulse2.js +2 -2
- package/dist/pulse/pulse2.js.map +1 -1
- package/dist/radio/define.js.map +1 -1
- package/dist/radio/radio-group2.js +2 -2
- package/dist/radio/radio-group2.js.map +1 -1
- package/dist/radio/radio2.js +2 -2
- package/dist/radio/radio2.js.map +1 -1
- package/dist/range/define.js.map +1 -1
- package/dist/range/range2.js +2 -2
- package/dist/range/range2.js.map +1 -1
- package/dist/resize-handle/define.js.map +1 -1
- package/dist/resize-handle/resize-handle2.js +2 -2
- package/dist/resize-handle/resize-handle2.js.map +1 -1
- package/dist/search/define.js.map +1 -1
- package/dist/search/search2.js +2 -2
- package/dist/search/search2.js.map +1 -1
- package/dist/select/define.js.map +1 -1
- package/dist/select/select2.js +2 -2
- package/dist/select/select2.js.map +1 -1
- package/dist/skeleton/define.js.map +1 -1
- package/dist/skeleton/skeleton2.js +2 -2
- package/dist/skeleton/skeleton2.js.map +1 -1
- package/dist/sort-button/define.js.map +1 -1
- package/dist/sort-button/sort-button2.js +2 -2
- package/dist/sort-button/sort-button2.js.map +1 -1
- package/dist/sparkline/define.js.map +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.js.map +1 -1
- package/dist/star-rating/star-rating2.js +2 -2
- package/dist/star-rating/star-rating2.js.map +1 -1
- package/dist/steps/define.js.map +1 -1
- package/dist/steps/steps2.js +3 -3
- package/dist/steps/steps2.js.map +1 -1
- package/dist/switch/define.js.map +1 -1
- package/dist/switch/switch-group2.js +2 -2
- package/dist/switch/switch-group2.js.map +1 -1
- package/dist/switch/switch2.js +2 -2
- package/dist/switch/switch2.js.map +1 -1
- package/dist/tabs/define.js.map +1 -1
- package/dist/tabs/tabs-group2.js +2 -2
- package/dist/tabs/tabs-group2.js.map +1 -1
- package/dist/tabs/tabs2.js +3 -3
- package/dist/tabs/tabs2.js.map +1 -1
- package/dist/tag/define.js.map +1 -1
- package/dist/tag/tag2.js +2 -2
- package/dist/tag/tag2.js.map +1 -1
- package/dist/textarea/define.js.map +1 -1
- package/dist/textarea/textarea2.js +1 -1
- package/dist/textarea/textarea2.js.map +1 -1
- package/dist/time/define.js.map +1 -1
- package/dist/time/time2.js +2 -2
- package/dist/time/time2.js.map +1 -1
- package/dist/toast/define.js.map +1 -1
- package/dist/toast/toast2.js +2 -2
- package/dist/toast/toast2.js.map +1 -1
- package/dist/toggletip/define.js.map +1 -1
- package/dist/toggletip/toggletip-footer2.js +2 -2
- package/dist/toggletip/toggletip-footer2.js.map +1 -1
- package/dist/toggletip/toggletip-header2.js +2 -2
- package/dist/toggletip/toggletip-header2.js.map +1 -1
- package/dist/toggletip/toggletip2.js +2 -2
- package/dist/toggletip/toggletip2.js.map +1 -1
- package/dist/toolbar/define.js.map +1 -1
- package/dist/toolbar/toolbar2.js +2 -2
- package/dist/toolbar/toolbar2.js.map +1 -1
- package/dist/tooltip/define.js.map +1 -1
- package/dist/tooltip/tooltip2.js +2 -2
- package/dist/tooltip/tooltip2.js.map +1 -1
- package/dist/tree/define.js.map +1 -1
- package/dist/tree/tree-node2.js +2 -2
- package/dist/tree/tree-node2.js.map +1 -1
- package/dist/tree/tree2.js +2 -2
- package/dist/tree/tree2.js.map +1 -1
- package/dist/tree/utils.js.map +1 -1
- package/dist/week/define.js.map +1 -1
- package/dist/week/week2.js +2 -2
- package/dist/week/week2.js.map +1 -1
- package/package.json +6 -6
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
|
|
2
2
|
import { BaseButton as t } from "../internal/base/button.js";
|
|
3
3
|
import { I18nController as n } from "../internal/controllers/i18n.controller.js";
|
|
4
4
|
import { scopedRegistry as r } from "../internal/decorators/scoped-registry.js";
|
|
@@ -19,7 +19,7 @@ var l = {
|
|
|
19
19
|
static {
|
|
20
20
|
this.metadata = {
|
|
21
21
|
tag: "nve-sort-button",
|
|
22
|
-
version: "0.1.
|
|
22
|
+
version: "0.1.2"
|
|
23
23
|
};
|
|
24
24
|
}
|
|
25
25
|
static {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sort-button2.js","names":["#i18nController","#onClick"],"sources":["../../src/sort-button/sort-button.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 { Icon } from '@nvidia-elements/core/icon';\nimport { useStyles, BaseButton, I18nController, scopedRegistry } from '@nvidia-elements/core/internal';\nimport styles from './sort-button.css?inline';\n\nconst nextSort = {\n none: 'ascending',\n ascending: 'descending',\n descending: 'none'\n};\n\n/**\n * @element nve-sort-button\n * @description A sort button is a control that enables users to sort a list of items in ascending or descending order.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/sort-button\n * @event sort - Dispatched on sort button click, returns the current sort value and the next sort value.\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-radius\n * @cssprop --color\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/\n */\n@scopedRegistry()\nexport class SortButton extends BaseButton {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-sort-button',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n /**\n * The current sort value, can be ascending, descending, or none.\n */\n @property({ type: String, reflect: true }) sort: 'ascending' | 'descending' | 'none' = 'none';\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 render() {\n return html`\n <div internal-host focus-within>\n <nve-icon part=\"icon\" .name=${this.sort === 'descending' ? 'sort-descending' : 'sort-ascending'} aria-hidden=\"true\"></nve-icon>\n </div>\n `;\n }\n\n constructor() {\n super();\n this.type = 'button';\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._internals.role = 'spinbutton';\n this.addEventListener('click', this.#onClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#onClick);\n }\n\n #onClick = () => {\n this._internals.ariaLabel = `${this.#i18nController.i18n.sort} ${nextSort[this.sort]}`;\n this.dispatchEvent(\n new CustomEvent('sort', {\n detail: { value: this.sort, next: nextSort[this.sort] },\n bubbles: true,\n composed: true\n })\n );\n };\n}\n"],"mappings":";;;;;;;;;;AASA,IAAM,IAAW;CACf,MAAM;CACN,WAAW;CACX,YAAY;
|
|
1
|
+
{"version":3,"file":"sort-button2.js","names":["#i18nController","#onClick"],"sources":["../../src/sort-button/sort-button.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 { Icon } from '@nvidia-elements/core/icon';\nimport { useStyles, BaseButton, I18nController, scopedRegistry } from '@nvidia-elements/core/internal';\nimport styles from './sort-button.css?inline';\n\nconst nextSort = {\n none: 'ascending',\n ascending: 'descending',\n descending: 'none'\n};\n\n/**\n * @element nve-sort-button\n * @description A sort button is a control that enables users to sort a list of items in ascending or descending order.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/sort-button\n * @event sort - Dispatched on sort button click, returns the current sort value and the next sort value.\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-radius\n * @cssprop --color\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/\n */\n@scopedRegistry()\nexport class SortButton extends BaseButton {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-sort-button',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n /**\n * The current sort value, can be ascending, descending, or none.\n */\n @property({ type: String, reflect: true }) sort: 'ascending' | 'descending' | 'none' = 'none';\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 render() {\n return html`\n <div internal-host focus-within>\n <nve-icon part=\"icon\" .name=${this.sort === 'descending' ? 'sort-descending' : 'sort-ascending'} aria-hidden=\"true\"></nve-icon>\n </div>\n `;\n }\n\n constructor() {\n super();\n this.type = 'button';\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._internals.role = 'spinbutton';\n this.addEventListener('click', this.#onClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#onClick);\n }\n\n #onClick = () => {\n this._internals.ariaLabel = `${this.#i18nController.i18n.sort} ${nextSort[this.sort]}`;\n this.dispatchEvent(\n new CustomEvent('sort', {\n detail: { value: this.sort, next: nextSort[this.sort] },\n bubbles: true,\n composed: true\n })\n );\n };\n}\n"],"mappings":";;;;;;;;;;AASA,IAAM,IAAW;CACf,MAAM;CACN,WAAW;CACX,YAAY;AACd,GAgBO,IAAA,cAAyB,EAAW;;gBACzB,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAOA;CAOA,SAAS;EACP,OAAO,CAAI,gEAEuB,KAAK,SAAS,eAAe,oBAAoB,iBAAiB;CAGtG;CAEA,cAAc;EAEZ,AADA,MAAM,eAlB+E,kBAE/C,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB,sBA0BvC;GAEf,AADA,KAAK,WAAW,YAAY,GAAG,KAAKA,GAAgB,KAAK,KAAK,GAAG,EAAS,KAAK,SAC/E,KAAK,cACH,IAAI,YAAY,QAAQ;IACtB,QAAQ;KAAE,OAAO,KAAK;KAAM,MAAM,EAAS,KAAK;IAAM;IACtD,SAAS;IACT,UAAU;GACZ,CAAC,CACH;EACF,GAvBE,KAAK,OAAO;CACd;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO,cACvB,KAAK,iBAAiB,SAAS,KAAKC,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAKA,EAAQ;CACjD;CAEA;AAUF;GA3CG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAOxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAvB3B,EAAe,CAAA,GAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"define.js","names":[],"sources":["../../src/sparkline/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Sparkline } from '@nvidia-elements/core/sparkline';\n\ndefine(Sparkline);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-sparkline': Sparkline;\n }\n}\n"],"mappings":";;;AAMA,EAAO,
|
|
1
|
+
{"version":3,"file":"define.js","names":[],"sources":["../../src/sparkline/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Sparkline } from '@nvidia-elements/core/sparkline';\n\ndefine(Sparkline);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-sparkline': Sparkline;\n }\n}\n"],"mappings":";;;AAMA,EAAO,CAAS"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sparkline.utils.js","names":[],"sources":["../../src/sparkline/sparkline.utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Dimensions, Interpolation, Point, Rect, Scale, SparklineMark } from '@nvidia-elements/core/internal';\n\nexport const PRECISION = 2;\nexport const VIEW_HEIGHT = 100;\nconst DEFAULT_INTERVAL_LENGTH_EM = 0.6;\n\nconst HORIZONTAL_UNIT_WIDTH = VIEW_HEIGHT * DEFAULT_INTERVAL_LENGTH_EM;\nconst COLUMN_GAP_RATIO = 0.7;\nconst WINLOSS_GAP_RATIO = 0.85;\n\nexport function toValidData(data: unknown): number[] {\n if (!Array.isArray(data)) return [];\n return data.filter(Number.isFinite);\n}\n\nexport function calculateViewBox(\n mark: SparklineMark,\n pointCount: number,\n intervalLength = DEFAULT_INTERVAL_LENGTH_EM\n): Dimensions {\n const isIntervalBased = mark === 'line' || mark === 'area' || mark === 'gradient';\n const widthUnitCount = isIntervalBased ? Math.max(pointCount - 1, 1) : pointCount;\n const normalizedIntervalLength =\n Number.isFinite(intervalLength) && intervalLength > 0 ? intervalLength : DEFAULT_INTERVAL_LENGTH_EM;\n const width =\n mark === 'line' ? widthUnitCount * VIEW_HEIGHT * normalizedIntervalLength : widthUnitCount * HORIZONTAL_UNIT_WIDTH;\n\n return {\n width,\n height: VIEW_HEIGHT\n };\n}\n\nexport function calculateDomain(\n values: number[],\n options: { explicitMin?: number; explicitMax?: number; includeZero?: boolean } = {}\n): Scale | undefined {\n if (values.length === 0) return undefined;\n const { explicitMin, explicitMax, includeZero = false } = options;\n\n const dataMinimum = Math.min(...values);\n const dataMaximum = Math.max(...values);\n\n return {\n min: explicitMin ?? (includeZero ? Math.min(dataMinimum, 0) : dataMinimum),\n max: explicitMax ?? (includeZero ? Math.max(dataMaximum, 0) : dataMaximum)\n };\n}\n\nexport function valueToY(value: number, range: { min: number; max: number }, viewHeight = VIEW_HEIGHT): number {\n const span = range.max - range.min;\n if (span === 0) return viewHeight / 2;\n return viewHeight - ((value - range.min) / span) * viewHeight;\n}\n\nexport function toPlotPoints(\n values: number[],\n range: { min: number; max: number },\n view: { width: number; height?: number }\n): Point[] {\n const viewHeight = view.height ?? VIEW_HEIGHT;\n const stepX = values.length > 1 ? view.width / (values.length - 1) : 0;\n return values.map((value, index) => ({\n x: index * stepX,\n y: valueToY(value, range, viewHeight)\n }));\n}\n\nexport function calculateSymbolIndices(\n values: number[],\n denote: { first: boolean; last: boolean; min: boolean; max: boolean }\n): Set<number> {\n const indices = new Set<number>();\n if (values.length === 0) return indices;\n\n if (denote.first) indices.add(0);\n if (denote.last) indices.add(values.length - 1);\n\n const needsExtrema = denote.min || denote.max;\n if (!needsExtrema) return indices;\n\n const min = Math.min(...values);\n const max = Math.max(...values);\n\n values.forEach((value, index) => {\n if (denote.min && value === min) indices.add(index);\n if (denote.max && value === max) indices.add(index);\n });\n\n return indices;\n}\n\nexport function toInterpolation(interpolation: unknown): Interpolation {\n switch (interpolation) {\n case 'linear':\n return 'linear';\n case 'smooth':\n return 'smooth';\n case 'step':\n return 'step';\n default: {\n return 'linear';\n }\n }\n}\n\nexport function toLinePath(points: Point[], interpolation: Interpolation, viewWidth: number): string {\n if (points.length === 0) return '';\n if (points.length === 1) {\n const y = points[0]!.y.toFixed(PRECISION);\n return `M 0 ${y} L ${viewWidth.toFixed(PRECISION)} ${y}`;\n }\n\n switch (interpolation) {\n case 'step':\n return toStepOpenPath(points);\n case 'smooth':\n return toSmoothOpenPath(points);\n case 'linear':\n return toLinearOpenPath(points);\n default: {\n const exhaustiveCheck: never = interpolation;\n throw new Error(`Unhandled interpolation: ${exhaustiveCheck}`);\n }\n }\n}\n\nexport function toAreaPath(points: Point[], interpolation: Interpolation, viewHeight = VIEW_HEIGHT): string {\n if (points.length === 0) return '';\n\n let openPath = '';\n switch (interpolation) {\n case 'step':\n openPath = toStepOpenPath(points);\n break;\n case 'smooth':\n openPath = toSmoothOpenPath(points);\n break;\n case 'linear':\n openPath = toLinearOpenPath(points);\n break;\n default: {\n const exhaustiveCheck: never = interpolation;\n throw new Error(`Unhandled interpolation: ${exhaustiveCheck}`);\n }\n }\n\n const last = points[points.length - 1]!;\n const first = points[0]!;\n openPath += ` L ${last.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)}`;\n openPath += ` L ${first.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)} Z`;\n return openPath;\n}\n\nexport function toColumnRects(points: Point[], baselineY: number, width: number): Rect[] {\n const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(points.length, width, COLUMN_GAP_RATIO);\n\n return points.map((point, index) => {\n const x = index * stepX + (stepX - bandWidth) / 2;\n const height = Math.abs(point.y - baselineY);\n const y = Math.min(point.y, baselineY);\n return { x, y, width: bandWidth, height };\n });\n}\n\nexport function toWinLossRects(\n values: number[],\n baselineY: number,\n dimensions: { width: number; height: number }\n): (Rect & { className: 'win' | 'loss' | 'draw' })[] {\n const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(\n values.length,\n dimensions.width,\n WINLOSS_GAP_RATIO\n );\n const barHeight = dimensions.height / 2;\n\n return values.map((value, index) => {\n const x = index * stepX + (stepX - bandWidth) / 2;\n\n if (value > 0) {\n return { className: 'win', x, y: baselineY - barHeight, width: bandWidth, height: barHeight };\n }\n\n if (value < 0) {\n return { className: 'loss', x, y: baselineY, width: bandWidth, height: barHeight };\n }\n\n return {\n className: 'draw',\n x,\n y: baselineY - barHeight / 4,\n width: bandWidth,\n height: barHeight / 2\n };\n });\n}\n\nfunction toLinearOpenPath(points: Point[]): string {\n return points.reduce((path, point, index) => {\n if (index === 0) {\n return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }\n return `${path} L ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }, '');\n}\n\nfunction toSmoothOpenPath(points: Point[]): string {\n const segments = points.map((point, index) => {\n if (index === 0) {\n return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }\n const previous = points[index - 1]!;\n const deltaX = (point.x - previous.x) / 3;\n const p = PRECISION;\n return `C ${(previous.x + deltaX).toFixed(p)} ${previous.y.toFixed(p)} ${(point.x - deltaX).toFixed(p)} ${point.y.toFixed(p)} ${point.x.toFixed(p)} ${point.y.toFixed(p)}`;\n });\n return segments.join(' ');\n}\n\nfunction toStepOpenPath(points: Point[]): string {\n let path = `M ${points[0]!.x.toFixed(PRECISION)} ${points[0]!.y.toFixed(PRECISION)}`;\n for (let index = 1; index < points.length; index++) {\n const point = points[index]!;\n path += ` H ${point.x.toFixed(PRECISION)} V ${point.y.toFixed(PRECISION)}`;\n }\n return path;\n}\n\nfunction calculateBandSizing(count: number, viewDimension: number, gapRatio: number) {\n if (count <= 0) return { bandSize: 0, stepSize: 0 };\n\n const stepSize = viewDimension / count;\n const bandSize = stepSize * gapRatio;\n return { bandSize, stepSize };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sparkline.utils.js","names":[],"sources":["../../src/sparkline/sparkline.utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Dimensions, Interpolation, Point, Rect, Scale, SparklineMark } from '@nvidia-elements/core/internal';\n\nexport const PRECISION = 2;\nexport const VIEW_HEIGHT = 100;\nconst DEFAULT_INTERVAL_LENGTH_EM = 0.6;\n\nconst HORIZONTAL_UNIT_WIDTH = VIEW_HEIGHT * DEFAULT_INTERVAL_LENGTH_EM;\nconst COLUMN_GAP_RATIO = 0.7;\nconst WINLOSS_GAP_RATIO = 0.85;\n\nexport function toValidData(data: unknown): number[] {\n if (!Array.isArray(data)) return [];\n return data.filter(Number.isFinite);\n}\n\nexport function calculateViewBox(\n mark: SparklineMark,\n pointCount: number,\n intervalLength = DEFAULT_INTERVAL_LENGTH_EM\n): Dimensions {\n const isIntervalBased = mark === 'line' || mark === 'area' || mark === 'gradient';\n const widthUnitCount = isIntervalBased ? Math.max(pointCount - 1, 1) : pointCount;\n const normalizedIntervalLength =\n Number.isFinite(intervalLength) && intervalLength > 0 ? intervalLength : DEFAULT_INTERVAL_LENGTH_EM;\n const width =\n mark === 'line' ? widthUnitCount * VIEW_HEIGHT * normalizedIntervalLength : widthUnitCount * HORIZONTAL_UNIT_WIDTH;\n\n return {\n width,\n height: VIEW_HEIGHT\n };\n}\n\nexport function calculateDomain(\n values: number[],\n options: { explicitMin?: number; explicitMax?: number; includeZero?: boolean } = {}\n): Scale | undefined {\n if (values.length === 0) return undefined;\n const { explicitMin, explicitMax, includeZero = false } = options;\n\n const dataMinimum = Math.min(...values);\n const dataMaximum = Math.max(...values);\n\n return {\n min: explicitMin ?? (includeZero ? Math.min(dataMinimum, 0) : dataMinimum),\n max: explicitMax ?? (includeZero ? Math.max(dataMaximum, 0) : dataMaximum)\n };\n}\n\nexport function valueToY(value: number, range: { min: number; max: number }, viewHeight = VIEW_HEIGHT): number {\n const span = range.max - range.min;\n if (span === 0) return viewHeight / 2;\n return viewHeight - ((value - range.min) / span) * viewHeight;\n}\n\nexport function toPlotPoints(\n values: number[],\n range: { min: number; max: number },\n view: { width: number; height?: number }\n): Point[] {\n const viewHeight = view.height ?? VIEW_HEIGHT;\n const stepX = values.length > 1 ? view.width / (values.length - 1) : 0;\n return values.map((value, index) => ({\n x: index * stepX,\n y: valueToY(value, range, viewHeight)\n }));\n}\n\nexport function calculateSymbolIndices(\n values: number[],\n denote: { first: boolean; last: boolean; min: boolean; max: boolean }\n): Set<number> {\n const indices = new Set<number>();\n if (values.length === 0) return indices;\n\n if (denote.first) indices.add(0);\n if (denote.last) indices.add(values.length - 1);\n\n const needsExtrema = denote.min || denote.max;\n if (!needsExtrema) return indices;\n\n const min = Math.min(...values);\n const max = Math.max(...values);\n\n values.forEach((value, index) => {\n if (denote.min && value === min) indices.add(index);\n if (denote.max && value === max) indices.add(index);\n });\n\n return indices;\n}\n\nexport function toInterpolation(interpolation: unknown): Interpolation {\n switch (interpolation) {\n case 'linear':\n return 'linear';\n case 'smooth':\n return 'smooth';\n case 'step':\n return 'step';\n default: {\n return 'linear';\n }\n }\n}\n\nexport function toLinePath(points: Point[], interpolation: Interpolation, viewWidth: number): string {\n if (points.length === 0) return '';\n if (points.length === 1) {\n const y = points[0]!.y.toFixed(PRECISION);\n return `M 0 ${y} L ${viewWidth.toFixed(PRECISION)} ${y}`;\n }\n\n switch (interpolation) {\n case 'step':\n return toStepOpenPath(points);\n case 'smooth':\n return toSmoothOpenPath(points);\n case 'linear':\n return toLinearOpenPath(points);\n default: {\n const exhaustiveCheck: never = interpolation;\n throw new Error(`Unhandled interpolation: ${exhaustiveCheck}`);\n }\n }\n}\n\nexport function toAreaPath(points: Point[], interpolation: Interpolation, viewHeight = VIEW_HEIGHT): string {\n if (points.length === 0) return '';\n\n let openPath = '';\n switch (interpolation) {\n case 'step':\n openPath = toStepOpenPath(points);\n break;\n case 'smooth':\n openPath = toSmoothOpenPath(points);\n break;\n case 'linear':\n openPath = toLinearOpenPath(points);\n break;\n default: {\n const exhaustiveCheck: never = interpolation;\n throw new Error(`Unhandled interpolation: ${exhaustiveCheck}`);\n }\n }\n\n const last = points[points.length - 1]!;\n const first = points[0]!;\n openPath += ` L ${last.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)}`;\n openPath += ` L ${first.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)} Z`;\n return openPath;\n}\n\nexport function toColumnRects(points: Point[], baselineY: number, width: number): Rect[] {\n const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(points.length, width, COLUMN_GAP_RATIO);\n\n return points.map((point, index) => {\n const x = index * stepX + (stepX - bandWidth) / 2;\n const height = Math.abs(point.y - baselineY);\n const y = Math.min(point.y, baselineY);\n return { x, y, width: bandWidth, height };\n });\n}\n\nexport function toWinLossRects(\n values: number[],\n baselineY: number,\n dimensions: { width: number; height: number }\n): (Rect & { className: 'win' | 'loss' | 'draw' })[] {\n const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(\n values.length,\n dimensions.width,\n WINLOSS_GAP_RATIO\n );\n const barHeight = dimensions.height / 2;\n\n return values.map((value, index) => {\n const x = index * stepX + (stepX - bandWidth) / 2;\n\n if (value > 0) {\n return { className: 'win', x, y: baselineY - barHeight, width: bandWidth, height: barHeight };\n }\n\n if (value < 0) {\n return { className: 'loss', x, y: baselineY, width: bandWidth, height: barHeight };\n }\n\n return {\n className: 'draw',\n x,\n y: baselineY - barHeight / 4,\n width: bandWidth,\n height: barHeight / 2\n };\n });\n}\n\nfunction toLinearOpenPath(points: Point[]): string {\n return points.reduce((path, point, index) => {\n if (index === 0) {\n return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }\n return `${path} L ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }, '');\n}\n\nfunction toSmoothOpenPath(points: Point[]): string {\n const segments = points.map((point, index) => {\n if (index === 0) {\n return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }\n const previous = points[index - 1]!;\n const deltaX = (point.x - previous.x) / 3;\n const p = PRECISION;\n return `C ${(previous.x + deltaX).toFixed(p)} ${previous.y.toFixed(p)} ${(point.x - deltaX).toFixed(p)} ${point.y.toFixed(p)} ${point.x.toFixed(p)} ${point.y.toFixed(p)}`;\n });\n return segments.join(' ');\n}\n\nfunction toStepOpenPath(points: Point[]): string {\n let path = `M ${points[0]!.x.toFixed(PRECISION)} ${points[0]!.y.toFixed(PRECISION)}`;\n for (let index = 1; index < points.length; index++) {\n const point = points[index]!;\n path += ` H ${point.x.toFixed(PRECISION)} V ${point.y.toFixed(PRECISION)}`;\n }\n return path;\n}\n\nfunction calculateBandSizing(count: number, viewDimension: number, gapRatio: number) {\n if (count <= 0) return { bandSize: 0, stepSize: 0 };\n\n const stepSize = viewDimension / count;\n const bandSize = stepSize * gapRatio;\n return { bandSize, stepSize };\n}\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { attachInternals as e } from "../internal/utils/a11y.js";
|
|
2
|
-
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.
|
|
2
|
+
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
|
|
3
3
|
import { statusStateStyles as n, supportStateStyles as r, useStyles as i } from "../internal/styles/index.js";
|
|
4
4
|
import { calculateDomain as a, calculateSymbolIndices as o, calculateViewBox as s, toAreaPath as c, toColumnRects as l, toInterpolation as u, toLinePath as d, toPlotPoints as f, toValidData as p, toWinLossRects as m, valueToY as h } from "./sparkline.utils.js";
|
|
5
5
|
import g from "./sparkline.js";
|
|
@@ -21,7 +21,7 @@ var C = class extends _ {
|
|
|
21
21
|
static {
|
|
22
22
|
this.metadata = {
|
|
23
23
|
tag: "nve-sparkline",
|
|
24
|
-
version: "0.1.
|
|
24
|
+
version: "0.1.2"
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sparkline2.js","names":["#renderChart","#renderLineVariant","#renderColumn","#renderWinLoss","#renderGradientDef","#renderZeroLine","#renderAccents"],"sources":["../../src/sparkline/sparkline.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues, SVGTemplateResult } from 'lit';\nimport { html, LitElement, nothing, svg } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport type {\n DataElement,\n Interpolation,\n Point,\n SizeExpanded,\n SparklineMark,\n SupportStatus,\n TaskStatus\n} from '@nvidia-elements/core/internal';\nimport { attachInternals, statusStateStyles, supportStateStyles, useStyles } from '@nvidia-elements/core/internal';\nimport {\n calculateDomain,\n calculateSymbolIndices,\n calculateViewBox,\n PRECISION,\n toAreaPath,\n toColumnRects,\n toInterpolation,\n toLinePath,\n toPlotPoints,\n toValidData,\n toWinLossRects,\n valueToY,\n VIEW_HEIGHT\n} from './sparkline.utils.js';\nimport styles from './sparkline.css?inline';\n\n/**\n * @element nve-sparkline\n * @description A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/sparkline\n * @cssprop --height - Height (defaults to 1em and scales with parent font-size).\n * @cssprop --line-color\n * @cssprop --line-width\n * @cssprop --fill-color - Color used by area and column marks.\n * @cssprop --gradient-max-color\n * @cssprop --gradient-min-color\n * @cssprop --zero-line-color\n * @cssprop --zero-line-width\n * @cssprop --win-color Color used to represent positive values (wins).\n * @cssprop --loss-color Color used to represent negative values (losses).\n * @cssprop --draw-color Color used to represent zero values (draws / neutral outcomes).\n * @cssprop --symbol-color\n * @cssprop --symbol-border-color\n * @cssprop --symbol-border-width\n * @cssprop --symbol-radius - symbol circle radius in SVG units.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Sparkline extends LitElement implements DataElement<number[]> {\n static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n static readonly metadata = {\n tag: 'nve-sparkline',\n version: '0.0.0'\n };\n\n /** Numeric values representing a data series. */\n @property({ type: Array }) data: number[] = [];\n\n /** Controls the visual representation of data points. */\n @property({ type: String }) mark: SparklineMark = 'line';\n\n /** Controls how the chart connects intermediate values between points in a data series. Defaults to `linear`. */\n @property({ type: String }) interpolation: Interpolation = 'linear';\n\n /** Applies semantic status colors used across Elements status patterns. */\n @property({ type: String, reflect: true }) status?: TaskStatus | SupportStatus;\n\n /** Controls the sparkline size with explicit font-size tokens. Omit to auto-scale with parent font-size (1em). */\n @property({ type: String, reflect: true }) size?: SizeExpanded;\n\n /** Denotes the first data point by rendering a symbol at its position. */\n @property({ type: Boolean, attribute: 'denote-first', reflect: true })\n denoteFirst = false;\n\n /** Denotes the last data point by rendering a symbol at its position. */\n @property({ type: Boolean, attribute: 'denote-last', reflect: true })\n denoteLast = false;\n\n /** Denotes all minimum-value data points by rendering symbols at their positions. */\n @property({ type: Boolean, attribute: 'denote-min', reflect: true })\n denoteMin = false;\n\n /** Denotes all maximum-value data points by rendering symbols at their positions. */\n @property({ type: Boolean, attribute: 'denote-max', reflect: true })\n denoteMax = false;\n\n /** Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. */\n @property({ type: Number, attribute: 'interval-length' }) intervalLength = 0.6;\n\n /** Lower bound for the y-axis domain. When undefined, derives the bound from data. */\n @property({ type: Number }) min?: number;\n\n /** Upper bound for the y-axis domain. When undefined, derives the bound from data. */\n @property({ type: Number }) max?: number;\n\n /** Cached valid numeric values derived from data property. */\n @state() private validData: number[] = [];\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`<div internal-host>${this.#renderChart()}</div>`;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'img';\n }\n\n willUpdate(changedProperties: PropertyValues<this>) {\n super.willUpdate(changedProperties);\n\n if (changedProperties.has('data')) {\n this.validData = toValidData(this.data);\n }\n }\n\n #renderChart(): SVGTemplateResult | typeof nothing {\n const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n\n switch (this.mark) {\n case 'line':\n case 'area':\n case 'gradient':\n return this.#renderLineVariant(width, height);\n case 'column':\n return this.#renderColumn(width, height);\n case 'winloss':\n return this.#renderWinLoss(VIEW_HEIGHT / 2, width, height);\n default:\n const _exhaustiveCheck: never = this.mark;\n return nothing;\n }\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n\n const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n const aspectRatio = width / height;\n const validAspectRatio = Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : 1;\n this.style.setProperty('--_aspect-ratio', validAspectRatio.toFixed(4));\n }\n\n #renderLineVariant(width: number, height: number) {\n const domain = calculateDomain(this.validData, { explicitMin: this.min, explicitMax: this.max });\n if (!domain) return nothing;\n\n const baselineY = valueToY(0, domain);\n const drawZeroLine = domain.min < 0 && domain.max > 0;\n\n const plotPoints = toPlotPoints(this.validData, domain, { width });\n const symbolIndices = calculateSymbolIndices(this.validData, {\n first: this.denoteFirst,\n last: this.denoteLast,\n min: this.denoteMin,\n max: this.denoteMax\n });\n const interpolation = toInterpolation(this.interpolation);\n\n const linePath = toLinePath(plotPoints, interpolation, width);\n const drawArea = this.mark === 'area' || this.mark === 'gradient';\n const areaPath = drawArea ? toAreaPath(plotPoints, interpolation, VIEW_HEIGHT) : '';\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${this.mark === 'gradient' ? this.#renderGradientDef(height) : nothing}\n\n ${\n areaPath.length\n ? this.mark === 'gradient'\n ? svg`<path class=\"area\" d=${areaPath} style=\"fill: url(#gradient)\"></path>`\n : svg`<path class=\"area\" d=${areaPath}></path>`\n : nothing\n }\n\n ${drawZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n ${linePath ? svg`<path class=\"line\" d=${linePath} vector-effect=\"non-scaling-stroke\"></path>` : nothing}\n </svg>\n ${this.#renderAccents(plotPoints, symbolIndices)}\n `;\n }\n\n #renderGradientDef(height: number) {\n return svg`\n <defs>\n <linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"${height}\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0%\" style=\"stop-color: var(--gradient-max-color)\"></stop>\n <stop offset=\"100%\" style=\"stop-color: var(--gradient-min-color)\"></stop>\n </linearGradient>\n </defs>\n `;\n }\n\n #renderZeroLine(position: number, width: number) {\n return svg`\n <line\n class=\"zero-line\"\n vector-effect=\"non-scaling-stroke\"\n x1=\"0\"\n y1=\"${position.toFixed(PRECISION)}\"\n x2=\"${width}\"\n y2=\"${position.toFixed(PRECISION)}\">\n </line>\n `;\n }\n\n #renderAccents(points: Point[], accentIndices: Set<number>) {\n if (points.length === 0 || accentIndices.size === 0) return nothing;\n\n return html`\n ${Array.from(accentIndices).map(index => {\n const point = points[index];\n if (!point) return nothing;\n\n const style = `--x: ${point.x.toFixed(PRECISION)}; --y: ${point.y.toFixed(PRECISION)}`;\n return html`\n <span style=${style} class=\"accent\"></span>\n `;\n })}\n `;\n }\n\n #renderColumn(width: number, height: number) {\n const domain = calculateDomain(this.validData, {\n explicitMin: this.min,\n explicitMax: this.max,\n includeZero: true\n });\n if (!domain) return nothing;\n\n const baselineY = valueToY(0, domain);\n const showZeroLine = domain.min < 0 && domain.max > 0;\n const plotPoints = toPlotPoints(this.validData, domain, { width });\n const rects = toColumnRects(plotPoints, baselineY, width);\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${showZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n ${rects.map(rect => {\n return svg`<rect class=\"column\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n })}\n </svg>\n `;\n }\n\n #renderWinLoss(baselineY: number, width: number, height: number) {\n if (this.validData.length === 0) return nothing;\n\n const rects = toWinLossRects(this.validData, baselineY, { width, height });\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${this.#renderZeroLine(baselineY, width)}\n\n ${rects.map(rect => {\n return svg`<rect class=\"${rect.className}\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n })}\n </svg>\n `;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sparkline2.js","names":["#renderChart","#renderLineVariant","#renderColumn","#renderWinLoss","#renderGradientDef","#renderZeroLine","#renderAccents"],"sources":["../../src/sparkline/sparkline.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues, SVGTemplateResult } from 'lit';\nimport { html, LitElement, nothing, svg } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport type {\n DataElement,\n Interpolation,\n Point,\n SizeExpanded,\n SparklineMark,\n SupportStatus,\n TaskStatus\n} from '@nvidia-elements/core/internal';\nimport { attachInternals, statusStateStyles, supportStateStyles, useStyles } from '@nvidia-elements/core/internal';\nimport {\n calculateDomain,\n calculateSymbolIndices,\n calculateViewBox,\n PRECISION,\n toAreaPath,\n toColumnRects,\n toInterpolation,\n toLinePath,\n toPlotPoints,\n toValidData,\n toWinLossRects,\n valueToY,\n VIEW_HEIGHT\n} from './sparkline.utils.js';\nimport styles from './sparkline.css?inline';\n\n/**\n * @element nve-sparkline\n * @description A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/sparkline\n * @cssprop --height - Height (defaults to 1em and scales with parent font-size).\n * @cssprop --line-color\n * @cssprop --line-width\n * @cssprop --fill-color - Color used by area and column marks.\n * @cssprop --gradient-max-color\n * @cssprop --gradient-min-color\n * @cssprop --zero-line-color\n * @cssprop --zero-line-width\n * @cssprop --win-color Color used to represent positive values (wins).\n * @cssprop --loss-color Color used to represent negative values (losses).\n * @cssprop --draw-color Color used to represent zero values (draws / neutral outcomes).\n * @cssprop --symbol-color\n * @cssprop --symbol-border-color\n * @cssprop --symbol-border-width\n * @cssprop --symbol-radius - symbol circle radius in SVG units.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Sparkline extends LitElement implements DataElement<number[]> {\n static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n static readonly metadata = {\n tag: 'nve-sparkline',\n version: '0.0.0'\n };\n\n /** Numeric values representing a data series. */\n @property({ type: Array }) data: number[] = [];\n\n /** Controls the visual representation of data points. */\n @property({ type: String }) mark: SparklineMark = 'line';\n\n /** Controls how the chart connects intermediate values between points in a data series. Defaults to `linear`. */\n @property({ type: String }) interpolation: Interpolation = 'linear';\n\n /** Applies semantic status colors used across Elements status patterns. */\n @property({ type: String, reflect: true }) status?: TaskStatus | SupportStatus;\n\n /** Controls the sparkline size with explicit font-size tokens. Omit to auto-scale with parent font-size (1em). */\n @property({ type: String, reflect: true }) size?: SizeExpanded;\n\n /** Denotes the first data point by rendering a symbol at its position. */\n @property({ type: Boolean, attribute: 'denote-first', reflect: true })\n denoteFirst = false;\n\n /** Denotes the last data point by rendering a symbol at its position. */\n @property({ type: Boolean, attribute: 'denote-last', reflect: true })\n denoteLast = false;\n\n /** Denotes all minimum-value data points by rendering symbols at their positions. */\n @property({ type: Boolean, attribute: 'denote-min', reflect: true })\n denoteMin = false;\n\n /** Denotes all maximum-value data points by rendering symbols at their positions. */\n @property({ type: Boolean, attribute: 'denote-max', reflect: true })\n denoteMax = false;\n\n /** Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. */\n @property({ type: Number, attribute: 'interval-length' }) intervalLength = 0.6;\n\n /** Lower bound for the y-axis domain. When undefined, derives the bound from data. */\n @property({ type: Number }) min?: number;\n\n /** Upper bound for the y-axis domain. When undefined, derives the bound from data. */\n @property({ type: Number }) max?: number;\n\n /** Cached valid numeric values derived from data property. */\n @state() private validData: number[] = [];\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`<div internal-host>${this.#renderChart()}</div>`;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'img';\n }\n\n willUpdate(changedProperties: PropertyValues<this>) {\n super.willUpdate(changedProperties);\n\n if (changedProperties.has('data')) {\n this.validData = toValidData(this.data);\n }\n }\n\n #renderChart(): SVGTemplateResult | typeof nothing {\n const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n\n switch (this.mark) {\n case 'line':\n case 'area':\n case 'gradient':\n return this.#renderLineVariant(width, height);\n case 'column':\n return this.#renderColumn(width, height);\n case 'winloss':\n return this.#renderWinLoss(VIEW_HEIGHT / 2, width, height);\n default:\n const _exhaustiveCheck: never = this.mark;\n return nothing;\n }\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n\n const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n const aspectRatio = width / height;\n const validAspectRatio = Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : 1;\n this.style.setProperty('--_aspect-ratio', validAspectRatio.toFixed(4));\n }\n\n #renderLineVariant(width: number, height: number) {\n const domain = calculateDomain(this.validData, { explicitMin: this.min, explicitMax: this.max });\n if (!domain) return nothing;\n\n const baselineY = valueToY(0, domain);\n const drawZeroLine = domain.min < 0 && domain.max > 0;\n\n const plotPoints = toPlotPoints(this.validData, domain, { width });\n const symbolIndices = calculateSymbolIndices(this.validData, {\n first: this.denoteFirst,\n last: this.denoteLast,\n min: this.denoteMin,\n max: this.denoteMax\n });\n const interpolation = toInterpolation(this.interpolation);\n\n const linePath = toLinePath(plotPoints, interpolation, width);\n const drawArea = this.mark === 'area' || this.mark === 'gradient';\n const areaPath = drawArea ? toAreaPath(plotPoints, interpolation, VIEW_HEIGHT) : '';\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${this.mark === 'gradient' ? this.#renderGradientDef(height) : nothing}\n\n ${\n areaPath.length\n ? this.mark === 'gradient'\n ? svg`<path class=\"area\" d=${areaPath} style=\"fill: url(#gradient)\"></path>`\n : svg`<path class=\"area\" d=${areaPath}></path>`\n : nothing\n }\n\n ${drawZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n ${linePath ? svg`<path class=\"line\" d=${linePath} vector-effect=\"non-scaling-stroke\"></path>` : nothing}\n </svg>\n ${this.#renderAccents(plotPoints, symbolIndices)}\n `;\n }\n\n #renderGradientDef(height: number) {\n return svg`\n <defs>\n <linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"${height}\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0%\" style=\"stop-color: var(--gradient-max-color)\"></stop>\n <stop offset=\"100%\" style=\"stop-color: var(--gradient-min-color)\"></stop>\n </linearGradient>\n </defs>\n `;\n }\n\n #renderZeroLine(position: number, width: number) {\n return svg`\n <line\n class=\"zero-line\"\n vector-effect=\"non-scaling-stroke\"\n x1=\"0\"\n y1=\"${position.toFixed(PRECISION)}\"\n x2=\"${width}\"\n y2=\"${position.toFixed(PRECISION)}\">\n </line>\n `;\n }\n\n #renderAccents(points: Point[], accentIndices: Set<number>) {\n if (points.length === 0 || accentIndices.size === 0) return nothing;\n\n return html`\n ${Array.from(accentIndices).map(index => {\n const point = points[index];\n if (!point) return nothing;\n\n const style = `--x: ${point.x.toFixed(PRECISION)}; --y: ${point.y.toFixed(PRECISION)}`;\n return html`\n <span style=${style} class=\"accent\"></span>\n `;\n })}\n `;\n }\n\n #renderColumn(width: number, height: number) {\n const domain = calculateDomain(this.validData, {\n explicitMin: this.min,\n explicitMax: this.max,\n includeZero: true\n });\n if (!domain) return nothing;\n\n const baselineY = valueToY(0, domain);\n const showZeroLine = domain.min < 0 && domain.max > 0;\n const plotPoints = toPlotPoints(this.validData, domain, { width });\n const rects = toColumnRects(plotPoints, baselineY, width);\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${showZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n ${rects.map(rect => {\n return svg`<rect class=\"column\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n })}\n </svg>\n `;\n }\n\n #renderWinLoss(baselineY: number, width: number, height: number) {\n if (this.validData.length === 0) return nothing;\n\n const rects = toWinLossRects(this.validData, baselineY, { width, height });\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${this.#renderZeroLine(baselineY, width)}\n\n ${rects.map(rect => {\n return svg`<rect class=\"${rect.className}\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n })}\n </svg>\n `;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"define.js","names":[],"sources":["../../src/star-rating/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { StarRating } from '@nvidia-elements/core/star-rating';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(StarRating);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-star-rating': StarRating;\n }\n}\n"],"mappings":";;;;;AAOA,EAAO,
|
|
1
|
+
{"version":3,"file":"define.js","names":[],"sources":["../../src/star-rating/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { StarRating } from '@nvidia-elements/core/star-rating';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(StarRating);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-star-rating': StarRating;\n }\n}\n"],"mappings":";;;;;AAOA,EAAO,CAAU,GACjB,EAAO,CAAO,GACd,EAAO,CAAY,GACnB,EAAO,CAAc"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getElementUpdate as e } from "../internal/utils/dom.js";
|
|
2
|
-
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.
|
|
2
|
+
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
|
|
3
3
|
import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
|
|
4
4
|
import { useStyles as r } from "../internal/styles/index.js";
|
|
5
5
|
import { Icon as i } from "../icon/icon2.js";
|
|
@@ -18,7 +18,7 @@ var l = class extends a {
|
|
|
18
18
|
static {
|
|
19
19
|
this.metadata = {
|
|
20
20
|
tag: "nve-star-rating",
|
|
21
|
-
version: "0.1.
|
|
21
|
+
version: "0.1.2"
|
|
22
22
|
};
|
|
23
23
|
}
|
|
24
24
|
static {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"star-rating2.js","names":["#setValue","#getStepValue","#handleMouseMove"],"sources":["../../src/star-rating/star-rating.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 type { PropertyValues } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport { useStyles, getElementUpdate, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './star-rating.css?inline';\n\n/**\n * @element nve-star-rating\n * @description A star rating component lets users rate something using stars, providing a quick visual representation of feedback\n * @since 1.23.1\n * @entrypoint \\@nvidia-elements/core/star-rating\n * @cssprop --star-size\n * @cssprop --color\n * @cssprop --stroke-color\n * @cssprop --width\n * @cssprop --height\n * @csspart icon - The icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range\n *\n */\n@scopedRegistry()\nexport class StarRating extends Control {\n static styles = useStyles([...Control.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-star-rating',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n @state() private min = 0;\n @state() private max = 5;\n @state() private value = 0;\n @state() private active = 0;\n @state() private precision = 0.5;\n\n firstUpdated(props: PropertyValues<this>) {\n super.firstUpdated(props);\n\n getElementUpdate(this.input, 'max', (max: unknown) => {\n if (max) {\n this.max = parseInt(max as string);\n }\n });\n\n getElementUpdate(this.input, 'min', (min: unknown) => {\n if (min) {\n this.min = parseInt(min as string);\n }\n });\n\n getElementUpdate(this.input, 'value', (value: unknown) => {\n this.#setValue(value ? parseFloat(value as string) : this.input.valueAsNumber);\n });\n\n this.input.addEventListener('input', () => (this.value = this.input.valueAsNumber));\n\n this.value = this.input.valueAsNumber;\n }\n\n protected get prefixContent() {\n return html`\n <div aria-hidden=\"true\" class=\"stars\" @mouseleave=${() => (this.active = 0)}>\n ${new Array(this.max).fill('').map((_, i) => {\n const starValue = i + 1;\n const currentValue = this.active || this.value;\n const diff = currentValue - i;\n\n const iconName = diff >= 1 ? 'star' : diff >= 0.5 ? 'star-half' : 'star-stroke';\n\n return html`\n <nve-icon part=\"icon\"\n @click=${() => this.#setValue(this.#getStepValue(i, starValue))}\n @mousemove=${(e: MouseEvent) => this.#handleMouseMove(e, i, starValue)}\n name=${iconName}\n ></nve-icon>\n `;\n })}\n </div>\n `;\n }\n\n #handleMouseMove(e: MouseEvent, index: number, starValue: number) {\n const target = e.currentTarget as HTMLElement;\n const rect = target.getBoundingClientRect();\n const position = (e.clientX - rect.left) / rect.width;\n\n this.active = position <= 0.5 ? index + 0.5 : starValue;\n }\n\n #getStepValue(index: number, starValue: number) {\n // If hovering (active has a value), use that value\n if (this.active > 0) {\n return this.active;\n }\n\n // If clicking on the current value, toggle it off\n if (this.value === starValue || this.value === index + 0.5) {\n return 0;\n }\n\n // Otherwise, return the star value\n return starValue;\n }\n\n #setValue(value: number) {\n this.input.valueAsNumber = value === this.value ? 0 : value;\n this.input.dispatchEvent(new Event('input', { bubbles: true }));\n this.input.dispatchEvent(new Event('change', { bubbles: true }));\n }\n}\n"],"mappings":";;;;;;;;;;AA0BO,IAAA,IAAA,cAAyB,EAAQ;;0BAYf,cACA,gBACE,iBACC,oBACG;;;gBAfb,EAAU,CAAC,GAAG,EAAQ,QAAQ,
|
|
1
|
+
{"version":3,"file":"star-rating2.js","names":["#setValue","#getStepValue","#handleMouseMove"],"sources":["../../src/star-rating/star-rating.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 type { PropertyValues } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport { useStyles, getElementUpdate, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './star-rating.css?inline';\n\n/**\n * @element nve-star-rating\n * @description A star rating component lets users rate something using stars, providing a quick visual representation of feedback\n * @since 1.23.1\n * @entrypoint \\@nvidia-elements/core/star-rating\n * @cssprop --star-size\n * @cssprop --color\n * @cssprop --stroke-color\n * @cssprop --width\n * @cssprop --height\n * @csspart icon - The icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range\n *\n */\n@scopedRegistry()\nexport class StarRating extends Control {\n static styles = useStyles([...Control.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-star-rating',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n @state() private min = 0;\n @state() private max = 5;\n @state() private value = 0;\n @state() private active = 0;\n @state() private precision = 0.5;\n\n firstUpdated(props: PropertyValues<this>) {\n super.firstUpdated(props);\n\n getElementUpdate(this.input, 'max', (max: unknown) => {\n if (max) {\n this.max = parseInt(max as string);\n }\n });\n\n getElementUpdate(this.input, 'min', (min: unknown) => {\n if (min) {\n this.min = parseInt(min as string);\n }\n });\n\n getElementUpdate(this.input, 'value', (value: unknown) => {\n this.#setValue(value ? parseFloat(value as string) : this.input.valueAsNumber);\n });\n\n this.input.addEventListener('input', () => (this.value = this.input.valueAsNumber));\n\n this.value = this.input.valueAsNumber;\n }\n\n protected get prefixContent() {\n return html`\n <div aria-hidden=\"true\" class=\"stars\" @mouseleave=${() => (this.active = 0)}>\n ${new Array(this.max).fill('').map((_, i) => {\n const starValue = i + 1;\n const currentValue = this.active || this.value;\n const diff = currentValue - i;\n\n const iconName = diff >= 1 ? 'star' : diff >= 0.5 ? 'star-half' : 'star-stroke';\n\n return html`\n <nve-icon part=\"icon\"\n @click=${() => this.#setValue(this.#getStepValue(i, starValue))}\n @mousemove=${(e: MouseEvent) => this.#handleMouseMove(e, i, starValue)}\n name=${iconName}\n ></nve-icon>\n `;\n })}\n </div>\n `;\n }\n\n #handleMouseMove(e: MouseEvent, index: number, starValue: number) {\n const target = e.currentTarget as HTMLElement;\n const rect = target.getBoundingClientRect();\n const position = (e.clientX - rect.left) / rect.width;\n\n this.active = position <= 0.5 ? index + 0.5 : starValue;\n }\n\n #getStepValue(index: number, starValue: number) {\n // If hovering (active has a value), use that value\n if (this.active > 0) {\n return this.active;\n }\n\n // If clicking on the current value, toggle it off\n if (this.value === starValue || this.value === index + 0.5) {\n return 0;\n }\n\n // Otherwise, return the star value\n return starValue;\n }\n\n #setValue(value: number) {\n this.input.valueAsNumber = value === this.value ? 0 : value;\n this.input.dispatchEvent(new Event('input', { bubbles: true }));\n this.input.dispatchEvent(new Event('change', { bubbles: true }));\n }\n}\n"],"mappings":";;;;;;;;;;AA0BO,IAAA,IAAA,cAAyB,EAAQ;;0BAYf,cACA,gBACE,iBACC,oBACG;;;gBAfb,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;kBAE1B;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAQA,aAAa,GAA6B;EAqBxC,AApBA,MAAM,aAAa,CAAK,GAExB,EAAiB,KAAK,OAAO,QAAQ,MAAiB;GACpD,AAAI,MACF,KAAK,MAAM,SAAS,CAAa;EAErC,CAAC,GAED,EAAiB,KAAK,OAAO,QAAQ,MAAiB;GACpD,AAAI,MACF,KAAK,MAAM,SAAS,CAAa;EAErC,CAAC,GAED,EAAiB,KAAK,OAAO,UAAU,MAAmB;GACxD,KAAKA,GAAU,IAAQ,WAAW,CAAe,IAAI,KAAK,MAAM,aAAa;EAC/E,CAAC,GAED,KAAK,MAAM,iBAAiB,eAAgB,KAAK,QAAQ,KAAK,MAAM,aAAc,GAElF,KAAK,QAAQ,KAAK,MAAM;CAC1B;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,4DACgD,KAAK,SAAS,EAAG,IACpE,MAAM,KAAK,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,GAAG,MAAM;GAC3C,IAAM,IAAY,IAAI,GAEhB,KADe,KAAK,UAAU,KAAK,SACb;GAI5B,OAAO,CAAI,uCAEM,KAAKA,GAAU,KAAKC,GAAc,GAAG,CAAS,CAAC,EAAE,iBAClD,MAAkB,KAAKC,GAAiB,GAAG,GAAG,CAAS,EAAE,UALxD,KAAQ,IAAI,SAAS,KAAQ,KAAM,cAAc,cAMhD;EAGpB,CAAC,EAAE;CAGP;CAEA,GAAiB,GAAe,GAAe,GAAmB;EAEhE,IAAM,IADS,EAAE,cACG,sBAAsB,GACpC,KAAY,EAAE,UAAU,EAAK,QAAQ,EAAK;EAEhD,KAAK,SAAS,KAAY,KAAM,IAAQ,KAAM;CAChD;CAEA,GAAc,GAAe,GAAmB;EAY9C,OAVI,KAAK,SAAS,IACT,KAAK,SAIV,KAAK,UAAU,KAAa,KAAK,UAAU,IAAQ,KAC9C,IAIF;CACT;CAEA,GAAU,GAAe;EAGvB,AAFA,KAAK,MAAM,gBAAgB,MAAU,KAAK,QAAQ,IAAI,GACtD,KAAK,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GAC9D,KAAK,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACjE;AACF;GAhFG,EAAM,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MACN,EAAM,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,UAjBR,EAAe,CAAA,GAAA,CAAA"}
|
package/dist/steps/define.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"define.js","names":[],"sources":["../../src/steps/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { StepsItem, Steps } from '@nvidia-elements/core/steps';\n\ndefine(StepsItem);\ndefine(Steps);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-steps-item': StepsItem;\n 'nve-steps': Steps;\n }\n}\n"],"mappings":";;AAMA,EAAO,
|
|
1
|
+
{"version":3,"file":"define.js","names":[],"sources":["../../src/steps/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { StepsItem, Steps } from '@nvidia-elements/core/steps';\n\ndefine(StepsItem);\ndefine(Steps);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-steps-item': StepsItem;\n 'nve-steps': Steps;\n }\n}\n"],"mappings":";;AAMA,EAAO,CAAS,GAChB,EAAO,CAAK"}
|
package/dist/steps/steps2.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { attachInternals as e } from "../internal/utils/a11y.js";
|
|
2
2
|
import { stateSelected as t } from "../internal/controllers/state-selected.controller.js";
|
|
3
|
-
import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.
|
|
3
|
+
import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
|
|
4
4
|
import { BaseButton as r } from "../internal/base/button.js";
|
|
5
5
|
import { audit as i } from "../internal/controllers/audit.controller.js";
|
|
6
6
|
import { keyNavigationList as a } from "../internal/controllers/keynav-list.controller.js";
|
|
@@ -23,7 +23,7 @@ var v = class extends r {
|
|
|
23
23
|
static {
|
|
24
24
|
this.metadata = {
|
|
25
25
|
tag: "nve-steps-item",
|
|
26
|
-
version: "0.1.
|
|
26
|
+
version: "0.1.2",
|
|
27
27
|
parents: ["nve-steps"]
|
|
28
28
|
};
|
|
29
29
|
}
|
|
@@ -69,7 +69,7 @@ var y = class extends f {
|
|
|
69
69
|
static {
|
|
70
70
|
this.metadata = {
|
|
71
71
|
tag: "nve-steps",
|
|
72
|
-
version: "0.1.
|
|
72
|
+
version: "0.1.2",
|
|
73
73
|
children: ["nve-steps-item"]
|
|
74
74
|
};
|
|
75
75
|
}
|
package/dist/steps/steps2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"steps2.js","names":["#selectTab","#syncChildSteps","#onClick"],"sources":["../../src/steps/steps.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 { state } from 'lit/decorators/state.js';\nimport { when } from 'lit/directives/when.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { KeynavListConfig, Container } from '@nvidia-elements/core/internal';\nimport {\n BaseButton,\n stateSelected,\n useStyles,\n keyNavigationList,\n attachInternals,\n audit,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport stepsItemStyleSheet from './steps-item.css?inline';\nimport stepsStyleSheet from './steps.css?inline';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { ProgressRing } from '@nvidia-elements/core/progress-ring';\n\n/**\n * @element nve-steps-item\n * @description Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.\n * @since 0.30.0\n * @entrypoint \\@nvidia-elements/core/steps\n * @slot - default slot for step text\n * @slot status-icon - custom slotted step icon\n * @cssprop --font-size\n * @cssprop --border-top\n * @cssprop --width\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --text-transform\n * @csspart icon-button - The icon button element\n * @csspart progress-ring - The progress ring element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n */\n@audit()\n@scopedRegistry()\n@stateSelected<StepsItem>()\nexport class StepsItem extends BaseButton {\n /**\n * Determines which item the user selects, defaults to false.\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n /**\n * Four visual treatments represent the `status` of tasks. When `status` has a value of `warning`, `success`, or `danger`, the component embeds appropriate icons.\n */\n @property({ type: String, reflect: true }) status?: 'accent' | 'danger' | 'success' | 'pending';\n\n /**\n * Determines whether the steps should display in condensed format with no text labels.\n */\n @property({ type: String, reflect: true }) container?: Extract<Container, 'condensed'>;\n\n /** @private */\n @state() index: number = 0;\n\n static styles = useStyles([stepsItemStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-steps-item',\n version: '0.0.0',\n parents: ['nve-steps']\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton,\n [ProgressRing.metadata.tag]: ProgressRing\n };\n\n render() {\n return html`\n <div internal-host focus-within>\n <slot name=\"status-icon\">\n ${!this.status ? html`<nve-icon-button part=\"icon-button\" readonly id=\"number-icon\" .disabled=${this.disabled}>${this.index}</nve-icon-button>` : ''}\n ${this.status === 'success' ? html`<nve-icon-button part=\"icon-button\" readonly size=\"sm\" interaction=\"emphasis\" icon-name=\"check\"></nve-icon-button>` : ''}\n ${this.status === 'danger' ? html`<nve-icon-button part=\"icon-button\" readonly size=\"sm\" interaction=\"destructive\" icon-name=\"exclamation-circle\"></nve-icon-button>` : ''}\n ${this.status === 'pending' ? html`<nve-progress-ring part=\"progress-ring\" status=\"accent\" size=\"sm\"></nve-progress-ring>` : ''}\n </slot>\n ${when(this.container !== 'condensed', () => html`<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\n/**\n * @element nve-steps\n * @description Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.\n * @since 0.30.0\n * @entrypoint \\@nvidia-elements/core/steps\n * @slot - default slot for steps-item\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n */\n@audit()\n@keyNavigationList<Steps>()\nexport class Steps extends LitElement {\n /**\n * Determines whether the steps 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 steps should display in condensed format with no text labels.\n */\n @property({ type: String, reflect: true }) container?: Extract<Container, 'condensed'>;\n\n /**\n * Determines whether the steps should handle selection behavior vs. defaults to off.\n */\n @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n static styles = useStyles([stepsStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-steps',\n version: '0.0.0',\n children: ['nve-steps-item']\n };\n\n /** @private */\n get keynavListConfig(): KeynavListConfig {\n return {\n items: this.steps,\n layout: this.vertical ? 'vertical' : 'horizontal'\n };\n }\n\n @queryAssignedElements({ selector: 'nve-steps-item' }) private steps!: StepsItem[];\n\n /** @private */\n declare _internals: ElementInternals;\n\n #selectTab(stepsItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n if (!this.behaviorSelect || !stepsItem.matches('nve-steps-item') || stepsItem.disabled) {\n return;\n }\n\n this.steps.forEach(i => (i.selected = false));\n stepsItem.selected = true;\n }\n\n render() {\n return html`\n <div internal-host>\n <slot @slotchange=${this.#syncChildSteps}></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\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 if (props.has('container') || props.has('vertical')) {\n this.#syncChildSteps();\n }\n }\n\n #syncChildSteps() {\n this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n this.steps.forEach((item, i) => {\n item.index = i + 1;\n item.container = this.container;\n });\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6CO,IAAA,IAAA,cAAwB,EAAW;;gBAmBxB,EAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"steps2.js","names":["#selectTab","#syncChildSteps","#onClick"],"sources":["../../src/steps/steps.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 { state } from 'lit/decorators/state.js';\nimport { when } from 'lit/directives/when.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { KeynavListConfig, Container } from '@nvidia-elements/core/internal';\nimport {\n BaseButton,\n stateSelected,\n useStyles,\n keyNavigationList,\n attachInternals,\n audit,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport stepsItemStyleSheet from './steps-item.css?inline';\nimport stepsStyleSheet from './steps.css?inline';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { ProgressRing } from '@nvidia-elements/core/progress-ring';\n\n/**\n * @element nve-steps-item\n * @description Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.\n * @since 0.30.0\n * @entrypoint \\@nvidia-elements/core/steps\n * @slot - default slot for step text\n * @slot status-icon - custom slotted step icon\n * @cssprop --font-size\n * @cssprop --border-top\n * @cssprop --width\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --text-transform\n * @csspart icon-button - The icon button element\n * @csspart progress-ring - The progress ring element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n */\n@audit()\n@scopedRegistry()\n@stateSelected<StepsItem>()\nexport class StepsItem extends BaseButton {\n /**\n * Determines which item the user selects, defaults to false.\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n /**\n * Four visual treatments represent the `status` of tasks. When `status` has a value of `warning`, `success`, or `danger`, the component embeds appropriate icons.\n */\n @property({ type: String, reflect: true }) status?: 'accent' | 'danger' | 'success' | 'pending';\n\n /**\n * Determines whether the steps should display in condensed format with no text labels.\n */\n @property({ type: String, reflect: true }) container?: Extract<Container, 'condensed'>;\n\n /** @private */\n @state() index: number = 0;\n\n static styles = useStyles([stepsItemStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-steps-item',\n version: '0.0.0',\n parents: ['nve-steps']\n };\n\n static elementDefinitions = {\n [IconButton.metadata.tag]: IconButton,\n [ProgressRing.metadata.tag]: ProgressRing\n };\n\n render() {\n return html`\n <div internal-host focus-within>\n <slot name=\"status-icon\">\n ${!this.status ? html`<nve-icon-button part=\"icon-button\" readonly id=\"number-icon\" .disabled=${this.disabled}>${this.index}</nve-icon-button>` : ''}\n ${this.status === 'success' ? html`<nve-icon-button part=\"icon-button\" readonly size=\"sm\" interaction=\"emphasis\" icon-name=\"check\"></nve-icon-button>` : ''}\n ${this.status === 'danger' ? html`<nve-icon-button part=\"icon-button\" readonly size=\"sm\" interaction=\"destructive\" icon-name=\"exclamation-circle\"></nve-icon-button>` : ''}\n ${this.status === 'pending' ? html`<nve-progress-ring part=\"progress-ring\" status=\"accent\" size=\"sm\"></nve-progress-ring>` : ''}\n </slot>\n ${when(this.container !== 'condensed', () => html`<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\n/**\n * @element nve-steps\n * @description Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.\n * @since 0.30.0\n * @entrypoint \\@nvidia-elements/core/steps\n * @slot - default slot for steps-item\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n */\n@audit()\n@keyNavigationList<Steps>()\nexport class Steps extends LitElement {\n /**\n * Determines whether the steps 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 steps should display in condensed format with no text labels.\n */\n @property({ type: String, reflect: true }) container?: Extract<Container, 'condensed'>;\n\n /**\n * Determines whether the steps should handle selection behavior vs. defaults to off.\n */\n @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n static styles = useStyles([stepsStyleSheet]);\n\n static readonly metadata = {\n tag: 'nve-steps',\n version: '0.0.0',\n children: ['nve-steps-item']\n };\n\n /** @private */\n get keynavListConfig(): KeynavListConfig {\n return {\n items: this.steps,\n layout: this.vertical ? 'vertical' : 'horizontal'\n };\n }\n\n @queryAssignedElements({ selector: 'nve-steps-item' }) private steps!: StepsItem[];\n\n /** @private */\n declare _internals: ElementInternals;\n\n #selectTab(stepsItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n if (!this.behaviorSelect || !stepsItem.matches('nve-steps-item') || stepsItem.disabled) {\n return;\n }\n\n this.steps.forEach(i => (i.selected = false));\n stepsItem.selected = true;\n }\n\n render() {\n return html`\n <div internal-host>\n <slot @slotchange=${this.#syncChildSteps}></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\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 if (props.has('container') || props.has('vertical')) {\n this.#syncChildSteps();\n }\n }\n\n #syncChildSteps() {\n this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n this.steps.forEach((item, i) => {\n item.index = i + 1;\n item.container = this.container;\n });\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6CO,IAAA,IAAA,cAAwB,EAAW;;gBAmBxB,EAAU,CAAC,CAAmB,CAAC;;;kBAEpB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,WAAW;EACvB;;;4BAE4B;IACzB,EAAW,SAAS,MAAM;IAC1B,EAAa,SAAS,MAAM;EAC/B;;CAEA,SAAS;EACP,OAAO,CAAI,4DAGF,KAAK,SAA0I,KAAjI,CAAI,uFAA2E,KAAK,SAAS,IAAG,KAAK,MAAM,oBAAyB,GACnJ,KAAK,WAAW,YAAY,CAAI,kIAAuH,GAAG,GAC1J,KAAK,WAAW,WAAW,CAAI,kJAAuI,GAAG,GACzK,KAAK,WAAW,YAAY,CAAI,2FAA2F,GAAG,SAEhI,EAAK,KAAK,cAAc,mBAAmB,CAAI,eAAe,EAAE;CAGxE;CAEA,cAAc;EAEZ,AADA,MAAM,mBA3C+C,iBAa9B,GA+BvB,KAAK,OAAO;CACd;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO;CACzB;AACF;GAnDG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAGxC,EAAM,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA;CApBR,EAAM;CACN,EAAe;CACf,EAAyB;;AAqEnB,IAAA,IAAA,cAAoB,EAAW;;+BAImB,0BAUqB,eAoDhE,MAAa;GACvB,KAAKA,GAAW,EAAE,MAA+F;EACnH;;;gBApDgB,EAAU,CAAC,CAAe,CAAC;;;kBAEhB;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,gBAAgB;EAC7B;;CAGA,IAAI,mBAAqC;EACvC,OAAO;GACL,OAAO,KAAK;GACZ,QAAQ,KAAK,WAAW,aAAa;EACvC;CACF;CAOA,GAAW,GAAkG;EACvG,CAAC,KAAK,kBAAkB,CAAC,EAAU,QAAQ,gBAAgB,KAAK,EAAU,aAI9E,KAAK,MAAM,SAAQ,MAAM,EAAE,WAAW,EAAM,GAC5C,EAAU,WAAW;CACvB;CAEA,SAAS;EACP,OAAO,CAAI,yCAEa,KAAKC,GAAgB;CAG/C;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,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,IACf,EAAM,IAAI,WAAW,KAAK,EAAM,IAAI,UAAU,MAChD,KAAKD,GAAgB;CAEzB;CAEA,KAAkB;EAEhB,AADA,KAAK,WAAW,kBAAkB,KAAK,WAAW,aAAa,cAC/D,KAAK,MAAM,SAAS,GAAM,MAAM;GAE9B,AADA,EAAK,QAAQ,IAAI,GACjB,EAAK,YAAY,KAAK;EACxB,CAAC;CACH;AACF;GAhFG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,MAkBxD,EAAsB,EAAE,UAAU,iBAAiB,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAlCtD,EAAM,GACN,EAAyB,CAAA,GAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"define.js","names":[],"sources":["../../src/switch/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Switch, SwitchGroup } from '@nvidia-elements/core/switch';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Switch);\ndefine(SwitchGroup);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-switch': Switch;\n 'nve-switch-group': SwitchGroup;\n }\n}\n"],"mappings":";;;;;;AAOA,EAAO,
|
|
1
|
+
{"version":3,"file":"define.js","names":[],"sources":["../../src/switch/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Switch, SwitchGroup } from '@nvidia-elements/core/switch';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Switch);\ndefine(SwitchGroup);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-switch': Switch;\n 'nve-switch-group': SwitchGroup;\n }\n}\n"],"mappings":";;;;;;AAOA,EAAO,CAAM,GACb,EAAO,CAAW,GAClB,EAAO,CAAO,GACd,EAAO,CAAY,GACnB,EAAO,CAAc"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
|
|
2
2
|
import { audit as t } from "../internal/controllers/audit.controller.js";
|
|
3
3
|
import { useStyles as n } from "../internal/styles/index.js";
|
|
4
4
|
import { ControlGroup as r } from "../forms/control-group/control-group2.js";
|
|
@@ -11,7 +11,7 @@ var a = class extends r {
|
|
|
11
11
|
static {
|
|
12
12
|
this.metadata = {
|
|
13
13
|
tag: "nve-switch-group",
|
|
14
|
-
version: "0.1.
|
|
14
|
+
version: "0.1.2",
|
|
15
15
|
children: [
|
|
16
16
|
"label",
|
|
17
17
|
"nve-control-message",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch-group2.js","names":[],"sources":["../../src/switch/switch-group.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, useStyles } from '@nvidia-elements/core/internal';\nimport { ControlGroup } from '@nvidia-elements/core/forms';\nimport styles from './switch-group.css?inline';\n\n/**\n * @element nve-switch-group\n * @description A switch group is a container for a group of switches.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/switch\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n */\n@audit()\nexport class SwitchGroup extends ControlGroup {\n static styles: CSSResult[] = useStyles([...ControlGroup.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-switch-group',\n version: '0.0.0',\n children: ['label', 'nve-control-message', 'nve-switch']\n };\n}\n"],"mappings":";;;;;;AAgBO,IAAA,IAAA,cAA0B,EAAa;;gBACf,EAAU,CAAC,GAAG,EAAa,QAAQ,
|
|
1
|
+
{"version":3,"file":"switch-group2.js","names":[],"sources":["../../src/switch/switch-group.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, useStyles } from '@nvidia-elements/core/internal';\nimport { ControlGroup } from '@nvidia-elements/core/forms';\nimport styles from './switch-group.css?inline';\n\n/**\n * @element nve-switch-group\n * @description A switch group is a container for a group of switches.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/switch\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n */\n@audit()\nexport class SwitchGroup extends ControlGroup {\n static styles: CSSResult[] = useStyles([...ControlGroup.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-switch-group',\n version: '0.0.0',\n children: ['label', 'nve-control-message', 'nve-switch']\n };\n}\n"],"mappings":";;;;;;AAgBO,IAAA,IAAA,cAA0B,EAAa;;gBACf,EAAU,CAAC,GAAG,EAAa,QAAQ,CAAM,CAAC;;;kBAE5C;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAuB;GAAY;EACzD;;AACF;OATC,EAAM,CAAA,GAAA,CAAA"}
|
package/dist/switch/switch2.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
|
|
2
2
|
import { audit as t } from "../internal/controllers/audit.controller.js";
|
|
3
3
|
import { hostAttr as n } from "../internal/decorators/host-attr.js";
|
|
4
4
|
import { useStyles as r } from "../internal/styles/index.js";
|
|
@@ -15,7 +15,7 @@ var o = class extends i {
|
|
|
15
15
|
static {
|
|
16
16
|
this.metadata = {
|
|
17
17
|
tag: "nve-switch",
|
|
18
|
-
version: "0.1.
|
|
18
|
+
version: "0.1.2",
|
|
19
19
|
children: [
|
|
20
20
|
"label",
|
|
21
21
|
"input",
|
|
@@ -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":";;;;;;;AA4BO,IAAA,IAAA,cAAqB,EAAQ;;iCAC6B;;;gBAElC,EAAU,CAAC,GAAG,EAAQ,QAAQ,
|
|
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":";;;;;;;AA4BO,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.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"define.js","names":[],"sources":["../../src/tabs/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { TabsGroup, TabsItem, Tabs } from '@nvidia-elements/core/tabs';\n\ndefine(TabsItem);\ndefine(Tabs);\ndefine(TabsGroup);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-tabs-item': TabsItem;\n 'nve-tabs': Tabs;\n 'nve-tabs-group': TabsGroup;\n }\n}\n"],"mappings":";;;AAMA,EAAO,
|
|
1
|
+
{"version":3,"file":"define.js","names":[],"sources":["../../src/tabs/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { TabsGroup, TabsItem, Tabs } from '@nvidia-elements/core/tabs';\n\ndefine(TabsItem);\ndefine(Tabs);\ndefine(TabsGroup);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-tabs-item': TabsItem;\n 'nve-tabs': Tabs;\n 'nve-tabs-group': TabsGroup;\n }\n}\n"],"mappings":";;;AAMA,EAAO,CAAQ,GACf,EAAO,CAAI,GACX,EAAO,CAAS"}
|
package/dist/tabs/tabs-group2.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { generateId as e, sameOrderedStringArray as t, uniqueNonEmptyStrings as n } from "../internal/utils/dom.js";
|
|
2
2
|
import { attachInternals as r } from "../internal/utils/a11y.js";
|
|
3
|
-
import { __decorate as i } from "../_virtual/_@oxc-project_runtime@0.
|
|
3
|
+
import { __decorate as i } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
|
|
4
4
|
import { audit as a } from "../internal/controllers/audit.controller.js";
|
|
5
5
|
import { useStyles as o } from "../internal/styles/index.js";
|
|
6
6
|
import { Tabs as s } from "./tabs2.js";
|
|
@@ -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: "0.1.
|
|
36
|
+
version: "0.1.2",
|
|
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 * @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/tabs2.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { appendAnchorName as e, appendRootNodeStyle as t, removeAnchorName as n } from "../internal/utils/dom.js";
|
|
2
2
|
import { attachInternals as r } from "../internal/utils/a11y.js";
|
|
3
3
|
import { stateSelected as i } from "../internal/controllers/state-selected.controller.js";
|
|
4
|
-
import { __decorate as a } from "../_virtual/_@oxc-project_runtime@0.
|
|
4
|
+
import { __decorate as a } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
|
|
5
5
|
import { BaseButton as o } from "../internal/base/button.js";
|
|
6
6
|
import { audit as s } from "../internal/controllers/audit.controller.js";
|
|
7
7
|
import { keyNavigationList as c } from "../internal/controllers/keynav-list.controller.js";
|
|
@@ -20,7 +20,7 @@ var _ = class extends o {
|
|
|
20
20
|
static {
|
|
21
21
|
this.metadata = {
|
|
22
22
|
tag: "nve-tabs-item",
|
|
23
|
-
version: "0.1.
|
|
23
|
+
version: "0.1.2",
|
|
24
24
|
parents: ["nve-tabs"]
|
|
25
25
|
};
|
|
26
26
|
}
|
|
@@ -53,7 +53,7 @@ var v = class extends p {
|
|
|
53
53
|
static {
|
|
54
54
|
this.metadata = {
|
|
55
55
|
tag: "nve-tabs",
|
|
56
|
-
version: "0.1.
|
|
56
|
+
version: "0.1.2",
|
|
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 type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n BaseButton,\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 --border-width\n * @cssprop --border-height\n * @cssprop --border-top\n * @cssprop --border-background\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 BaseButton {\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 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":";;;;;;;;;;;;;;;AAgDO,IAAA,IAAA,cAAuB,EAAW;;gBAMvB,EAAU,CAAC,
|
|
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 type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n BaseButton,\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 --border-width\n * @cssprop --border-height\n * @cssprop --border-top\n * @cssprop --border-background\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 BaseButton {\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 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":";;;;;;;;;;;;;;;AAgDO,IAAA,IAAA,cAAuB,EAAW;;gBAMvB,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;EACnC,AAAI,EAAM,IAAI,UAAU,MAClB,KAAK,WACP,EAAiB,MAAM,YAAY,IAEnC,EAAiB,MAAM,YAAY;CAGzC;AACF;GArCG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,UAN3C,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA;AA4DlB,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.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"define.js","names":[],"sources":["../../src/tag/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Tag } from '@nvidia-elements/core/tag';\n\ndefine(Tag);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-tag': Tag;\n }\n}\n"],"mappings":";;;AAMA,EAAO,
|
|
1
|
+
{"version":3,"file":"define.js","names":[],"sources":["../../src/tag/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Tag } from '@nvidia-elements/core/tag';\n\ndefine(Tag);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nve-tag': Tag;\n }\n}\n"],"mappings":";;;AAMA,EAAO,CAAG"}
|