@nvidia-elements/core 2.7.3 → 2.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/README.md +8 -0
- package/dist/_virtual/{_@oxc-project_runtime@0.139.0 → _@oxc-project_runtime@0.147.0}/helpers/esm/decorate.js +1 -1
- package/dist/accordion/accordion2.js +5 -5
- package/dist/accordion/accordion2.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/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/badge/badge2.js +2 -2
- package/dist/badge/badge2.js.map +1 -1
- package/dist/breadcrumb/breadcrumb2.js +2 -2
- package/dist/breadcrumb/breadcrumb2.js.map +1 -1
- package/dist/bundles/index.d.ts +2 -0
- package/dist/bundles/index.js +6 -6
- package/dist/button/button2.js +2 -2
- package/dist/button/button2.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/card/card2.js +5 -5
- package/dist/card/card2.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/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/color/color2.js +2 -2
- package/dist/color/color2.js.map +1 -1
- package/dist/combobox/combobox.examples.js.map +1 -1
- package/dist/combobox/combobox2.js +7 -5
- package/dist/combobox/combobox2.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/custom-elements-jsx.d.ts +2 -0
- package/dist/custom-elements-vue.d.ts +2 -0
- package/dist/custom-elements.json +9 -1
- package/dist/data.html.json +1 -1
- package/dist/date/date2.js +2 -2
- package/dist/date/date2.js.map +1 -1
- package/dist/datetime/datetime2.js +2 -2
- package/dist/datetime/datetime2.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/divider2.js +2 -2
- package/dist/divider/divider2.js.map +1 -1
- package/dist/dot/dot2.js +2 -2
- package/dist/dot/dot2.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/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/dropdown-group.js +2 -2
- package/dist/dropdown-group/dropdown-group.js.map +1 -1
- package/dist/dropzone/dropzone2.js +2 -2
- package/dist/dropzone/dropzone2.js.map +1 -1
- package/dist/file/file2.js +1 -1
- package/dist/file/file2.js.map +1 -1
- package/dist/format-bytes/format-bytes2.js +2 -2
- package/dist/format-bytes/format-bytes2.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/format-number2.js +2 -2
- package/dist/format-number/format-number2.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/format-truncate/format-truncate2.js +2 -2
- package/dist/format-truncate/format-truncate2.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/validation.examples.js.map +1 -1
- package/dist/gauge/gauge2.js +2 -2
- package/dist/gauge/gauge2.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/footer/footer2.js +2 -2
- package/dist/grid/footer/footer2.js.map +1 -1
- package/dist/grid/grid.examples.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/icon2.js +3 -3
- package/dist/icon/icon2.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/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/controllers/audit.controller.js +9 -7
- package/dist/internal/controllers/audit.controller.js.map +1 -1
- package/dist/internal/controllers/gesture.controller.examples.js.map +1 -1
- package/dist/internal/controllers/gesture.controller.js +1 -3
- package/dist/internal/controllers/gesture.controller.js.map +1 -1
- package/dist/internal/controllers/i18n.controller.examples.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 +1 -4
- package/dist/internal/controllers/keynav-list.controller.js.map +1 -1
- package/dist/internal/controllers/keynav-spatial.controller.js.map +1 -1
- package/dist/internal/controllers/state-scroll.controller.js.map +1 -1
- package/dist/internal/controllers/type-anchor.controller.js.map +1 -1
- package/dist/internal/controllers/type-closable.controller.js.map +1 -1
- package/dist/internal/controllers/type-expandable.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 +2 -2
- 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/services/global.service.js +1 -1
- package/dist/internal/services/global.utils.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/utils/dom.js +2 -1
- package/dist/internal/utils/dom.js.map +1 -1
- package/dist/internal/utils/strings.js +1 -1
- package/dist/internal/utils/strings.js.map +1 -1
- package/dist/logo/logo2.js +2 -2
- package/dist/logo/logo2.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/month2.js +2 -2
- package/dist/month/month2.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/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/page-header2.js +1 -1
- package/dist/page-header/page-header2.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/pagination2.js +2 -2
- package/dist/pagination/pagination2.js.map +1 -1
- package/dist/panel/panel2.js +5 -5
- package/dist/panel/panel2.js.map +1 -1
- package/dist/password/password2.js +2 -2
- package/dist/password/password2.js.map +1 -1
- package/dist/polyfills/index.js +1 -1
- package/dist/polyfills/index.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/progress-bar2.js +2 -2
- package/dist/progress-bar/progress-bar2.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/progressive-filter-chip2.js +2 -2
- package/dist/progressive-filter-chip/progressive-filter-chip2.js.map +1 -1
- package/dist/pulse/pulse2.js +2 -2
- package/dist/pulse/pulse2.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/range2.js +4 -4
- package/dist/range/range2.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/search2.js +2 -2
- package/dist/search/search2.js.map +1 -1
- package/dist/select/select2.js +2 -2
- package/dist/select/select2.js.map +1 -1
- package/dist/skeleton/skeleton2.js +2 -2
- package/dist/skeleton/skeleton2.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/sparkline.utils.js +1 -3
- package/dist/sparkline/sparkline.utils.js.map +1 -1
- package/dist/sparkline/sparkline2.js +8 -6
- package/dist/sparkline/sparkline2.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/steps2.js +3 -3
- package/dist/steps/steps2.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/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/tag.d.ts +2 -0
- package/dist/tag/tag.examples.js.map +1 -1
- package/dist/tag/tag.examples.json +20 -3
- package/dist/tag/tag.js +1 -1
- package/dist/tag/tag.js.map +1 -1
- package/dist/tag/tag2.js +3 -3
- package/dist/tag/tag2.js.map +1 -1
- package/dist/textarea/textarea2.js +1 -1
- package/dist/textarea/textarea2.js.map +1 -1
- package/dist/time/time2.js +2 -2
- package/dist/time/time2.js.map +1 -1
- package/dist/toast/toast2.js +2 -2
- package/dist/toast/toast2.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/toolbar2.js +2 -2
- package/dist/toolbar/toolbar2.js.map +1 -1
- package/dist/tooltip/tooltip.examples.js.map +1 -1
- package/dist/tooltip/tooltip2.js +2 -2
- package/dist/tooltip/tooltip2.js.map +1 -1
- package/dist/tree/tree-node2.js +2 -2
- package/dist/tree/tree-node2.js.map +1 -1
- package/dist/tree/tree.examples.js.map +1 -1
- package/dist/tree/tree2.js +2 -2
- package/dist/tree/tree2.js.map +1 -1
- package/dist/week/week2.js +2 -2
- package/dist/week/week2.js.map +1 -1
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton2.js","names":[
|
|
1
|
+
{"version":3,"file":"skeleton2.js","names":[],"sources":["../../src/skeleton/skeleton.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { attachInternals, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './skeleton.css?inline';\n\n/**\n * @element nve-skeleton\n * @description A loading placeholder component that displays animated placeholder shapes while content loads.\n * @documentation https://nvidia.github.io/elements/docs/elements/skeleton/\n * @since 1.44.0\n * @entrypoint \\@nvidia-elements/core/skeleton\n * @slot - Loaded content that replaces the placeholder when provided.\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --min-height\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live\n */\nexport class Skeleton extends LitElement {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-skeleton',\n version: '0.0.0'\n };\n\n /** Visual animation style shown while content loads. */\n @property({ type: String, reflect: true }) effect: 'shimmer' | 'pulse';\n\n /** Geometry of the placeholder — rounded corners or a full pill outline. */\n @property({ type: String, reflect: true }) shape: 'round' | 'pill';\n\n /** Hides the skeleton host when `true` and sets `aria-busy` to the inverse visibility state. */\n @property({ type: Boolean, reflect: true }) hidden = false;\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`\n <div internal-host>\n <div class=\"animate\"></div>\n <slot @slotchange=${this.#slotchange}></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.ariaBusy = 'true';\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n this._internals.ariaBusy = `${!this.hidden}`;\n }\n\n #slotchange(event: Event) {\n const target = event.target as HTMLSlotElement;\n const hasContent = target\n .assignedNodes()\n .some(\n node =>\n node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')\n );\n\n if (hasContent) {\n this._internals.states.add('slotted');\n } else {\n this._internals.states.delete('slotted');\n }\n }\n}\n"],"mappings":";;;;;;;AAoBA,IAAa,IAAb,cAA8B,EAAW;;EAec,aAAA,KAAA,SAAA;;;EAdrC,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAcA,SAAS;EACP,OAAO,CAAI,oEAGa,KAAK,GAAY;CAG3C;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,WAAW;CAC7B;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,WAAW,GAAG,CAAC,KAAK;CACtC;CAEA,GAAY,GAAc;EASxB,AARe,EAAM,OAElB,cAAc,CAAC,CACf,MACC,MACE,EAAK,aAAa,KAAK,gBAAiB,EAAK,aAAa,KAAK,aAAa,EAAK,aAAa,KAAK,MAAM,EAG3G,IACF,KAAK,WAAW,OAAO,IAAI,SAAS,IAEpC,KAAK,WAAW,OAAO,OAAO,SAAS;CAE3C;AACF;AA9CG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { I18nController as e } from "../internal/controllers/i18n.controller.js";
|
|
2
2
|
import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
|
|
3
3
|
import { useStyles as n } from "../internal/styles/index.js";
|
|
4
|
-
import r from "../_virtual/_@oxc-project_runtime@0.
|
|
4
|
+
import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
|
|
5
5
|
import { Icon as i } from "../icon/icon2.js";
|
|
6
6
|
import a from "./sort-button.js";
|
|
7
7
|
import { LitElement as o, html as s } from "lit";
|
|
@@ -19,7 +19,7 @@ var u = {
|
|
|
19
19
|
static {
|
|
20
20
|
this.metadata = {
|
|
21
21
|
tag: "nve-sort-button",
|
|
22
|
-
version: "2.
|
|
22
|
+
version: "2.8.0"
|
|
23
23
|
};
|
|
24
24
|
}
|
|
25
25
|
static {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sort-button2.js","names":[
|
|
1
|
+
{"version":3,"file":"sort-button2.js","names":[],"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, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { useStyles, 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 * @documentation https://nvidia.github.io/elements/docs/elements/sort-button/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/sort-button\n * @event sort - Dispatched on activation with `detail: { value, next }`, where `value` is the current sort and `next` follows the cycle `none` → `ascending` → `descending` → `none`.\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 ButtonFormControlMixin(LitElement) {\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":";;;;;;;;;;AAUA,IAAM,IAAW;CACf,MAAM;CACN,WAAW;CACX,YAAY;AACd,GAiBa,IAAN,cAAyB,EAAuB,CAAU,CAAC,CAAC;;EACjD,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAK,SAAS,MAAM,EACvB;;CAOA;CAOA,SAAS;EACP,OAAO,CAAI,gEAEuB,KAAK,SAAS,eAAe,oBAAoB,iBAAiB;CAGtG;CAEA,cAAc;EAEZ,AADA,MAAM,GAlB+E,KAAA,OAAA,QAE/C,KAAA,KAAA,IAAI,EAAqB,IAAI,GAKlC,KAAA,OAAA,KAAK,GAAgB,MA0BvC,KAAA,WAAA;GAEf,AADA,KAAK,WAAW,YAAY,GAAG,KAAK,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,KAAK,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAK,EAAQ;CACjD;CAEA;AAUF;AA3CG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAOxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAvB3B,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
|
|
@@ -70,9 +70,7 @@ function f(e, t, n = 100) {
|
|
|
70
70
|
case "linear":
|
|
71
71
|
r = h(e);
|
|
72
72
|
break;
|
|
73
|
-
default:
|
|
74
|
-
r = h(e);
|
|
75
|
-
break;
|
|
73
|
+
default: r = h(e);
|
|
76
74
|
}
|
|
77
75
|
let i = e[e.length - 1], a = e[0];
|
|
78
76
|
return r += ` L ${i.x.toFixed(2)} ${n.toFixed(2)}`, r += ` L ${a.x.toFixed(2)} ${n.toFixed(2)} Z`, r;
|
|
@@ -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 return toLinearOpenPath(points);\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 openPath = toLinearOpenPath(points);\n break;\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 return toLinearOpenPath(points);\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 openPath = toLinearOpenPath(points);\n break;\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,6 +1,6 @@
|
|
|
1
1
|
import { attachInternals as e } from "../internal/utils/a11y.js";
|
|
2
2
|
import { statusStateStyles as t, supportStateStyles as n, useStyles as r } from "../internal/styles/index.js";
|
|
3
|
-
import i from "../_virtual/_@oxc-project_runtime@0.
|
|
3
|
+
import i from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.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";
|
|
6
6
|
import { LitElement as _, html as v, nothing as y, svg as b } from "lit";
|
|
@@ -21,7 +21,7 @@ var C = class extends _ {
|
|
|
21
21
|
static {
|
|
22
22
|
this.metadata = {
|
|
23
23
|
tag: "nve-sparkline",
|
|
24
|
-
version: "2.
|
|
24
|
+
version: "2.8.0"
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
@@ -40,7 +40,7 @@ var C = class extends _ {
|
|
|
40
40
|
case "area":
|
|
41
41
|
case "gradient": return this.#t(e, t);
|
|
42
42
|
case "column": return this.#a(e, t);
|
|
43
|
-
case "winloss": return this.#o(
|
|
43
|
+
case "winloss": return this.#o(50, e, t);
|
|
44
44
|
default: return this.mark, y;
|
|
45
45
|
}
|
|
46
46
|
}
|
|
@@ -72,7 +72,9 @@ var C = class extends _ {
|
|
|
72
72
|
#i(e, t) {
|
|
73
73
|
return e.length === 0 || t.size === 0 ? y : v`${Array.from(t).map((t) => {
|
|
74
74
|
let n = e[t];
|
|
75
|
-
|
|
75
|
+
if (!n) return y;
|
|
76
|
+
let r = `--x: ${n.x.toFixed(2)}; --y: ${n.y.toFixed(2)}`;
|
|
77
|
+
return v`<span style="${r}" class="accent"></span>`;
|
|
76
78
|
})}`;
|
|
77
79
|
}
|
|
78
80
|
#a(e, t) {
|
|
@@ -82,8 +84,8 @@ var C = class extends _ {
|
|
|
82
84
|
includeZero: !0
|
|
83
85
|
});
|
|
84
86
|
if (!n) return y;
|
|
85
|
-
let r = h(0, n), i = n.min < 0 && n.max > 0, o =
|
|
86
|
-
return b`<svg viewBox="0 0 ${e} ${t}" preserveAspectRatio="xMidYMid meet" aria-hidden="true">${i ? this.#r(r, e) : y} ${
|
|
87
|
+
let r = h(0, n), i = n.min < 0 && n.max > 0, o = f(this.validData, n, { width: e }), s = l(o, r, e);
|
|
88
|
+
return b`<svg viewBox="0 0 ${e} ${t}" preserveAspectRatio="xMidYMid meet" aria-hidden="true">${i ? this.#r(r, e) : y} ${s.map((e) => b`<rect class="column" x="${e.x.toFixed(2)}" y="${e.y.toFixed(2)}" width="${e.width.toFixed(2)}" height="${e.height.toFixed(2)}"></rect>`)}</svg>`;
|
|
87
89
|
}
|
|
88
90
|
#o(e, t, n) {
|
|
89
91
|
if (this.validData.length === 0) return y;
|
|
@@ -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 * @documentation https://nvidia.github.io/elements/docs/elements/sparkline/\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":[],"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 * @documentation https://nvidia.github.io/elements/docs/elements/sparkline/\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,7 +1,7 @@
|
|
|
1
1
|
import { getElementUpdate as e } from "../internal/utils/dom.js";
|
|
2
2
|
import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
|
|
3
3
|
import { useStyles as n } from "../internal/styles/index.js";
|
|
4
|
-
import r from "../_virtual/_@oxc-project_runtime@0.
|
|
4
|
+
import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
|
|
5
5
|
import { Icon as i } from "../icon/icon2.js";
|
|
6
6
|
import { Control as a } from "../forms/control/control2.js";
|
|
7
7
|
import o from "./star-rating.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: "2.
|
|
21
|
+
version: "2.8.0"
|
|
22
22
|
};
|
|
23
23
|
}
|
|
24
24
|
static {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"star-rating2.js","names":[
|
|
1
|
+
{"version":3,"file":"star-rating2.js","names":[],"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 * @documentation https://nvidia.github.io/elements/docs/elements/star-rating/\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":";;;;;;;;;;AA2BO,IAAM,IAAN,cAAyB,EAAQ;;EAgBT,aAJN,KAAA,MAAA,GACA,KAAA,MAAA,GACE,KAAA,QAAA,GACC,KAAA,SAAA,GACG,KAAA,YAAA;;;EAfb,KAAA,SAAA,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;EAE1B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,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,KAAK,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,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,GAAG,MAAM;GAC3C,IAAM,IAAY,IAAI,GAEhB,KADe,KAAK,UAAU,KAAK,SACb;GAI5B,OAAO,CAAI,uCAEM,KAAK,GAAU,KAAK,GAAc,GAAG,CAAS,CAAC,EAAE,iBAClD,MAAkB,KAAK,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;AAhFG,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAjBR,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
|
package/dist/steps/steps2.js
CHANGED
|
@@ -4,7 +4,7 @@ import { attachInternals as n } from "../internal/utils/a11y.js";
|
|
|
4
4
|
import { stateSelected as r } from "../internal/controllers/state-selected.controller.js";
|
|
5
5
|
import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
|
|
6
6
|
import { useStyles as a } from "../internal/styles/index.js";
|
|
7
|
-
import o from "../_virtual/_@oxc-project_runtime@0.
|
|
7
|
+
import o from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
|
|
8
8
|
import { IconButton as s } from "../icon-button/icon-button2.js";
|
|
9
9
|
import c from "./steps-item.js";
|
|
10
10
|
import l from "./steps.js";
|
|
@@ -23,7 +23,7 @@ var v = class extends h(d) {
|
|
|
23
23
|
static {
|
|
24
24
|
this.metadata = {
|
|
25
25
|
tag: "nve-steps-item",
|
|
26
|
-
version: "2.
|
|
26
|
+
version: "2.8.0",
|
|
27
27
|
parents: ["nve-steps"]
|
|
28
28
|
};
|
|
29
29
|
}
|
|
@@ -69,7 +69,7 @@ var y = class extends d {
|
|
|
69
69
|
static {
|
|
70
70
|
this.metadata = {
|
|
71
71
|
tag: "nve-steps",
|
|
72
|
-
version: "2.
|
|
72
|
+
version: "2.8.0",
|
|
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":[
|
|
1
|
+
{"version":3,"file":"steps2.js","names":[],"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 { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { KeynavListConfig, Container } from '@nvidia-elements/core/internal';\nimport {\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 * @documentation https://nvidia.github.io/elements/docs/elements/steps/\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 ButtonFormControlMixin(LitElement) {\n /**\n * Determines which item the user selects, defaults to false.\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n /**\n * Controls the step status. `accent` has no default status icon, `danger` displays an alert icon, `success` displays a check icon, and `pending` displays a progress indicator. Omit the property to display the step number.\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 * @documentation https://nvidia.github.io/elements/docs/elements/steps/\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":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { audit as e } from "../internal/controllers/audit.controller.js";
|
|
2
2
|
import { useStyles as t } from "../internal/styles/index.js";
|
|
3
|
-
import n from "../_virtual/_@oxc-project_runtime@0.
|
|
3
|
+
import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
|
|
4
4
|
import { ControlGroup as r } from "../forms/control-group/control-group2.js";
|
|
5
5
|
import i from "./switch-group.js";
|
|
6
6
|
//#region src/switch/switch-group.ts
|
|
@@ -11,7 +11,7 @@ var a = class extends r {
|
|
|
11
11
|
static {
|
|
12
12
|
this.metadata = {
|
|
13
13
|
tag: "nve-switch-group",
|
|
14
|
-
version: "2.
|
|
14
|
+
version: "2.8.0",
|
|
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,
|
|
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,IAAM,IAAN,cAA0B,EAAa;;EACf,KAAA,SAAA,EAAU,CAAC,GAAG,EAAa,QAAQ,CAAM,CAAC;;;EAE5C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAuB;GAAY;EACzD;;AACF;AATC,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}
|
package/dist/switch/switch2.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { audit as e } from "../internal/controllers/audit.controller.js";
|
|
2
2
|
import { hostAttr as t } from "../internal/decorators/host-attr.js";
|
|
3
3
|
import { useStyles as n } from "../internal/styles/index.js";
|
|
4
|
-
import r from "../_virtual/_@oxc-project_runtime@0.
|
|
4
|
+
import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
|
|
5
5
|
import { Control as i } from "../forms/control/control2.js";
|
|
6
6
|
import a from "./switch.js";
|
|
7
7
|
//#region src/switch/switch.ts
|
|
@@ -15,7 +15,7 @@ var o = class extends i {
|
|
|
15
15
|
static {
|
|
16
16
|
this.metadata = {
|
|
17
17
|
tag: "nve-switch",
|
|
18
|
-
version: "2.
|
|
18
|
+
version: "2.8.0",
|
|
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 * @documentation https://nvidia.github.io/elements/docs/elements/switch/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/switch\n * @cssprop --cursor\n * @cssprop --border-radius\n * @cssprop --border-width\n * @cssprop --border\n * @cssprop --background\n * @cssprop --width\n * @cssprop --height\n * @cssprop --anchor-width\n * @cssprop --anchor-height\n * @cssprop --anchor-border-radius\n * @cssprop --anchor-background\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n */\n@audit()\nexport class Switch extends Control {\n @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-switch',\n version: '0.0.0',\n children: ['label', 'input', 'nve-control-message']\n };\n}\n"],"mappings":";;;;;;;AA6BO,
|
|
1
|
+
{"version":3,"file":"switch2.js","names":[],"sources":["../../src/switch/switch.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './switch.css?inline';\n\n/**\n * @element nve-switch\n * @description A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.\n * @documentation https://nvidia.github.io/elements/docs/elements/switch/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/switch\n * @cssprop --cursor\n * @cssprop --border-radius\n * @cssprop --border-width\n * @cssprop --border\n * @cssprop --background\n * @cssprop --width\n * @cssprop --height\n * @cssprop --anchor-width\n * @cssprop --anchor-height\n * @cssprop --anchor-border-radius\n * @cssprop --anchor-background\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n */\n@audit()\nexport class Switch extends Control {\n @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-switch',\n version: '0.0.0',\n children: ['label', 'input', 'nve-control-message']\n };\n}\n"],"mappings":";;;;;;;AA6BO,IAAM,IAAN,cAAqB,EAAQ;;EAC6B,aAAA,KAAA,aAAA;;;EAElC,KAAA,SAAA,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAS;GAAqB;EACpD;;AACF;AATG,EAAA,CAAA,EAAS,EAAE,WAAW,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAFvC,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}
|
package/dist/tabs/tabs-group2.js
CHANGED
|
@@ -2,7 +2,7 @@ import { audit as e } from "../internal/controllers/audit.controller.js";
|
|
|
2
2
|
import { generateId as t, sameOrderedStringArray as n, uniqueNonEmptyStrings as r } from "../internal/utils/dom.js";
|
|
3
3
|
import { attachInternals as i } from "../internal/utils/a11y.js";
|
|
4
4
|
import { useStyles as a } from "../internal/styles/index.js";
|
|
5
|
-
import o from "../_virtual/_@oxc-project_runtime@0.
|
|
5
|
+
import o from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
|
|
6
6
|
import { Tabs as s } from "./tabs2.js";
|
|
7
7
|
import c from "./tabs-group.js";
|
|
8
8
|
import { LitElement as l, html as u } from "lit";
|
|
@@ -33,7 +33,7 @@ var m, h = class extends l {
|
|
|
33
33
|
static {
|
|
34
34
|
this.metadata = {
|
|
35
35
|
tag: "nve-tabs-group",
|
|
36
|
-
version: "2.
|
|
36
|
+
version: "2.8.0",
|
|
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 * @documentation https://nvidia.github.io/elements/docs/elements/tabs/\n * @since 1.67.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.\n * @event select - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection\n * @slot - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.\n * @slot {value} - Named panel content where the slot name matches a nve-tabs-item value.\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\nexport class TabsGroup extends LitElement {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-tabs-group',\n version: '0.0.0',\n children: ['nve-tabs']\n };\n\n /** Options for observing the slotted `nve-tabs` subtree (tab list / item attribute changes). */\n protected static readonly subtreeObserverInit = {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['disabled', 'id', 'selected', 'value']\n } as const satisfies MutationObserverInit;\n\n @queryAssignedElements({ flatten: true }) private defaultSlotElements!: HTMLElement[];\n\n /**\n * Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at\n * inline-start (`start`) or inline-end (`end`) beside the panel region.\n */\n @property({ type: String, reflect: true }) alignment: TabsGroupAlignment = 'top';\n\n @state() private panelValues: string[] = [];\n\n @state() private selectedValue = '';\n\n /** @private */\n declare _internals: ElementInternals;\n\n #tabsObserver?: MutationObserver;\n\n /**\n * Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable\n * `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.\n */\n render() {\n return html`\n <div internal-host>\n <slot @slotchange=${this.#handleDefaultSlotChange}></slot>\n ${this.panelValues.map(value => html`<slot name=${value} @slotchange=${this.#handlePanelSlotChange}></slot>`)}\n </div>\n `;\n }\n\n // --- Lifecycle & command ---\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'group';\n this.addEventListener('command', this.#handleCommand as EventListener);\n }\n\n firstUpdated() {\n void this.updateComplete.then(() => {\n if (!this.isConnected) {\n return;\n }\n\n this.#syncFromTabs();\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('command', this.#handleCommand as EventListener);\n this.#tabsObserver?.disconnect();\n }\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (!this.#tabsObserver) {\n this.#observeTabs();\n }\n\n // `@state()` fields are not in `PropertyValues<this>` keys; cast for membership checks.\n const props = changedProperties as ReadonlyMap<PropertyKey, unknown>;\n if (props.has('panelValues') || props.has('selectedValue')) {\n this.#syncPanels();\n }\n }\n\n #handleDefaultSlotChange = (): void => {\n this.#observeTabs();\n this.#syncFromTabs();\n };\n\n #handlePanelSlotChange = (): void => {\n this.#syncPanels();\n };\n\n /**\n * Handles Invoker `--toggle` on a tab item: selects the matching `nve-tabs-item` and syncs panels.\n * Ignores non-toggle commands and invokers without a non-empty string `value`.\n */\n #handleCommand = (event: TabsGroupCommandEvent): void => {\n if (event.command !== '--toggle') {\n return;\n }\n\n const value = event.source?.value;\n if (typeof value !== 'string' || !value.length) {\n return;\n }\n\n const tabItems = this.#getTabItems();\n const tabItem = tabItems.find(item => this.#isSelectableTab(item) && item.value === value);\n if (!tabItem) {\n return;\n }\n\n this.#setActiveTab(tabItems, tabItem, { emitEvent: true });\n };\n\n // --- Tab strip sync (tabs → state) ---\n\n /** Attaches a single `MutationObserver` on the slotted `nve-tabs` element to mirror tab list changes into state. */\n #observeTabs(): void {\n this.#tabsObserver?.disconnect();\n\n const tabs = this.#getTabsElement();\n if (!tabs) {\n return;\n }\n\n this.#tabsObserver = new MutationObserver(() => this.#syncFromTabs());\n this.#tabsObserver.observe(tabs, TabsGroup.subtreeObserverInit);\n }\n\n /**\n * Reads the current tab items: derives ordered `panelValues` for render, resolves which tab should be active,\n * and commits selection. Called on slot change, subtree mutations, and after mount.\n */\n #syncFromTabs(): void {\n const tabItems = this.#getTabItems();\n const nextPanelValues = uniqueNonEmptyStrings(tabItems.map(item => item.value));\n\n const selectedTab = this.#resolveSelectedTab(tabItems);\n\n if (!selectedTab) {\n tabItems.forEach(item => (item.selected = false));\n this.#commitState(nextPanelValues, '');\n return;\n }\n\n this.#setActiveTab(tabItems, selectedTab, { emitEvent: false, nextPanelValues });\n }\n\n /**\n * Sets exactly one selected tab, updates `panelValues` / `selectedValue`, and optionally dispatches `select`.\n *\n * @param emitEvent - When true (command path), dispatches `select` if selection actually changed.\n */\n #setActiveTab(\n tabItems: TabsItem[],\n nextTab: TabsItem,\n options: { emitEvent: boolean; nextPanelValues?: string[] }\n ): void {\n const { emitEvent } = options;\n const nextPanelValues = options.nextPanelValues ?? uniqueNonEmptyStrings(tabItems.map(item => item.value));\n // True when the effective selection differs from the prior committed state (value, flags, or multi-select).\n // `select` is only dispatched when both `emitEvent` (invoker/command path) and `changed` are true.\n const changed =\n this.selectedValue !== nextTab.value ||\n !nextTab.selected ||\n tabItems.some(item => item !== nextTab && item.selected);\n\n tabItems.forEach(item => {\n item.selected = item === nextTab;\n });\n\n this.#commitState(nextPanelValues, nextTab.value);\n\n if (emitEvent && changed) {\n this.dispatchEvent(\n new CustomEvent<TabsGroupSelectDetail>('select', {\n bubbles: true,\n composed: true,\n detail: { value: nextTab.value }\n })\n );\n }\n }\n\n /** Updates reactive state for panel slot names and the active tab value without touching the tab items. */\n #commitState(nextPanelValues: string[], nextSelectedValue: string): void {\n if (!sameOrderedStringArray(this.panelValues, nextPanelValues)) {\n this.panelValues = nextPanelValues;\n }\n\n if (this.selectedValue !== nextSelectedValue) {\n this.selectedValue = nextSelectedValue;\n }\n }\n\n // --- Panel sync (state → panels & ARIA) ---\n\n /** For each named panel slot, wires `hidden` and tab↔panel ARIA ids to match `selectedValue`. */\n #syncPanels(): void {\n const tabItems = this.#getTabItems();\n const tabMap = new Map(\n tabItems.filter(item => this.#isSelectableTab(item)).map(item => [item.value, item] satisfies [string, TabsItem])\n );\n\n this.#getPanelSlots().forEach(slot => {\n this.#syncPanelSlot(slot, tabMap);\n });\n }\n\n /**\n * If no selectable tab exists for `slot.name`, hides all assigned nodes. Otherwise shows only the panel(s)\n * for the active value and assigns `role=\"tabpanel\"` / `aria-labelledby` when missing.\n */\n #syncPanelSlot(slot: HTMLSlotElement, tabMap: ReadonlyMap<string, TabsItem>): void {\n const tabItem = tabMap.get(slot.name);\n const panels = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n if (!tabItem) {\n panels.forEach(panel => {\n panel.hidden = true;\n });\n return;\n }\n\n tabItem.id ||= generateId();\n\n panels.forEach((panel, index) => {\n panel.id ||= generateId();\n\n if (!tabItem.hasAttribute('aria-controls') && index === 0) {\n tabItem.setAttribute('aria-controls', panel.id);\n }\n\n if (!panel.hasAttribute('aria-labelledby')) {\n panel.setAttribute('aria-labelledby', tabItem.id);\n }\n\n if (!panel.hasAttribute('role')) {\n panel.setAttribute('role', 'tabpanel');\n }\n\n const isActive = slot.name === this.selectedValue;\n panel.hidden = !isActive;\n });\n }\n\n // --- DOM queries ---\n\n /** Resolves the single slotted `nve-tabs` (default slot), with a light-DOM fallback for edge timing. */\n #getTabsElement(): Tabs | undefined {\n const el =\n this.defaultSlotElements.find(element => element.localName === Tabs.metadata.tag) ??\n this.querySelector(Tabs.metadata.tag);\n return el instanceof Tabs ? el : undefined;\n }\n\n #getTabItems(): TabsItem[] {\n return Array.from(this.#getTabsElement()?.querySelectorAll<TabsItem>('nve-tabs-item') ?? []);\n }\n\n #getPanelSlots(): HTMLSlotElement[] {\n return Array.from(this.renderRoot.querySelectorAll<HTMLSlotElement>('slot[name]'));\n }\n\n /** Selectable tabs have a non-empty `value` and are not `disabled`. */\n #isSelectableTab(tabItem: TabsItem): tabItem is TabsItem & { value: string } {\n return typeof tabItem.value === 'string' && tabItem.value.length > 0 && !tabItem.disabled;\n }\n\n /** Prefer the selectable tab that is already selected; otherwise the first selectable tab. */\n #resolveSelectedTab(tabItems: readonly TabsItem[]): TabsItem | undefined {\n return (\n tabItems.find(item => this.#isSelectableTab(item) && item.selected) ??\n tabItems.find(item => this.#isSelectableTab(item))\n );\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabs-group2.js","names":[],"sources":["../../src/tabs/tabs-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n attachInternals,\n audit,\n generateId,\n sameOrderedStringArray,\n uniqueNonEmptyStrings,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { Tabs, type TabsItem } from './tabs.js';\nimport styles from './tabs-group.css?inline';\n\n/** Invoker command source for `--toggle` (e.g. `nve-tabs-item` with `value`). */\ntype TabsGroupCommandSource = HTMLElement & {\n disabled?: boolean;\n value?: string | null;\n};\n\n/** `command` event from Invoker Commands; `source` is the control that fired. */\ntype TabsGroupCommandEvent = Event & {\n command?: string;\n source?: TabsGroupCommandSource | null;\n};\n\n/** Payload for the composed `select` event when the active tab value changes via command. */\ntype TabsGroupSelectDetail = { value: string };\n\n/** Arranges the tab strip and slot-matched panels: stacked column (`top`), or sidebar row with tabs at inline-start (`start`) or inline-end (`end`). */\nexport type TabsGroupAlignment = 'top' | 'start' | 'end';\n\n/**\n * @element nve-tabs-group\n * @description Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.\n * @documentation https://nvidia.github.io/elements/docs/elements/tabs/\n * @since 1.67.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.\n * @event select - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection\n * @slot - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.\n * @slot {value} - Named panel content where the slot name matches a nve-tabs-item value.\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\nexport class TabsGroup extends LitElement {\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-tabs-group',\n version: '0.0.0',\n children: ['nve-tabs']\n };\n\n /** Options for observing the slotted `nve-tabs` subtree (tab list / item attribute changes). */\n protected static readonly subtreeObserverInit = {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['disabled', 'id', 'selected', 'value']\n } as const satisfies MutationObserverInit;\n\n @queryAssignedElements({ flatten: true }) private defaultSlotElements!: HTMLElement[];\n\n /**\n * Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at\n * inline-start (`start`) or inline-end (`end`) beside the panel region.\n */\n @property({ type: String, reflect: true }) alignment: TabsGroupAlignment = 'top';\n\n @state() private panelValues: string[] = [];\n\n @state() private selectedValue = '';\n\n /** @private */\n declare _internals: ElementInternals;\n\n #tabsObserver?: MutationObserver;\n\n /**\n * Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable\n * `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.\n */\n render() {\n return html`\n <div internal-host>\n <slot @slotchange=${this.#handleDefaultSlotChange}></slot>\n ${this.panelValues.map(value => html`<slot name=${value} @slotchange=${this.#handlePanelSlotChange}></slot>`)}\n </div>\n `;\n }\n\n // --- Lifecycle & command ---\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'group';\n this.addEventListener('command', this.#handleCommand as EventListener);\n }\n\n firstUpdated() {\n void this.updateComplete.then(() => {\n if (!this.isConnected) {\n return;\n }\n\n this.#syncFromTabs();\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('command', this.#handleCommand as EventListener);\n this.#tabsObserver?.disconnect();\n }\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (!this.#tabsObserver) {\n this.#observeTabs();\n }\n\n // `@state()` fields are not in `PropertyValues<this>` keys; cast for membership checks.\n const props = changedProperties as ReadonlyMap<PropertyKey, unknown>;\n if (props.has('panelValues') || props.has('selectedValue')) {\n this.#syncPanels();\n }\n }\n\n #handleDefaultSlotChange = (): void => {\n this.#observeTabs();\n this.#syncFromTabs();\n };\n\n #handlePanelSlotChange = (): void => {\n this.#syncPanels();\n };\n\n /**\n * Handles Invoker `--toggle` on a tab item: selects the matching `nve-tabs-item` and syncs panels.\n * Ignores non-toggle commands and invokers without a non-empty string `value`.\n */\n #handleCommand = (event: TabsGroupCommandEvent): void => {\n if (event.command !== '--toggle') {\n return;\n }\n\n const value = event.source?.value;\n if (typeof value !== 'string' || !value.length) {\n return;\n }\n\n const tabItems = this.#getTabItems();\n const tabItem = tabItems.find(item => this.#isSelectableTab(item) && item.value === value);\n if (!tabItem) {\n return;\n }\n\n this.#setActiveTab(tabItems, tabItem, { emitEvent: true });\n };\n\n // --- Tab strip sync (tabs → state) ---\n\n /** Attaches a single `MutationObserver` on the slotted `nve-tabs` element to mirror tab list changes into state. */\n #observeTabs(): void {\n this.#tabsObserver?.disconnect();\n\n const tabs = this.#getTabsElement();\n if (!tabs) {\n return;\n }\n\n this.#tabsObserver = new MutationObserver(() => this.#syncFromTabs());\n this.#tabsObserver.observe(tabs, TabsGroup.subtreeObserverInit);\n }\n\n /**\n * Reads the current tab items: derives ordered `panelValues` for render, resolves which tab should be active,\n * and commits selection. Called on slot change, subtree mutations, and after mount.\n */\n #syncFromTabs(): void {\n const tabItems = this.#getTabItems();\n const nextPanelValues = uniqueNonEmptyStrings(tabItems.map(item => item.value));\n\n const selectedTab = this.#resolveSelectedTab(tabItems);\n\n if (!selectedTab) {\n tabItems.forEach(item => (item.selected = false));\n this.#commitState(nextPanelValues, '');\n return;\n }\n\n this.#setActiveTab(tabItems, selectedTab, { emitEvent: false, nextPanelValues });\n }\n\n /**\n * Sets exactly one selected tab, updates `panelValues` / `selectedValue`, and optionally dispatches `select`.\n *\n * @param emitEvent - When true (command path), dispatches `select` if selection actually changed.\n */\n #setActiveTab(\n tabItems: TabsItem[],\n nextTab: TabsItem,\n options: { emitEvent: boolean; nextPanelValues?: string[] }\n ): void {\n const { emitEvent } = options;\n const nextPanelValues = options.nextPanelValues ?? uniqueNonEmptyStrings(tabItems.map(item => item.value));\n // True when the effective selection differs from the prior committed state (value, flags, or multi-select).\n // `select` is only dispatched when both `emitEvent` (invoker/command path) and `changed` are true.\n const changed =\n this.selectedValue !== nextTab.value ||\n !nextTab.selected ||\n tabItems.some(item => item !== nextTab && item.selected);\n\n tabItems.forEach(item => {\n item.selected = item === nextTab;\n });\n\n this.#commitState(nextPanelValues, nextTab.value);\n\n if (emitEvent && changed) {\n this.dispatchEvent(\n new CustomEvent<TabsGroupSelectDetail>('select', {\n bubbles: true,\n composed: true,\n detail: { value: nextTab.value }\n })\n );\n }\n }\n\n /** Updates reactive state for panel slot names and the active tab value without touching the tab items. */\n #commitState(nextPanelValues: string[], nextSelectedValue: string): void {\n if (!sameOrderedStringArray(this.panelValues, nextPanelValues)) {\n this.panelValues = nextPanelValues;\n }\n\n if (this.selectedValue !== nextSelectedValue) {\n this.selectedValue = nextSelectedValue;\n }\n }\n\n // --- Panel sync (state → panels & ARIA) ---\n\n /** For each named panel slot, wires `hidden` and tab↔panel ARIA ids to match `selectedValue`. */\n #syncPanels(): void {\n const tabItems = this.#getTabItems();\n const tabMap = new Map(\n tabItems.filter(item => this.#isSelectableTab(item)).map(item => [item.value, item] satisfies [string, TabsItem])\n );\n\n this.#getPanelSlots().forEach(slot => {\n this.#syncPanelSlot(slot, tabMap);\n });\n }\n\n /**\n * If no selectable tab exists for `slot.name`, hides all assigned nodes. Otherwise shows only the panel(s)\n * for the active value and assigns `role=\"tabpanel\"` / `aria-labelledby` when missing.\n */\n #syncPanelSlot(slot: HTMLSlotElement, tabMap: ReadonlyMap<string, TabsItem>): void {\n const tabItem = tabMap.get(slot.name);\n const panels = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n if (!tabItem) {\n panels.forEach(panel => {\n panel.hidden = true;\n });\n return;\n }\n\n tabItem.id ||= generateId();\n\n panels.forEach((panel, index) => {\n panel.id ||= generateId();\n\n if (!tabItem.hasAttribute('aria-controls') && index === 0) {\n tabItem.setAttribute('aria-controls', panel.id);\n }\n\n if (!panel.hasAttribute('aria-labelledby')) {\n panel.setAttribute('aria-labelledby', tabItem.id);\n }\n\n if (!panel.hasAttribute('role')) {\n panel.setAttribute('role', 'tabpanel');\n }\n\n const isActive = slot.name === this.selectedValue;\n panel.hidden = !isActive;\n });\n }\n\n // --- DOM queries ---\n\n /** Resolves the single slotted `nve-tabs` (default slot), with a light-DOM fallback for edge timing. */\n #getTabsElement(): Tabs | undefined {\n const el =\n this.defaultSlotElements.find(element => element.localName === Tabs.metadata.tag) ??\n this.querySelector(Tabs.metadata.tag);\n return el instanceof Tabs ? el : undefined;\n }\n\n #getTabItems(): TabsItem[] {\n return Array.from(this.#getTabsElement()?.querySelectorAll<TabsItem>('nve-tabs-item') ?? []);\n }\n\n #getPanelSlots(): HTMLSlotElement[] {\n return Array.from(this.renderRoot.querySelectorAll<HTMLSlotElement>('slot[name]'));\n }\n\n /** Selectable tabs have a non-empty `value` and are not `disabled`. */\n #isSelectableTab(tabItem: TabsItem): tabItem is TabsItem & { value: string } {\n return typeof tabItem.value === 'string' && tabItem.value.length > 0 && !tabItem.disabled;\n }\n\n /** Prefer the selectable tab that is already selected; otherwise the first selectable tab. */\n #resolveSelectedTab(tabItems: readonly TabsItem[]): TabsItem | undefined {\n return (\n tabItems.find(item => this.#isSelectableTab(item) && item.selected) ??\n tabItems.find(item => this.#isSelectableTab(item))\n );\n }\n}\n"],"mappings":"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"}
|
package/dist/tabs/tabs2.js
CHANGED
|
@@ -4,7 +4,7 @@ import { keyNavigationList as i } from "../internal/controllers/keynav-list.cont
|
|
|
4
4
|
import { attachInternals as a } from "../internal/utils/a11y.js";
|
|
5
5
|
import { stateSelected as o } from "../internal/controllers/state-selected.controller.js";
|
|
6
6
|
import { useStyles as s } from "../internal/styles/index.js";
|
|
7
|
-
import c from "../_virtual/_@oxc-project_runtime@0.
|
|
7
|
+
import c from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
|
|
8
8
|
import l from "./tabs.global.js";
|
|
9
9
|
import u from "./tabs-item.js";
|
|
10
10
|
import d from "./tabs.js";
|
|
@@ -20,7 +20,7 @@ var _ = class extends h(f) {
|
|
|
20
20
|
static {
|
|
21
21
|
this.metadata = {
|
|
22
22
|
tag: "nve-tabs-item",
|
|
23
|
-
version: "2.
|
|
23
|
+
version: "2.8.0",
|
|
24
24
|
parents: ["nve-tabs"]
|
|
25
25
|
};
|
|
26
26
|
}
|
|
@@ -53,7 +53,7 @@ var v = class extends f {
|
|
|
53
53
|
static {
|
|
54
54
|
this.metadata = {
|
|
55
55
|
tag: "nve-tabs",
|
|
56
|
-
version: "2.
|
|
56
|
+
version: "2.8.0",
|
|
57
57
|
children: ["nve-tabs-item"]
|
|
58
58
|
};
|
|
59
59
|
}
|