@nvidia-elements/core 0.0.7 → 0.0.8

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 (182) hide show
  1. package/CHANGELOG.md +18 -16
  2. package/README.md +1 -1
  3. package/dist/accordion/accordion-group.js.map +1 -1
  4. package/dist/accordion/accordion.js.map +1 -1
  5. package/dist/accordion/accordion2.js +4 -4
  6. package/dist/alert/alert-group.js.map +1 -1
  7. package/dist/alert/alert-group2.js +1 -1
  8. package/dist/alert/alert-group2.js.map +1 -1
  9. package/dist/alert/alert.global.js.map +1 -1
  10. package/dist/alert/alert.js.map +1 -1
  11. package/dist/alert/alert2.js +1 -1
  12. package/dist/avatar/avatar-group2.js +1 -1
  13. package/dist/avatar/avatar2.js +1 -1
  14. package/dist/badge/badge.js.map +1 -1
  15. package/dist/badge/badge2.js +2 -2
  16. package/dist/badge/badge2.js.map +1 -1
  17. package/dist/breadcrumb/breadcrumb.js.map +1 -1
  18. package/dist/breadcrumb/breadcrumb2.js +2 -2
  19. package/dist/breadcrumb/breadcrumb2.js.map +1 -1
  20. package/dist/bundles/index.js +3 -3
  21. package/dist/button/button.js.map +1 -1
  22. package/dist/button/button2.js +1 -1
  23. package/dist/button-group/button-group.global.js.map +1 -1
  24. package/dist/button-group/button-group.js +1 -1
  25. package/dist/button-group/button-group.js.map +1 -1
  26. package/dist/button-group/button-group2.js +3 -3
  27. package/dist/button-group/button-group2.js.map +1 -1
  28. package/dist/card/card-header.js.map +1 -1
  29. package/dist/card/card2.js +4 -4
  30. package/dist/chat-message/chat-message2.js +1 -1
  31. package/dist/checkbox/checkbox-group2.js +1 -1
  32. package/dist/checkbox/checkbox.js.map +1 -1
  33. package/dist/checkbox/checkbox2.js +1 -1
  34. package/dist/color/color.global.js.map +1 -1
  35. package/dist/color/color2.js +1 -1
  36. package/dist/combobox/combobox2.js +1 -1
  37. package/dist/copy-button/copy-button2.js +1 -1
  38. package/dist/custom-elements.json +1 -23
  39. package/dist/data.snippets.json +42 -42
  40. package/dist/date/date2.js +1 -1
  41. package/dist/datetime/datetime2.js +1 -1
  42. package/dist/dialog/dialog-footer2.js +1 -1
  43. package/dist/dialog/dialog-header2.js +1 -1
  44. package/dist/dialog/dialog2.js +1 -1
  45. package/dist/divider/divider2.js +1 -1
  46. package/dist/dot/dot.js.map +1 -1
  47. package/dist/dot/dot2.js +1 -1
  48. package/dist/drawer/drawer-content.js.map +1 -1
  49. package/dist/drawer/drawer-content2.js +1 -1
  50. package/dist/drawer/drawer-footer2.js +1 -1
  51. package/dist/drawer/drawer-header2.js +1 -1
  52. package/dist/drawer/drawer2.js +1 -1
  53. package/dist/dropdown/dropdown-footer2.js +1 -1
  54. package/dist/dropdown/dropdown-header2.js +1 -1
  55. package/dist/dropdown/dropdown.js.map +1 -1
  56. package/dist/dropdown/dropdown2.js +1 -1
  57. package/dist/dropdown-group/dropdown-group.js +1 -1
  58. package/dist/dropzone/dropzone2.js +1 -1
  59. package/dist/dropzone/dropzone2.js.map +1 -1
  60. package/dist/file/file.global.js.map +1 -1
  61. package/dist/file/file2.js +1 -1
  62. package/dist/format-datetime/format-datetime2.js +1 -1
  63. package/dist/format-relative-time/format-relative-time2.js +1 -1
  64. package/dist/forms/control/control.js.map +1 -1
  65. package/dist/forms/control/control2.js +2 -2
  66. package/dist/forms/control/control2.js.map +1 -1
  67. package/dist/forms/control-group/control-group.js.map +1 -1
  68. package/dist/forms/control-group/control-group2.js +23 -24
  69. package/dist/forms/control-group/control-group2.js.map +1 -1
  70. package/dist/forms/control-message/control-message2.js +1 -1
  71. package/dist/forms/utils/states.d.ts +1 -1
  72. package/dist/forms/utils/states.js +25 -25
  73. package/dist/forms/utils/states.js.map +1 -1
  74. package/dist/grid/cell/cell2.js +1 -1
  75. package/dist/grid/column/column.js.map +1 -1
  76. package/dist/grid/column/column2.js +23 -23
  77. package/dist/grid/column/column2.js.map +1 -1
  78. package/dist/grid/define.js.map +1 -1
  79. package/dist/grid/footer/footer.js.map +1 -1
  80. package/dist/grid/footer/footer2.js +1 -1
  81. package/dist/grid/grid.global.js.map +1 -1
  82. package/dist/grid/grid.js.map +1 -1
  83. package/dist/grid/grid2.js +31 -31
  84. package/dist/grid/grid2.js.map +1 -1
  85. package/dist/grid/header/header2.js +24 -25
  86. package/dist/grid/header/header2.js.map +1 -1
  87. package/dist/grid/placeholder/placeholder2.js +1 -1
  88. package/dist/grid/row/row.js.map +1 -1
  89. package/dist/grid/row/row2.js +1 -1
  90. package/dist/icon/define.js.map +1 -1
  91. package/dist/icon/icon.js.map +1 -1
  92. package/dist/icon/icon2.js +2 -2
  93. package/dist/icon-button/icon-button.js.map +1 -1
  94. package/dist/icon-button/icon-button2.js +1 -1
  95. package/dist/index.js +1 -1
  96. package/dist/input/input-group.global.js.map +1 -1
  97. package/dist/input/input-group.js.map +1 -1
  98. package/dist/input/input-group2.js +1 -1
  99. package/dist/input/input.js.map +1 -1
  100. package/dist/input/input2.js +1 -1
  101. package/dist/internal/index.js +40 -40
  102. package/dist/internal/services/global.service.js +1 -1
  103. package/dist/internal/utils/dom.d.ts +0 -2
  104. package/dist/internal/utils/dom.js +12 -15
  105. package/dist/internal/utils/dom.js.map +1 -1
  106. package/dist/logo/logo.js.map +1 -1
  107. package/dist/logo/logo2.js +1 -1
  108. package/dist/menu/menu-item.js.map +1 -1
  109. package/dist/menu/menu-item2.js +1 -1
  110. package/dist/menu/menu.global.js.map +1 -1
  111. package/dist/menu/menu2.js +1 -1
  112. package/dist/menu/menu2.js.map +1 -1
  113. package/dist/month/month2.js +1 -1
  114. package/dist/notification/notification-group2.js +1 -1
  115. package/dist/notification/notification.js.map +1 -1
  116. package/dist/notification/notification2.js +1 -1
  117. package/dist/page/page-panel/page-panel-content.js.map +1 -1
  118. package/dist/page/page-panel/page-panel-content2.js +1 -1
  119. package/dist/page/page-panel/page-panel-footer2.js +1 -1
  120. package/dist/page/page-panel/page-panel-header2.js +1 -1
  121. package/dist/page/page-panel/page-panel2.js +1 -1
  122. package/dist/page/page2.js +1 -1
  123. package/dist/page-header/page-header2.js +1 -1
  124. package/dist/page-loader/page-loader2.js +1 -1
  125. package/dist/pagination/pagination2.js +1 -1
  126. package/dist/panel/panel-content.js.map +1 -1
  127. package/dist/panel/panel-footer.js.map +1 -1
  128. package/dist/panel/panel2.js +4 -4
  129. package/dist/password/password2.js +1 -1
  130. package/dist/preferences-input/preferences-input2.js +1 -1
  131. package/dist/progress-bar/progress-bar2.js +1 -1
  132. package/dist/progress-ring/progress-ring.js.map +1 -1
  133. package/dist/progress-ring/progress-ring2.js +1 -1
  134. package/dist/progress-ring/progress-ring2.js.map +1 -1
  135. package/dist/progressive-filter-chip/progressive-filter-chip.global.js.map +1 -1
  136. package/dist/progressive-filter-chip/progressive-filter-chip.js.map +1 -1
  137. package/dist/progressive-filter-chip/progressive-filter-chip2.js +2 -2
  138. package/dist/progressive-filter-chip/progressive-filter-chip2.js.map +1 -1
  139. package/dist/pulse/pulse2.js +1 -1
  140. package/dist/radio/radio-group2.js +1 -1
  141. package/dist/radio/radio2.js +1 -1
  142. package/dist/range/range.global.js.map +1 -1
  143. package/dist/range/range2.js +1 -1
  144. package/dist/resize-handle/resize-handle2.js +1 -1
  145. package/dist/search/search2.js +1 -1
  146. package/dist/select/select2.js +1 -1
  147. package/dist/skeleton/skeleton2.js +1 -1
  148. package/dist/sort-button/sort-button2.js +1 -1
  149. package/dist/sparkline/sparkline2.js +1 -1
  150. package/dist/star-rating/star-rating2.js +1 -1
  151. package/dist/steps/steps.js.map +1 -1
  152. package/dist/steps/steps2.js +4 -4
  153. package/dist/steps/steps2.js.map +1 -1
  154. package/dist/switch/switch-group2.js +1 -1
  155. package/dist/switch/switch2.js +1 -1
  156. package/dist/tabs/tabs-group2.js +1 -1
  157. package/dist/tabs/tabs-item.js.map +1 -1
  158. package/dist/tabs/tabs.global.js.map +1 -1
  159. package/dist/tabs/tabs.js.map +1 -1
  160. package/dist/tabs/tabs2.js +3 -3
  161. package/dist/tabs/tabs2.js.map +1 -1
  162. package/dist/tag/tag.js.map +1 -1
  163. package/dist/tag/tag2.js +1 -1
  164. package/dist/textarea/textarea2.js +1 -1
  165. package/dist/time/time2.js +1 -1
  166. package/dist/toast/toast.js +1 -1
  167. package/dist/toast/toast.js.map +1 -1
  168. package/dist/toast/toast2.js +1 -1
  169. package/dist/toggletip/toggletip-footer2.js +1 -1
  170. package/dist/toggletip/toggletip-header.js.map +1 -1
  171. package/dist/toggletip/toggletip-header2.js +1 -1
  172. package/dist/toggletip/toggletip.js.map +1 -1
  173. package/dist/toggletip/toggletip2.js +1 -1
  174. package/dist/toolbar/toolbar.js.map +1 -1
  175. package/dist/toolbar/toolbar2.js +2 -2
  176. package/dist/toolbar/toolbar2.js.map +1 -1
  177. package/dist/tooltip/tooltip.js.map +1 -1
  178. package/dist/tooltip/tooltip2.js +1 -1
  179. package/dist/tree/tree-node2.js +1 -1
  180. package/dist/tree/tree2.js +1 -1
  181. package/dist/week/week2.js +1 -1
  182. package/package.json +5 -5
@@ -28,7 +28,7 @@ var p = class extends u {
28
28
  static {
29
29
  this.metadata = {
30
30
  tag: "nve-drawer",
31
- version: "0.0.7"
31
+ version: "0.0.8"
32
32
  };
33
33
  }
34
34
  static {
@@ -11,7 +11,7 @@ var o = class extends i {
11
11
  static {
12
12
  this.metadata = {
13
13
  tag: "nve-dropdown-footer",
14
- version: "0.0.7",
14
+ version: "0.0.8",
15
15
  parents: ["nve-dropdown"]
16
16
  };
17
17
  }
@@ -11,7 +11,7 @@ var o = class extends i {
11
11
  static {
12
12
  this.metadata = {
13
13
  tag: "nve-dropdown-header",
14
- version: "0.0.7",
14
+ version: "0.0.8",
15
15
  parents: ["nve-dropdown"]
16
16
  };
17
17
  }
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.js","names":[],"sources":["../../src/dropdown/dropdown.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n --nve-sys-interaction-background: var(--nve-sys-interaction-background-300);\n --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-300);\n --nve-sys-layer-popover-arrow-padding: 0px;\n --nve-sys-layer-popover-arrow-offset: 0px;\n --nve-sys-layer-popover-offset: 0px;\n --arrow-transform: translate(0, -2px) rotate(-45deg);\n --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n --border-radius: var(--nve-ref-border-radius-md);\n --background: var(--nve-sys-layer-overlay-background);\n --color: var(--nve-sys-layer-overlay-color);\n --padding: var(--nve-ref-size-400);\n --box-shadow: var(--nve-ref-shadow-400);\n --width: fit-content;\n --min-width: fit-content;\n --gap: var(--nve-ref-space-sm);\n --_divider-padding: var(--padding);\n}\n\n[internal-host] {\n padding: var(--padding);\n border-radius: var(--border-radius);\n border: var(--border);\n background: var(--background);\n color: var(--color);\n box-shadow: var(--box-shadow);\n gap: var(--nve-ref-space-sm);\n width: var(--width);\n min-width: var(--min-width);\n outline: 0;\n}\n\n[internal-host]::backdrop {\n background: transparent;\n}\n\n.header {\n display: flex;\n gap: var(--gap);\n}\n\n.header:has(nve-icon-button) {\n min-height: var(--nve-ref-size-300);\n}\n\nnve-icon-button {\n position: absolute;\n top: var(--nve-ref-size-200);\n right: var(--nve-ref-size-200);\n z-index: 99;\n}\n\n.arrow {\n width: var(--nve-ref-size-400);\n height: var(--nve-ref-size-400);\n background: var(--background);\n transform: var(--arrow-transform);\n border-top-left-radius: var(--nve-ref-border-radius-xs);\n position: absolute;\n border-left: var(--border);\n border-top: var(--border);\n}\n\n:host([position*='top']) {\n --arrow-transform: translate(0, -2px) rotate(-45deg);\n}\n\n:host([position*='right']) {\n --arrow-transform: translate(2px, 0) rotate(45deg);\n}\n\n:host([position*='bottom']) {\n --arrow-transform: translate(0, -1px) rotate(45deg);\n}\n\n:host([position*='left']) {\n --arrow-transform: translate(-2px, 0) rotate(45deg);\n}\n\n::slotted(nve-menu),\n::slotted(nve-menu) {\n --width: 100%;\n}\n\n::slotted(nve-divider),\n::slotted(nve-divider) {\n margin: 0 calc(-1 * var(--_divider-padding));\n}\n"],"mappings":""}
1
+ {"version":3,"file":"dropdown.js","names":[],"sources":["../../src/dropdown/dropdown.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n --nve-sys-interaction-background: var(--nve-sys-interaction-background-300);\n --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-300);\n --nve-sys-layer-popover-arrow-padding: 0px;\n --nve-sys-layer-popover-arrow-offset: 0px;\n --nve-sys-layer-popover-offset: 0px;\n --arrow-transform: translate(0, -2px) rotate(-45deg);\n --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n --border-radius: var(--nve-ref-border-radius-md);\n --background: var(--nve-sys-layer-overlay-background);\n --color: var(--nve-sys-layer-overlay-color);\n --padding: var(--nve-ref-size-400);\n --box-shadow: var(--nve-ref-shadow-400);\n --width: fit-content;\n --min-width: fit-content;\n --gap: var(--nve-ref-space-sm);\n --_divider-padding: var(--padding);\n}\n\n[internal-host] {\n padding: var(--padding);\n border-radius: var(--border-radius);\n border: var(--border);\n background: var(--background);\n color: var(--color);\n box-shadow: var(--box-shadow);\n gap: var(--nve-ref-space-sm);\n width: var(--width);\n min-width: var(--min-width);\n outline: 0;\n}\n\n[internal-host]::backdrop {\n background: transparent;\n}\n\n.header {\n display: flex;\n gap: var(--gap);\n}\n\n.header:has(nve-icon-button) {\n min-height: var(--nve-ref-size-300);\n}\n\nnve-icon-button {\n position: absolute;\n top: var(--nve-ref-size-200);\n right: var(--nve-ref-size-200);\n z-index: 99;\n}\n\n.arrow {\n width: var(--nve-ref-size-400);\n height: var(--nve-ref-size-400);\n background: var(--background);\n transform: var(--arrow-transform);\n border-top-left-radius: var(--nve-ref-border-radius-xs);\n position: absolute;\n border-left: var(--border);\n border-top: var(--border);\n}\n\n:host([position*='top']) {\n --arrow-transform: translate(0, -2px) rotate(-45deg);\n}\n\n:host([position*='right']) {\n --arrow-transform: translate(2px, 0) rotate(45deg);\n}\n\n:host([position*='bottom']) {\n --arrow-transform: translate(0, -1px) rotate(45deg);\n}\n\n:host([position*='left']) {\n --arrow-transform: translate(-2px, 0) rotate(45deg);\n}\n\n::slotted(nve-menu) {\n --width: 100%;\n}\n\n::slotted(nve-divider) {\n margin: 0 calc(-1 * var(--_divider-padding));\n}\n"],"mappings":""}
@@ -21,7 +21,7 @@ var p = class extends l {
21
21
  static {
22
22
  this.metadata = {
23
23
  tag: "nve-dropdown",
24
- version: "0.0.7"
24
+ version: "0.0.8"
25
25
  };
26
26
  }
27
27
  static {
@@ -14,7 +14,7 @@ var d = class extends c {
14
14
  static {
15
15
  this.metadata = {
16
16
  tag: "nve-dropdown-group",
17
- version: "0.0.7",
17
+ version: "0.0.8",
18
18
  children: ["nve-dropdown"]
19
19
  };
20
20
  }
@@ -20,7 +20,7 @@ var g = class extends h(d) {
20
20
  static {
21
21
  this.metadata = {
22
22
  tag: "nve-dropzone",
23
- version: "0.0.7",
23
+ version: "0.0.8",
24
24
  validators: [l, c],
25
25
  valueSchema: {
26
26
  type: "array",
@@ -1 +1 @@
1
- {"version":3,"file":"dropzone2.js","names":["#i18nController","#preventDefaults","#toggleHighlighted","#addFiles","#handleClick","#handleDragEnter","#handleDragOver","#handleDragLeave","#handleDrop","#removeEmptyNodes","#formatFileTypeSpecifiers","#handleFileInputChange"],"sources":["../../src/dropzone/dropzone.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 { query } from 'lit/decorators/query.js';\nimport { formatFileSize, useStyles, removeEmptyTextNode, I18nController, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './dropzone.css?inline';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixin';\nimport { fileTypeValidator, fileSizeValidator, getFileTypeSpecifiers } from './dropzone.util';\n\n/**\n * @element nve-dropzone\n * @description A dropzone form control that enables users to drag and drop files onto it.\n * @since 1.29.0\n * @entrypoint \\@nvidia-elements/core/dropzone\n * @event change - Dispatched when the value has changed (files located in event.target)\n * @slot - use only when custom messaging requires it\n * @cssprop --background\n * @cssprop --border-color\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --min-height\n * @cssprop --color\n * @slot icon - default slot for icon\n * @slot content - default slot for content\n * @csspart icon - The upload icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n * @stable false\n */\n@scopedRegistry()\nexport class Dropzone extends FormControlMixin<typeof LitElement, File[]>(LitElement) {\n @property()\n accept: string = `image/gif, image/jpeg, image/png, image/svg+xml`;\n\n @property({ attribute: 'max-file-size', type: Number })\n maxFileSize: number = 2 * 1024 ** 2;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /**\n * Enables internal string values to update for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n @query('#dropzone-input')\n private fileInput: HTMLInputElement;\n\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-dropzone',\n version: '0.0.0',\n validators: [fileTypeValidator, fileSizeValidator],\n valueSchema: {\n type: 'array' as const,\n items: {\n type: 'object' as const,\n properties: {\n name: { type: 'string' as const },\n size: { type: 'number' as const },\n type: { type: 'string' as const }\n }\n }\n }\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n formResetCallback() {\n this.value = [];\n this.requestUpdate();\n }\n\n constructor() {\n super();\n this.value = [];\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('nve-control', '');\n globalThis.document.addEventListener('dragover', this.#preventDefaults);\n globalThis.document.addEventListener('drop', this.#preventDefaults);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n globalThis.document.removeEventListener('dragover', this.#preventDefaults);\n globalThis.document.removeEventListener('drop', this.#preventDefaults);\n }\n\n #preventDefaults(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n #handleClick() {\n this.fileInput.click();\n }\n\n #handleDragEnter(event: DragEvent) {\n this.#preventDefaults(event);\n this.#toggleHighlighted(true);\n }\n\n #handleDragOver(event: DragEvent) {\n this.#preventDefaults(event);\n this.#toggleHighlighted(true);\n }\n\n #handleDragLeave(event: DragEvent) {\n this.#preventDefaults(event);\n this.#toggleHighlighted(false);\n }\n\n #handleDrop(event: DragEvent) {\n this.#preventDefaults(event);\n this.#toggleHighlighted(false);\n\n const files = Array.from(event.dataTransfer!.files);\n this.#addFiles(files);\n }\n\n #handleFileInputChange(event: Event) {\n this.#preventDefaults(event);\n\n const files = Array.from(this.fileInput.files!);\n this.#addFiles(files);\n\n this.fileInput.value = '';\n }\n\n #addFiles(files: File[]) {\n this.value = [...(this.value ?? []), ...files];\n this.dispatchChangeEvent();\n }\n\n #formatFileTypeSpecifiers(acceptTypes: string) {\n const types = getFileTypeSpecifiers(acceptTypes);\n\n if (types.length === 1) {\n return types[0]!.toUpperCase();\n }\n\n const lastType = types.pop();\n return `${types.join(', ').toUpperCase()} or ${lastType!.toUpperCase()}`;\n }\n\n #toggleHighlighted(highlighted: boolean) {\n this.toggleAttribute('highlighted', highlighted);\n }\n\n #removeEmptyNodes(e: Event) {\n (e.target as HTMLSlotElement).assignedNodes().forEach((node: Node) => removeEmptyTextNode(node));\n }\n\n render() {\n return html`<div internal-host>\n <div class=\"container\"\n @click=${this.#handleClick} \n @dragenter=${this.#handleDragEnter}\n @dragover=${this.#handleDragOver}\n @dragleave=${this.#handleDragLeave}\n @drop=${this.#handleDrop}>\n <svg class=\"border\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"4\" ry=\"4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-dasharray=\"6,6\" stroke-dashoffset=\"0\" stroke-linecap=\"square\" />\n </svg>\n <slot name=\"icon\"><nve-icon part=\"icon\" class=\"icon\" name=\"upload\"></nve-icon></slot>\n <slot @slotchange=${this.#removeEmptyNodes}>\n <div class=\"text-center\">\n <div class=\"text-bold\">${this.i18n.dragAndDrop} ${this.i18n.files} ${this.i18n.or} <span class=\"text-emphasized\">${this.i18n.browseFiles}</span></div>\n <div class=\"text-muted\">${this.#formatFileTypeSpecifiers(this.accept)} &mdash; ${this.i18n.maxFileSize} ${formatFileSize(this.maxFileSize)}</div>\n </div>\n </slot>\n <input id=\"dropzone-input\" type=\"file\" accept=${this.accept} @change=${this.#handleFileInputChange} multiple hidden></input>\n </div>\n </div>`;\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"dropzone2.js","names":["#i18nController","#preventDefaults","#toggleHighlighted","#addFiles","#handleClick","#handleDragEnter","#handleDragOver","#handleDragLeave","#handleDrop","#removeEmptyNodes","#formatFileTypeSpecifiers","#handleFileInputChange"],"sources":["../../src/dropzone/dropzone.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 { query } from 'lit/decorators/query.js';\nimport {\n formatFileSize,\n useStyles,\n removeEmptyTextNode,\n I18nController,\n scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './dropzone.css?inline';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixin';\nimport { fileTypeValidator, fileSizeValidator, getFileTypeSpecifiers } from './dropzone.util';\n\n/**\n * @element nve-dropzone\n * @description A dropzone form control that enables users to drag and drop files onto it.\n * @since 1.29.0\n * @entrypoint \\@nvidia-elements/core/dropzone\n * @event change - Dispatched when the value has changed (files located in event.target)\n * @slot - use only when custom messaging requires it\n * @cssprop --background\n * @cssprop --border-color\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --min-height\n * @cssprop --color\n * @slot icon - default slot for icon\n * @slot content - default slot for content\n * @csspart icon - The upload icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n * @stable false\n */\n@scopedRegistry()\nexport class Dropzone extends FormControlMixin<typeof LitElement, File[]>(LitElement) {\n @property()\n accept: string = `image/gif, image/jpeg, image/png, image/svg+xml`;\n\n @property({ attribute: 'max-file-size', type: Number })\n maxFileSize: number = 2 * 1024 ** 2;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /**\n * Enables internal string values to update for internationalization.\n */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n @query('#dropzone-input')\n private fileInput: HTMLInputElement;\n\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-dropzone',\n version: '0.0.0',\n validators: [fileTypeValidator, fileSizeValidator],\n valueSchema: {\n type: 'array' as const,\n items: {\n type: 'object' as const,\n properties: {\n name: { type: 'string' as const },\n size: { type: 'number' as const },\n type: { type: 'string' as const }\n }\n }\n }\n };\n\n static elementDefinitions = {\n [Icon.metadata.tag]: Icon\n };\n\n formResetCallback() {\n this.value = [];\n this.requestUpdate();\n }\n\n constructor() {\n super();\n this.value = [];\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('nve-control', '');\n globalThis.document.addEventListener('dragover', this.#preventDefaults);\n globalThis.document.addEventListener('drop', this.#preventDefaults);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n globalThis.document.removeEventListener('dragover', this.#preventDefaults);\n globalThis.document.removeEventListener('drop', this.#preventDefaults);\n }\n\n #preventDefaults(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n #handleClick() {\n this.fileInput.click();\n }\n\n #handleDragEnter(event: DragEvent) {\n this.#preventDefaults(event);\n this.#toggleHighlighted(true);\n }\n\n #handleDragOver(event: DragEvent) {\n this.#preventDefaults(event);\n this.#toggleHighlighted(true);\n }\n\n #handleDragLeave(event: DragEvent) {\n this.#preventDefaults(event);\n this.#toggleHighlighted(false);\n }\n\n #handleDrop(event: DragEvent) {\n this.#preventDefaults(event);\n this.#toggleHighlighted(false);\n\n const files = Array.from(event.dataTransfer!.files);\n this.#addFiles(files);\n }\n\n #handleFileInputChange(event: Event) {\n this.#preventDefaults(event);\n\n const files = Array.from(this.fileInput.files!);\n this.#addFiles(files);\n\n this.fileInput.value = '';\n }\n\n #addFiles(files: File[]) {\n this.value = [...(this.value ?? []), ...files];\n this.dispatchChangeEvent();\n }\n\n #formatFileTypeSpecifiers(acceptTypes: string) {\n const types = getFileTypeSpecifiers(acceptTypes);\n\n if (types.length === 1) {\n return types[0]!.toUpperCase();\n }\n\n const lastType = types.pop();\n return `${types.join(', ').toUpperCase()} or ${lastType!.toUpperCase()}`;\n }\n\n #toggleHighlighted(highlighted: boolean) {\n this.toggleAttribute('highlighted', highlighted);\n }\n\n #removeEmptyNodes(e: Event) {\n (e.target as HTMLSlotElement).assignedNodes().forEach((node: Node) => removeEmptyTextNode(node));\n }\n\n render() {\n return html`<div internal-host>\n <div class=\"container\"\n @click=${this.#handleClick} \n @dragenter=${this.#handleDragEnter}\n @dragover=${this.#handleDragOver}\n @dragleave=${this.#handleDragLeave}\n @drop=${this.#handleDrop}>\n <svg class=\"border\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"4\" ry=\"4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-dasharray=\"6,6\" stroke-dashoffset=\"0\" stroke-linecap=\"square\" />\n </svg>\n <slot name=\"icon\"><nve-icon part=\"icon\" class=\"icon\" name=\"upload\"></nve-icon></slot>\n <slot @slotchange=${this.#removeEmptyNodes}>\n <div class=\"text-center\">\n <div class=\"text-bold\">${this.i18n.dragAndDrop} ${this.i18n.files} ${this.i18n.or} <span class=\"text-emphasized\">${this.i18n.browseFiles}</span></div>\n <div class=\"text-muted\">${this.#formatFileTypeSpecifiers(this.accept)} &mdash; ${this.i18n.maxFileSize} ${formatFileSize(this.maxFileSize)}</div>\n </div>\n </slot>\n <input id=\"dropzone-input\" type=\"file\" accept=${this.accept} @change=${this.#handleFileInputChange} multiple hidden></input>\n </div>\n </div>`;\n }\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"file.global.js","names":[],"sources":["../../src/file/file.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-file > input,\nnve-file > input {\n color: var(--color);\n}\n\nnve-file > input::file-selector-button,\nnve-file > input::file-selector-button {\n background: var(--background);\n padding: var(--padding);\n height: var(--height);\n width: var(--width);\n border-radius: var(--border-radius);\n border: var(--border);\n text-decoration: var(--text-decoration);\n font-weight: var(--font-weight);\n font-size: var(--font-size);\n cursor: var(--cursor);\n gap: var(--gap);\n margin-inline-end: var(--nve-ref-space-sm);\n display: inline-flex;\n place-items: center;\n appearance: none;\n line-height: 1.2em;\n}\n\nnve-file > input::file-selector-button:hover,\nnve-file > input::file-selector-button:hover {\n --color: var(--nve-sys-interaction-hover-color);\n --background: var(--nve-sys-interaction-background);\n}\n\nnve-file > input::file-selector-button:active,\nnve-file > input::file-selector-button:active {\n --color: var(--nve-sys-interaction-active-color);\n --background: var(--nve-sys-interaction-background);\n}\n"],"mappings":""}
1
+ {"version":3,"file":"file.global.js","names":[],"sources":["../../src/file/file.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-file > input {\n color: var(--color);\n}\n\nnve-file > input::file-selector-button {\n background: var(--background);\n padding: var(--padding);\n height: var(--height);\n width: var(--width);\n border-radius: var(--border-radius);\n border: var(--border);\n text-decoration: var(--text-decoration);\n font-weight: var(--font-weight);\n font-size: var(--font-size);\n cursor: var(--cursor);\n gap: var(--gap);\n margin-inline-end: var(--nve-ref-space-sm);\n display: inline-flex;\n place-items: center;\n appearance: none;\n line-height: 1.2em;\n}\n\nnve-file > input::file-selector-button:hover {\n --color: var(--nve-sys-interaction-hover-color);\n --background: var(--nve-sys-interaction-background);\n}\n\nnve-file > input::file-selector-button:active {\n --color: var(--nve-sys-interaction-active-color);\n --background: var(--nve-sys-interaction-background);\n}\n"],"mappings":""}
@@ -11,7 +11,7 @@ var a = class extends n {
11
11
  static {
12
12
  this.metadata = {
13
13
  tag: "nve-file",
14
- version: "0.0.7"
14
+ version: "0.0.8"
15
15
  };
16
16
  }
17
17
  connectedCallback() {
@@ -13,7 +13,7 @@ var c = class extends a {
13
13
  static {
14
14
  this.metadata = {
15
15
  tag: "nve-format-datetime",
16
- version: "0.0.7"
16
+ version: "0.0.8"
17
17
  };
18
18
  }
19
19
  get #e() {
@@ -16,7 +16,7 @@ var c = class extends a {
16
16
  static {
17
17
  this.metadata = {
18
18
  tag: "nve-format-relative-time",
19
- version: "0.0.7"
19
+ version: "0.0.8"
20
20
  };
21
21
  }
22
22
  #e;
@@ -1 +1 @@
1
- {"version":3,"file":"control.js","names":[],"sources":["../../../src/forms/control/control.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n --cursor: pointer;\n --accent-color: var(--nve-sys-accent-secondary-background);\n --color: var(--nve-sys-interaction-field-color);\n --label-color: var(--nve-sys-interaction-field-color);\n --label-text-transform: capitalize;\n --label-font-weight: var(--nve-ref-font-weight-medium);\n --label-font-size: var(--nve-ref-font-size-100);\n --control-width: 100%;\n --control-height: var(--nve-sys-interaction-field-height);\n --_label-width: var(--label-width, 180px);\n --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n --opacity: 1;\n --filter: none;\n contain: content;\n}\n\n:host([nve-control='inline']) {\n --control-height: auto;\n}\n\n::slotted(*) {\n color-scheme: var(--nve-sys-color-scheme);\n font-family: inherit;\n}\n\n::slotted(label) {\n font-weight: var(--label-font-weight) !important;\n font-size: var(--label-font-size) !important;\n color: var(--label-color) !important;\n cursor: var(--cursor) !important;\n text-transform: var(--label-text-transform) !important;\n display: inline-block !important;\n line-height: 1em !important;\n align-self: center !important;\n}\n\n::slotted(label::first-letter) {\n text-transform: capitalize;\n}\n\n:host(:state(disabled)),\n:host(:state(disabled)) ::slotted(nve-control-message:not([status])),\n:host(:state(disabled)) ::slotted(nve-control-message:not([status])) {\n --cursor: not-allowed;\n}\n\n:host(:state(disabled)) {\n --opacity: var(--nve-ref-opacity-500);\n}\n\n:host(:state(invalid)) ::slotted(nve-control-message:not([error], [status])) {\n display: none;\n}\n\n:host([fit-content]) {\n --control-width: fit-content;\n --label-width: fit-content;\n --width: fit-content;\n}\n\n:host([nve-control]) ::slotted(input:focus),\n:host([nve-control]) ::slotted(select:focus),\n:host([nve-control]) ::slotted(textarea:focus),\n:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],\n:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],\n[internal-host]:has(nve-icon-button),\n[internal-host]:has(nve-icon-button) {\n outline: 0 !important;\n}\n\n@container style(--control-type: custom) {\n [input] {\n outline: 0 !important;\n }\n}\n\n::slotted(nve-button[nve-control]),\n::slotted(nve-button[nve-control]),\n::slotted(nve-button[nve-control]),\n::slotted(nve-button[nve-control]) {\n width: 100%;\n}\n\n[input] {\n cursor: var(--cursor);\n min-height: var(--control-height);\n opacity: var(--opacity);\n filter: var(--filter);\n grid-area: input;\n display: flex;\n line-height: 1;\n}\n\n:host([nve-control='inline']) {\n [internal-host] {\n min-height: var(--control-height);\n }\n\n [input] {\n min-height: min-content;\n }\n}\n\nslot {\n line-height: 1;\n width: 100%;\n}\n\nslot[name='label'] {\n grid-area: label;\n display: inline-flex;\n align-self: center;\n}\n\nslot[name='messages'] {\n grid-area: messages;\n display: inline-flex;\n}\n\n[name='messages']:not(:has-slotted),\n[name='label']:not(:has-slotted) {\n display: none !important;\n}\n\n[internal-host] {\n display: grid;\n width: 100%;\n gap: var(--nve-ref-space-xs);\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-rows: auto;\n grid-template-areas: 'input input input';\n}\n\n:host([nve-control='inline']) [internal-host] {\n align-items: center;\n grid-template-columns: auto 1fr 1fr;\n\n slot[name='label'],\n slot[name='messages'] {\n align-items: center;\n }\n\n & ::slotted(label) {\n font-weight: var(--nve-ref-font-weight-regular) !important;\n color: var(--color) !important;\n width: 100%;\n }\n\n slot[name='label'] {\n line-height: 1;\n width: 100%;\n }\n}\n\n:host([layout='horizontal']) [internal-host],\n:host([layout='horizontal-inline']) [internal-host] {\n grid-template-columns: var(--_label-width) 1fr minmax(0, var(--_label-width));\n}\n\n/** block controls */\n[internal-host] {\n &:has([name='label']:has-slotted) {\n grid-template-areas:\n 'label label label'\n 'input input input';\n }\n\n &:has([name='messages']:has-slotted) {\n grid-template-areas:\n 'input input input'\n 'messages messages messages';\n }\n\n &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n grid-template-areas:\n 'label label label'\n 'input input input'\n 'messages messages messages';\n }\n}\n\n:host([layout='horizontal']),\n:host([layout='horizontal-inline']) {\n [internal-host] {\n &:has([name='messages']:has-slotted) {\n grid-template-areas:\n 'label input input'\n '. messages messages';\n }\n\n &:not(:has([name='messages']:has-slotted)) {\n grid-template-areas: 'label input input';\n }\n }\n}\n\n/** inline controls */\n:host([nve-control='inline']) {\n [internal-host] {\n grid-template-areas: 'input input input';\n\n &:has([name='label']:has-slotted) {\n grid-template-areas: 'input label label';\n }\n\n &:has([name='messages']:has-slotted) {\n grid-template-areas:\n 'input input input'\n 'messages messages messages';\n }\n\n &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n grid-template-areas:\n 'input label label'\n 'messages messages messages';\n }\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"control.js","names":[],"sources":["../../../src/forms/control/control.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n --cursor: pointer;\n --accent-color: var(--nve-sys-accent-secondary-background);\n --color: var(--nve-sys-interaction-field-color);\n --label-color: var(--nve-sys-interaction-field-color);\n --label-text-transform: capitalize;\n --label-font-weight: var(--nve-ref-font-weight-medium);\n --label-font-size: var(--nve-ref-font-size-100);\n --control-width: 100%;\n --control-height: var(--nve-sys-interaction-field-height);\n --_label-width: var(--label-width, 180px);\n --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n --opacity: 1;\n --filter: none;\n contain: content;\n}\n\n:host([nve-control='inline']) {\n --control-height: auto;\n}\n\n::slotted(*) {\n color-scheme: var(--nve-sys-color-scheme);\n font-family: inherit;\n}\n\n::slotted(label) {\n font-weight: var(--label-font-weight) !important;\n font-size: var(--label-font-size) !important;\n color: var(--label-color) !important;\n cursor: var(--cursor) !important;\n text-transform: var(--label-text-transform) !important;\n display: inline-block !important;\n line-height: 1em !important;\n align-self: center !important;\n}\n\n::slotted(label::first-letter) {\n text-transform: capitalize;\n}\n\n:host(:state(disabled)),\n:host(:state(disabled)) ::slotted(nve-control-message:not([status])) {\n --cursor: not-allowed;\n}\n\n:host(:state(disabled)) {\n --opacity: var(--nve-ref-opacity-500);\n}\n\n:host(:state(invalid)) ::slotted(nve-control-message:not([error], [status])) {\n display: none;\n}\n\n:host([fit-content]) {\n --control-width: fit-content;\n --label-width: fit-content;\n --width: fit-content;\n}\n\n:host([nve-control]) ::slotted(input:focus),\n:host([nve-control]) ::slotted(select:focus),\n:host([nve-control]) ::slotted(textarea:focus),\n:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],\n[internal-host]:has(nve-icon-button) {\n outline: 0 !important;\n}\n\n@container style(--control-type: custom) {\n [input] {\n outline: 0 !important;\n }\n}\n\n::slotted(nve-button[nve-control]) {\n width: 100%;\n}\n\n[input] {\n cursor: var(--cursor);\n min-height: var(--control-height);\n opacity: var(--opacity);\n filter: var(--filter);\n grid-area: input;\n display: flex;\n line-height: 1;\n}\n\n:host([nve-control='inline']) {\n [internal-host] {\n min-height: var(--control-height);\n }\n\n [input] {\n min-height: min-content;\n }\n}\n\nslot {\n line-height: 1;\n width: 100%;\n}\n\nslot[name='label'] {\n grid-area: label;\n display: inline-flex;\n align-self: center;\n}\n\nslot[name='messages'] {\n grid-area: messages;\n display: inline-flex;\n}\n\n[name='messages']:not(:has-slotted),\n[name='label']:not(:has-slotted) {\n display: none !important;\n}\n\n[internal-host] {\n display: grid;\n width: 100%;\n gap: var(--nve-ref-space-xs);\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-rows: auto;\n grid-template-areas: 'input input input';\n}\n\n:host([nve-control='inline']) [internal-host] {\n align-items: center;\n grid-template-columns: auto 1fr 1fr;\n\n slot[name='label'],\n slot[name='messages'] {\n align-items: center;\n }\n\n & ::slotted(label) {\n font-weight: var(--nve-ref-font-weight-regular) !important;\n color: var(--color) !important;\n width: 100%;\n }\n\n slot[name='label'] {\n line-height: 1;\n width: 100%;\n }\n}\n\n:host([layout='horizontal']) [internal-host],\n:host([layout='horizontal-inline']) [internal-host] {\n grid-template-columns: var(--_label-width) 1fr minmax(0, var(--_label-width));\n}\n\n/** block controls */\n[internal-host] {\n &:has([name='label']:has-slotted) {\n grid-template-areas:\n 'label label label'\n 'input input input';\n }\n\n &:has([name='messages']:has-slotted) {\n grid-template-areas:\n 'input input input'\n 'messages messages messages';\n }\n\n &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n grid-template-areas:\n 'label label label'\n 'input input input'\n 'messages messages messages';\n }\n}\n\n:host([layout='horizontal']),\n:host([layout='horizontal-inline']) {\n [internal-host] {\n &:has([name='messages']:has-slotted) {\n grid-template-areas:\n 'label input input'\n '. messages messages';\n }\n\n &:not(:has([name='messages']:has-slotted)) {\n grid-template-areas: 'label input input';\n }\n }\n}\n\n/** inline controls */\n:host([nve-control='inline']) {\n [internal-host] {\n grid-template-areas: 'input input input';\n\n &:has([name='label']:has-slotted) {\n grid-template-areas: 'input label label';\n }\n\n &:has([name='messages']:has-slotted) {\n grid-template-areas:\n 'input input input'\n 'messages messages messages';\n }\n\n &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n grid-template-areas:\n 'input label label'\n 'messages messages messages';\n }\n }\n}\n"],"mappings":""}
@@ -25,7 +25,7 @@ var C = class extends v {
25
25
  }
26
26
  #r;
27
27
  get input() {
28
- return !b && !this.#r && (this.#r = (this.querySelector("slot")?.assignedElements()?.find((e) => e.matches("input, select, selectmenu, textarea, [nve-control], [nve-control]")) ?? Array.from(this.shadowRoot.querySelector("slot")?.assignedElements({ flatten: !0 }) ?? []).find((e) => e.matches("input, select, selectmenu, textarea, [nve-control], [nve-control]"))) || this.querySelector(d)), this.#r;
28
+ return !b && !this.#r && (this.#r = (this.querySelector("slot")?.assignedElements()?.find((e) => e.matches("input, select, selectmenu, textarea, [nve-control]")) ?? Array.from(this.shadowRoot.querySelector("slot")?.assignedElements({ flatten: !0 }) ?? []).find((e) => e.matches("input, select, selectmenu, textarea, [nve-control]"))) || this.querySelector(d)), this.#r;
29
29
  }
30
30
  get prefixContent() {
31
31
  return x;
@@ -40,7 +40,7 @@ var C = class extends v {
40
40
  static {
41
41
  this.metadata = {
42
42
  tag: "nve-control",
43
- version: "0.0.7"
43
+ version: "0.0.8"
44
44
  };
45
45
  }
46
46
  render() {
@@ -1 +1 @@
1
- {"version":3,"file":"control2.js","names":["#i18nController","#label","#messages","#input","#onRootSlotchange","#onInputSlotchange","#onFitTextUpdate","#observers","#updateStyleStates","#setupInput","#setupFitText","#polyfillShowPicker","#updateAssociations","#getCharacterWidth","#assignLabel"],"sources":["../../../src/forms/control/control.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport { LitElement, html, nothing, isServer } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport {\n attachInternals,\n useStyles,\n associateLabel,\n associateAriaDescribedBy,\n associateDataList,\n appendRootNodeStyle,\n getAttributeListChanges,\n I18nController,\n hostAttr,\n typeSSR\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport {\n setupControlValidationStates,\n setupControlStates,\n setupControlStatusStates,\n inputQuery\n} from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport globalStyles from './control.global.css?inline';\nimport styles from './control.css?inline';\n\n/**\n * @element nve-control\n * @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input element\n * @slot label - Label element\n * @cssprop --cursor\n * @cssprop --accent-color\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-width\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @cssprop --control-width\n * @cssprop --control-height\n\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\n@typeSSR()\nexport class Control extends LitElement {\n /** Set current visual state for control. This overrides any validation states active. */\n @property({ type: String }) status: 'warning' | 'error' | 'success' | 'disabled';\n\n /** Set current control + label + control message layout. Layouts will collapse based on available container space. */\n @property({ type: String, reflect: true }) layout:\n | 'vertical'\n | 'vertical-inline'\n | 'horizontal'\n | 'horizontal-inline';\n\n /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */\n @property({ type: Boolean, reflect: true, attribute: 'fit-text' }) fitText = false;\n\n /** Sets the input to match native default content block */\n @property({ type: Boolean, reflect: true, attribute: 'fit-content' }) fitContent = false;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /** Enables internal string values to update for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n /** Set the visual prominence of the control */\n @property({ type: String, reflect: true }) prominence: 'muted';\n\n get #label() {\n return this.shadowRoot\n ?.querySelector<HTMLSlotElement>('slot[name=\"label\"]')\n ?.assignedElements({ flatten: true })?.[0] as HTMLLabelElement;\n }\n\n get #messages() {\n return (this.shadowRoot\n ?.querySelector<HTMLSlotElement>('slot[name=\"messages\"]')\n ?.assignedElements({ flatten: true }) ?? []) as ControlMessage[];\n }\n\n #input: HTMLInputElement;\n\n /** @private */\n get input(): HTMLInputElement {\n if (!isServer && !this.#input) {\n const slotted =\n this.querySelector('slot')\n ?.assignedElements()\n ?.find(i => i.matches(inputQuery)) ??\n Array.from(this.shadowRoot!.querySelector('slot')?.assignedElements({ flatten: true }) ?? []).find(i =>\n i.matches(inputQuery)\n );\n this.#input = (slotted ? slotted : this.querySelector(inputQuery)) as HTMLInputElement;\n }\n\n return this.#input;\n }\n\n /** @private */\n protected get prefixContent(): typeof nothing | TemplateResult {\n return nothing;\n }\n\n /** @private */\n protected get suffixContent(): typeof nothing | TemplateResult {\n return nothing;\n }\n\n @hostAttr({ attribute: 'nve-control' }) protected nveControl = '';\n\n /** @private */\n declare _internals: ElementInternals;\n\n #observers: (MutationObserver | ResizeObserver)[] = [];\n\n protected _associateDatalist = true;\n\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-control',\n version: '0.0.0'\n };\n\n render() {\n return this.nveControl !== 'inline'\n ? html`\n <div internal-host part=\"_internal-host\">\n <slot name=\"label\" part=\"_label\"></slot>\n <div input part=\"_input\">\n ${this.prefixContent}\n <slot></slot>\n ${this.suffixContent}\n </div>\n <slot name=\"messages\" part=\"_messages\"></slot>\n </div>\n `\n : html`\n <div internal-host part=\"_internal-host\">\n <div input part=\"_input\"><slot interaction-state></slot></div>\n <slot name=\"label\" part=\"_label\"></slot>\n <slot name=\"messages\" part=\"_messages\"></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n appendRootNodeStyle(this, globalStyles);\n this.shadowRoot!.addEventListener('slotchange', this.#onRootSlotchange);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.shadowRoot!.removeEventListener('slotchange', this.#onRootSlotchange);\n this.shadowRoot!.removeEventListener('slotchange', this.#onInputSlotchange);\n if (this.fitText && this.input) {\n this.input.removeEventListener('input', this.#onFitTextUpdate);\n this.input.removeEventListener('change', this.#onFitTextUpdate);\n }\n this.#observers.forEach(observer => observer.disconnect());\n this.#observers.length = 0;\n }\n\n #onRootSlotchange = () => {\n this.#updateStyleStates();\n\n if (this.input && this.#observers.length === 0) {\n this.#setupInput();\n this.#setupFitText();\n }\n };\n\n /** Resets control value to initial attribute value and clears any active validation rules. */\n reset() {\n this.input.value = this.input.getAttribute('value') ?? '';\n this.requestUpdate();\n this.dispatchEvent(new CustomEvent('reset', { bubbles: true, composed: true }));\n }\n\n #setupInput() {\n setupControlValidationStates(this, this.#messages);\n\n this.#observers.push(\n ...setupControlStates(this),\n ...setupControlStatusStates(this, this.#messages),\n setupControlLayoutStates(this),\n getAttributeListChanges(this, ['hidden', 'status'], () => this.#updateStyleStates())\n );\n\n this.#polyfillShowPicker();\n this.#updateAssociations();\n this.shadowRoot!.addEventListener('slotchange', this.#onInputSlotchange);\n }\n\n #onInputSlotchange = () => {\n this.#updateStyleStates();\n this.#updateAssociations();\n };\n\n #setupFitText() {\n if (this.fitText) {\n this.#getCharacterWidth();\n this.input.addEventListener('input', this.#onFitTextUpdate);\n this.input.addEventListener('change', this.#onFitTextUpdate);\n }\n }\n\n #onFitTextUpdate = () => {\n this.#getCharacterWidth();\n };\n\n #getCharacterWidth() {\n if (this.input.tagName === 'INPUT') {\n const offset = this.input.type !== 'text' ? 4 : 0;\n this.style.setProperty('--control-width', `${this.input.value.length + offset}ch`);\n this.input.style.setProperty('max-width', `${this.input.value.length + 2}ch`, 'important');\n } else if (this.input.tagName === 'SELECT') {\n this.style.setProperty(\n '--control-width',\n `${(this.input as unknown as HTMLSelectElement).options[(this.input as unknown as HTMLSelectElement).selectedIndex]!.textContent!.length + 4}ch`\n );\n }\n }\n\n #polyfillShowPicker() {\n if (!this.input.showPicker) {\n this.input.showPicker = () => this.input.focus();\n }\n }\n\n #updateStyleStates() {\n if (this.input) {\n this.toggleAttribute('multiple', this.input?.multiple);\n this.input?.hasAttribute('size') ? this.setAttribute('size', '') : this.removeAttribute('size');\n }\n }\n\n #updateAssociations() {\n this.#assignLabel();\n associateLabel(this.#label, this.input);\n associateAriaDescribedBy(Array.from(this.#messages), this.input);\n\n if (this._associateDatalist) {\n associateDataList(this.querySelector<HTMLDataListElement>('datalist')!, this.input);\n }\n }\n\n #assignLabel() {\n const label =\n this.querySelector('label') ||\n (this.shadowRoot!.querySelector('slot')!\n .assignedNodes({ flatten: true })\n .find((i: Node) => (i as HTMLElement).tagName === 'LABEL') as HTMLLabelElement);\n if (label) {\n label.slot = 'label';\n }\n }\n\n protected showPicker() {\n try {\n this.input.showPicker();\n } catch {\n //\n }\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"control2.js","names":["#i18nController","#label","#messages","#input","#onRootSlotchange","#onInputSlotchange","#onFitTextUpdate","#observers","#updateStyleStates","#setupInput","#setupFitText","#polyfillShowPicker","#updateAssociations","#getCharacterWidth","#assignLabel"],"sources":["../../../src/forms/control/control.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport { LitElement, html, nothing, isServer } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport {\n attachInternals,\n useStyles,\n associateLabel,\n associateAriaDescribedBy,\n associateDataList,\n appendRootNodeStyle,\n getAttributeListChanges,\n I18nController,\n hostAttr,\n typeSSR\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport {\n setupControlValidationStates,\n setupControlStates,\n setupControlStatusStates,\n inputQuery\n} from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport globalStyles from './control.global.css?inline';\nimport styles from './control.css?inline';\n\n/**\n * @element nve-control\n * @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input element\n * @slot label - Label element\n * @cssprop --cursor\n * @cssprop --accent-color\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-width\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @cssprop --control-width\n * @cssprop --control-height\n\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\n@typeSSR()\nexport class Control extends LitElement {\n /** Set current visual state for control. This overrides any validation states active. */\n @property({ type: String }) status: 'warning' | 'error' | 'success' | 'disabled';\n\n /** Set current control + label + control message layout. Layouts will collapse based on available container space. */\n @property({ type: String, reflect: true }) layout:\n | 'vertical'\n | 'vertical-inline'\n | 'horizontal'\n | 'horizontal-inline';\n\n /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */\n @property({ type: Boolean, reflect: true, attribute: 'fit-text' }) fitText = false;\n\n /** Sets the input to match native default content block */\n @property({ type: Boolean, reflect: true, attribute: 'fit-content' }) fitContent = false;\n\n #i18nController: I18nController<this> = new I18nController<this>(this);\n\n /** Enables internal string values to update for internationalization. */\n @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n /** Set the visual prominence of the control */\n @property({ type: String, reflect: true }) prominence: 'muted';\n\n get #label() {\n return this.shadowRoot\n ?.querySelector<HTMLSlotElement>('slot[name=\"label\"]')\n ?.assignedElements({ flatten: true })?.[0] as HTMLLabelElement;\n }\n\n get #messages() {\n return (this.shadowRoot\n ?.querySelector<HTMLSlotElement>('slot[name=\"messages\"]')\n ?.assignedElements({ flatten: true }) ?? []) as ControlMessage[];\n }\n\n #input: HTMLInputElement;\n\n /** @private */\n get input(): HTMLInputElement {\n if (!isServer && !this.#input) {\n const slotted =\n this.querySelector('slot')\n ?.assignedElements()\n ?.find(i => i.matches(inputQuery)) ??\n Array.from(this.shadowRoot!.querySelector('slot')?.assignedElements({ flatten: true }) ?? []).find(i =>\n i.matches(inputQuery)\n );\n this.#input = (slotted ? slotted : this.querySelector(inputQuery)) as HTMLInputElement;\n }\n\n return this.#input;\n }\n\n /** @private */\n protected get prefixContent(): typeof nothing | TemplateResult {\n return nothing;\n }\n\n /** @private */\n protected get suffixContent(): typeof nothing | TemplateResult {\n return nothing;\n }\n\n @hostAttr({ attribute: 'nve-control' }) protected nveControl = '';\n\n /** @private */\n declare _internals: ElementInternals;\n\n #observers: (MutationObserver | ResizeObserver)[] = [];\n\n protected _associateDatalist = true;\n\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-control',\n version: '0.0.0'\n };\n\n render() {\n return this.nveControl !== 'inline'\n ? html`\n <div internal-host part=\"_internal-host\">\n <slot name=\"label\" part=\"_label\"></slot>\n <div input part=\"_input\">\n ${this.prefixContent}\n <slot></slot>\n ${this.suffixContent}\n </div>\n <slot name=\"messages\" part=\"_messages\"></slot>\n </div>\n `\n : html`\n <div internal-host part=\"_internal-host\">\n <div input part=\"_input\"><slot interaction-state></slot></div>\n <slot name=\"label\" part=\"_label\"></slot>\n <slot name=\"messages\" part=\"_messages\"></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n appendRootNodeStyle(this, globalStyles);\n this.shadowRoot!.addEventListener('slotchange', this.#onRootSlotchange);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.shadowRoot!.removeEventListener('slotchange', this.#onRootSlotchange);\n this.shadowRoot!.removeEventListener('slotchange', this.#onInputSlotchange);\n if (this.fitText && this.input) {\n this.input.removeEventListener('input', this.#onFitTextUpdate);\n this.input.removeEventListener('change', this.#onFitTextUpdate);\n }\n this.#observers.forEach(observer => observer.disconnect());\n this.#observers.length = 0;\n }\n\n #onRootSlotchange = () => {\n this.#updateStyleStates();\n\n if (this.input && this.#observers.length === 0) {\n this.#setupInput();\n this.#setupFitText();\n }\n };\n\n /** Resets control value to initial attribute value and clears any active validation rules. */\n reset() {\n this.input.value = this.input.getAttribute('value') ?? '';\n this.requestUpdate();\n this.dispatchEvent(new CustomEvent('reset', { bubbles: true, composed: true }));\n }\n\n #setupInput() {\n setupControlValidationStates(this, this.#messages);\n\n this.#observers.push(\n ...setupControlStates(this),\n ...setupControlStatusStates(this, this.#messages),\n setupControlLayoutStates(this),\n getAttributeListChanges(this, ['hidden', 'status'], () => this.#updateStyleStates())\n );\n\n this.#polyfillShowPicker();\n this.#updateAssociations();\n this.shadowRoot!.addEventListener('slotchange', this.#onInputSlotchange);\n }\n\n #onInputSlotchange = () => {\n this.#updateStyleStates();\n this.#updateAssociations();\n };\n\n #setupFitText() {\n if (this.fitText) {\n this.#getCharacterWidth();\n this.input.addEventListener('input', this.#onFitTextUpdate);\n this.input.addEventListener('change', this.#onFitTextUpdate);\n }\n }\n\n #onFitTextUpdate = () => {\n this.#getCharacterWidth();\n };\n\n #getCharacterWidth() {\n if (this.input.tagName === 'INPUT') {\n const offset = this.input.type !== 'text' ? 4 : 0;\n this.style.setProperty('--control-width', `${this.input.value.length + offset}ch`);\n this.input.style.setProperty('max-width', `${this.input.value.length + 2}ch`, 'important');\n } else if (this.input.tagName === 'SELECT') {\n this.style.setProperty(\n '--control-width',\n `${(this.input as unknown as HTMLSelectElement).options[(this.input as unknown as HTMLSelectElement).selectedIndex]!.textContent!.length + 4}ch`\n );\n }\n }\n\n #polyfillShowPicker() {\n if (!this.input.showPicker) {\n this.input.showPicker = () => this.input.focus();\n }\n }\n\n #updateStyleStates() {\n if (this.input) {\n this.toggleAttribute('multiple', this.input?.multiple);\n this.input?.hasAttribute('size') ? this.setAttribute('size', '') : this.removeAttribute('size');\n }\n }\n\n #updateAssociations() {\n this.#assignLabel();\n associateLabel(this.#label, this.input);\n associateAriaDescribedBy(Array.from(this.#messages), this.input);\n\n if (this._associateDatalist) {\n associateDataList(this.querySelector<HTMLDataListElement>('datalist')!, this.input);\n }\n }\n\n #assignLabel() {\n const label =\n this.querySelector('label') ||\n (this.shadowRoot!.querySelector('slot')!\n .assignedNodes({ flatten: true })\n .find((i: Node) => (i as HTMLElement).tagName === 'LABEL') as HTMLLabelElement);\n if (label) {\n label.slot = 'label';\n }\n }\n\n protected showPicker() {\n try {\n this.input.showPicker();\n } catch {\n //\n }\n }\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"control-group.js","names":[],"sources":["../../../src/forms/control-group/control-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n --color: var(--nve-sys-interaction-field-color);\n --opacity: 1;\n --label-color: var(--nve-sys-interaction-field-color);\n --label-text-transform: capitalize;\n --label-font-weight: var(--nve-ref-font-weight-medium);\n --label-font-size: var(--nve-ref-font-size-100);\n --_label-width: var(--label-width, 180px);\n}\n\n[internal-host] {\n color: var(--color);\n opacity: var(--opacity);\n}\n\n::slotted(label) {\n font-weight: var(--label-font-weight) !important;\n font-size: var(--label-font-size) !important;\n color: var(--label-color) !important;\n cursor: var(--cursor) !important;\n text-transform: var(--label-text-transform) !important;\n}\n\n:host([layout*='horizontal-inline']) ::slotted([nve-control]),\n:host([layout*='vertical-inline']) ::slotted([nve-control]),\n:host([layout*='horizontal-inline']) ::slotted([nve-control]),\n:host([layout*='vertical-inline']) ::slotted([nve-control]) {\n --control-height: var(--nve-sys-interaction-field-height);\n}\n\nslot[name='label'] {\n grid-area: label;\n display: block;\n align-self: center;\n}\n\nslot[name='messages'] {\n grid-area: messages;\n display: block;\n}\n\n.input-slot {\n grid-area: input;\n display: flex;\n flex-flow: column wrap;\n gap: var(--nve-ref-space-sm) var(--nve-ref-space-md);\n width: fit-content;\n}\n\n:host([layout*='-inline']) .input-slot {\n flex-direction: row;\n}\n\n[name='messages']:not(:has-slotted),\n[name='label']:not(:has-slotted) {\n display: none !important;\n}\n\n/* fallback for :has-slotted */\n.no-messages {\n & slot[name='messages'] {\n display: none !important;\n }\n}\n\n/* fallback for :has-slotted */\n.no-label {\n & slot[name='label'] {\n display: none !important;\n }\n}\n\n[internal-host] {\n display: grid;\n gap: var(--nve-ref-space-xs);\n align-items: start;\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-rows: auto;\n grid-template-areas:\n 'label label label'\n 'input input input'\n 'messages messages messages';\n\n &.no-messages {\n grid-template-areas:\n 'label label label'\n 'input input input';\n }\n\n &.no-label {\n & slot[name='messages'] {\n grid-template-areas:\n 'input input input'\n 'messages messages messages';\n }\n }\n\n &.no-label.no-messages {\n grid-template-areas: 'input input input';\n }\n}\n\n:host([layout='vertical-inline']) [internal-host] {\n grid-template-areas:\n 'label label label'\n 'input input input'\n 'messages messages messages';\n}\n\n:host([layout='vertical-inline']) [internal-host].no-messages {\n grid-template-areas:\n 'label label label'\n 'input input input';\n}\n\n:host([layout='horizontal']) [internal-host] {\n grid-template-columns: var(--_label-width) minmax(auto, max-content) auto;\n grid-template-areas:\n 'label input input'\n '. messages messages';\n}\n\n:host([layout='horizontal']) [internal-host].no-messages {\n grid-template-areas: 'label input input';\n}\n\n:host([layout='horizontal-inline']) [internal-host] {\n grid-template-columns: var(--_label-width) minmax(auto, max-content) auto;\n grid-template-areas:\n 'label input input'\n '. messages messages';\n}\n\n:host([layout='horizontal-inline']) [internal-host].no-messages {\n grid-template-areas: 'label input input';\n}\n\n:host([layout='horizontal']) slot[name='label'] {\n align-self: start;\n}\n\n:host([layout='horizontal']) ::slotted(label) {\n align-self: start !important;\n}\n"],"mappings":""}
1
+ {"version":3,"file":"control-group.js","names":[],"sources":["../../../src/forms/control-group/control-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n --color: var(--nve-sys-interaction-field-color);\n --opacity: 1;\n --label-color: var(--nve-sys-interaction-field-color);\n --label-text-transform: capitalize;\n --label-font-weight: var(--nve-ref-font-weight-medium);\n --label-font-size: var(--nve-ref-font-size-100);\n --_label-width: var(--label-width, 180px);\n}\n\n[internal-host] {\n color: var(--color);\n opacity: var(--opacity);\n}\n\n::slotted(label) {\n font-weight: var(--label-font-weight) !important;\n font-size: var(--label-font-size) !important;\n color: var(--label-color) !important;\n cursor: var(--cursor) !important;\n text-transform: var(--label-text-transform) !important;\n}\n\n:host([layout*='horizontal-inline']) ::slotted([nve-control]),\n:host([layout*='vertical-inline']) ::slotted([nve-control]) {\n --control-height: var(--nve-sys-interaction-field-height);\n}\n\nslot[name='label'] {\n grid-area: label;\n display: block;\n align-self: center;\n}\n\nslot[name='messages'] {\n grid-area: messages;\n display: block;\n}\n\n.input-slot {\n grid-area: input;\n display: flex;\n flex-flow: column wrap;\n gap: var(--nve-ref-space-sm) var(--nve-ref-space-md);\n width: fit-content;\n}\n\n:host([layout*='-inline']) .input-slot {\n flex-direction: row;\n}\n\n[name='messages']:not(:has-slotted),\n[name='label']:not(:has-slotted) {\n display: none !important;\n}\n\n/* fallback for :has-slotted */\n.no-messages {\n & slot[name='messages'] {\n display: none !important;\n }\n}\n\n/* fallback for :has-slotted */\n.no-label {\n & slot[name='label'] {\n display: none !important;\n }\n}\n\n[internal-host] {\n display: grid;\n gap: var(--nve-ref-space-xs);\n align-items: start;\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-rows: auto;\n grid-template-areas:\n 'label label label'\n 'input input input'\n 'messages messages messages';\n\n &.no-messages {\n grid-template-areas:\n 'label label label'\n 'input input input';\n }\n\n &.no-label {\n & slot[name='messages'] {\n grid-template-areas:\n 'input input input'\n 'messages messages messages';\n }\n }\n\n &.no-label.no-messages {\n grid-template-areas: 'input input input';\n }\n}\n\n:host([layout='vertical-inline']) [internal-host] {\n grid-template-areas:\n 'label label label'\n 'input input input'\n 'messages messages messages';\n}\n\n:host([layout='vertical-inline']) [internal-host].no-messages {\n grid-template-areas:\n 'label label label'\n 'input input input';\n}\n\n:host([layout='horizontal']) [internal-host] {\n grid-template-columns: var(--_label-width) minmax(auto, max-content) auto;\n grid-template-areas:\n 'label input input'\n '. messages messages';\n}\n\n:host([layout='horizontal']) [internal-host].no-messages {\n grid-template-areas: 'label input input';\n}\n\n:host([layout='horizontal-inline']) [internal-host] {\n grid-template-columns: var(--_label-width) minmax(auto, max-content) auto;\n grid-template-areas:\n 'label input input'\n '. messages messages';\n}\n\n:host([layout='horizontal-inline']) [internal-host].no-messages {\n grid-template-areas: 'label input input';\n}\n\n:host([layout='horizontal']) slot[name='label'] {\n align-self: start;\n}\n\n:host([layout='horizontal']) ::slotted(label) {\n align-self: start !important;\n}\n"],"mappings":""}
@@ -1,64 +1,63 @@
1
- import { tagSelector as e } from "../../internal/utils/dom.js";
2
- import { associateAriaDescribedBy as t, associateAriaLabel as n, associateControlGroup as r, attachInternals as i } from "../../internal/utils/a11y.js";
3
- import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
4
- import { useStyles as o } from "../../internal/styles/index.js";
5
- import { inputQuery as s, setupControlGroupStates as c, setupControlStatusStates as l } from "../utils/states.js";
6
- import { setupControlLayoutStates as u } from "../utils/layout.js";
7
- import d from "./control-group.js";
8
- import { LitElement as f, html as p } from "lit";
9
- import { property as m } from "lit/decorators/property.js";
1
+ import { associateAriaDescribedBy as e, associateAriaLabel as t, associateControlGroup as n, attachInternals as r } from "../../internal/utils/a11y.js";
2
+ import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
3
+ import { useStyles as a } from "../../internal/styles/index.js";
4
+ import { inputQuery as o, setupControlGroupStates as s, setupControlStatusStates as c } from "../utils/states.js";
5
+ import { setupControlLayoutStates as l } from "../utils/layout.js";
6
+ import u from "./control-group.js";
7
+ import { LitElement as d, html as f } from "lit";
8
+ import { property as p } from "lit/decorators/property.js";
10
9
  //#region src/forms/control-group/control-group.ts
11
- var h = class extends f {
10
+ var m = class extends d {
12
11
  get label() {
13
12
  return this.querySelector?.("label");
14
13
  }
15
14
  get inputs() {
16
- return this.querySelectorAll ? Array.from(this.querySelectorAll(s)) : [];
15
+ return this.querySelectorAll ? Array.from(this.querySelectorAll(o)) : [];
17
16
  }
18
17
  get #e() {
19
- return this.querySelectorAll ? Array.from(this.querySelectorAll(e("nve-control-message"))) : [];
18
+ return this.querySelectorAll ? Array.from(this.querySelectorAll("nve-control-message")) : [];
20
19
  }
21
20
  #t = [];
22
21
  static {
23
- this.styles = o([d]);
22
+ this.styles = a([u]);
24
23
  }
25
24
  static {
26
25
  this.metadata = {
27
26
  tag: "nve-control-group",
28
- version: "0.0.7"
27
+ version: "0.0.8"
29
28
  };
30
29
  }
31
30
  render() {
32
- return p`<div internal-host class="${this.#e.length ? "" : "no-messages"} ${this.label ? "" : "no-label"}"><slot name="label"></slot><slot class="input-slot"></slot><slot name="messages"></slot></div>`;
31
+ return f`<div internal-host class="${this.#e.length ? "" : "no-messages"} ${this.label ? "" : "no-label"}"><slot name="label"></slot><slot class="input-slot"></slot><slot name="messages"></slot></div>`;
33
32
  }
34
33
  connectedCallback() {
35
- super.connectedCallback(), i(this), this._internals.role = "group";
34
+ super.connectedCallback(), r(this), this._internals.role = "group";
36
35
  }
37
36
  firstUpdated(e) {
38
37
  super.firstUpdated(e), this.#t = [
39
- c(this),
40
- u(this),
41
- ...l(this, this.#e)
38
+ s(this),
39
+ l(this),
40
+ ...c(this, this.#e)
42
41
  ], this.#n(), this.shadowRoot.addEventListener("slotchange", () => this.#n());
43
42
  }
44
43
  disconnectedCallback() {
45
44
  super.disconnectedCallback(), this.#t.forEach((e) => e.disconnect());
46
45
  }
47
46
  #n() {
48
- this.#r(), n(this.label, this), t(Array.from(this.querySelectorAll(e("nve-control-message"))), this), r(Array.from(this.inputs));
47
+ this.#r(), t(this.label, this), e(Array.from(this.querySelectorAll("nve-control-message")), this), n(Array.from(this.inputs));
49
48
  }
50
49
  #r() {
51
50
  this.label && (this.label.slot = "label");
52
51
  }
53
52
  };
54
- a([m({
53
+ i([p({
55
54
  type: String,
56
55
  reflect: !0
57
- })], h.prototype, "layout", void 0), a([m({
56
+ })], m.prototype, "layout", void 0), i([p({
58
57
  type: String,
59
58
  reflect: !0
60
- })], h.prototype, "prominence", void 0);
59
+ })], m.prototype, "prominence", void 0);
61
60
  //#endregion
62
- export { h as ControlGroup };
61
+ export { m as ControlGroup };
63
62
 
64
63
  //# sourceMappingURL=control-group2.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"control-group2.js","names":["#messages","#observers","#updateAssociations","#assignLabel"],"sources":["../../../src/forms/control-group/control-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 {\n attachInternals,\n useStyles,\n associateAriaLabel,\n associateAriaDescribedBy,\n associateControlGroup,\n tagSelector\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport { setupControlStatusStates, setupControlGroupStates, inputQuery } from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport styles from './control-group.css?inline';\n\n/**\n * @element nve-control-group\n * @description Groups many related form controls under a shared label and validation context for semantically linked inputs.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input elements\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-text-transform\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\nexport class ControlGroup extends LitElement {\n /** Set each slotted control + label + control message layout */\n @property({ type: String, reflect: true }) layout:\n | 'vertical'\n | 'vertical-inline'\n | 'horizontal'\n | 'horizontal-inline';\n\n /** Set the visual prominence of the control group */\n @property({ type: String, reflect: true }) prominence: 'muted';\n\n get label() {\n return this.querySelector?.<HTMLLabelElement>('label');\n }\n\n get inputs() {\n return this.querySelectorAll ? Array.from(this.querySelectorAll<HTMLInputElement>(inputQuery)) : [];\n }\n\n get #messages() {\n return this.querySelectorAll\n ? Array.from(this.querySelectorAll<ControlMessage>(tagSelector('nve-control-message')))\n : [];\n }\n\n #observers: (MutationObserver | ResizeObserver)[] = [];\n\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-control-group',\n version: '0.0.0'\n };\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`\n <div internal-host class=\"${this.#messages.length ? '' : 'no-messages'} ${this.label ? '' : 'no-label'}\">\n <slot name=\"label\"></slot>\n <slot class=\"input-slot\"></slot>\n <slot name=\"messages\"></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'group';\n }\n\n firstUpdated(props: PropertyValues<this>) {\n super.firstUpdated(props);\n this.#observers = [\n setupControlGroupStates(this),\n setupControlLayoutStates(this),\n ...setupControlStatusStates(this, this.#messages)\n ];\n this.#updateAssociations();\n this.shadowRoot!.addEventListener('slotchange', () => this.#updateAssociations());\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#observers.forEach(observer => observer.disconnect());\n }\n\n #updateAssociations() {\n this.#assignLabel();\n associateAriaLabel(this.label as HTMLElement, this);\n associateAriaDescribedBy(\n Array.from(this.querySelectorAll<ControlMessage>(tagSelector('nve-control-message'))),\n this\n );\n associateControlGroup(Array.from(this.inputs));\n }\n\n #assignLabel() {\n if (this.label) {\n this.label.slot = 'label';\n }\n }\n}\n"],"mappings":";;;;;;;;;;AAiCA,IAAa,IAAb,cAAkC,EAAW;CAW3C,IAAI,QAAQ;AACV,SAAO,KAAK,gBAAkC,QAAQ;;CAGxD,IAAI,SAAS;AACX,SAAO,KAAK,mBAAmB,MAAM,KAAK,KAAK,iBAAmC,EAAW,CAAC,GAAG,EAAE;;CAGrG,KAAA,IAAgB;AACd,SAAO,KAAK,mBACR,MAAM,KAAK,KAAK,iBAAiC,EAAY,sBAAsB,CAAC,CAAC,GACrF,EAAE;;CAGR,KAAoD,EAAE;;gBAEtC,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAKD,SAAS;AACP,SAAO,CAAI,6BACmB,MAAA,EAAe,SAAS,KAAK,cAAc,GAAG,KAAK,QAAQ,KAAK,WAAW;;CAQ3G,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO;;CAGzB,aAAa,GAA6B;AAQxC,EAPA,MAAM,aAAa,EAAM,EACzB,MAAA,IAAkB;GAChB,EAAwB,KAAK;GAC7B,EAAyB,KAAK;GAC9B,GAAG,EAAyB,MAAM,MAAA,EAAKA;GACxC,EACD,MAAA,GAA0B,EAC1B,KAAK,WAAY,iBAAiB,oBAAoB,MAAA,GAA0B,CAAC;;CAGnF,uBAAuB;AAErB,EADA,MAAM,sBAAsB,EAC5B,MAAA,EAAgB,SAAQ,MAAY,EAAS,YAAY,CAAC;;CAG5D,KAAsB;AAOpB,EANA,MAAA,GAAmB,EACnB,EAAmB,KAAK,OAAsB,KAAK,EACnD,EACE,MAAM,KAAK,KAAK,iBAAiC,EAAY,sBAAsB,CAAC,CAAC,EACrF,KACD,EACD,EAAsB,MAAM,KAAK,KAAK,OAAO,CAAC;;CAGhD,KAAe;AACb,EAAI,KAAK,UACP,KAAK,MAAM,OAAO;;;GA/ErB,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAOzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA"}
1
+ {"version":3,"file":"control-group2.js","names":["#messages","#observers","#updateAssociations","#assignLabel"],"sources":["../../../src/forms/control-group/control-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 {\n attachInternals,\n useStyles,\n associateAriaLabel,\n associateAriaDescribedBy,\n associateControlGroup\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport { setupControlStatusStates, setupControlGroupStates, inputQuery } from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport styles from './control-group.css?inline';\n\n/**\n * @element nve-control-group\n * @description Groups many related form controls under a shared label and validation context for semantically linked inputs.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input elements\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-text-transform\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\nexport class ControlGroup extends LitElement {\n /** Set each slotted control + label + control message layout */\n @property({ type: String, reflect: true }) layout:\n | 'vertical'\n | 'vertical-inline'\n | 'horizontal'\n | 'horizontal-inline';\n\n /** Set the visual prominence of the control group */\n @property({ type: String, reflect: true }) prominence: 'muted';\n\n get label() {\n return this.querySelector?.<HTMLLabelElement>('label');\n }\n\n get inputs() {\n return this.querySelectorAll ? Array.from(this.querySelectorAll<HTMLInputElement>(inputQuery)) : [];\n }\n\n get #messages() {\n return this.querySelectorAll ? Array.from(this.querySelectorAll<ControlMessage>('nve-control-message')) : [];\n }\n\n #observers: (MutationObserver | ResizeObserver)[] = [];\n\n static styles = useStyles([styles]);\n\n static readonly metadata = {\n tag: 'nve-control-group',\n version: '0.0.0'\n };\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`\n <div internal-host class=\"${this.#messages.length ? '' : 'no-messages'} ${this.label ? '' : 'no-label'}\">\n <slot name=\"label\"></slot>\n <slot class=\"input-slot\"></slot>\n <slot name=\"messages\"></slot>\n </div>\n `;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'group';\n }\n\n firstUpdated(props: PropertyValues<this>) {\n super.firstUpdated(props);\n this.#observers = [\n setupControlGroupStates(this),\n setupControlLayoutStates(this),\n ...setupControlStatusStates(this, this.#messages)\n ];\n this.#updateAssociations();\n this.shadowRoot!.addEventListener('slotchange', () => this.#updateAssociations());\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#observers.forEach(observer => observer.disconnect());\n }\n\n #updateAssociations() {\n this.#assignLabel();\n associateAriaLabel(this.label as HTMLElement, this);\n associateAriaDescribedBy(Array.from(this.querySelectorAll<ControlMessage>('nve-control-message')), this);\n associateControlGroup(Array.from(this.inputs));\n }\n\n #assignLabel() {\n if (this.label) {\n this.label.slot = 'label';\n }\n }\n}\n"],"mappings":";;;;;;;;;AAgCA,IAAa,IAAb,cAAkC,EAAW;CAW3C,IAAI,QAAQ;AACV,SAAO,KAAK,gBAAkC,QAAQ;;CAGxD,IAAI,SAAS;AACX,SAAO,KAAK,mBAAmB,MAAM,KAAK,KAAK,iBAAmC,EAAW,CAAC,GAAG,EAAE;;CAGrG,KAAA,IAAgB;AACd,SAAO,KAAK,mBAAmB,MAAM,KAAK,KAAK,iBAAiC,sBAAsB,CAAC,GAAG,EAAE;;CAG9G,KAAoD,EAAE;;gBAEtC,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAKD,SAAS;AACP,SAAO,CAAI,6BACmB,MAAA,EAAe,SAAS,KAAK,cAAc,GAAG,KAAK,QAAQ,KAAK,WAAW;;CAQ3G,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO;;CAGzB,aAAa,GAA6B;AAQxC,EAPA,MAAM,aAAa,EAAM,EACzB,MAAA,IAAkB;GAChB,EAAwB,KAAK;GAC7B,EAAyB,KAAK;GAC9B,GAAG,EAAyB,MAAM,MAAA,EAAKA;GACxC,EACD,MAAA,GAA0B,EAC1B,KAAK,WAAY,iBAAiB,oBAAoB,MAAA,GAA0B,CAAC;;CAGnF,uBAAuB;AAErB,EADA,MAAM,sBAAsB,EAC5B,MAAA,EAAgB,SAAQ,MAAY,EAAS,YAAY,CAAC;;CAG5D,KAAsB;AAIpB,EAHA,MAAA,GAAmB,EACnB,EAAmB,KAAK,OAAsB,KAAK,EACnD,EAAyB,MAAM,KAAK,KAAK,iBAAiC,sBAAsB,CAAC,EAAE,KAAK,EACxG,EAAsB,MAAM,KAAK,KAAK,OAAO,CAAC;;CAGhD,KAAe;AACb,EAAI,KAAK,UACP,KAAK,MAAM,OAAO;;;GA1ErB,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAOzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA"}
@@ -23,7 +23,7 @@ var l = {
23
23
  static {
24
24
  this.metadata = {
25
25
  tag: "nve-control-message",
26
- version: "0.0.7"
26
+ version: "0.0.8"
27
27
  };
28
28
  }
29
29
  static {
@@ -1,7 +1,7 @@
1
1
  import { ControlGroup } from '../control-group/control-group.js';
2
2
  import { ControlMessage } from '../control-message/control-message.js';
3
3
  import { Control } from '../control/control.js';
4
- export declare const inputQuery = "input, select, selectmenu, textarea, [nve-control], [nve-control]";
4
+ export declare const inputQuery = "input, select, selectmenu, textarea, [nve-control]";
5
5
  /**
6
6
  * Adds validation states to custom element
7
7
  * :state(valid) form control is in a valid state
@@ -1,29 +1,29 @@
1
- import { getAttributeChanges as e, getAttributeListChanges as t, getElementUpdate as n, matchesElementName as r, tagSelector as i } from "../../internal/utils/dom.js";
2
- import { ControlMessage as a } from "../control-message/control-message2.js";
1
+ import { getAttributeChanges as e, getAttributeListChanges as t, getElementUpdate as n, matchesElementName as r } from "../../internal/utils/dom.js";
2
+ import { ControlMessage as i } from "../control-message/control-message2.js";
3
3
  //#region src/forms/utils/states.ts
4
- var o = "input, select, selectmenu, textarea, [nve-control], [nve-control]";
5
- function s(e, t) {
4
+ var a = "input, select, selectmenu, textarea, [nve-control]";
5
+ function o(e, t) {
6
6
  if (!e.input.form?.noValidate && !e.input.formNoValidate && !e.input.hasAttribute("formnovalidate")) {
7
- p(t);
7
+ f(t);
8
8
  let n = () => {
9
- e.input.validity?.valid && (e._internals.states.delete("invalid"), e._internals.states.add("valid"), e.status = null), h(e, t);
9
+ e.input.validity?.valid && (e._internals.states.delete("invalid"), e._internals.states.add("valid"), e.status = null), m(e, t);
10
10
  }, r = () => {
11
- e.status = null, e._internals.states.delete("valid"), e._internals.states.delete("invalid"), p(t);
11
+ e.status = null, e._internals.states.delete("valid"), e._internals.states.delete("invalid"), f(t);
12
12
  };
13
13
  e.input.addEventListener("blur", () => {
14
14
  e.input.checkValidity(), n();
15
15
  }), e.input.addEventListener("input", () => {
16
16
  n();
17
17
  }), e.input.addEventListener("invalid", () => {
18
- t.find((e) => e.error) && (p(t), m(e, t)), e.status = "error", e._internals.states.delete("valid"), e._internals.states.add("invalid");
18
+ t.find((e) => e.error) && (f(t), p(e, t)), e.status = "error", e._internals.states.delete("valid"), e._internals.states.add("invalid");
19
19
  }), e.addEventListener("reset", () => r()), e.input.form?.addEventListener("reset", () => r());
20
20
  }
21
21
  e.shadowRoot.addEventListener("slotchange", () => {
22
- let t = Array.from(e.querySelectorAll(i(a.metadata.tag)));
22
+ let t = Array.from(e.querySelectorAll(i.metadata.tag));
23
23
  e._internals.states.delete("valid"), e._internals.states.delete("invalid"), t.find((e) => !e.hidden && (e.status === "error" || e.error)) ? e._internals.states.add("invalid") : e._internals.states.add("valid");
24
24
  });
25
25
  }
26
- function c(e) {
26
+ function s(e) {
27
27
  let t = [], r = e._internals.states;
28
28
  return e.input.checked ? r.add("checked") : r.delete("checked"), e.input.indeterminate ? r.add("indeterminate") : r.delete("indeterminate"), e.input.addEventListener("focus", () => e._internals.states.add("focus")), e.input.addEventListener("input", () => e._internals.states.add("dirty")), e.input.addEventListener("blur", () => {
29
29
  e._internals.states.add("touched"), e._internals.states.delete("focus");
@@ -33,36 +33,36 @@ function c(e) {
33
33
  e._internals.states.delete("touched"), e._internals.states.delete("dirty"), e._internals.states.delete("error"), e._internals.states.delete("success"), e.requestUpdate();
34
34
  }), t.push(n(e.input, "readonly", (e) => e === "" || e ? r.add("readonly") : r.delete("readonly")), n(e.input, "checked", () => e.input.checked ? r.add("checked") : r.delete("checked")), n(e.input, "disabled", (e) => e === "" || e ? r.add("disabled") : r.delete("disabled")), n(e.input, "indeterminate", () => e.input.indeterminate ? r.add("indeterminate") : r.delete("indeterminate"))), t;
35
35
  }
36
- function l(t) {
37
- return u(t), e(t, "disabled", () => u(t));
36
+ function c(t) {
37
+ return l(t), e(t, "disabled", () => l(t));
38
38
  }
39
- function u(e) {
39
+ function l(e) {
40
40
  Array.from(e.inputs).find((e) => e.disabled) ? e._internals.states.add("disabled") : e._internals.states.delete("disabled");
41
41
  }
42
- function d(e, n) {
43
- f(e, n.find((e) => !e.hidden));
44
- let o = [];
45
- return o.push(t(e, ["hidden", "status"], (t) => {
42
+ function u(e, n) {
43
+ d(e, n.find((e) => !e.hidden));
44
+ let a = [];
45
+ return a.push(t(e, ["hidden", "status"], (t) => {
46
46
  let n = t.target;
47
- r(n, a) && f(e, n);
47
+ r(n, i) && d(e, n);
48
48
  })), e.shadowRoot.addEventListener("slotchange", () => {
49
- let t = Array.from(e.querySelectorAll(i(a.metadata.tag))).find((e) => e.status && !e.hidden);
49
+ let t = Array.from(e.querySelectorAll(i.metadata.tag)).find((e) => e.status && !e.hidden);
50
50
  e._internals.states.delete("error"), e._internals.states.delete("success"), t && e._internals.states.add(t.status);
51
- }), o;
51
+ }), a;
52
52
  }
53
- function f(e, t) {
53
+ function d(e, t) {
54
54
  e._internals.states.delete("error"), e._internals.states.delete("success"), t?.status?.length && !t?.hidden && e._internals.states.add(t.status);
55
55
  }
56
- function p(e) {
56
+ function f(e) {
57
57
  e.filter((e) => e.hasAttribute("error")).forEach((e) => e.setAttribute("hidden", ""));
58
58
  }
59
- function m(e, t) {
59
+ function p(e, t) {
60
60
  t.find((t) => t.error && e.input.validity[t.error])?.removeAttribute("hidden");
61
61
  }
62
- function h(e, t) {
62
+ function m(e, t) {
63
63
  t.find((e) => e.error) && e.input.validity.valid && t.filter((t) => t.error && !e.input.validity[t.error]).forEach((e) => e.setAttribute("hidden", ""));
64
64
  }
65
65
  //#endregion
66
- export { o as inputQuery, l as setupControlGroupStates, c as setupControlStates, d as setupControlStatusStates, s as setupControlValidationStates };
66
+ export { a as inputQuery, c as setupControlGroupStates, s as setupControlStates, u as setupControlStatusStates, o as setupControlValidationStates };
67
67
 
68
68
  //# sourceMappingURL=states.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"states.js","names":[],"sources":["../../../src/forms/utils/states.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n getAttributeChanges,\n getAttributeListChanges,\n getElementUpdate,\n matchesElementName,\n tagSelector\n} from '@nvidia-elements/core/internal';\nimport type { ControlGroup } from '../control-group/control-group.js';\nimport { ControlMessage } from '../control-message/control-message.js';\nimport type { Control } from '../control/control.js';\n\nexport const inputQuery = 'input, select, selectmenu, textarea, [nve-control], [nve-control]';\n\n/**\n * Adds validation states to custom element\n * :state(valid) form control is in a valid state\n * :state(invalid) form control is in a invalid state\n */\nexport function setupControlValidationStates(control: Control, messages: ControlMessage[]) {\n if (\n !control.input.form?.noValidate &&\n !control.input.formNoValidate &&\n !control.input.hasAttribute('formnovalidate')\n ) {\n hideAllValidationMessages(messages);\n\n /**\n * updateValidityState() logic triggered by input blur() or input() change events\n */\n const updateValidityState = () => {\n if (control.input.validity?.valid) {\n control._internals.states.delete('invalid');\n control._internals.states.add('valid');\n control.status = null!;\n }\n\n hideInactiveValidationMessages(control, messages);\n };\n\n const resetValidityState = () => {\n control.status = null!;\n control._internals.states.delete('valid');\n control._internals.states.delete('invalid');\n hideAllValidationMessages(messages);\n };\n\n control.input.addEventListener('blur', () => {\n control.input.checkValidity();\n updateValidityState();\n });\n\n control.input.addEventListener('input', () => {\n updateValidityState();\n });\n\n control.input.addEventListener('invalid', () => {\n if (messages.find(m => m.error)) {\n hideAllValidationMessages(messages);\n showActiveValidationMessages(control, messages);\n }\n\n control.status = 'error';\n control._internals.states.delete('valid');\n control._internals.states.add('invalid');\n });\n\n control.addEventListener('reset', () => resetValidityState());\n control.input.form?.addEventListener('reset', () => resetValidityState());\n }\n\n control.shadowRoot!.addEventListener('slotchange', () => {\n const messages = Array.from(control.querySelectorAll<ControlMessage>(tagSelector(ControlMessage.metadata.tag)));\n control._internals.states.delete('valid');\n control._internals.states.delete('invalid');\n if (messages.find(m => !m.hidden && (m.status === 'error' || m.error))) {\n control._internals.states.add('invalid');\n } else {\n control._internals.states.add('valid');\n }\n });\n}\n\n/**\n * Adds control interaction states to custom element\n * :state(checked) form control is in a checked state\n * :state(disabled) form control is in a disabled state\n * :state(readonly) form control is in a readonly state\n * :state(touched) form control received focus and then blurred\n * :state(dirty) user modified the form control\n */\nexport function setupControlStates(control: Control) {\n const observers: MutationObserver[] = [];\n const states = control._internals.states;\n control.input.checked ? states.add('checked') : states.delete('checked');\n control.input.indeterminate ? states.add('indeterminate') : states.delete('indeterminate');\n control.input.addEventListener('focus', () => control._internals.states.add('focus'));\n control.input.addEventListener('input', () => control._internals.states.add('dirty'));\n control.input.addEventListener('blur', () => {\n control._internals.states.add('touched');\n control._internals.states.delete('focus');\n });\n\n control.input.getRootNode().addEventListener('change', (e: Event) => {\n if ((e.target as HTMLInputElement).name === control.input?.name) {\n control.input.checked ? states.add('checked') : states.delete('checked');\n }\n });\n\n control.input.form?.addEventListener('reset', () => {\n control._internals.states.delete('touched');\n control._internals.states.delete('dirty');\n control._internals.states.delete('error');\n control._internals.states.delete('success');\n control.requestUpdate();\n });\n\n observers.push(\n getElementUpdate(control.input, 'readonly', value =>\n (value === '' ? true : value) ? states.add('readonly') : states.delete('readonly')\n ),\n getElementUpdate(control.input, 'checked', () =>\n control.input.checked ? states.add('checked') : states.delete('checked')\n ),\n getElementUpdate(control.input, 'disabled', value =>\n (value === '' ? true : value) ? states.add('disabled') : states.delete('disabled')\n ),\n getElementUpdate(control.input, 'indeterminate', () =>\n control.input.indeterminate ? states.add('indeterminate') : states.delete('indeterminate')\n )\n );\n return observers;\n}\n\n/**\n * Adds control group interaction states to custom element\n * :state(disabled) any form control within group is in a disabled state\n */\nexport function setupControlGroupStates(controlGroup: ControlGroup) {\n toggleControlGroupDisabledState(controlGroup);\n return getAttributeChanges(controlGroup, 'disabled', () => toggleControlGroupDisabledState(controlGroup));\n}\n\nexport function toggleControlGroupDisabledState(controlGroup: ControlGroup) {\n if (Array.from(controlGroup.inputs).find(i => i.disabled)) {\n controlGroup._internals.states.add('disabled');\n } else {\n controlGroup._internals.states.delete('disabled');\n }\n}\n\n/**\n * Adds control status states to custom element\n * :state(error) form control is in a error state\n * :state(success) form control is in a success state\n */\nexport function setupControlStatusStates(control: Control | ControlGroup, messages: ControlMessage[]) {\n updateControlStatusState(control, messages.find(m => !m.hidden)!);\n const observers: MutationObserver[] = [];\n observers.push(\n getAttributeListChanges(control, ['hidden', 'status'], mutation => {\n const target = mutation.target as ControlMessage;\n if (matchesElementName(target, ControlMessage)) {\n updateControlStatusState(control, target);\n }\n })\n );\n\n control.shadowRoot!.addEventListener('slotchange', () => {\n const messages = Array.from(control.querySelectorAll<ControlMessage>(tagSelector(ControlMessage.metadata.tag)));\n const message = messages.find(m => m.status && !m.hidden);\n control._internals.states.delete('error');\n control._internals.states.delete('success');\n if (message) {\n control._internals.states.add(message.status!);\n }\n });\n\n return observers;\n}\n\nexport function updateControlStatusState(control: Control | ControlGroup, message: ControlMessage) {\n control._internals.states.delete('error');\n control._internals.states.delete('success');\n\n if (message?.status?.length && !message?.hidden) {\n control._internals.states.add(message.status);\n }\n}\n\nexport function showNonValidationMessages(messages: ControlMessage[]) {\n messages.filter(m => !m.hasAttribute('error')).forEach(m => m.removeAttribute('hidden'));\n}\n\nexport function hideAllValidationMessages(messages: ControlMessage[]) {\n messages.filter(m => m.hasAttribute('error')).forEach(m => m.setAttribute('hidden', ''));\n}\n\nexport function showActiveValidationMessages(control: Control, messages: ControlMessage[]) {\n messages.find(m => m.error && control.input.validity[m.error])?.removeAttribute('hidden');\n}\n\nexport function hideInactiveValidationMessages(control: Control, messages: ControlMessage[]) {\n if (messages.find(m => m.error) && control.input.validity.valid) {\n messages.filter(m => m.error && !control.input.validity[m.error!]).forEach(m => m.setAttribute('hidden', ''));\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"states.js","names":[],"sources":["../../../src/forms/utils/states.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n getAttributeChanges,\n getAttributeListChanges,\n getElementUpdate,\n matchesElementName\n} from '@nvidia-elements/core/internal';\nimport type { ControlGroup } from '../control-group/control-group.js';\nimport { ControlMessage } from '../control-message/control-message.js';\nimport type { Control } from '../control/control.js';\n\nexport const inputQuery = 'input, select, selectmenu, textarea, [nve-control]';\n\n/**\n * Adds validation states to custom element\n * :state(valid) form control is in a valid state\n * :state(invalid) form control is in a invalid state\n */\nexport function setupControlValidationStates(control: Control, messages: ControlMessage[]) {\n if (\n !control.input.form?.noValidate &&\n !control.input.formNoValidate &&\n !control.input.hasAttribute('formnovalidate')\n ) {\n hideAllValidationMessages(messages);\n\n /**\n * updateValidityState() logic triggered by input blur() or input() change events\n */\n const updateValidityState = () => {\n if (control.input.validity?.valid) {\n control._internals.states.delete('invalid');\n control._internals.states.add('valid');\n control.status = null!;\n }\n\n hideInactiveValidationMessages(control, messages);\n };\n\n const resetValidityState = () => {\n control.status = null!;\n control._internals.states.delete('valid');\n control._internals.states.delete('invalid');\n hideAllValidationMessages(messages);\n };\n\n control.input.addEventListener('blur', () => {\n control.input.checkValidity();\n updateValidityState();\n });\n\n control.input.addEventListener('input', () => {\n updateValidityState();\n });\n\n control.input.addEventListener('invalid', () => {\n if (messages.find(m => m.error)) {\n hideAllValidationMessages(messages);\n showActiveValidationMessages(control, messages);\n }\n\n control.status = 'error';\n control._internals.states.delete('valid');\n control._internals.states.add('invalid');\n });\n\n control.addEventListener('reset', () => resetValidityState());\n control.input.form?.addEventListener('reset', () => resetValidityState());\n }\n\n control.shadowRoot!.addEventListener('slotchange', () => {\n const messages = Array.from(control.querySelectorAll<ControlMessage>(ControlMessage.metadata.tag));\n control._internals.states.delete('valid');\n control._internals.states.delete('invalid');\n if (messages.find(m => !m.hidden && (m.status === 'error' || m.error))) {\n control._internals.states.add('invalid');\n } else {\n control._internals.states.add('valid');\n }\n });\n}\n\n/**\n * Adds control interaction states to custom element\n * :state(checked) form control is in a checked state\n * :state(disabled) form control is in a disabled state\n * :state(readonly) form control is in a readonly state\n * :state(touched) form control received focus and then blurred\n * :state(dirty) user modified the form control\n */\nexport function setupControlStates(control: Control) {\n const observers: MutationObserver[] = [];\n const states = control._internals.states;\n control.input.checked ? states.add('checked') : states.delete('checked');\n control.input.indeterminate ? states.add('indeterminate') : states.delete('indeterminate');\n control.input.addEventListener('focus', () => control._internals.states.add('focus'));\n control.input.addEventListener('input', () => control._internals.states.add('dirty'));\n control.input.addEventListener('blur', () => {\n control._internals.states.add('touched');\n control._internals.states.delete('focus');\n });\n\n control.input.getRootNode().addEventListener('change', (e: Event) => {\n if ((e.target as HTMLInputElement).name === control.input?.name) {\n control.input.checked ? states.add('checked') : states.delete('checked');\n }\n });\n\n control.input.form?.addEventListener('reset', () => {\n control._internals.states.delete('touched');\n control._internals.states.delete('dirty');\n control._internals.states.delete('error');\n control._internals.states.delete('success');\n control.requestUpdate();\n });\n\n observers.push(\n getElementUpdate(control.input, 'readonly', value =>\n (value === '' ? true : value) ? states.add('readonly') : states.delete('readonly')\n ),\n getElementUpdate(control.input, 'checked', () =>\n control.input.checked ? states.add('checked') : states.delete('checked')\n ),\n getElementUpdate(control.input, 'disabled', value =>\n (value === '' ? true : value) ? states.add('disabled') : states.delete('disabled')\n ),\n getElementUpdate(control.input, 'indeterminate', () =>\n control.input.indeterminate ? states.add('indeterminate') : states.delete('indeterminate')\n )\n );\n return observers;\n}\n\n/**\n * Adds control group interaction states to custom element\n * :state(disabled) any form control within group is in a disabled state\n */\nexport function setupControlGroupStates(controlGroup: ControlGroup) {\n toggleControlGroupDisabledState(controlGroup);\n return getAttributeChanges(controlGroup, 'disabled', () => toggleControlGroupDisabledState(controlGroup));\n}\n\nexport function toggleControlGroupDisabledState(controlGroup: ControlGroup) {\n if (Array.from(controlGroup.inputs).find(i => i.disabled)) {\n controlGroup._internals.states.add('disabled');\n } else {\n controlGroup._internals.states.delete('disabled');\n }\n}\n\n/**\n * Adds control status states to custom element\n * :state(error) form control is in a error state\n * :state(success) form control is in a success state\n */\nexport function setupControlStatusStates(control: Control | ControlGroup, messages: ControlMessage[]) {\n updateControlStatusState(control, messages.find(m => !m.hidden)!);\n const observers: MutationObserver[] = [];\n observers.push(\n getAttributeListChanges(control, ['hidden', 'status'], mutation => {\n const target = mutation.target as ControlMessage;\n if (matchesElementName(target, ControlMessage)) {\n updateControlStatusState(control, target);\n }\n })\n );\n\n control.shadowRoot!.addEventListener('slotchange', () => {\n const messages = Array.from(control.querySelectorAll<ControlMessage>(ControlMessage.metadata.tag));\n const message = messages.find(m => m.status && !m.hidden);\n control._internals.states.delete('error');\n control._internals.states.delete('success');\n if (message) {\n control._internals.states.add(message.status!);\n }\n });\n\n return observers;\n}\n\nexport function updateControlStatusState(control: Control | ControlGroup, message: ControlMessage) {\n control._internals.states.delete('error');\n control._internals.states.delete('success');\n\n if (message?.status?.length && !message?.hidden) {\n control._internals.states.add(message.status);\n }\n}\n\nexport function showNonValidationMessages(messages: ControlMessage[]) {\n messages.filter(m => !m.hasAttribute('error')).forEach(m => m.removeAttribute('hidden'));\n}\n\nexport function hideAllValidationMessages(messages: ControlMessage[]) {\n messages.filter(m => m.hasAttribute('error')).forEach(m => m.setAttribute('hidden', ''));\n}\n\nexport function showActiveValidationMessages(control: Control, messages: ControlMessage[]) {\n messages.find(m => m.error && control.input.validity[m.error])?.removeAttribute('hidden');\n}\n\nexport function hideInactiveValidationMessages(control: Control, messages: ControlMessage[]) {\n if (messages.find(m => m.error) && control.input.validity.valid) {\n messages.filter(m => m.error && !control.input.validity[m.error!]).forEach(m => m.setAttribute('hidden', ''));\n }\n}\n"],"mappings":"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"}