@nvidia-elements/core 2.19.0 → 2.19.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (175) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/_virtual/_rolldown/runtime.js +17 -0
  3. package/dist/accordion/accordion2.js +60 -57
  4. package/dist/accordion/accordion2.js.map +1 -1
  5. package/dist/alert/alert-group2.js +1 -1
  6. package/dist/alert/alert2.js +37 -31
  7. package/dist/alert/alert2.js.map +1 -1
  8. package/dist/avatar/avatar-group2.js +1 -1
  9. package/dist/avatar/avatar2.js +1 -1
  10. package/dist/badge/badge.d.ts +0 -6
  11. package/dist/badge/badge2.js +31 -36
  12. package/dist/badge/badge2.js.map +1 -1
  13. package/dist/breadcrumb/breadcrumb2.js +1 -1
  14. package/dist/bundles/index.d.ts +25 -27
  15. package/dist/bundles/index.js +9 -9
  16. package/dist/button/button2.js +1 -1
  17. package/dist/button-group/button-group2.js +1 -1
  18. package/dist/card/card2.js +4 -4
  19. package/dist/chat-message/chat-message2.js +1 -1
  20. package/dist/checkbox/checkbox-group2.js +1 -1
  21. package/dist/checkbox/checkbox2.js +1 -1
  22. package/dist/color/color.d.ts +2 -0
  23. package/dist/color/color2.js +7 -4
  24. package/dist/color/color2.js.map +1 -1
  25. package/dist/combobox/combobox.d.ts +2 -0
  26. package/dist/combobox/combobox2.js +14 -6
  27. package/dist/combobox/combobox2.js.map +1 -1
  28. package/dist/copy-button/copy-button2.js +26 -23
  29. package/dist/copy-button/copy-button2.js.map +1 -1
  30. package/dist/custom-elements-jsx.d.ts +0 -4
  31. package/dist/custom-elements-vue.d.ts +0 -4
  32. package/dist/custom-elements.json +3 -173
  33. package/dist/data.html.json +0 -10
  34. package/dist/data.snippets.json +27 -27
  35. package/dist/date/date.d.ts +2 -0
  36. package/dist/date/date2.js +7 -4
  37. package/dist/date/date2.js.map +1 -1
  38. package/dist/datetime/datetime.d.ts +2 -0
  39. package/dist/datetime/datetime2.js +7 -4
  40. package/dist/datetime/datetime2.js.map +1 -1
  41. package/dist/dialog/dialog-footer2.js +1 -1
  42. package/dist/dialog/dialog-header2.js +1 -1
  43. package/dist/dialog/dialog2.js +27 -27
  44. package/dist/dialog/dialog2.js.map +1 -1
  45. package/dist/divider/divider2.js +1 -1
  46. package/dist/dot/dot2.js +1 -1
  47. package/dist/drag-handle/drag-handle2.js +1 -1
  48. package/dist/drawer/drawer-content2.js +1 -1
  49. package/dist/drawer/drawer-footer2.js +1 -1
  50. package/dist/drawer/drawer-header2.js +1 -1
  51. package/dist/drawer/drawer2.js +27 -27
  52. package/dist/drawer/drawer2.js.map +1 -1
  53. package/dist/dropdown/dropdown-footer2.js +1 -1
  54. package/dist/dropdown/dropdown-header2.js +1 -1
  55. package/dist/dropdown/dropdown2.js +23 -23
  56. package/dist/dropdown/dropdown2.js.map +1 -1
  57. package/dist/dropdown-group/dropdown-group.js +1 -1
  58. package/dist/dropzone/dropzone2.js +28 -22
  59. package/dist/dropzone/dropzone2.js.map +1 -1
  60. package/dist/file/file2.js +1 -1
  61. package/dist/format-bytes/format-bytes2.js +1 -1
  62. package/dist/format-datetime/format-datetime2.js +1 -1
  63. package/dist/format-number/format-number2.js +1 -1
  64. package/dist/format-relative-time/format-relative-time2.js +1 -1
  65. package/dist/format-truncate/format-truncate2.js +1 -1
  66. package/dist/forms/control/control.d.ts +3 -0
  67. package/dist/forms/control/control2.js +34 -31
  68. package/dist/forms/control/control2.js.map +1 -1
  69. package/dist/forms/control-group/control-group2.js +1 -1
  70. package/dist/forms/control-message/control-message2.js +1 -1
  71. package/dist/gauge/gauge2.js +26 -21
  72. package/dist/gauge/gauge2.js.map +1 -1
  73. package/dist/grid/cell/cell2.js +1 -1
  74. package/dist/grid/column/column2.js +1 -1
  75. package/dist/grid/footer/footer2.js +1 -1
  76. package/dist/grid/grid2.js +1 -1
  77. package/dist/grid/header/header2.js +1 -1
  78. package/dist/grid/placeholder/placeholder2.js +1 -1
  79. package/dist/grid/row/row2.js +1 -1
  80. package/dist/icon/icon2.js +2 -2
  81. package/dist/icon-button/icon-button2.js +1 -1
  82. package/dist/iframe/iframe2.js +1 -1
  83. package/dist/index.js +5 -6
  84. package/dist/input/input-group2.js +1 -1
  85. package/dist/input/input2.js +1 -1
  86. package/dist/internal/index.d.ts +1 -2
  87. package/dist/internal/index.js +150 -33
  88. package/dist/internal/index.js.map +1 -0
  89. package/dist/internal/types/index.d.ts +1 -1
  90. package/dist/internal/types/index.js.map +1 -1
  91. package/dist/logo/logo2.js +1 -1
  92. package/dist/menu/menu-group2.js +1 -1
  93. package/dist/menu/menu-item2.js +1 -1
  94. package/dist/menu/menu2.js +1 -1
  95. package/dist/month/month.d.ts +2 -0
  96. package/dist/month/month2.js +7 -4
  97. package/dist/month/month2.js.map +1 -1
  98. package/dist/notification/notification-group2.js +1 -1
  99. package/dist/notification/notification2.js +38 -32
  100. package/dist/notification/notification2.js.map +1 -1
  101. package/dist/page/page-panel/page-panel-content2.js +1 -1
  102. package/dist/page/page-panel/page-panel-footer2.js +1 -1
  103. package/dist/page/page-panel/page-panel-header2.js +1 -1
  104. package/dist/page/page-panel/page-panel.d.ts +0 -7
  105. package/dist/page/page-panel/page-panel2.js +18 -20
  106. package/dist/page/page-panel/page-panel2.js.map +1 -1
  107. package/dist/page/page2.js +1 -1
  108. package/dist/page-header/page-header2.js +1 -1
  109. package/dist/page-loader/page-loader2.js +1 -1
  110. package/dist/pagination/pagination2.js +45 -38
  111. package/dist/pagination/pagination2.js.map +1 -1
  112. package/dist/panel/panel2.js +43 -38
  113. package/dist/panel/panel2.js.map +1 -1
  114. package/dist/password/password.d.ts +2 -0
  115. package/dist/password/password2.js +10 -4
  116. package/dist/password/password2.js.map +1 -1
  117. package/dist/preferences-input/preferences-input2.js +32 -27
  118. package/dist/preferences-input/preferences-input2.js.map +1 -1
  119. package/dist/progress-bar/progress-bar2.js +1 -1
  120. package/dist/progress-dot/progress-dot2.js +17 -17
  121. package/dist/progress-dot/progress-dot2.js.map +1 -1
  122. package/dist/progress-ring/progress-ring2.js +27 -22
  123. package/dist/progress-ring/progress-ring2.js.map +1 -1
  124. package/dist/progressive-filter-chip/progressive-filter-chip2.js +30 -30
  125. package/dist/progressive-filter-chip/progressive-filter-chip2.js.map +1 -1
  126. package/dist/pulse/pulse2.js +1 -1
  127. package/dist/radio/radio-group2.js +1 -1
  128. package/dist/radio/radio2.js +1 -1
  129. package/dist/range/range2.js +1 -1
  130. package/dist/resize-handle/resize-handle2.js +17 -17
  131. package/dist/resize-handle/resize-handle2.js.map +1 -1
  132. package/dist/search/search2.js +1 -1
  133. package/dist/select/select2.js +44 -41
  134. package/dist/select/select2.js.map +1 -1
  135. package/dist/skeleton/skeleton2.js +1 -1
  136. package/dist/sort-button/sort-button2.js +20 -20
  137. package/dist/sort-button/sort-button2.js.map +1 -1
  138. package/dist/sparkline/sparkline2.js +1 -1
  139. package/dist/star-rating/star-rating2.js +1 -1
  140. package/dist/steps/steps2.js +2 -2
  141. package/dist/switch/switch-group2.js +1 -1
  142. package/dist/switch/switch2.js +1 -1
  143. package/dist/tabs/tabs-group2.js +1 -1
  144. package/dist/tabs/tabs-item-group2.js +1 -1
  145. package/dist/tabs/tabs2.js +2 -2
  146. package/dist/tag/tag2.js +19 -19
  147. package/dist/tag/tag2.js.map +1 -1
  148. package/dist/textarea/textarea2.js +1 -1
  149. package/dist/time/time.d.ts +2 -0
  150. package/dist/time/time2.js +7 -4
  151. package/dist/time/time2.js.map +1 -1
  152. package/dist/toast/toast2.js +35 -29
  153. package/dist/toast/toast2.js.map +1 -1
  154. package/dist/toggletip/toggletip-footer2.js +1 -1
  155. package/dist/toggletip/toggletip-header2.js +1 -1
  156. package/dist/toggletip/toggletip2.js +25 -25
  157. package/dist/toggletip/toggletip2.js.map +1 -1
  158. package/dist/toolbar/toolbar2.js +1 -1
  159. package/dist/tooltip/tooltip2.js +1 -1
  160. package/dist/tree/tree-node2.js +45 -45
  161. package/dist/tree/tree-node2.js.map +1 -1
  162. package/dist/tree/tree2.js +1 -1
  163. package/dist/week/week.d.ts +2 -0
  164. package/dist/week/week2.js +7 -4
  165. package/dist/week/week2.js.map +1 -1
  166. package/package.json +2 -2
  167. package/dist/internal/controllers/i18n.controller.d.ts +0 -19
  168. package/dist/internal/controllers/i18n.controller.examples.js +0 -6
  169. package/dist/internal/controllers/i18n.controller.examples.js.map +0 -1
  170. package/dist/internal/controllers/i18n.controller.examples.json +0 -16
  171. package/dist/internal/controllers/i18n.controller.js +0 -38
  172. package/dist/internal/controllers/i18n.controller.js.map +0 -1
  173. package/dist/internal/services/i18n.service.d.ts +0 -64
  174. package/dist/internal/services/i18n.service.js +0 -73
  175. package/dist/internal/services/i18n.service.js.map +0 -1
@@ -1,53 +1,53 @@
1
- import { I18nController as e } from "../internal/controllers/i18n.controller.js";
2
- import { appendRootNodeStyle as t, generateId as n } from "../internal/utils/dom.js";
3
- import { attachInternals as r } from "../internal/utils/a11y.js";
4
- import { TypeClosableController as i } from "../internal/controllers/type-closable.controller.js";
5
- import { typeSSR as a } from "../internal/controllers/type-ssr.controller.js";
6
- import { scopedRegistry as o } from "../internal/decorators/scoped-registry.js";
7
- import { useStyles as s } from "../internal/styles/index.js";
8
- import c from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
9
- import { IconButton as l } from "../icon-button/icon-button2.js";
10
- import { Input as u } from "../input/input2.js";
11
- import { Select as d } from "../select/select2.js";
12
- import { Date as f } from "../date/date2.js";
13
- import p from "./progressive-filter-chip.global.js";
14
- import m from "./progressive-filter-chip.js";
15
- import { LitElement as h, html as g, nothing as _ } from "lit";
16
- import { property as v } from "lit/decorators/property.js";
1
+ import { appendRootNodeStyle as e, generateId as t } from "../internal/utils/dom.js";
2
+ import { attachInternals as n } from "../internal/utils/a11y.js";
3
+ import { TypeClosableController as r } from "../internal/controllers/type-closable.controller.js";
4
+ import { typeSSR as i } from "../internal/controllers/type-ssr.controller.js";
5
+ import { scopedRegistry as a } from "../internal/decorators/scoped-registry.js";
6
+ import { useStyles as o } from "../internal/styles/index.js";
7
+ import s from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
8
+ import { IconButton as c } from "../icon-button/icon-button2.js";
9
+ import { Input as l } from "../input/input2.js";
10
+ import { Select as u } from "../select/select2.js";
11
+ import { Date as d } from "../date/date2.js";
12
+ import f from "./progressive-filter-chip.global.js";
13
+ import p from "./progressive-filter-chip.js";
14
+ import { LitElement as m, html as h, nothing as g } from "lit";
15
+ import { property as _ } from "lit/decorators/property.js";
16
+ import { I18nController as v } from "@nvidia-elements/foundations/internal/i18n";
17
17
  import { state as y } from "lit/decorators/state.js";
18
18
  //#region src/progressive-filter-chip/progressive-filter-chip.ts
19
- var b = class extends h {
20
- constructor(...t) {
21
- super(...t), this.#e = new e(this), this.i18n = this.#e.i18n, this.inputs = [], this.#t = new i(this);
19
+ var b = { close: "close" }, x = class extends m {
20
+ constructor(...e) {
21
+ super(...e), this.#e = new v(this, b), this.i18n = this.#e.i18n, this.inputs = [], this.#t = new r(this);
22
22
  }
23
23
  static {
24
24
  this.metadata = {
25
25
  tag: "nve-progressive-filter-chip",
26
- version: "2.19.0"
26
+ version: "2.19.1"
27
27
  };
28
28
  }
29
29
  static {
30
30
  this.elementDefinitions = {
31
+ [l.metadata.tag]: l,
31
32
  [u.metadata.tag]: u,
32
33
  [d.metadata.tag]: d,
33
- [f.metadata.tag]: f,
34
- [l.metadata.tag]: l
34
+ [c.metadata.tag]: c
35
35
  };
36
36
  }
37
37
  #e;
38
38
  static {
39
- this.styles = s([m]);
39
+ this.styles = o([p]);
40
40
  }
41
41
  #t;
42
42
  #n(e) {
43
- let t = g`<slot name="${e.slot}" @slotchange="${this.#r}"></slot>`;
44
- return e.tagName === "SELECT" ? g`<nve-select part="select" multiple-overflow ?fit-text="${!e.multiple}">${t}</nve-select>` : e.tagName === "INPUT" && e.type === "date" ? g`<nve-date part="date">${t}</nve-date>` : e.tagName === "INPUT" ? g`<nve-input part="input">${t}</nve-input>` : t;
43
+ let t = h`<slot name="${e.slot}" @slotchange="${this.#r}"></slot>`;
44
+ return e.tagName === "SELECT" ? h`<nve-select part="select" multiple-overflow ?fit-text="${!e.multiple}">${t}</nve-select>` : e.tagName === "INPUT" && e.type === "date" ? h`<nve-date part="date">${t}</nve-date>` : e.tagName === "INPUT" ? h`<nve-input part="input">${t}</nve-input>` : t;
45
45
  }
46
46
  render() {
47
- return g`<div internal-host>${this.inputs.map((e) => this.#n(e))} ${this.closable ? g`<nve-icon-button part="icon-button" exportparts="icon:icon-button-icon" @click="${() => this.#t.close()}" .ariaLabel="${this.i18n.close}" icon-name="cancel"></nve-icon-button>` : _}</div><slot hidden-slot @slotchange="${this.#i}"></slot>`;
47
+ return h`<div internal-host>${this.inputs.map((e) => this.#n(e))} ${this.closable ? h`<nve-icon-button part="icon-button" exportparts="icon:icon-button-icon" @click="${() => this.#t.close()}" .ariaLabel="${this.i18n.close}" icon-name="cancel"></nve-icon-button>` : g}</div><slot hidden-slot @slotchange="${this.#i}"></slot>`;
48
48
  }
49
49
  connectedCallback() {
50
- super.connectedCallback(), r(this), this._internals.role = "toolbar", this.setAttribute("nve-control", ""), t(this, p);
50
+ super.connectedCallback(), n(this), this._internals.role = "toolbar", this.setAttribute("nve-control", ""), e(this, f);
51
51
  }
52
52
  #r(e) {
53
53
  e.target.assignedElements().length || this.#a();
@@ -56,15 +56,15 @@ var b = class extends h {
56
56
  if (e.target && e.target.assignedElements().length) {
57
57
  this.#a();
58
58
  let e = Array.from(this.shadowRoot.querySelector("slot:not([name])").assignedElements()).filter((e) => e.matches("input, select, nve-button, [nve-control]"));
59
- e.forEach((e) => e.slot = n()), this.inputs = e.length ? e : this.inputs;
59
+ e.forEach((e) => e.slot = t()), this.inputs = e.length ? e : this.inputs;
60
60
  }
61
61
  }
62
62
  #a() {
63
63
  Array.from(this.shadowRoot.querySelectorAll("slot")).flatMap((e) => e.assignedElements()).forEach((e) => e.slot = "");
64
64
  }
65
65
  };
66
- c([v({ type: Boolean })], b.prototype, "closable", void 0), c([v({ type: Object })], b.prototype, "i18n", void 0), c([y()], b.prototype, "inputs", void 0), b = c([a(), o()], b);
66
+ s([_({ type: Boolean })], x.prototype, "closable", void 0), s([_({ type: Object })], x.prototype, "i18n", void 0), s([y()], x.prototype, "inputs", void 0), x = s([i(), a()], x);
67
67
  //#endregion
68
- export { b as ProgressiveFilterChip };
68
+ export { x as ProgressiveFilterChip };
69
69
 
70
70
  //# sourceMappingURL=progressive-filter-chip2.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"progressive-filter-chip2.js","names":[],"sources":["../../src/progressive-filter-chip/progressive-filter-chip.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n appendRootNodeStyle,\n attachInternals,\n generateId,\n I18nController,\n scopedRegistry,\n TypeClosableController,\n typeSSR,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { Input } from '@nvidia-elements/core/input';\nimport { Select } from '@nvidia-elements/core/select';\nimport { Date } from '@nvidia-elements/core/date';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport globalStyles from './progressive-filter-chip.global.css?inline';\nimport styles from './progressive-filter-chip.css?inline';\n\n/**\n * @element nve-progressive-filter-chip\n * @description A filter chip is a control that enables users to select many options from a set of choices.\n * @documentation https://nvidia.github.io/elements/docs/elements/progressive-filter-chip/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/progressive-filter-chip\n * @slot - `input`, `select`, `nve-button`, or other `[nve-control]` elements used to build the filter.\n * @event close - Dispatched when the filter chip closes.\n * @cssprop --gap\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --background\n * @cssprop --font-weight\n * @cssprop --padding\n * @cssprop --width\n * @csspart select - The select element\n * @csspart date - The date input element\n * @csspart input - The input element\n * @csspart icon-button - The icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n */\n@typeSSR()\n@scopedRegistry()\nexport class ProgressiveFilterChip extends LitElement {\n static readonly metadata = {\n tag: 'nve-progressive-filter-chip',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Input.metadata.tag]: Input,\n [Select.metadata.tag]: Select,\n [Date.metadata.tag]: Date,\n [IconButton.metadata.tag]: IconButton\n };\n\n /** Determines if a close button should render within filter chip */\n @property({ type: Boolean }) closable: boolean;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /** Enables updating internal string values for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n @state() private inputs: Element[] = [];\n\n static styles = useStyles([styles]);\n\n #typeClosableController = new TypeClosableController(this);\n\n /** @private */\n declare _internals: ElementInternals;\n\n #getControlTemplate(el: Element) {\n const slot = html`<slot name=${el.slot} @slotchange=${this.#removeItem}></slot>`;\n if (el.tagName === 'SELECT') {\n return html`<nve-select part=\"select\" multiple-overflow ?fit-text=${!(el as HTMLSelectElement).multiple}>${slot}</nve-select>`;\n } else if (el.tagName === 'INPUT' && (el as HTMLInputElement).type === 'date') {\n return html`<nve-date part=\"date\">${slot}</nve-date>`;\n } else if (el.tagName === 'INPUT') {\n return html`<nve-input part=\"input\">${slot}</nve-input>`;\n } else {\n return slot;\n }\n }\n\n render() {\n return html`\n <div internal-host>\n ${this.inputs.map(el => this.#getControlTemplate(el))}\n ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${() => this.#typeClosableController.close()} .ariaLabel=${this.i18n.close} icon-name=\"cancel\"></nve-icon-button>` : nothing}\n </div>\n <slot hidden-slot @slotchange=${this.#createItems}></slot>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'toolbar';\n this.setAttribute('nve-control', '');\n appendRootNodeStyle(this, globalStyles);\n }\n\n #removeItem(e: Event) {\n if (!(e.target as HTMLSlotElement).assignedElements().length) {\n this.#resetItems();\n }\n }\n\n #createItems(e: Event) {\n if (e.target && (e.target as HTMLSlotElement).assignedElements().length) {\n this.#resetItems();\n const items = Array.from(\n this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!.assignedElements()\n ).filter(i => i.matches('input, select, nve-button, [nve-control]'));\n items.forEach(i => (i.slot = generateId()));\n this.inputs = items.length ? items : this.inputs;\n }\n }\n\n #resetItems() {\n Array.from(this.shadowRoot!.querySelectorAll('slot'))\n .flatMap(i => i.assignedElements())\n .forEach(i => (i.slot = ''));\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8CO,IAAM,IAAN,cAAoC,EAAW;;EAyB1B,aATc,KAAA,KAAA,IAAI,EAAqB,IAAI,GAGlC,KAAA,OAAA,KAAK,GAAgB,MAEnB,KAAA,SAAA,CAAC,GAIZ,KAAA,KAAA,IAAI,EAAuB,IAAI;;;EAxB9B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA;IACzB,EAAM,SAAS,MAAM;IACrB,EAAO,SAAS,MAAM;IACtB,EAAK,SAAS,MAAM;IACpB,EAAW,SAAS,MAAM;EAC7B;;CAKA;;EAOgB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;CAElC;CAKA,GAAoB,GAAa;EAC/B,IAAM,IAAO,CAAI,eAAc,EAAG,KAAK,iBAAe,KAAK,GAAY;EAQrE,OAPE,EAAG,YAAY,WACV,CAAI,0DAAyD,CAAE,EAAyB,SAAS,IAAG,EAAK,iBACvG,EAAG,YAAY,WAAY,EAAwB,SAAS,SAC9D,CAAI,yBAAyB,EAAK,eAChC,EAAG,YAAY,UACjB,CAAI,2BAA2B,EAAK,gBAEpC;CAEX;CAEA,SAAS;EACP,OAAO,CAAI,sBAEP,KAAK,OAAO,KAAI,MAAM,KAAK,GAAoB,CAAE,CAAC,EAAE,GACpD,KAAK,WAAW,CAAI,yFAAwF,KAAK,GAAwB,MAAM,EAAE,gBAAc,KAAK,KAAK,MAAM,2CAA0C,EAAQ,uCAErM,KAAK,GAAa;CAEpD;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,WACvB,KAAK,aAAa,eAAe,EAAE,GACnC,EAAoB,MAAM,CAAY;CACxC;CAEA,GAAY,GAAU;EACpB,AAAM,EAAE,OAA2B,iBAAiB,CAAC,CAAC,UACpD,KAAK,GAAY;CAErB;CAEA,GAAa,GAAU;EACrB,IAAI,EAAE,UAAW,EAAE,OAA2B,iBAAiB,CAAC,CAAC,QAAQ;GACvE,KAAK,GAAY;GACjB,IAAM,IAAQ,MAAM,KAClB,KAAK,WAAY,cAA+B,kBAAkB,CAAC,CAAE,iBAAiB,CACxF,CAAC,CAAC,QAAO,MAAK,EAAE,QAAQ,0CAA0C,CAAC;GAEnE,AADA,EAAM,SAAQ,MAAM,EAAE,OAAO,EAAW,CAAE,GAC1C,KAAK,SAAS,EAAM,SAAS,IAAQ,KAAK;EAC5C;CACF;CAEA,KAAc;EACZ,MAAM,KAAK,KAAK,WAAY,iBAAiB,MAAM,CAAC,CAAC,CAClD,SAAQ,MAAK,EAAE,iBAAiB,CAAC,CAAC,CAClC,SAAQ,MAAM,EAAE,OAAO,EAAG;CAC/B;AACF;AArEG,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1B,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAEzB,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAvBR,IAAA,EAAA,CAAA,EAAQ,GACR,EAAe,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"progressive-filter-chip2.js","names":[],"sources":["../../src/progressive-filter-chip/progressive-filter-chip.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n appendRootNodeStyle,\n attachInternals,\n generateId,\n scopedRegistry,\n TypeClosableController,\n typeSSR,\n useStyles\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { Input } from '@nvidia-elements/core/input';\nimport { Select } from '@nvidia-elements/core/select';\nimport { Date } from '@nvidia-elements/core/date';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport globalStyles from './progressive-filter-chip.global.css?inline';\nimport styles from './progressive-filter-chip.css?inline';\n\nconst i18nDefaults = {\n close: 'close'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-progressive-filter-chip\n * @description A filter chip is a control that enables users to select many options from a set of choices.\n * @documentation https://nvidia.github.io/elements/docs/elements/progressive-filter-chip/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/progressive-filter-chip\n * @slot - `input`, `select`, `nve-button`, or other `[nve-control]` elements used to build the filter.\n * @event close - Dispatched when the filter chip closes.\n * @cssprop --gap\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --background\n * @cssprop --font-weight\n * @cssprop --padding\n * @cssprop --width\n * @csspart select - The select element\n * @csspart date - The date input element\n * @csspart input - The input element\n * @csspart icon-button - The icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n */\n@typeSSR()\n@scopedRegistry()\nexport class ProgressiveFilterChip extends LitElement {\n static readonly metadata = {\n tag: 'nve-progressive-filter-chip',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Input.metadata.tag]: Input,\n [Select.metadata.tag]: Select,\n [Date.metadata.tag]: Date,\n [IconButton.metadata.tag]: IconButton\n };\n\n /** Determines if a close button should render within filter chip */\n @property({ type: Boolean }) closable: boolean;\n\n #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n /** Enables updating internal string values for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n @state() private inputs: Element[] = [];\n\n static styles = useStyles([styles]);\n\n #typeClosableController = new TypeClosableController(this);\n\n /** @private */\n declare _internals: ElementInternals;\n\n #getControlTemplate(el: Element) {\n const slot = html`<slot name=${el.slot} @slotchange=${this.#removeItem}></slot>`;\n if (el.tagName === 'SELECT') {\n return html`<nve-select part=\"select\" multiple-overflow ?fit-text=${!(el as HTMLSelectElement).multiple}>${slot}</nve-select>`;\n } else if (el.tagName === 'INPUT' && (el as HTMLInputElement).type === 'date') {\n return html`<nve-date part=\"date\">${slot}</nve-date>`;\n } else if (el.tagName === 'INPUT') {\n return html`<nve-input part=\"input\">${slot}</nve-input>`;\n } else {\n return slot;\n }\n }\n\n render() {\n return html`\n <div internal-host>\n ${this.inputs.map(el => this.#getControlTemplate(el))}\n ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${() => this.#typeClosableController.close()} .ariaLabel=${this.i18n.close} icon-name=\"cancel\"></nve-icon-button>` : nothing}\n </div>\n <slot hidden-slot @slotchange=${this.#createItems}></slot>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'toolbar';\n this.setAttribute('nve-control', '');\n appendRootNodeStyle(this, globalStyles);\n }\n\n #removeItem(e: Event) {\n if (!(e.target as HTMLSlotElement).assignedElements().length) {\n this.#resetItems();\n }\n }\n\n #createItems(e: Event) {\n if (e.target && (e.target as HTMLSlotElement).assignedElements().length) {\n this.#resetItems();\n const items = Array.from(\n this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!.assignedElements()\n ).filter(i => i.matches('input, select, nve-button, [nve-control]'));\n items.forEach(i => (i.slot = generateId()));\n this.inputs = items.length ? items : this.inputs;\n }\n }\n\n #resetItems() {\n Array.from(this.shadowRoot!.querySelectorAll('slot'))\n .flatMap(i => i.assignedElements())\n .forEach(i => (i.slot = ''));\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,IAAM,IAAe,EACnB,OAAO,QACT,GAyBa,IAAN,cAAoC,EAAW;;EAyB1B,aATc,KAAA,KAAA,IAAI,EAAqB,MAAM,CAAY,GAGhD,KAAA,OAAA,KAAK,GAAgB,MAEnB,KAAA,SAAA,CAAC,GAIZ,KAAA,KAAA,IAAI,EAAuB,IAAI;;;EAxB9B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA;IACzB,EAAM,SAAS,MAAM;IACrB,EAAO,SAAS,MAAM;IACtB,EAAK,SAAS,MAAM;IACpB,EAAW,SAAS,MAAM;EAC7B;;CAKA;;EAOgB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;CAElC;CAKA,GAAoB,GAAa;EAC/B,IAAM,IAAO,CAAI,eAAc,EAAG,KAAK,iBAAe,KAAK,GAAY;EAQrE,OAPE,EAAG,YAAY,WACV,CAAI,0DAAyD,CAAE,EAAyB,SAAS,IAAG,EAAK,iBACvG,EAAG,YAAY,WAAY,EAAwB,SAAS,SAC9D,CAAI,yBAAyB,EAAK,eAChC,EAAG,YAAY,UACjB,CAAI,2BAA2B,EAAK,gBAEpC;CAEX;CAEA,SAAS;EACP,OAAO,CAAI,sBAEP,KAAK,OAAO,KAAI,MAAM,KAAK,GAAoB,CAAE,CAAC,EAAE,GACpD,KAAK,WAAW,CAAI,yFAAwF,KAAK,GAAwB,MAAM,EAAE,gBAAc,KAAK,KAAK,MAAM,2CAA0C,EAAQ,uCAErM,KAAK,GAAa;CAEpD;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,WACvB,KAAK,aAAa,eAAe,EAAE,GACnC,EAAoB,MAAM,CAAY;CACxC;CAEA,GAAY,GAAU;EACpB,AAAM,EAAE,OAA2B,iBAAiB,CAAC,CAAC,UACpD,KAAK,GAAY;CAErB;CAEA,GAAa,GAAU;EACrB,IAAI,EAAE,UAAW,EAAE,OAA2B,iBAAiB,CAAC,CAAC,QAAQ;GACvE,KAAK,GAAY;GACjB,IAAM,IAAQ,MAAM,KAClB,KAAK,WAAY,cAA+B,kBAAkB,CAAC,CAAE,iBAAiB,CACxF,CAAC,CAAC,QAAO,MAAK,EAAE,QAAQ,0CAA0C,CAAC;GAEnE,AADA,EAAM,SAAQ,MAAM,EAAE,OAAO,EAAW,CAAE,GAC1C,KAAK,SAAS,EAAM,SAAS,IAAQ,KAAK;EAC5C;CACF;CAEA,KAAc;EACZ,MAAM,KAAK,KAAK,WAAY,iBAAiB,MAAM,CAAC,CAAC,CAClD,SAAQ,MAAK,EAAE,iBAAiB,CAAC,CAAC,CAClC,SAAQ,MAAM,EAAE,OAAO,EAAG;CAC/B;AACF;AArEG,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1B,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAEzB,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAvBR,IAAA,EAAA,CAAA,EAAQ,GACR,EAAe,CAAA,GAAA,CAAA"}
@@ -13,7 +13,7 @@ var c = class extends a {
13
13
  static {
14
14
  this.metadata = {
15
15
  tag: "nve-pulse",
16
- version: "2.19.0"
16
+ version: "2.19.1"
17
17
  };
18
18
  }
19
19
  static {
@@ -12,7 +12,7 @@ var o = class extends i {
12
12
  static {
13
13
  this.metadata = {
14
14
  tag: "nve-radio-group",
15
- version: "2.19.0",
15
+ version: "2.19.1",
16
16
  children: [
17
17
  "label",
18
18
  "nve-control-message",
@@ -15,7 +15,7 @@ var o = class extends i {
15
15
  static {
16
16
  this.metadata = {
17
17
  tag: "nve-radio",
18
- version: "2.19.0",
18
+ version: "2.19.1",
19
19
  children: [
20
20
  "label",
21
21
  "input",
@@ -17,7 +17,7 @@ var d = class extends i {
17
17
  static {
18
18
  this.metadata = {
19
19
  tag: "nve-range",
20
- version: "2.19.0"
20
+ version: "2.19.1"
21
21
  };
22
22
  }
23
23
  connectedCallback() {
@@ -1,16 +1,16 @@
1
1
  import { GestureController as e } from "../internal/controllers/gesture.controller.js";
2
- import { I18nController as t } from "../internal/controllers/i18n.controller.js";
3
- import { useStyles as n } from "../internal/styles/index.js";
4
- import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
5
- import i from "./resize-handle.js";
6
- import { LitElement as a, html as o } from "lit";
7
- import { property as s } from "lit/decorators/property.js";
2
+ import { useStyles as t } from "../internal/styles/index.js";
3
+ import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
4
+ import r from "./resize-handle.js";
5
+ import { LitElement as i, html as a } from "lit";
6
+ import { property as o } from "lit/decorators/property.js";
7
+ import { I18nController as s } from "@nvidia-elements/foundations/internal/i18n";
8
8
  import { FormControlMixin as c } from "@nvidia-elements/forms/mixins";
9
9
  import { ifDefined as l } from "lit/directives/if-defined.js";
10
10
  //#region src/resize-handle/resize-handle.ts
11
- var u = class extends c(a) {
11
+ var u = { resize: "resize" }, d = class extends c(i) {
12
12
  static {
13
- this.styles = n([i]);
13
+ this.styles = t([r]);
14
14
  }
15
15
  get #e() {
16
16
  return this.shadowRoot.querySelector("input");
@@ -18,7 +18,7 @@ var u = class extends c(a) {
18
18
  static {
19
19
  this.metadata = {
20
20
  tag: "nve-resize-handle",
21
- version: "2.19.0",
21
+ version: "2.19.1",
22
22
  valueSchema: { type: "number" }
23
23
  };
24
24
  }
@@ -27,10 +27,10 @@ var u = class extends c(a) {
27
27
  #r;
28
28
  #i;
29
29
  render() {
30
- return o`<div internal-host><div class="line" part="_line"></div><input aria-label="${l(this.ariaLabel ?? this.i18n.resize)}" type="range" min="${this.min}" max="${this.max}" .valueAsNumber="${this.valueAsNumber}" @input="${(e) => this.#f(e.target.valueAsNumber)}" @change="${(e) => this.#p(e.target.valueAsNumber)}" step="${this.step}"></div>`;
30
+ return a`<div internal-host><div class="line" part="_line"></div><input aria-label="${l(this.ariaLabel ?? this.i18n.resize)}" type="range" min="${this.min}" max="${this.max}" .valueAsNumber="${this.valueAsNumber}" @input="${(e) => this.#f(e.target.valueAsNumber)}" @change="${(e) => this.#p(e.target.valueAsNumber)}" step="${this.step}"></div>`;
31
31
  }
32
32
  constructor() {
33
- super(), this.orientation = "horizontal", this.min = 0, this.max = 100, this.step = 10, this.#t = new t(this), this.i18n = this.#t.i18n, this.#i = 0, this.#o = (e) => {
33
+ super(), this.orientation = "horizontal", this.min = 0, this.max = 100, this.step = 10, this.#t = new s(this, u), this.i18n = this.#t.i18n, this.#i = 0, this.#o = (e) => {
34
34
  let t = e.detail;
35
35
  t.kind === "pointerdown" ? t.event.button === 0 && t.event.isPrimary && this.#r === void 0 && t.claim({ kind: "drag" }) && this.#c(t.event.pointerId) : t.kind === "pointerend" && t.event.pointerId === this.#r && (t.interrupted ? this.#d() : this.#u());
36
36
  }, this.#s = (e) => {
@@ -81,20 +81,20 @@ var u = class extends c(a) {
81
81
  e <= this.max && e >= this.min && (this.valueAsNumber = e);
82
82
  }
83
83
  };
84
- r([s({
84
+ n([o({
85
85
  type: String,
86
86
  reflect: !0
87
- })], u.prototype, "orientation", void 0), r([s({
87
+ })], d.prototype, "orientation", void 0), n([o({
88
88
  type: Number,
89
89
  reflect: !0
90
- })], u.prototype, "min", void 0), r([s({
90
+ })], d.prototype, "min", void 0), n([o({
91
91
  type: Number,
92
92
  reflect: !0
93
- })], u.prototype, "max", void 0), r([s({
93
+ })], d.prototype, "max", void 0), n([o({
94
94
  type: Number,
95
95
  reflect: !0
96
- })], u.prototype, "step", void 0), r([s({ type: Object })], u.prototype, "i18n", void 0);
96
+ })], d.prototype, "step", void 0), n([o({ type: Object })], d.prototype, "i18n", void 0);
97
97
  //#endregion
98
- export { u as ResizeHandle };
98
+ export { d as ResizeHandle };
99
99
 
100
100
  //# sourceMappingURL=resize-handle2.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"resize-handle2.js","names":[],"sources":["../../src/resize-handle/resize-handle.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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators/property.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport {\n GestureController,\n I18nController,\n useStyles,\n type Gesture,\n type GestureInput\n} from '@nvidia-elements/core/internal';\nimport styles from './resize-handle.css?inline';\n\n/**\n * @element nve-resize-handle\n * @description A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.\n * @documentation https://nvidia.github.io/elements/docs/elements/resize-handle/\n * @since 1.27.0\n * @entrypoint \\@nvidia-elements/core/resize-handle\n * @event toggle - Dispatched when the resize handle is double clicked.\n * @cssprop --background\n * @cssprop --line-width\n * @cssprop --target-size\n * @cssprop --cursor\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/slider/\n *\n */\nexport class ResizeHandle extends FormControlMixin<typeof LitElement, number>(LitElement) {\n /**\n * Determines the orientation direction of the resize handle.\n */\n @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Determines the min resize value.\n */\n @property({ type: Number, reflect: true }) min = 0;\n\n /**\n * Determines the max resize value.\n */\n @property({ type: Number, reflect: true }) max = 100;\n\n /**\n * Determines the value step change.\n */\n @property({ type: Number, reflect: true }) step = 10;\n\n static styles = useStyles([styles]);\n\n get #range() {\n return this.shadowRoot!.querySelector('input')!;\n }\n\n static readonly metadata = {\n tag: 'nve-resize-handle',\n version: '0.0.0',\n valueSchema: {\n type: 'number' as const\n }\n };\n\n readonly #i18nController: I18nController<this> = new I18nController<this>(this);\n\n readonly #gestureController: GestureController;\n\n #dragPointerId?: number;\n\n /**\n * Updates internal string values for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n #offset = 0;\n\n render() {\n return html`\n <div internal-host>\n <div class=\"line\" part=\"_line\"></div>\n <input aria-label=${ifDefined(this.ariaLabel ?? this.i18n.resize)} type=\"range\" min=${this.min} max=${this.max} .valueAsNumber=${this.valueAsNumber} @input=${(e: Event) => this.#setInput((e.target as HTMLInputElement).valueAsNumber)} @change=${(e: Event) => this.#setChange((e.target as HTMLInputElement).valueAsNumber)} step=${this.step} />\n </div>\n `;\n }\n\n constructor() {\n super();\n this.value = this.value ?? 50;\n this.#offset = this.valueAsNumber;\n this.#gestureController = new GestureController(this, { touchAction: 'none' });\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._internals.role = 'none';\n this.addEventListener('nve-gesture', this.#handleGesture as EventListener);\n this.addEventListener('nve-gesture-input', this.#handleGestureInput as EventListener);\n }\n\n disconnectedCallback() {\n this.removeEventListener('nve-gesture', this.#handleGesture as EventListener);\n this.removeEventListener('nve-gesture-input', this.#handleGestureInput as EventListener);\n this.#cancelDrag();\n super.disconnectedCallback();\n }\n\n firstUpdated(props: PropertyValues) {\n super.firstUpdated(props);\n this.#gestureController.target = this;\n this.addEventListener('dblclick', () => {\n if (!this.dispatchEvent(new CustomEvent('toggle', { cancelable: true, bubbles: true, composed: true }))) {\n return;\n }\n this.#toggle();\n });\n }\n\n #toggle() {\n const value = this.valueAsNumber <= this.max && this.valueAsNumber !== this.min ? this.min : this.max;\n this.#setInput(value);\n this.#setChange(value);\n }\n\n #handleGestureInput = (event: CustomEvent<GestureInput>): void => {\n const input = event.detail;\n if (input.kind === 'pointerdown') {\n const canStartDrag = input.event.button === 0 && input.event.isPrimary && this.#dragPointerId === undefined;\n if (canStartDrag && input.claim({ kind: 'drag' })) this.#dragStart(input.event.pointerId);\n } else if (input.kind === 'pointerend' && input.event.pointerId === this.#dragPointerId) {\n if (input.interrupted) this.#cancelDrag();\n else this.#dragEnd();\n }\n };\n\n #handleGesture = (event: CustomEvent<Gesture<undefined>>): void => {\n if (event.detail.kind === 'drag' && event.detail.event.pointerId === this.#dragPointerId) {\n this.#dragMove(event.detail);\n }\n };\n\n #dragStart(pointerId: number) {\n this.#dragPointerId = pointerId;\n this.#range.step = '1';\n this._internals.states.add('active');\n this.#offset = this.valueAsNumber;\n }\n\n #dragMove(gesture: Extract<Gesture<undefined>, { kind: 'drag' }>) {\n const offset =\n (this.orientation === 'vertical' ? gesture.movementX : -gesture.movementY) * (this.dir === 'rtl' ? -1 : 1);\n this.#offset = Math.max(this.min, Math.min(this.max, this.#offset + offset));\n this.#setInput(this.#offset);\n }\n\n #dragEnd() {\n this.#offset = this.valueAsNumber;\n this.#range.step = `${this.step}`;\n this.#dragPointerId = undefined;\n this._internals.states.delete('active');\n this.#setChange(this.#offset);\n }\n\n #cancelDrag() {\n if (this.#dragPointerId === undefined) return;\n this.#dragPointerId = undefined;\n this.#range.step = `${this.step}`;\n this._internals.states.delete('active');\n }\n\n #setInput(value: number) {\n this.#updateValue(value);\n this.dispatchInputEvent();\n }\n\n #setChange(value: number) {\n this.#updateValue(value);\n this.dispatchChangeEvent();\n }\n\n #updateValue(value: number) {\n if (value <= this.max && value >= this.min) {\n this.valueAsNumber = value;\n }\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"resize-handle2.js","names":[],"sources":["../../src/resize-handle/resize-handle.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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators/property.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { GestureController, useStyles, type Gesture, type GestureInput } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './resize-handle.css?inline';\n\nconst i18nDefaults = {\n resize: 'resize'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-resize-handle\n * @description A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.\n * @documentation https://nvidia.github.io/elements/docs/elements/resize-handle/\n * @since 1.27.0\n * @entrypoint \\@nvidia-elements/core/resize-handle\n * @event toggle - Dispatched when the resize handle is double clicked.\n * @cssprop --background\n * @cssprop --line-width\n * @cssprop --target-size\n * @cssprop --cursor\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/slider/\n *\n */\nexport class ResizeHandle extends FormControlMixin<typeof LitElement, number>(LitElement) {\n /**\n * Determines the orientation direction of the resize handle.\n */\n @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Determines the min resize value.\n */\n @property({ type: Number, reflect: true }) min = 0;\n\n /**\n * Determines the max resize value.\n */\n @property({ type: Number, reflect: true }) max = 100;\n\n /**\n * Determines the value step change.\n */\n @property({ type: Number, reflect: true }) step = 10;\n\n static styles = useStyles([styles]);\n\n get #range() {\n return this.shadowRoot!.querySelector('input')!;\n }\n\n static readonly metadata = {\n tag: 'nve-resize-handle',\n version: '0.0.0',\n valueSchema: {\n type: 'number' as const\n }\n };\n\n readonly #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n readonly #gestureController: GestureController;\n\n #dragPointerId?: number;\n\n /**\n * Updates internal string values for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n #offset = 0;\n\n render() {\n return html`\n <div internal-host>\n <div class=\"line\" part=\"_line\"></div>\n <input aria-label=${ifDefined(this.ariaLabel ?? this.i18n.resize)} type=\"range\" min=${this.min} max=${this.max} .valueAsNumber=${this.valueAsNumber} @input=${(e: Event) => this.#setInput((e.target as HTMLInputElement).valueAsNumber)} @change=${(e: Event) => this.#setChange((e.target as HTMLInputElement).valueAsNumber)} step=${this.step} />\n </div>\n `;\n }\n\n constructor() {\n super();\n this.value = this.value ?? 50;\n this.#offset = this.valueAsNumber;\n this.#gestureController = new GestureController(this, { touchAction: 'none' });\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._internals.role = 'none';\n this.addEventListener('nve-gesture', this.#handleGesture as EventListener);\n this.addEventListener('nve-gesture-input', this.#handleGestureInput as EventListener);\n }\n\n disconnectedCallback() {\n this.removeEventListener('nve-gesture', this.#handleGesture as EventListener);\n this.removeEventListener('nve-gesture-input', this.#handleGestureInput as EventListener);\n this.#cancelDrag();\n super.disconnectedCallback();\n }\n\n firstUpdated(props: PropertyValues) {\n super.firstUpdated(props);\n this.#gestureController.target = this;\n this.addEventListener('dblclick', () => {\n if (!this.dispatchEvent(new CustomEvent('toggle', { cancelable: true, bubbles: true, composed: true }))) {\n return;\n }\n this.#toggle();\n });\n }\n\n #toggle() {\n const value = this.valueAsNumber <= this.max && this.valueAsNumber !== this.min ? this.min : this.max;\n this.#setInput(value);\n this.#setChange(value);\n }\n\n #handleGestureInput = (event: CustomEvent<GestureInput>): void => {\n const input = event.detail;\n if (input.kind === 'pointerdown') {\n const canStartDrag = input.event.button === 0 && input.event.isPrimary && this.#dragPointerId === undefined;\n if (canStartDrag && input.claim({ kind: 'drag' })) this.#dragStart(input.event.pointerId);\n } else if (input.kind === 'pointerend' && input.event.pointerId === this.#dragPointerId) {\n if (input.interrupted) this.#cancelDrag();\n else this.#dragEnd();\n }\n };\n\n #handleGesture = (event: CustomEvent<Gesture<undefined>>): void => {\n if (event.detail.kind === 'drag' && event.detail.event.pointerId === this.#dragPointerId) {\n this.#dragMove(event.detail);\n }\n };\n\n #dragStart(pointerId: number) {\n this.#dragPointerId = pointerId;\n this.#range.step = '1';\n this._internals.states.add('active');\n this.#offset = this.valueAsNumber;\n }\n\n #dragMove(gesture: Extract<Gesture<undefined>, { kind: 'drag' }>) {\n const offset =\n (this.orientation === 'vertical' ? gesture.movementX : -gesture.movementY) * (this.dir === 'rtl' ? -1 : 1);\n this.#offset = Math.max(this.min, Math.min(this.max, this.#offset + offset));\n this.#setInput(this.#offset);\n }\n\n #dragEnd() {\n this.#offset = this.valueAsNumber;\n this.#range.step = `${this.step}`;\n this.#dragPointerId = undefined;\n this._internals.states.delete('active');\n this.#setChange(this.#offset);\n }\n\n #cancelDrag() {\n if (this.#dragPointerId === undefined) return;\n this.#dragPointerId = undefined;\n this.#range.step = `${this.step}`;\n this._internals.states.delete('active');\n }\n\n #setInput(value: number) {\n this.#updateValue(value);\n this.dispatchInputEvent();\n }\n\n #setChange(value: number) {\n this.#updateValue(value);\n this.dispatchChangeEvent();\n }\n\n #updateValue(value: number) {\n if (value <= this.max && value >= this.min) {\n this.valueAsNumber = value;\n }\n }\n}\n"],"mappings":"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"}
@@ -22,7 +22,7 @@ var l = class extends r {
22
22
  static {
23
23
  this.metadata = {
24
24
  tag: "nve-search",
25
- version: "2.19.0"
25
+ version: "2.19.1"
26
26
  };
27
27
  }
28
28
  static {
@@ -1,42 +1,45 @@
1
- import { I18nController as e, i18n as t } from "../internal/controllers/i18n.controller.js";
2
- import { onChildListMutation as n } from "../internal/utils/events.js";
3
- import { focusElementTimeout as r, onListboxActivate as i } from "../internal/utils/focus.js";
4
- import { appendRootNodeStyle as a, getElementUpdate as o } from "../internal/utils/dom.js";
5
- import { scopedRegistry as s } from "../internal/decorators/scoped-registry.js";
6
- import { useStyles as c } from "../internal/styles/index.js";
7
- import l from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
8
- import { Icon as u } from "../icon/icon2.js";
9
- import { Control as d } from "../forms/control/control2.js";
10
- import { Tag as f } from "../tag/tag2.js";
11
- import { Menu as p } from "../menu/menu2.js";
12
- import { MenuItem as m } from "../menu/menu-item2.js";
13
- import { Dropdown as h } from "../dropdown/dropdown2.js";
14
- import g from "./select.js";
15
- import _ from "./select.global.js";
16
- import { html as v, nothing as y } from "lit";
17
- import { property as b } from "lit/decorators/property.js";
1
+ import { onChildListMutation as e } from "../internal/utils/events.js";
2
+ import { focusElementTimeout as t, onListboxActivate as n } from "../internal/utils/focus.js";
3
+ import { appendRootNodeStyle as r, getElementUpdate as i } from "../internal/utils/dom.js";
4
+ import { scopedRegistry as a } from "../internal/decorators/scoped-registry.js";
5
+ import { useStyles as o } from "../internal/styles/index.js";
6
+ import s from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
7
+ import { Icon as c } from "../icon/icon2.js";
8
+ import { Control as l } from "../forms/control/control2.js";
9
+ import { Tag as u } from "../tag/tag2.js";
10
+ import { Menu as d } from "../menu/menu2.js";
11
+ import { MenuItem as f } from "../menu/menu-item2.js";
12
+ import { Dropdown as p } from "../dropdown/dropdown2.js";
13
+ import m from "./select.js";
14
+ import h from "./select.global.js";
15
+ import { html as g, nothing as _ } from "lit";
16
+ import { property as v } from "lit/decorators/property.js";
17
+ import { I18nController as y, i18n as b } from "@nvidia-elements/foundations/internal/i18n";
18
18
  import { ifDefined as x } from "lit/directives/if-defined.js";
19
19
  //#region src/select/select.ts
20
- var S = class extends d {
21
- constructor(...t) {
22
- super(...t), this.#e = new e(this), this.i18n = this.#e.i18n, this.#l = [], this.#p = /* @__PURE__ */ new Map();
20
+ var S = {
21
+ select: "select",
22
+ selected: "selected"
23
+ }, C = class extends l {
24
+ constructor(...e) {
25
+ super(...e), this.#e = new y(this, S), this.i18n = this.#e.i18n, this.#l = [], this.#p = /* @__PURE__ */ new Map();
23
26
  }
24
27
  static {
25
- this.styles = c([...d.styles, g]);
28
+ this.styles = o([...l.styles, m]);
26
29
  }
27
30
  static {
28
31
  this.metadata = {
29
32
  tag: "nve-select",
30
- version: "2.19.0"
33
+ version: "2.19.1"
31
34
  };
32
35
  }
33
36
  static {
34
37
  this.elementDefinitions = {
35
- [u.metadata.tag]: u,
36
- [h.metadata.tag]: h,
38
+ [c.metadata.tag]: c,
37
39
  [p.metadata.tag]: p,
38
- [m.metadata.tag]: m,
39
- [f.metadata.tag]: f
40
+ [d.metadata.tag]: d,
41
+ [f.metadata.tag]: f,
42
+ [u.metadata.tag]: u
40
43
  };
41
44
  }
42
45
  #e;
@@ -47,10 +50,10 @@ var S = class extends d {
47
50
  return Array.from(this.#t?.options ? this.#t.options : []);
48
51
  }
49
52
  get #r() {
50
- return this.shadowRoot.querySelector(h.metadata.tag);
53
+ return this.shadowRoot.querySelector(p.metadata.tag);
51
54
  }
52
55
  get #i() {
53
- return this.shadowRoot.querySelectorAll(m.metadata.tag);
56
+ return this.shadowRoot.querySelectorAll(f.metadata.tag);
54
57
  }
55
58
  get #a() {
56
59
  return this.shadowRoot.querySelector("[input]");
@@ -67,25 +70,25 @@ var S = class extends d {
67
70
  #l;
68
71
  get #u() {
69
72
  let e = this.#c, t = e ? e.innerText : `${this.#t.selectedOptions.length} ${this.i18n.selected}`;
70
- return v`<div class="tags-label ${e ? "placeholder" : ""}" aria-hidden="true">${t}</div>`;
73
+ return g`<div class="tags-label ${e ? "placeholder" : ""}" aria-hidden="true">${t}</div>`;
71
74
  }
72
75
  get prefixContent() {
73
- return this.#t?.multiple && this.#t?.size === 0 ? v`${this.#u}<div class="tags">${this.#n.filter((e) => e.selected && e !== this.#c).map((e) => v`<nve-tag part="tag" readonly="readonly" color="gray-slate" closable .value="${e.value}" @click="${() => this.#x(e, !1)}">${e.textContent}</nve-tag>`)}</div>` : y;
76
+ return this.#t?.multiple && this.#t?.size === 0 ? g`${this.#u}<div class="tags">${this.#n.filter((e) => e.selected && e !== this.#c).map((e) => g`<nve-tag part="tag" readonly="readonly" color="gray-slate" closable .value="${e.value}" @click="${() => this.#x(e, !1)}">${e.textContent}</nve-tag>`)}</div>` : _;
74
77
  }
75
78
  get #d() {
76
- return v`<nve-menu part="menu" role="listbox" style="--width:100%;--min-width:fit-content" aria-label="${x(this.i18n.select)}">${this.#n.filter((e) => e !== this.#c).map((e, t) => v`<nve-menu-item part="menu-item" role="option" @click="${() => this.#x(e, !e.selected)}" ?selected="${e.selected}" ?disabled="${e.disabled}" ?hidden="${!!e.hidden}" aria-selected="${e.selected}"><slot name="option-${t + 1}"><nve-icon part="icon" name="check" size="sm" aria-hidden="true"></nve-icon>${e.innerText}</slot></nve-menu-item>`)}</nve-menu>`;
79
+ return g`<nve-menu part="menu" role="listbox" style="--width:100%;--min-width:fit-content" aria-label="${x(this.i18n.select)}">${this.#n.filter((e) => e !== this.#c).map((e, t) => g`<nve-menu-item part="menu-item" role="option" @click="${() => this.#x(e, !e.selected)}" ?selected="${e.selected}" ?disabled="${e.disabled}" ?hidden="${!!e.hidden}" aria-selected="${e.selected}"><slot name="option-${t + 1}"><nve-icon part="icon" name="check" size="sm" aria-hidden="true"></nve-icon>${e.innerText}</slot></nve-menu-item>`)}</nve-menu>`;
77
80
  }
78
81
  get suffixContent() {
79
- return this.#t?.size === 0 ? v`<nve-icon name="caret" part="caret" direction="down" size="sm" aria-hidden="true"></nve-icon><nve-dropdown part="dropdown" @close="${this.#y}" @open="${this.#v}" hidden .anchor="${this.#a}" position="bottom">${this.#d}</nve-dropdown>` : this.#d;
82
+ return this.#t?.size === 0 ? g`<nve-icon name="caret" part="caret" direction="down" size="sm" aria-hidden="true"></nve-icon><nve-dropdown part="dropdown" @close="${this.#y}" @open="${this.#v}" hidden .anchor="${this.#a}" position="bottom">${this.#d}</nve-dropdown>` : this.#d;
80
83
  }
81
84
  async firstUpdated(e) {
82
85
  super.firstUpdated(e), await this.updateComplete, this.#_();
83
86
  }
84
87
  #f() {
85
- this.#l.push(o(this.#t, "value", () => this.requestUpdate()), n(this.#t, () => this.requestUpdate(), {
88
+ this.#l.push(i(this.#t, "value", () => this.requestUpdate()), e(this.#t, () => this.requestUpdate(), {
86
89
  attributes: !0,
87
90
  subtree: !0
88
- }), n(this.#t, () => this.#g(), { subtree: !0 }));
91
+ }), e(this.#t, () => this.#g(), { subtree: !0 }));
89
92
  }
90
93
  #p;
91
94
  #m() {
@@ -100,13 +103,13 @@ var S = class extends d {
100
103
  e.has(n) || (t.disconnect(), this.#p.delete(n), this.#l = this.#l.filter((e) => e !== t));
101
104
  }), this.#n.forEach((e) => {
102
105
  if (!this.#p.has(e)) {
103
- let t = o(e, "selected", () => this.requestUpdate());
106
+ let t = i(e, "selected", () => this.requestUpdate());
104
107
  this.#p.set(e, t), this.#l.push(t);
105
108
  }
106
109
  });
107
110
  }
108
111
  connectedCallback() {
109
- super.connectedCallback(), a(this, _), this.updateComplete.then(() => {
112
+ super.connectedCallback(), r(this, h), this.updateComplete.then(() => {
110
113
  this.isConnected && this.#m();
111
114
  });
112
115
  }
@@ -117,8 +120,8 @@ var S = class extends d {
117
120
  super.updated(e), this.#t?.size && this.#t?.size !== 0 ? (this._internals.states.add("size"), this.style.setProperty("--size", `${this.#t.size}`)) : (this._internals.states.delete("size"), this.style.removeProperty("--size")), this.#t?.multiple && this.#t?.size === 0 ? this._internals.states.add("multiple") : this._internals.states.delete("multiple");
118
121
  }
119
122
  #_() {
120
- this.#t?.size === 0 && i(this.#t, () => {
121
- this.requestUpdate(), this.#r.style.setProperty("--min-width", `${this.#a.getBoundingClientRect().width}px`), this.#r.showPopover(), r(this.#i[0]);
123
+ this.#t?.size === 0 && n(this.#t, () => {
124
+ this.requestUpdate(), this.#r.style.setProperty("--min-width", `${this.#a.getBoundingClientRect().width}px`), this.#r.showPopover(), t(this.#i[0]);
122
125
  });
123
126
  }
124
127
  #v() {
@@ -139,11 +142,11 @@ var S = class extends d {
139
142
  this.#t?.multiple && t && t.getBoundingClientRect().width > e - 48 ? this._internals.states.add("multiple-overflow") : this._internals.states.delete("multiple-overflow");
140
143
  }
141
144
  };
142
- l([b({
145
+ s([v({
143
146
  type: String,
144
147
  reflect: !0
145
- })], S.prototype, "container", void 0), l([b({ type: Object })], S.prototype, "i18n", void 0), S = l([t(), s()], S);
148
+ })], C.prototype, "container", void 0), s([v({ type: Object })], C.prototype, "i18n", void 0), C = s([b(), a()], C);
146
149
  //#endregion
147
- export { S as Select };
150
+ export { C as Select };
148
151
 
149
152
  //# sourceMappingURL=select2.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"select2.js","names":[],"sources":["../../src/select/select.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, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n focusElementTimeout,\n onListboxActivate,\n useStyles,\n i18n,\n I18nController,\n onChildListMutation,\n getElementUpdate,\n scopedRegistry,\n appendRootNodeStyle\n} from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Dropdown } from '@nvidia-elements/core/dropdown';\nimport { Tag } from '@nvidia-elements/core/tag';\nimport styles from './select.css?inline';\nimport globalStyles from './select.global.css?inline';\n\n/**\n * @element nve-select\n * @description A select is a control that enables users to select an option from a list of options.\n * @documentation https://nvidia.github.io/elements/docs/elements/select/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/select\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --border-bottom\n * @cssprop --cursor\n * @cssprop --font-weight\n * @cssprop --text-align\n * @cssprop --scroll-height\n * @cssprop --width\n * @cssprop --control-width\n * @cssprop --max-width\n * @cssprop --min-width\n * @cssprop --box-shadow\n * @cssprop --max-height\n * @cssprop --text-transform\n * @csspart tag\n * @csspart menu - The dropdown menu element\n * @csspart menu-item - The menu item elements\n * @csspart icon - The icon element\n * @csspart caret - The caret/chevron icon element\n * @csspart dropdown - The dropdown popup element\n * @slot - Select input element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\n */\n@i18n<Select>()\n@scopedRegistry()\nexport class Select extends Control {\n static styles = useStyles([...Control.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-select',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon,\n [Dropdown.metadata.tag]: Dropdown,\n [Menu.metadata.tag]: Menu,\n [MenuItem.metadata.tag]: MenuItem,\n [Tag.metadata.tag]: Tag\n };\n\n /** Flat container option applies when embedding the component within another containing element */\n @property({ type: String, reflect: true }) container?: 'flat' | 'inline';\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /** Updates internal string values for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n get #select() {\n return this.input as unknown as HTMLSelectElement;\n }\n\n get #options() {\n return Array.from(this.#select?.options ? this.#select.options : []);\n }\n\n get #dropdown() {\n return this.shadowRoot!.querySelector<Dropdown>(Dropdown.metadata.tag);\n }\n\n get #menuItems() {\n return this.shadowRoot!.querySelectorAll<MenuItem>(MenuItem.metadata.tag);\n }\n\n get #input() {\n return this.shadowRoot!.querySelector<HTMLElement>('[input]');\n }\n\n get #tags() {\n return this.shadowRoot!.querySelector('.tags');\n }\n\n get #caret() {\n return this.shadowRoot!.querySelector<Icon>('[name=\"caret\"]');\n }\n\n get #placeholderOption() {\n return this.#options.find(o => o.selected && o.hidden && o.disabled);\n }\n\n #observers: (MutationObserver | ResizeObserver)[] = [];\n\n get #multipleSelectLabel() {\n const option = this.#placeholderOption;\n const label = option ? option.innerText : `${this.#select.selectedOptions.length} ${this.i18n.selected}`;\n return html`<div class=\"tags-label ${option ? 'placeholder' : ''}\" aria-hidden=\"true\">${label}</div>`;\n }\n\n protected get prefixContent() {\n return this.#select?.multiple && this.#select?.size === 0\n ? html`\n ${this.#multipleSelectLabel}\n <div class=\"tags\">\n ${this.#options\n .filter(o => o.selected && o !== this.#placeholderOption)\n .map(\n o => html`\n <nve-tag part=\"tag\" readonly color=\"gray-slate\" closable .value=${o.value} @click=${() => this.#selectValue(o, false)}>${o.textContent}</nve-tag>`\n )}\n </div>`\n : nothing;\n }\n\n get #menu() {\n return html`\n <nve-menu part=\"menu\" role=\"listbox\" style=\"--width: 100%; --min-width: fit-content\" aria-label=${ifDefined(this.i18n.select)}>\n ${this.#options\n .filter(o => o !== this.#placeholderOption)\n .map(\n (o, i) => html`\n <nve-menu-item part=\"menu-item\" role=\"option\" @click=${() => this.#selectValue(o, !o.selected)} ?selected=${o.selected} ?disabled=${o.disabled} ?hidden=${!!o.hidden} aria-selected=${o.selected}>\n <slot name=\"option-${i + 1}\">\n <nve-icon part=\"icon\" name=\"check\" size=\"sm\" aria-hidden=\"true\"></nve-icon> ${o.innerText}\n </slot>\n </nve-menu-item>`\n )}\n </nve-menu>`;\n }\n\n protected get suffixContent() {\n return this.#select?.size === 0\n ? html`\n <nve-icon name=\"caret\" part=\"caret\" direction=\"down\" size=\"sm\" aria-hidden=\"true\"></nve-icon>\n <nve-dropdown part=\"dropdown\" @close=${this.#closeDropdown} @open=${this.#openDropdown} hidden .anchor=${this.#input as HTMLElement} position=\"bottom\">\n ${this.#menu}\n </nve-dropdown>`\n : this.#menu;\n }\n\n async firstUpdated(props: PropertyValues<this>) {\n super.firstUpdated(props);\n await this.updateComplete;\n this.#setupCustomSelectUI();\n }\n\n #syncSelectValueStates() {\n this.#observers.push(\n getElementUpdate(this.#select, 'value', () => this.requestUpdate()),\n onChildListMutation(this.#select, () => this.requestUpdate(), { attributes: true, subtree: true }),\n onChildListMutation(this.#select, () => this.#syncOptionSelectedStates(), { subtree: true })\n );\n }\n\n #optionObservers = new Map<HTMLOptionElement, MutationObserver>();\n\n #setupObservers() {\n this.#disconnectObservers();\n this.#setupOverflowListener();\n this.#syncSelectValueStates();\n this.#syncOptionSelectedStates();\n }\n\n #disconnectObservers() {\n this.#observers.forEach(observer => observer.disconnect());\n this.#observers = [];\n this.#optionObservers.clear();\n }\n\n #syncOptionSelectedStates() {\n const options = new Set(this.#options);\n\n this.#optionObservers.forEach((observer, option) => {\n if (!options.has(option)) {\n observer.disconnect();\n this.#optionObservers.delete(option);\n this.#observers = this.#observers.filter(o => o !== observer);\n }\n });\n\n this.#options.forEach(o => {\n if (!this.#optionObservers.has(o)) {\n const observer = getElementUpdate(o, 'selected', () => this.requestUpdate());\n this.#optionObservers.set(o, observer);\n this.#observers.push(observer);\n }\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n appendRootNodeStyle(this, globalStyles);\n void this.updateComplete.then(() => {\n if (this.isConnected) {\n this.#setupObservers();\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#disconnectObservers();\n }\n\n async updated(props: PropertyValues<this>) {\n super.updated(props);\n if (this.#select?.size && this.#select?.size !== 0) {\n this._internals.states.add('size');\n this.style.setProperty('--size', `${this.#select.size}`);\n } else {\n this._internals.states.delete('size');\n this.style.removeProperty('--size');\n }\n\n if (this.#select?.multiple && this.#select?.size === 0) {\n this._internals.states.add('multiple');\n } else {\n this._internals.states.delete('multiple');\n }\n }\n\n #setupCustomSelectUI() {\n if (this.#select?.size === 0) {\n onListboxActivate(this.#select, () => {\n this.requestUpdate(); // update menu items\n this.#dropdown!.style.setProperty('--min-width', `${this.#input!.getBoundingClientRect().width}px`);\n this.#dropdown!.showPopover();\n focusElementTimeout(this.#menuItems[0] as HTMLElement);\n });\n }\n }\n\n #openDropdown() {\n this.#dropdown!.hidden = false;\n this.#caret!.direction = 'up';\n }\n\n #closeDropdown() {\n this.#dropdown!.hidden = true;\n this.#caret!.direction = 'down';\n }\n\n #setupOverflowListener() {\n const observer = new ResizeObserver(entries => this.#updateMultipleOverflow(entries[0]!.contentRect.width));\n this.#observers.push(observer);\n observer.observe(this.#input!);\n }\n\n async #selectValue(option: HTMLOptionElement, selected: boolean) {\n if (this.#select.multiple || (!this.#select.multiple && option.value !== this.#select.value)) {\n option.selected = selected;\n }\n\n // native select only the first selected option determines the select input value\n if (this.#select.selectedOptions.length < 1) {\n this.#select.value = selected ? option.value : '';\n }\n\n this.#select.dispatchEvent(new Event('input', { bubbles: true }));\n this.#select.dispatchEvent(new Event('change', { bubbles: true }));\n this.requestUpdate();\n\n if (!this.#select.multiple && this.#dropdown) {\n this.#dropdown.hidePopover();\n } else {\n await this.updateComplete;\n this.#updateMultipleOverflow(this.#input!.getBoundingClientRect().width);\n }\n }\n\n #updateMultipleOverflow(width: number) {\n const tags = this.#tags;\n if (this.#select?.multiple && tags && tags.getBoundingClientRect().width > width - 48) {\n this._internals.states.add('multiple-overflow');\n } else {\n this._internals.states.delete('multiple-overflow');\n }\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA8DO,IAAM,IAAN,cAAqB,EAAQ;;EAuHf,aApGqB,KAAA,KAAA,IAAI,EAAqB,IAAI,GAGlC,KAAA,OAAA,KAAK,GAAgB,MAkCJ,KAAA,KAAA,CAAC,GA+DlC,KAAA,qBAAA,IAAI,IAAyC;;;EAtHhD,KAAA,SAAA,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;EAE1B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA;IACzB,EAAK,SAAS,MAAM;IACpB,EAAS,SAAS,MAAM;IACxB,EAAK,SAAS,MAAM;IACpB,EAAS,SAAS,MAAM;IACxB,EAAI,SAAS,MAAM;EACtB;;CAKA;CAKA,IAAI,KAAU;EACZ,OAAO,KAAK;CACd;CAEA,IAAI,KAAW;EACb,OAAO,MAAM,KAAK,KAAK,IAAS,UAAU,KAAK,GAAQ,UAAU,CAAC,CAAC;CACrE;CAEA,IAAI,KAAY;EACd,OAAO,KAAK,WAAY,cAAwB,EAAS,SAAS,GAAG;CACvE;CAEA,IAAI,KAAa;EACf,OAAO,KAAK,WAAY,iBAA2B,EAAS,SAAS,GAAG;CAC1E;CAEA,IAAI,KAAS;EACX,OAAO,KAAK,WAAY,cAA2B,SAAS;CAC9D;CAEA,IAAI,KAAQ;EACV,OAAO,KAAK,WAAY,cAAc,OAAO;CAC/C;CAEA,IAAI,KAAS;EACX,OAAO,KAAK,WAAY,cAAoB,kBAAgB;CAC9D;CAEA,IAAI,KAAqB;EACvB,OAAO,KAAK,GAAS,MAAK,MAAK,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ;CACrE;CAEA;CAEA,IAAI,KAAuB;EACzB,IAAM,IAAS,KAAK,IACd,IAAQ,IAAS,EAAO,YAAY,GAAG,KAAK,GAAQ,gBAAgB,OAAO,GAAG,KAAK,KAAK;EAC9F,OAAO,CAAI,0BAA0B,IAAS,gBAAgB,GAAG,uBAAuB,EAAM;CAChG;CAEA,IAAc,gBAAgB;EAC5B,OAAO,KAAK,IAAS,YAAY,KAAK,IAAS,SAAS,IACpD,CAAI,GACN,KAAK,GAAqB,oBAExB,KAAK,GACJ,QAAO,MAAK,EAAE,YAAY,MAAM,KAAK,EAAkB,CAAC,CACxD,KACC,MAAK,CAAI,+EACqD,EAAE,MAAM,kBAAgB,KAAK,GAAa,GAAG,EAAK,EAAE,IAAG,EAAE,YAAY,WACrI,EAAE,UAEF;CACN;CAEA,IAAI,KAAQ;EACV,OAAO,CAAI,iGACuF,EAAU,KAAK,KAAK,MAAM,EAAE,IAC1H,KAAK,GACJ,QAAO,MAAK,MAAM,KAAK,EAAkB,CAAC,CAC1C,KACE,GAAG,MAAM,CAAI,+DAC2C,KAAK,GAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,eAAa,EAAE,SAAS,eAAa,EAAE,SAAS,aAAW,CAAC,CAAC,EAAE,OAAO,mBAAiB,EAAE,SAAS,uBAC1K,IAAI,EAAE,+EACqD,EAAE,UAAU,wBAG5F,EAAE;CAER;CAEA,IAAc,gBAAgB;EAC5B,OAAO,KAAK,IAAS,SAAS,IAC1B,CAAI,sIAEiC,KAAK,GAAe,WAAS,KAAK,GAAc,oBAAkB,KAAK,GAAsB,sBAChI,KAAK,GAAM,mBAEb,KAAK;CACX;CAEA,MAAM,aAAa,GAA6B;EAG9C,AAFA,MAAM,aAAa,CAAK,GACxB,MAAM,KAAK,gBACX,KAAK,GAAqB;CAC5B;CAEA,KAAyB;EACvB,KAAK,GAAW,KACd,EAAiB,KAAK,IAAS,eAAe,KAAK,cAAc,CAAC,GAClE,EAAoB,KAAK,UAAe,KAAK,cAAc,GAAG;GAAE,YAAY;GAAM,SAAS;EAAK,CAAC,GACjG,EAAoB,KAAK,UAAe,KAAK,GAA0B,GAAG,EAAE,SAAS,GAAK,CAAC,CAC7F;CACF;CAEA;CAEA,KAAkB;EAIhB,AAHA,KAAK,GAAqB,GAC1B,KAAK,GAAuB,GAC5B,KAAK,GAAuB,GAC5B,KAAK,GAA0B;CACjC;CAEA,KAAuB;EAGrB,AAFA,KAAK,GAAW,SAAQ,MAAY,EAAS,WAAW,CAAC,GACzD,KAAK,KAAa,CAAC,GACnB,KAAK,GAAiB,MAAM;CAC9B;CAEA,KAA4B;EAC1B,IAAM,IAAU,IAAI,IAAI,KAAK,EAAQ;EAUrC,AARA,KAAK,GAAiB,SAAS,GAAU,MAAW;GAClD,AAAK,EAAQ,IAAI,CAAM,MACrB,EAAS,WAAW,GACpB,KAAK,GAAiB,OAAO,CAAM,GACnC,KAAK,KAAa,KAAK,GAAW,QAAO,MAAK,MAAM,CAAQ;EAEhE,CAAC,GAED,KAAK,GAAS,SAAQ,MAAK;GACzB,IAAI,CAAC,KAAK,GAAiB,IAAI,CAAC,GAAG;IACjC,IAAM,IAAW,EAAiB,GAAG,kBAAkB,KAAK,cAAc,CAAC;IAE3E,AADA,KAAK,GAAiB,IAAI,GAAG,CAAQ,GACrC,KAAK,GAAW,KAAK,CAAQ;GAC/B;EACF,CAAC;CACH;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY,GACtC,KAAU,eAAe,WAAW;GAClC,AAAI,KAAK,eACP,KAAK,GAAgB;EAEzB,CAAC;CACH;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,GAAqB;CAC5B;CAEA,MAAM,QAAQ,GAA6B;EAUzC,AATA,MAAM,QAAQ,CAAK,GACf,KAAK,IAAS,QAAQ,KAAK,IAAS,SAAS,KAC/C,KAAK,WAAW,OAAO,IAAI,MAAM,GACjC,KAAK,MAAM,YAAY,UAAU,GAAG,KAAK,GAAQ,MAAM,MAEvD,KAAK,WAAW,OAAO,OAAO,MAAM,GACpC,KAAK,MAAM,eAAe,QAAQ,IAGhC,KAAK,IAAS,YAAY,KAAK,IAAS,SAAS,IACnD,KAAK,WAAW,OAAO,IAAI,UAAU,IAErC,KAAK,WAAW,OAAO,OAAO,UAAU;CAE5C;CAEA,KAAuB;EACrB,AAAI,KAAK,IAAS,SAAS,KACzB,EAAkB,KAAK,UAAe;GAIpC,AAHA,KAAK,cAAc,GACnB,KAAK,GAAW,MAAM,YAAY,eAAe,GAAG,KAAK,GAAQ,sBAAsB,CAAC,CAAC,MAAM,GAAG,GAClG,KAAK,GAAW,YAAY,GAC5B,EAAoB,KAAK,GAAW,EAAiB;EACvD,CAAC;CAEL;CAEA,KAAgB;EAEd,AADA,KAAK,GAAW,SAAS,IACzB,KAAK,GAAQ,YAAY;CAC3B;CAEA,KAAiB;EAEf,AADA,KAAK,GAAW,SAAS,IACzB,KAAK,GAAQ,YAAY;CAC3B;CAEA,KAAyB;EACvB,IAAM,IAAW,IAAI,gBAAe,MAAW,KAAK,GAAwB,EAAQ,EAAE,CAAE,YAAY,KAAK,CAAC;EAE1G,AADA,KAAK,GAAW,KAAK,CAAQ,GAC7B,EAAS,QAAQ,KAAK,EAAO;CAC/B;CAEA,MAAM,GAAa,GAA2B,GAAmB;EAc/D,CAbI,KAAK,GAAQ,YAAa,CAAC,KAAK,GAAQ,YAAY,EAAO,UAAU,KAAK,GAAQ,WACpF,EAAO,WAAW,IAIhB,KAAK,GAAQ,gBAAgB,SAAS,MACxC,KAAK,GAAQ,QAAQ,IAAW,EAAO,QAAQ,KAGjD,KAAK,GAAQ,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GAChE,KAAK,GAAQ,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC,GACjE,KAAK,cAAc,GAEf,CAAC,KAAK,GAAQ,YAAY,KAAK,KACjC,KAAK,GAAU,YAAY,KAE3B,MAAM,KAAK,gBACX,KAAK,GAAwB,KAAK,GAAQ,sBAAsB,CAAC,CAAC,KAAK;CAE3E;CAEA,GAAwB,GAAe;EACrC,IAAM,IAAO,KAAK;EAClB,AAAI,KAAK,IAAS,YAAY,KAAQ,EAAK,sBAAsB,CAAC,CAAC,QAAQ,IAAQ,KACjF,KAAK,WAAW,OAAO,IAAI,mBAAmB,IAE9C,KAAK,WAAW,OAAO,OAAO,mBAAmB;CAErD;AACF;AAlOG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAxB3B,IAAA,EAAA,CAAA,EAAa,GACb,EAAe,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"select2.js","names":[],"sources":["../../src/select/select.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, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n focusElementTimeout,\n onListboxActivate,\n useStyles,\n onChildListMutation,\n getElementUpdate,\n scopedRegistry,\n appendRootNodeStyle\n} from '@nvidia-elements/core/internal';\nimport { i18n, I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Dropdown } from '@nvidia-elements/core/dropdown';\nimport { Tag } from '@nvidia-elements/core/tag';\nimport styles from './select.css?inline';\nimport globalStyles from './select.global.css?inline';\n\nconst i18nDefaults = {\n select: 'select',\n selected: 'selected'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-select\n * @description A select is a control that enables users to select an option from a list of options.\n * @documentation https://nvidia.github.io/elements/docs/elements/select/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/select\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --border-bottom\n * @cssprop --cursor\n * @cssprop --font-weight\n * @cssprop --text-align\n * @cssprop --scroll-height\n * @cssprop --width\n * @cssprop --control-width\n * @cssprop --max-width\n * @cssprop --min-width\n * @cssprop --box-shadow\n * @cssprop --max-height\n * @cssprop --text-transform\n * @csspart tag\n * @csspart menu - The dropdown menu element\n * @csspart menu-item - The menu item elements\n * @csspart icon - The icon element\n * @csspart caret - The caret/chevron icon element\n * @csspart dropdown - The dropdown popup element\n * @slot - Select input element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select\n */\n@i18n<Select>()\n@scopedRegistry()\nexport class Select extends Control {\n static styles = useStyles([...Control.styles, styles]);\n\n static readonly metadata = {\n tag: 'nve-select',\n version: '0.0.0'\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon,\n [Dropdown.metadata.tag]: Dropdown,\n [Menu.metadata.tag]: Menu,\n [MenuItem.metadata.tag]: MenuItem,\n [Tag.metadata.tag]: Tag\n };\n\n /** Flat container option applies when embedding the component within another containing element */\n @property({ type: String, reflect: true }) container?: 'flat' | 'inline';\n\n #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n /** Updates internal string values for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n get #select() {\n return this.input as unknown as HTMLSelectElement;\n }\n\n get #options() {\n return Array.from(this.#select?.options ? this.#select.options : []);\n }\n\n get #dropdown() {\n return this.shadowRoot!.querySelector<Dropdown>(Dropdown.metadata.tag);\n }\n\n get #menuItems() {\n return this.shadowRoot!.querySelectorAll<MenuItem>(MenuItem.metadata.tag);\n }\n\n get #input() {\n return this.shadowRoot!.querySelector<HTMLElement>('[input]');\n }\n\n get #tags() {\n return this.shadowRoot!.querySelector('.tags');\n }\n\n get #caret() {\n return this.shadowRoot!.querySelector<Icon>('[name=\"caret\"]');\n }\n\n get #placeholderOption() {\n return this.#options.find(o => o.selected && o.hidden && o.disabled);\n }\n\n #observers: (MutationObserver | ResizeObserver)[] = [];\n\n get #multipleSelectLabel() {\n const option = this.#placeholderOption;\n const label = option ? option.innerText : `${this.#select.selectedOptions.length} ${this.i18n.selected}`;\n return html`<div class=\"tags-label ${option ? 'placeholder' : ''}\" aria-hidden=\"true\">${label}</div>`;\n }\n\n protected get prefixContent() {\n return this.#select?.multiple && this.#select?.size === 0\n ? html`\n ${this.#multipleSelectLabel}\n <div class=\"tags\">\n ${this.#options\n .filter(o => o.selected && o !== this.#placeholderOption)\n .map(\n o => html`\n <nve-tag part=\"tag\" readonly color=\"gray-slate\" closable .value=${o.value} @click=${() => this.#selectValue(o, false)}>${o.textContent}</nve-tag>`\n )}\n </div>`\n : nothing;\n }\n\n get #menu() {\n return html`\n <nve-menu part=\"menu\" role=\"listbox\" style=\"--width: 100%; --min-width: fit-content\" aria-label=${ifDefined(this.i18n.select)}>\n ${this.#options\n .filter(o => o !== this.#placeholderOption)\n .map(\n (o, i) => html`\n <nve-menu-item part=\"menu-item\" role=\"option\" @click=${() => this.#selectValue(o, !o.selected)} ?selected=${o.selected} ?disabled=${o.disabled} ?hidden=${!!o.hidden} aria-selected=${o.selected}>\n <slot name=\"option-${i + 1}\">\n <nve-icon part=\"icon\" name=\"check\" size=\"sm\" aria-hidden=\"true\"></nve-icon> ${o.innerText}\n </slot>\n </nve-menu-item>`\n )}\n </nve-menu>`;\n }\n\n protected get suffixContent() {\n return this.#select?.size === 0\n ? html`\n <nve-icon name=\"caret\" part=\"caret\" direction=\"down\" size=\"sm\" aria-hidden=\"true\"></nve-icon>\n <nve-dropdown part=\"dropdown\" @close=${this.#closeDropdown} @open=${this.#openDropdown} hidden .anchor=${this.#input as HTMLElement} position=\"bottom\">\n ${this.#menu}\n </nve-dropdown>`\n : this.#menu;\n }\n\n async firstUpdated(props: PropertyValues<this>) {\n super.firstUpdated(props);\n await this.updateComplete;\n this.#setupCustomSelectUI();\n }\n\n #syncSelectValueStates() {\n this.#observers.push(\n getElementUpdate(this.#select, 'value', () => this.requestUpdate()),\n onChildListMutation(this.#select, () => this.requestUpdate(), { attributes: true, subtree: true }),\n onChildListMutation(this.#select, () => this.#syncOptionSelectedStates(), { subtree: true })\n );\n }\n\n #optionObservers = new Map<HTMLOptionElement, MutationObserver>();\n\n #setupObservers() {\n this.#disconnectObservers();\n this.#setupOverflowListener();\n this.#syncSelectValueStates();\n this.#syncOptionSelectedStates();\n }\n\n #disconnectObservers() {\n this.#observers.forEach(observer => observer.disconnect());\n this.#observers = [];\n this.#optionObservers.clear();\n }\n\n #syncOptionSelectedStates() {\n const options = new Set(this.#options);\n\n this.#optionObservers.forEach((observer, option) => {\n if (!options.has(option)) {\n observer.disconnect();\n this.#optionObservers.delete(option);\n this.#observers = this.#observers.filter(o => o !== observer);\n }\n });\n\n this.#options.forEach(o => {\n if (!this.#optionObservers.has(o)) {\n const observer = getElementUpdate(o, 'selected', () => this.requestUpdate());\n this.#optionObservers.set(o, observer);\n this.#observers.push(observer);\n }\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n appendRootNodeStyle(this, globalStyles);\n void this.updateComplete.then(() => {\n if (this.isConnected) {\n this.#setupObservers();\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#disconnectObservers();\n }\n\n async updated(props: PropertyValues<this>) {\n super.updated(props);\n if (this.#select?.size && this.#select?.size !== 0) {\n this._internals.states.add('size');\n this.style.setProperty('--size', `${this.#select.size}`);\n } else {\n this._internals.states.delete('size');\n this.style.removeProperty('--size');\n }\n\n if (this.#select?.multiple && this.#select?.size === 0) {\n this._internals.states.add('multiple');\n } else {\n this._internals.states.delete('multiple');\n }\n }\n\n #setupCustomSelectUI() {\n if (this.#select?.size === 0) {\n onListboxActivate(this.#select, () => {\n this.requestUpdate(); // update menu items\n this.#dropdown!.style.setProperty('--min-width', `${this.#input!.getBoundingClientRect().width}px`);\n this.#dropdown!.showPopover();\n focusElementTimeout(this.#menuItems[0] as HTMLElement);\n });\n }\n }\n\n #openDropdown() {\n this.#dropdown!.hidden = false;\n this.#caret!.direction = 'up';\n }\n\n #closeDropdown() {\n this.#dropdown!.hidden = true;\n this.#caret!.direction = 'down';\n }\n\n #setupOverflowListener() {\n const observer = new ResizeObserver(entries => this.#updateMultipleOverflow(entries[0]!.contentRect.width));\n this.#observers.push(observer);\n observer.observe(this.#input!);\n }\n\n async #selectValue(option: HTMLOptionElement, selected: boolean) {\n if (this.#select.multiple || (!this.#select.multiple && option.value !== this.#select.value)) {\n option.selected = selected;\n }\n\n // native select only the first selected option determines the select input value\n if (this.#select.selectedOptions.length < 1) {\n this.#select.value = selected ? option.value : '';\n }\n\n this.#select.dispatchEvent(new Event('input', { bubbles: true }));\n this.#select.dispatchEvent(new Event('change', { bubbles: true }));\n this.requestUpdate();\n\n if (!this.#select.multiple && this.#dropdown) {\n this.#dropdown.hidePopover();\n } else {\n await this.updateComplete;\n this.#updateMultipleOverflow(this.#input!.getBoundingClientRect().width);\n }\n }\n\n #updateMultipleOverflow(width: number) {\n const tags = this.#tags;\n if (this.#select?.multiple && tags && tags.getBoundingClientRect().width > width - 48) {\n this._internals.states.add('multiple-overflow');\n } else {\n this._internals.states.delete('multiple-overflow');\n }\n }\n}\n"],"mappings":"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"}
@@ -15,7 +15,7 @@ var s = class extends i {
15
15
  static {
16
16
  this.metadata = {
17
17
  tag: "nve-skeleton",
18
- version: "2.19.0"
18
+ version: "2.19.1"
19
19
  };
20
20
  }
21
21
  render() {