@nvidia-elements/core 0.1.3 → 0.1.4

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 (106) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/accordion/accordion2.js +4 -4
  3. package/dist/alert/alert-group2.js +1 -1
  4. package/dist/alert/alert2.js +1 -1
  5. package/dist/avatar/avatar-group2.js +1 -1
  6. package/dist/avatar/avatar2.js +1 -1
  7. package/dist/badge/badge2.js +1 -1
  8. package/dist/breadcrumb/breadcrumb2.js +1 -1
  9. package/dist/button/button.examples.js.map +1 -1
  10. package/dist/button/button.examples.json +2 -2
  11. package/dist/button/button2.js +1 -1
  12. package/dist/button-group/button-group2.js +1 -1
  13. package/dist/card/card2.js +4 -4
  14. package/dist/chat-message/chat-message2.js +1 -1
  15. package/dist/checkbox/checkbox-group2.js +1 -1
  16. package/dist/checkbox/checkbox2.js +1 -1
  17. package/dist/color/color2.js +1 -1
  18. package/dist/combobox/combobox2.js +1 -1
  19. package/dist/copy-button/copy-button2.js +1 -1
  20. package/dist/data.snippets.json +45 -45
  21. package/dist/date/date2.js +1 -1
  22. package/dist/datetime/datetime2.js +1 -1
  23. package/dist/dialog/dialog-footer2.js +1 -1
  24. package/dist/dialog/dialog-header2.js +1 -1
  25. package/dist/dialog/dialog2.js +1 -1
  26. package/dist/divider/divider2.js +1 -1
  27. package/dist/dot/dot2.js +1 -1
  28. package/dist/drawer/drawer-content2.js +1 -1
  29. package/dist/drawer/drawer-footer2.js +1 -1
  30. package/dist/drawer/drawer-header2.js +1 -1
  31. package/dist/drawer/drawer2.js +1 -1
  32. package/dist/dropdown/dropdown-footer2.js +1 -1
  33. package/dist/dropdown/dropdown-header2.js +1 -1
  34. package/dist/dropdown/dropdown2.js +1 -1
  35. package/dist/dropdown-group/dropdown-group.js +1 -1
  36. package/dist/dropzone/dropzone2.js +1 -1
  37. package/dist/file/file2.js +1 -1
  38. package/dist/format-datetime/format-datetime2.js +1 -1
  39. package/dist/format-number/format-number2.js +1 -1
  40. package/dist/format-relative-time/format-relative-time2.js +1 -1
  41. package/dist/forms/control/control2.js +1 -1
  42. package/dist/forms/control-group/control-group2.js +1 -1
  43. package/dist/forms/control-message/control-message2.js +1 -1
  44. package/dist/grid/cell/cell2.js +1 -1
  45. package/dist/grid/column/column2.js +1 -1
  46. package/dist/grid/footer/footer2.js +1 -1
  47. package/dist/grid/grid2.js +1 -1
  48. package/dist/grid/header/header2.js +1 -1
  49. package/dist/grid/placeholder/placeholder2.js +1 -1
  50. package/dist/grid/row/row2.js +1 -1
  51. package/dist/icon/icon2.js +2 -2
  52. package/dist/icon-button/icon-button2.js +1 -1
  53. package/dist/index.js +1 -1
  54. package/dist/input/input-group2.js +1 -1
  55. package/dist/input/input2.js +1 -1
  56. package/dist/internal/services/global.service.js +1 -1
  57. package/dist/logo/logo2.js +1 -1
  58. package/dist/menu/menu-item2.js +1 -1
  59. package/dist/menu/menu2.js +1 -1
  60. package/dist/month/month2.js +1 -1
  61. package/dist/notification/notification-group2.js +1 -1
  62. package/dist/notification/notification2.js +1 -1
  63. package/dist/page/page-panel/page-panel-content2.js +1 -1
  64. package/dist/page/page-panel/page-panel-footer2.js +1 -1
  65. package/dist/page/page-panel/page-panel-header2.js +1 -1
  66. package/dist/page/page-panel/page-panel2.js +1 -1
  67. package/dist/page/page2.js +1 -1
  68. package/dist/page-header/page-header2.js +1 -1
  69. package/dist/page-loader/page-loader2.js +1 -1
  70. package/dist/pagination/pagination2.js +1 -1
  71. package/dist/panel/panel2.js +4 -4
  72. package/dist/password/password2.js +1 -1
  73. package/dist/preferences-input/preferences-input2.js +1 -1
  74. package/dist/progress-bar/progress-bar2.js +1 -1
  75. package/dist/progress-ring/progress-ring2.js +1 -1
  76. package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
  77. package/dist/pulse/pulse2.js +1 -1
  78. package/dist/radio/radio-group2.js +1 -1
  79. package/dist/radio/radio2.js +1 -1
  80. package/dist/range/range2.js +1 -1
  81. package/dist/resize-handle/resize-handle2.js +1 -1
  82. package/dist/search/search2.js +1 -1
  83. package/dist/select/select2.js +1 -1
  84. package/dist/skeleton/skeleton2.js +1 -1
  85. package/dist/sort-button/sort-button2.js +1 -1
  86. package/dist/sparkline/sparkline2.js +1 -1
  87. package/dist/star-rating/star-rating2.js +1 -1
  88. package/dist/steps/steps2.js +2 -2
  89. package/dist/switch/switch-group2.js +1 -1
  90. package/dist/switch/switch2.js +1 -1
  91. package/dist/tabs/tabs-group2.js +1 -1
  92. package/dist/tabs/tabs2.js +2 -2
  93. package/dist/tag/tag2.js +1 -1
  94. package/dist/textarea/textarea2.js +1 -1
  95. package/dist/time/time2.js +1 -1
  96. package/dist/toast/toast2.js +1 -1
  97. package/dist/toggletip/toggletip-footer2.js +1 -1
  98. package/dist/toggletip/toggletip-header2.js +1 -1
  99. package/dist/toggletip/toggletip2.js +1 -1
  100. package/dist/toolbar/toolbar2.js +1 -1
  101. package/dist/tooltip/tooltip2.js +1 -1
  102. package/dist/tree/tree-node2.js +1 -1
  103. package/dist/tree/tree2.js +1 -1
  104. package/dist/week/week2.js +1 -1
  105. package/package.json +2 -4
  106. package/postinstall.mjs +0 -113
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ ## <small>0.1.4 (2026-05-21)</small>
2
+
3
+ * fix(cli): binary version support ([39106f1](https://github.com/NVIDIA/elements/commit/39106f1))
4
+ * fix(cli): handle command args ([0f526e0](https://github.com/NVIDIA/elements/commit/0f526e0))
5
+ * fix(core): remove postinstall ([4818481](https://github.com/NVIDIA/elements/commit/4818481))
6
+ * chore(ci): add labeler and stale workflows ([31730e8](https://github.com/NVIDIA/elements/commit/31730e8))
7
+ * chore(ci): cleanup unused references and improve ci logging ([9280f22](https://github.com/NVIDIA/elements/commit/9280f22))
8
+ * chore(docs): add agent tooling guidelines ([5eb909d](https://github.com/NVIDIA/elements/commit/5eb909d))
9
+ * chore(docs): metadata structure fixes ([efb89f7](https://github.com/NVIDIA/elements/commit/efb89f7))
10
+ * chore(release): @nvidia-elements/cli-v0.2.1 [skip ci] ([a4e3dad](https://github.com/NVIDIA/elements/commit/a4e3dad))
11
+ * chore(starters): add agents files ([64eac99](https://github.com/NVIDIA/elements/commit/64eac99))
12
+
1
13
  ## <small>0.1.3 (2026-05-19)</small>
2
14
 
3
15
  * fix(core): correct read only property ([b9e7588](https://github.com/NVIDIA/elements/commit/b9e7588))
@@ -28,7 +28,7 @@ var b = class extends g {
28
28
  static {
29
29
  this.metadata = {
30
30
  tag: "nve-accordion-header",
31
- version: "0.1.3"
31
+ version: "0.1.4"
32
32
  };
33
33
  }
34
34
  render() {
@@ -46,7 +46,7 @@ var x = class extends g {
46
46
  static {
47
47
  this.metadata = {
48
48
  tag: "nve-accordion-content",
49
- version: "0.1.3"
49
+ version: "0.1.4"
50
50
  };
51
51
  }
52
52
  render() {
@@ -62,7 +62,7 @@ var x = class extends g {
62
62
  static {
63
63
  this.metadata = {
64
64
  tag: "nve-accordion",
65
- version: "0.1.3",
65
+ version: "0.1.4",
66
66
  children: [
67
67
  b.metadata.tag,
68
68
  x.metadata.tag,
@@ -123,7 +123,7 @@ var C = class extends g {
123
123
  static {
124
124
  this.metadata = {
125
125
  tag: "nve-accordion-group",
126
- version: "0.1.3",
126
+ version: "0.1.4",
127
127
  children: [S.metadata.tag]
128
128
  };
129
129
  }
@@ -19,7 +19,7 @@ var f = class extends c {
19
19
  static {
20
20
  this.metadata = {
21
21
  tag: "nve-alert-group",
22
- version: "0.1.3",
22
+ version: "0.1.4",
23
23
  children: [o.metadata.tag]
24
24
  };
25
25
  }
@@ -28,7 +28,7 @@ var v = class extends m {
28
28
  static {
29
29
  this.metadata = {
30
30
  tag: "nve-alert",
31
- version: "0.1.3"
31
+ version: "0.1.4"
32
32
  };
33
33
  }
34
34
  static {
@@ -10,7 +10,7 @@ var a = class extends r {
10
10
  static {
11
11
  this.metadata = {
12
12
  tag: "nve-avatar-group",
13
- version: "0.1.3"
13
+ version: "0.1.4"
14
14
  };
15
15
  }
16
16
  render() {
@@ -11,7 +11,7 @@ var s = class extends i {
11
11
  static {
12
12
  this.metadata = {
13
13
  tag: "nve-avatar",
14
- version: "0.1.3"
14
+ version: "0.1.4"
15
15
  };
16
16
  }
17
17
  render() {
@@ -25,7 +25,7 @@ var g = class extends f {
25
25
  static {
26
26
  this.metadata = {
27
27
  tag: "nve-badge",
28
- version: "0.1.3"
28
+ version: "0.1.4"
29
29
  };
30
30
  }
31
31
  static {
@@ -24,7 +24,7 @@ var m = class extends u {
24
24
  static {
25
25
  this.metadata = {
26
26
  tag: "nve-breadcrumb",
27
- version: "0.1.3"
27
+ version: "0.1.4"
28
28
  };
29
29
  }
30
30
  static {
@@ -1 +1 @@
1
- {"version":3,"file":"button.examples.js","names":[],"sources":["../../src/button/button.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/toggletip/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n title: 'Elements/Button',\n component: 'nve-button'\n};\n\ndeclare const __ELEMENTS_REPO_BASE_URL__: string;\n\n/**\n * @summary Basic button component with standard appearance and behavior for primary user actions.\n */\nexport const Default = {\n render: () => html`<nve-button>standard</nve-button>`\n};\n\n/**\n * @summary Button interaction states including hover, focus, pressed, selected, and disabled.\n * @tags test-case\n */\nexport const GroupStates = {\n render: () => html`\n <div nve-layout=\"row gap:xs\">\n <nve-button>standard</nve-button>\n <nve-button selected>selected</nve-button>\n <nve-button pressed>pressed</nve-button>\n <nve-button disabled>disabled</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Interaction states that communicate button hierarchy, importance, and availability to users.\n */\nexport const Interaction = {\n render: () => html`\n <div nve-layout=\"row gap:xs\">\n <nve-button>standard</nve-button>\n <nve-button interaction=\"emphasis\">emphasis</nve-button>\n <nve-button interaction=\"destructive\">destructive</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Container style variants for buttons to accommodate different visual weight and context.\n */\nexport const Container = {\n render: () => html`\n <div nve-layout=\"row gap:xs align:vertical-center\">\n <nve-button container=\"inline\">inline</nve-button>\n <nve-button container=\"flat\">flat</nve-button>\n <nve-button>default</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Button size variants to accommodate layout densities and touch target requirements.\n */\nexport const Size = {\n render: () => html`\n <div nve-layout=\"row gap:xs\">\n <nve-button size=\"sm\">small button</nve-button>\n <nve-button>standard button</nve-button>\n <nve-button size=\"lg\">large button</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Pressed state for toggle buttons marking active/selected state with clear visual feedback.\n */\nexport const Pressed = {\n render: () => html`\n <div nve-layout=\"row gap:xs align:vertical-center\">\n <nve-button pressed container=\"inline\">pressed inline</nve-button>\n <nve-button pressed container=\"flat\">pressed flat</nve-button>\n <nve-button pressed>pressed</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Button selection states to accommodate different visual weight and context.\n */\nexport const Selected = {\n render: () => html`\n <div nve-layout=\"row gap:xs align:vertical-center\">\n <nve-button selected container=\"inline\">selected inline</nve-button>\n <nve-button selected container=\"flat\">selected flat</nve-button>\n <nve-button selected>selected</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Button disabled states to accommodate different visual weight and context.\n */\nexport const Disabled = {\n render: () => html`\n <div nve-layout=\"row gap:xs align:vertical-center\">\n <nve-button disabled container=\"inline\">disabled inline</nve-button>\n <nve-button disabled container=\"flat\">disabled flat</nve-button>\n <nve-button disabled>disabled</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.\n */\nexport const InvokerCommand = {\n render: () => html`\n <img id=\"logo\" src=\"${__ELEMENTS_REPO_BASE_URL__}/favicon.svg\" alt=\"logo\" style=\"width: 100px; height: 100px;\" />\n <section>\n <nve-button commandfor=\"logo\" command=\"--rotate-left\">Rotate left</nve-button>\n <nve-button commandfor=\"logo\" command=\"--rotate-right\">Rotate right</nve-button>\n <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n </section>\n <nve-toggletip id=\"popover\">popover</nve-toggletip>\n <script type=\"module\">\n const logo = document.getElementById('logo');\n logo.addEventListener('command', (event) => {\n if (event.command == '--rotate-left') {\n logo.style.rotate = '-90deg';\n } else if (event.command == '--rotate-right') {\n logo.style.rotate = '90deg';\n }\n });\n </script>\n `\n};\n\n/**\n * @summary Button with icons positioned before or after text to enhance visual clarity and user understanding.\n */\nexport const WithIcon = {\n render: () => html`\n <nve-button><nve-icon name=\"person\"></nve-icon> button</nve-button>\n <nve-button>button <nve-icon name=\"person\"></nve-icon></nve-button>\n `\n};\n\n/**\n * @summary Flat button style for secondary actions with minimal visual weight, maintaining clear interaction states.\n */\nexport const Flat = {\n render: () => html`\n <div nve-layout=\"row gap:xs\">\n <nve-button container=\"flat\">standard</nve-button>\n <nve-button container=\"flat\" interaction=\"emphasis\">emphasis</nve-button>\n <nve-button container=\"flat\" interaction=\"destructive\">destructive</nve-button>\n <nve-button container=\"flat\" disabled>disabled</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Inline button style for text-like actions that blend with content while maintaining button functionality.\n */\nexport const Inline = {\n render: () => html`\n <div nve-layout=\"row gap:xs\">\n <nve-button container=\"inline\">standard</nve-button>\n <nve-button container=\"inline\" interaction=\"emphasis\">emphasis</nve-button>\n <nve-button container=\"inline\" interaction=\"destructive\">destructive</nve-button>\n <nve-button container=\"inline\" disabled>disabled</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Button styling applied to links for consistent visual treatment while maintaining semantic navigation behavior.\n */\nexport const Link = {\n render: () => html`\n <div nve-layout=\"row gap:xs\"> \n <nve-button><a href=\"#\">standard</a></nve-button>\n <nve-button interaction=\"emphasis\"><a href=\"#\">emphasis</a></nve-button>\n <nve-button interaction=\"destructive\"><a href=\"#\">destructive</a></nve-button>\n <nve-button disabled><a href=\"#\">disabled</a></nve-button>\n </div>\n `\n}\n\n/**\n * @summary Flat button selection state for choice groups where one option is active, providing clear selection feedback.\n */\nexport const SelectedFlat = {\n render: () => html`\n <div nve-layout=\"row gap:xs\">\n <nve-button selected container=\"flat\">selected</nve-button>\n <nve-button container=\"flat\">unselected</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Flat button styling for navigation links, providing subtle visual treatment for secondary navigation actions.\n */\nexport const LinkFlat = {\n render: () => html`\n <div nve-layout=\"row gap:xs\">\n <nve-button container=\"flat\"><a href=\"#\">flat</a></nve-button>\n <nve-button container=\"flat\" interaction=\"emphasis\"><a href=\"#\">flat emphasis</a></nve-button>\n <nve-button container=\"flat\" interaction=\"destructive\"><a href=\"#\">flat destructive</a></nve-button>\n </div>\n `\n}\n\n/**\n * @summary Text wrapping behavior in constrained widths, where content adapts to available space.\n * @tags test-case\n */\nexport const NoWrap = {\n render: () => html`\n <nve-button style=\"--width: 100px\">item item item</nve-button>\n <nve-button style=\"--width: 100px\">\n <span>item</span><span>item</span><span>item</span>\n </nve-button>\n `\n}\n\n/**\n * @summary Form submission button with proper form integration and data handling for user input processing.\n */\nexport const FormSubmit = {\n render: () => html`\n<form id=\"test-form\">\n <nve-button name=\"test-button\" value=\"test-value\">submit</nve-button>\n</form>\n<script type=\"module\">\n const form = document.querySelector('#test-form');\n const button = document.querySelector('[name=\"test-button\"]');\n\n button.addEventListener('click', e => console.log(e));\n form.addEventListener('submit', e => {\n e.preventDefault();\n console.log(Object.fromEntries(new FormData(form, e.submitter)));\n });\n</script>\n`\n}\n\n/**\n * @summary Use the form control option for buttons that open custom controls such as dropdowns, filter menus, or pickers within a form layout. This pattern keeps the UI cohesive and helps users recognize the button as part of the form.\n */\nexport const FormControl = {\n render: () => html`\n<div nve-layout=\"row gap:xs\" style=\"max-width: 400px\">\n <nve-search>\n <input type=\"search\" placeholder=\"search\" aria-label=\"search\" />\n </nve-search>\n <nve-button nve-control>filter option <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n</div>\n `\n}\n\n/**\n * @summary Button integrated with popover API to trigger contextual overlays, providing extra information or controls.\n * @tags test-case\n */\nexport const Popover = {\n render: () => html`\n <div popover id=\"popover-example\">popover</div>\n <nve-button popovertarget=\"popover-example\">toggle</nve-button>\n `\n}\n\n/**\n * @summary Override button appearance with custom CSS properties for brand-specific designs while maintaining functionality.\n * @tags test-case\n */\nexport const BackgroundOverride = {\n render: () => html`\n <style>\n nve-button.custom {\n --color: var(--nve-sys-text-black-color);\n --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, var(--nve-ref-color-yellow-amber-900) 60%);\n\n &:hover {\n --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, color-mix(in oklab, var(--nve-ref-color-yellow-amber-900) 100%, #000 4%) 60%);\n }\n }\n </style>\n\n <nve-button class=\"custom\">Create Account</nve-button>\n <nve-button>Create Account</nve-button>\n `\n};\n\n/**\n * @summary Button styled as a link by slotting an anchor tag inside. Use when an action needs button visual treatment while maintaining semantic link navigation and accessibility.\n */\nexport const ValidLinkButton = {\n render: () => html`\n <nve-button><a href=\"#\">default</a></nve-button>\n `\n}\n\n/**\n * @summary Do not wrap buttons in anchor tags.\n * @tags anti-pattern\n */\nexport const InvalidLinkButton = {\n render: () => html`\n <a href=\"#\"><nve-button>default</nve-button></a>\n `\n}\n\n/**\n * @summary Use a progress ring within a button to communicate that an action is processing and prevent repeated submissions. Limit this pattern to short, indeterminate actions (about five seconds or less); for longer or determinate tasks, use a progress bar or ring outside the button.\n */\nexport const ProgressDisclosure = {\n render: () => html`\n <nve-button>\n <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n Submitting\n </nve-button>\n `\n};\n\n/**\n * @summary Use standard interaction styling to keep buttons readable on contrasting backgrounds in light and dark themes. This pattern verifies the static button colors that deliver the intended contrast for each theme.\n * @tags pattern\n */\nexport const ContrastColoredBackgrounds = {\n render: () => html`\n<div nve-layout=\"column gap:lg\" style=\"width: 280px\">\n <nve-toolbar status=\"accent\">\n <div nve-text=\"label medium sm\">10 Selected</div>\n <nve-button slot=\"suffix\">Edit</nve-button>\n </nve-toolbar>\n\n <nve-alert-group status=\"danger\">\n <nve-alert> Error Detected <nve-button slot=\"actions\" container=\"flat\">Review</nve-button> </nve-alert>\n </nve-alert-group>\n\n <nve-card style=\"width: 280px\">\n <nve-card-content \n style=\"width: 100%;\n height: 100%;\n aspect-ratio: 16/9;\n object-fit: cover;\n background: repeating-conic-gradient(var(--nve-sys-layer-overlay-background) 0% 25%, transparent 0% 50%) 50% / 40px 40px;\n background-position: center;\n border-style: hidden;\"> </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"row gap:xs\">\n <nve-button container=\"flat\" style=\"margin-left: auto\">Cancel</nve-button>\n <nve-button>action</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n</div>\n `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
1
+ {"version":3,"file":"button.examples.js","names":[],"sources":["../../src/button/button.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/toggletip/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n title: 'Elements/Button',\n component: 'nve-button'\n};\n\n/**\n * @summary Basic button component with standard appearance and behavior for primary user actions.\n */\nexport const Default = {\n render: () => html`<nve-button>standard</nve-button>`\n};\n\n/**\n * @summary Button interaction states including hover, focus, pressed, selected, and disabled.\n * @tags test-case\n */\nexport const GroupStates = {\n render: () => html`\n <div nve-layout=\"row gap:xs\">\n <nve-button>standard</nve-button>\n <nve-button selected>selected</nve-button>\n <nve-button pressed>pressed</nve-button>\n <nve-button disabled>disabled</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Interaction states that communicate button hierarchy, importance, and availability to users.\n */\nexport const Interaction = {\n render: () => html`\n <div nve-layout=\"row gap:xs\">\n <nve-button>standard</nve-button>\n <nve-button interaction=\"emphasis\">emphasis</nve-button>\n <nve-button interaction=\"destructive\">destructive</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Container style variants for buttons to accommodate different visual weight and context.\n */\nexport const Container = {\n render: () => html`\n <div nve-layout=\"row gap:xs align:vertical-center\">\n <nve-button container=\"inline\">inline</nve-button>\n <nve-button container=\"flat\">flat</nve-button>\n <nve-button>default</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Button size variants to accommodate layout densities and touch target requirements.\n */\nexport const Size = {\n render: () => html`\n <div nve-layout=\"row gap:xs\">\n <nve-button size=\"sm\">small button</nve-button>\n <nve-button>standard button</nve-button>\n <nve-button size=\"lg\">large button</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Pressed state for toggle buttons marking active/selected state with clear visual feedback.\n */\nexport const Pressed = {\n render: () => html`\n <div nve-layout=\"row gap:xs align:vertical-center\">\n <nve-button pressed container=\"inline\">pressed inline</nve-button>\n <nve-button pressed container=\"flat\">pressed flat</nve-button>\n <nve-button pressed>pressed</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Button selection states to accommodate different visual weight and context.\n */\nexport const Selected = {\n render: () => html`\n <div nve-layout=\"row gap:xs align:vertical-center\">\n <nve-button selected container=\"inline\">selected inline</nve-button>\n <nve-button selected container=\"flat\">selected flat</nve-button>\n <nve-button selected>selected</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Button disabled states to accommodate different visual weight and context.\n */\nexport const Disabled = {\n render: () => html`\n <div nve-layout=\"row gap:xs align:vertical-center\">\n <nve-button disabled container=\"inline\">disabled inline</nve-button>\n <nve-button disabled container=\"flat\">disabled flat</nve-button>\n <nve-button disabled>disabled</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.\n */\nexport const InvokerCommand = {\n render: () => html`\n <nve-icon\n id=\"rotation-target\"\n name=\"sparkles\"\n aria-label=\"sparkles icon\"\n style=\"inline-size: 100px; block-size: 100px;\"\n ></nve-icon>\n <section>\n <nve-button commandfor=\"rotation-target\" command=\"--rotate-left\">Rotate left</nve-button>\n <nve-button commandfor=\"rotation-target\" command=\"--rotate-right\">Rotate right</nve-button>\n <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n </section>\n <nve-toggletip id=\"popover\">popover</nve-toggletip>\n <script type=\"module\">\n const target = document.getElementById('rotation-target');\n target.addEventListener('command', (event) => {\n if (event.command === '--rotate-left') {\n target.style.rotate = '-90deg';\n } else if (event.command === '--rotate-right') {\n target.style.rotate = '90deg';\n }\n });\n </script>\n `\n};\n\n/**\n * @summary Button with icons positioned before or after text to enhance visual clarity and user understanding.\n */\nexport const WithIcon = {\n render: () => html`\n <nve-button><nve-icon name=\"person\"></nve-icon> button</nve-button>\n <nve-button>button <nve-icon name=\"person\"></nve-icon></nve-button>\n `\n};\n\n/**\n * @summary Flat button style for secondary actions with minimal visual weight, maintaining clear interaction states.\n */\nexport const Flat = {\n render: () => html`\n <div nve-layout=\"row gap:xs\">\n <nve-button container=\"flat\">standard</nve-button>\n <nve-button container=\"flat\" interaction=\"emphasis\">emphasis</nve-button>\n <nve-button container=\"flat\" interaction=\"destructive\">destructive</nve-button>\n <nve-button container=\"flat\" disabled>disabled</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Inline button style for text-like actions that blend with content while maintaining button functionality.\n */\nexport const Inline = {\n render: () => html`\n <div nve-layout=\"row gap:xs\">\n <nve-button container=\"inline\">standard</nve-button>\n <nve-button container=\"inline\" interaction=\"emphasis\">emphasis</nve-button>\n <nve-button container=\"inline\" interaction=\"destructive\">destructive</nve-button>\n <nve-button container=\"inline\" disabled>disabled</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Button styling applied to links for consistent visual treatment while maintaining semantic navigation behavior.\n */\nexport const Link = {\n render: () => html`\n <div nve-layout=\"row gap:xs\"> \n <nve-button><a href=\"#\">standard</a></nve-button>\n <nve-button interaction=\"emphasis\"><a href=\"#\">emphasis</a></nve-button>\n <nve-button interaction=\"destructive\"><a href=\"#\">destructive</a></nve-button>\n <nve-button disabled><a href=\"#\">disabled</a></nve-button>\n </div>\n `\n}\n\n/**\n * @summary Flat button selection state for choice groups where one option is active, providing clear selection feedback.\n */\nexport const SelectedFlat = {\n render: () => html`\n <div nve-layout=\"row gap:xs\">\n <nve-button selected container=\"flat\">selected</nve-button>\n <nve-button container=\"flat\">unselected</nve-button>\n </div>\n `\n}\n\n/**\n * @summary Flat button styling for navigation links, providing subtle visual treatment for secondary navigation actions.\n */\nexport const LinkFlat = {\n render: () => html`\n <div nve-layout=\"row gap:xs\">\n <nve-button container=\"flat\"><a href=\"#\">flat</a></nve-button>\n <nve-button container=\"flat\" interaction=\"emphasis\"><a href=\"#\">flat emphasis</a></nve-button>\n <nve-button container=\"flat\" interaction=\"destructive\"><a href=\"#\">flat destructive</a></nve-button>\n </div>\n `\n}\n\n/**\n * @summary Text wrapping behavior in constrained widths, where content adapts to available space.\n * @tags test-case\n */\nexport const NoWrap = {\n render: () => html`\n <nve-button style=\"--width: 100px\">item item item</nve-button>\n <nve-button style=\"--width: 100px\">\n <span>item</span><span>item</span><span>item</span>\n </nve-button>\n `\n}\n\n/**\n * @summary Form submission button with proper form integration and data handling for user input processing.\n */\nexport const FormSubmit = {\n render: () => html`\n<form id=\"test-form\">\n <nve-button name=\"test-button\" value=\"test-value\">submit</nve-button>\n</form>\n<script type=\"module\">\n const form = document.querySelector('#test-form');\n const button = document.querySelector('[name=\"test-button\"]');\n\n button.addEventListener('click', e => console.log(e));\n form.addEventListener('submit', e => {\n e.preventDefault();\n console.log(Object.fromEntries(new FormData(form, e.submitter)));\n });\n</script>\n`\n}\n\n/**\n * @summary Use the form control option for buttons that open custom controls such as dropdowns, filter menus, or pickers within a form layout. This pattern keeps the UI cohesive and helps users recognize the button as part of the form.\n */\nexport const FormControl = {\n render: () => html`\n<div nve-layout=\"row gap:xs\" style=\"max-width: 400px\">\n <nve-search>\n <input type=\"search\" placeholder=\"search\" aria-label=\"search\" />\n </nve-search>\n <nve-button nve-control>filter option <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n</div>\n `\n}\n\n/**\n * @summary Button integrated with popover API to trigger contextual overlays, providing extra information or controls.\n * @tags test-case\n */\nexport const Popover = {\n render: () => html`\n <div popover id=\"popover-example\">popover</div>\n <nve-button popovertarget=\"popover-example\">toggle</nve-button>\n `\n}\n\n/**\n * @summary Override button appearance with custom CSS properties for brand-specific designs while maintaining functionality.\n * @tags test-case\n */\nexport const BackgroundOverride = {\n render: () => html`\n <style>\n nve-button.custom {\n --color: var(--nve-sys-text-black-color);\n --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, var(--nve-ref-color-yellow-amber-900) 60%);\n\n &:hover {\n --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, color-mix(in oklab, var(--nve-ref-color-yellow-amber-900) 100%, #000 4%) 60%);\n }\n }\n </style>\n\n <nve-button class=\"custom\">Create Account</nve-button>\n <nve-button>Create Account</nve-button>\n `\n};\n\n/**\n * @summary Button styled as a link by slotting an anchor tag inside. Use when an action needs button visual treatment while maintaining semantic link navigation and accessibility.\n */\nexport const ValidLinkButton = {\n render: () => html`\n <nve-button><a href=\"#\">default</a></nve-button>\n `\n}\n\n/**\n * @summary Do not wrap buttons in anchor tags.\n * @tags anti-pattern\n */\nexport const InvalidLinkButton = {\n render: () => html`\n <a href=\"#\"><nve-button>default</nve-button></a>\n `\n}\n\n/**\n * @summary Use a progress ring within a button to communicate that an action is processing and prevent repeated submissions. Limit this pattern to short, indeterminate actions (about five seconds or less); for longer or determinate tasks, use a progress bar or ring outside the button.\n */\nexport const ProgressDisclosure = {\n render: () => html`\n <nve-button>\n <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n Submitting\n </nve-button>\n `\n};\n\n/**\n * @summary Use standard interaction styling to keep buttons readable on contrasting backgrounds in light and dark themes. This pattern verifies the static button colors that deliver the intended contrast for each theme.\n * @tags pattern\n */\nexport const ContrastColoredBackgrounds = {\n render: () => html`\n<div nve-layout=\"column gap:lg\" style=\"width: 280px\">\n <nve-toolbar status=\"accent\">\n <div nve-text=\"label medium sm\">10 Selected</div>\n <nve-button slot=\"suffix\">Edit</nve-button>\n </nve-toolbar>\n\n <nve-alert-group status=\"danger\">\n <nve-alert> Error Detected <nve-button slot=\"actions\" container=\"flat\">Review</nve-button> </nve-alert>\n </nve-alert-group>\n\n <nve-card style=\"width: 280px\">\n <nve-card-content \n style=\"width: 100%;\n height: 100%;\n aspect-ratio: 16/9;\n object-fit: cover;\n background: repeating-conic-gradient(var(--nve-sys-layer-overlay-background) 0% 25%, transparent 0% 50%) 50% / 40px 40px;\n background-position: center;\n border-style: hidden;\"> </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"row gap:xs\">\n <nve-button container=\"flat\" style=\"margin-left: auto\">Cancel</nve-button>\n <nve-button>action</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n</div>\n `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
@@ -79,10 +79,10 @@
79
79
  {
80
80
  "id": "button-invoker-command",
81
81
  "name": "InvokerCommand",
82
- "template": "<img id=\"logo\" src=\"${__ELEMENTS_REPO_BASE_URL__}/favicon.svg\" alt=\"logo\" style=\"width: 100px; height: 100px\" />\n<section>\n <nve-button commandfor=\"logo\" command=\"--rotate-left\">Rotate left</nve-button>\n <nve-button commandfor=\"logo\" command=\"--rotate-right\">Rotate right</nve-button>\n <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n</section>\n<nve-toggletip id=\"popover\">popover</nve-toggletip>\n<script type=\"module\">\n const logo = document.getElementById(\"logo\");\n logo.addEventListener(\"command\", (event) => {\n if (event.command == \"--rotate-left\") {\n logo.style.rotate = \"-90deg\";\n } else if (event.command == \"--rotate-right\") {\n logo.style.rotate = \"90deg\";\n }\n });\n</script>\n",
82
+ "template": "<nve-icon\n id=\"rotation-target\"\n name=\"sparkles\"\n aria-label=\"sparkles icon\"\n style=\"inline-size: 100px; block-size: 100px\"\n></nve-icon>\n<section>\n <nve-button commandfor=\"rotation-target\" command=\"--rotate-left\">Rotate left</nve-button>\n <nve-button commandfor=\"rotation-target\" command=\"--rotate-right\">Rotate right</nve-button>\n <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n</section>\n<nve-toggletip id=\"popover\">popover</nve-toggletip>\n<script type=\"module\">\n const target = document.getElementById(\"rotation-target\");\n target.addEventListener(\"command\", (event) => {\n if (event.command === \"--rotate-left\") {\n target.style.rotate = \"-90deg\";\n } else if (event.command === \"--rotate-right\") {\n target.style.rotate = \"90deg\";\n }\n });\n</script>\n",
83
83
  "summary": "Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.",
84
84
  "description": "",
85
- "composition": false,
85
+ "composition": true,
86
86
  "tags": []
87
87
  },
88
88
  {
@@ -12,7 +12,7 @@ var o = class extends t {
12
12
  static {
13
13
  this.metadata = {
14
14
  tag: "nve-button",
15
- version: "0.1.3"
15
+ version: "0.1.4"
16
16
  };
17
17
  }
18
18
  render() {
@@ -26,7 +26,7 @@ var f = class extends c {
26
26
  static {
27
27
  this.metadata = {
28
28
  tag: "nve-button-group",
29
- version: "0.1.3",
29
+ version: "0.1.4",
30
30
  children: [
31
31
  "nve-button",
32
32
  "nve-icon-button",
@@ -16,7 +16,7 @@ var d = class extends c {
16
16
  static {
17
17
  this.metadata = {
18
18
  tag: "nve-card",
19
- version: "0.1.3"
19
+ version: "0.1.4"
20
20
  };
21
21
  }
22
22
  render() {
@@ -37,7 +37,7 @@ var f = class extends c {
37
37
  static {
38
38
  this.metadata = {
39
39
  tag: "nve-card-header",
40
- version: "0.1.3",
40
+ version: "0.1.4",
41
41
  parents: ["nve-card"]
42
42
  };
43
43
  }
@@ -53,7 +53,7 @@ var p = class extends c {
53
53
  static {
54
54
  this.metadata = {
55
55
  tag: "nve-card-content",
56
- version: "0.1.3",
56
+ version: "0.1.4",
57
57
  parents: ["nve-card"]
58
58
  };
59
59
  }
@@ -72,7 +72,7 @@ var m = class extends c {
72
72
  static {
73
73
  this.metadata = {
74
74
  tag: "nve-card-footer",
75
- version: "0.1.3",
75
+ version: "0.1.4",
76
76
  parents: ["nve-card"]
77
77
  };
78
78
  }
@@ -13,7 +13,7 @@ var l = class extends o {
13
13
  static {
14
14
  this.metadata = {
15
15
  tag: "nve-chat-message",
16
- version: "0.1.3"
16
+ version: "0.1.4"
17
17
  };
18
18
  }
19
19
  render() {
@@ -12,7 +12,7 @@ var o = class extends i {
12
12
  static {
13
13
  this.metadata = {
14
14
  tag: "nve-checkbox-group",
15
- version: "0.1.3",
15
+ version: "0.1.4",
16
16
  children: [
17
17
  "label",
18
18
  "nve-control-message",
@@ -15,7 +15,7 @@ var o = class extends i {
15
15
  static {
16
16
  this.metadata = {
17
17
  tag: "nve-checkbox",
18
- version: "0.1.3",
18
+ version: "0.1.4",
19
19
  children: [
20
20
  "label",
21
21
  "input",
@@ -21,7 +21,7 @@ var f = class extends a {
21
21
  static {
22
22
  this.metadata = {
23
23
  tag: "nve-color",
24
- version: "0.1.3"
24
+ version: "0.1.4"
25
25
  };
26
26
  }
27
27
  static {
@@ -31,7 +31,7 @@ var S = class extends l {
31
31
  static {
32
32
  this.metadata = {
33
33
  tag: "nve-combobox",
34
- version: "0.1.3"
34
+ version: "0.1.4"
35
35
  };
36
36
  }
37
37
  static {
@@ -32,7 +32,7 @@ var p = class extends a {
32
32
  static {
33
33
  this.metadata = {
34
34
  tag: "nve-copy-button",
35
- version: "0.1.3"
35
+ version: "0.1.4"
36
36
  };
37
37
  }
38
38
  static {
@@ -8,24 +8,6 @@
8
8
  "description": "Toolbar with progressive-filter-chip",
9
9
  "body": "<div style=\"width: 100%;\">\n <nve-toolbar container=\"flat\" style=\"width: 100%;\">\n <nve-icon-button readonly icon-name=\"filter\" container=\"flat\" slot=\"prefix\"></nve-icon-button>\n <nve-progressive-filter-chip closable>\n <select aria-label=\"dataset\">\n <option selected>${1:status}</option>\n <option>${2:workload}</option>\n </select>\n <select aria-label=\"condition\">\n <option selected>${3:filter by}</option>\n <option>${4:sort by}</option>\n </select>\n <select multiple aria-label=\"filter\">\n <option selected>${5:progress}</option>\n <option>${6:pending}</option>\n <option>${7:success}</option>\n <option>${8:failed}</option>\n </select>\n </nve-progressive-filter-chip>\n <nve-combobox container=\"flat\" style=\"flex-grow: 1; min-width: 150px;\">\n <input type=\"search\" placeholder=\"${9:Add Filter}\">\n <datalist>\n <option value=\"${10:Status}\"></option>\n <option value=\"${11:Priority}\"></option>\n <option value=\"${12:Date}\"></option>\n <option value=\"${13:Session}\"></option>\n <option value=\"${14:Configuration}\"></option>\n <option value=\"${15:Contains}\"></option>\n </datalist>\n </nve-combobox>\n <nve-icon-button container=\"flat\" aria-label=\"clear filters\" icon-name=\"cancel\" slot=\"suffix\"></nve-icon-button>\n <nve-button slot=\"suffix\">${16:Save Filters}</nve-button>\n </nve-toolbar>\n</div>\n"
10
10
  },
11
- "Steps": {
12
- "srcFile": "steps.snippets.html",
13
- "prefix": [
14
- "steps"
15
- ],
16
- "type": "pattern",
17
- "description": "Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.",
18
- "body": "<nve-steps behavior-select container=\"${1:condensed}\">\n <nve-steps-item status=\"success\">${2:Step 1}</nve-steps-item>\n <nve-steps-item status=\"danger\">${3:Step 2}</nve-steps-item>\n <nve-steps-item selected>${4:Step 3}</nve-steps-item>\n <nve-steps-item status=\"pending\">${5:Step 4}</nve-steps-item>\n <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n$0\n"
19
- },
20
- "vertical-Steps": {
21
- "srcFile": "steps.snippets.html",
22
- "prefix": [
23
- "vertical-steps"
24
- ],
25
- "type": "pattern",
26
- "description": "Steps can be used as the foundation for a side menu by enabling vertical mode.",
27
- "body": "<nve-steps behavior-select vertical container=\"${1:condensed}\">\n <nve-steps-item status=\"success\">${2:Step 1}</nve-steps-item>\n <nve-steps-item status=\"danger\">${3:Step 2}</nve-steps-item>\n <nve-steps-item selected>${4:Step 3}</nve-steps-item>\n <nve-steps-item status=\"pending\">${5:Step 4}</nve-steps-item>\n <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n$0\n"
28
- },
29
11
  "Tabs": {
30
12
  "srcFile": "tabs.snippets.html",
31
13
  "prefix": [
@@ -62,6 +44,24 @@
62
44
  "description": "Tabs group with slot-matched panels controlled by tab item commands.",
63
45
  "body": "<nve-tabs-group id=\"${1:tab-group}\">\n <nve-tabs>\n <nve-tabs-item selected command=\"--toggle\" commandfor=\"${1:tab-group}\" value=\"${2:overview}\">${3:Overview}</nve-tabs-item>\n <nve-tabs-item command=\"--toggle\" commandfor=\"${1:tab-group}\" value=\"${4:details}\">${5:Details}</nve-tabs-item>\n <nve-tabs-item command=\"--toggle\" commandfor=\"${1:tab-group}\" value=\"${6:settings}\">${7:Settings}</nve-tabs-item>\n </nve-tabs>\n <div slot=\"${2:overview}\">${8:Overview content}</div>\n <div slot=\"${4:details}\">${9:Details content}</div>\n <div slot=\"${6:settings}\">${10:Settings content}</div>\n</nve-tabs-group>\n$0\n"
64
46
  },
47
+ "Steps": {
48
+ "srcFile": "steps.snippets.html",
49
+ "prefix": [
50
+ "steps"
51
+ ],
52
+ "type": "pattern",
53
+ "description": "Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.",
54
+ "body": "<nve-steps behavior-select container=\"${1:condensed}\">\n <nve-steps-item status=\"success\">${2:Step 1}</nve-steps-item>\n <nve-steps-item status=\"danger\">${3:Step 2}</nve-steps-item>\n <nve-steps-item selected>${4:Step 3}</nve-steps-item>\n <nve-steps-item status=\"pending\">${5:Step 4}</nve-steps-item>\n <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n$0\n"
55
+ },
56
+ "vertical-Steps": {
57
+ "srcFile": "steps.snippets.html",
58
+ "prefix": [
59
+ "vertical-steps"
60
+ ],
61
+ "type": "pattern",
62
+ "description": "Steps can be used as the foundation for a side menu by enabling vertical mode.",
63
+ "body": "<nve-steps behavior-select vertical container=\"${1:condensed}\">\n <nve-steps-item status=\"success\">${2:Step 1}</nve-steps-item>\n <nve-steps-item status=\"danger\">${3:Step 2}</nve-steps-item>\n <nve-steps-item selected>${4:Step 3}</nve-steps-item>\n <nve-steps-item status=\"pending\">${5:Step 4}</nve-steps-item>\n <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n$0\n"
64
+ },
65
65
  "Search": {
66
66
  "srcFile": "search.snippets.html",
67
67
  "prefix": [
@@ -251,33 +251,6 @@
251
251
  "description": "Simple vertical button group with three icon buttons.",
252
252
  "body": "<nve-button-group orientation=\"vertical\">\n <nve-icon-button icon-name=\"${1:copy}\"></nve-icon-button>\n <nve-icon-button icon-name=\"${2:add-comment}\"></nve-icon-button>\n <nve-icon-button icon-name=\"${3:download}\"></nve-icon-button>\n</nve-button-group>\n"
253
253
  },
254
- "Alert Group": {
255
- "srcFile": "alert.snippets.html",
256
- "prefix": [
257
- "alert-group"
258
- ],
259
- "type": "pattern",
260
- "description": "Alert group with two alerts.",
261
- "body": "<nve-alert-group status=\"${1:accent}\" container=\"${2:flat}\" prominence=\"emphasis\">\n <nve-alert closable>${3:Alert Text}</nve-alert>\n <nve-alert closable>${4:Alert Text}</nve-alert>\n</nve-alert-group>\n$0\n"
262
- },
263
- "Alert with Action": {
264
- "srcFile": "alert.snippets.html",
265
- "prefix": [
266
- "alert-action"
267
- ],
268
- "type": "pattern",
269
- "description": "Alert with action button.",
270
- "body": "<nve-alert-group status=\"${1:accent}\" container=\"${2:flat}\" prominence=\"emphasis\">\n <nve-alert> ${3:Alert Text} <nve-button slot=\"actions\" container=\"flat\">${4:OK!}</nve-button> </nve-alert>\n</nve-alert-group>\n$0\n"
271
- },
272
- "Multiline Alert ": {
273
- "srcFile": "alert.snippets.html",
274
- "prefix": [
275
- "multiline-alert"
276
- ],
277
- "type": "pattern",
278
- "description": "Alert text and preformatted code output.",
279
- "body": "<nve-alert-group status=\"danger\">\n <nve-alert>\n Session Paused:\n <div slot=\"content\" nve-layout=\"column gap:sm align:stretch\">\n <p nve-text=\"body sm\">Failed to verify drives. <a href=\"#\" nve-text=\"link\">Check Status</a></p>\n <nve-divider style=\"--color: var(--nve-sys-text-muted-color)\"></nve-divider>\n <pre nve-text=\"code sm\" style=\"background: transparent !important; margin: 0;\">10:06:01 AM [verify] update /virtual:/verify/\n10:06:11 AM [build] update /virtual:/build/\n10:06:22 AM [error] update /virtual:/error/ - failed to connect to remote\n </pre>\n </div>\n </nve-alert>\n</nve-alert-group>\n$0\n"
280
- },
281
254
  "Accordion": {
282
255
  "srcFile": "accordion.snippets.html",
283
256
  "prefix": [
@@ -304,5 +277,32 @@
304
277
  "type": "pattern",
305
278
  "description": "Accordion group with two accordion children.",
306
279
  "body": "<nve-accordion-group behavior-expand-single container=\"${1:flat}\">\n <nve-accordion>\n <nve-accordion-header>\n <div slot=\"title\">${2:Title}</div>\n </nve-accordion-header>\n\n <nve-accordion-content> ${3:Content} </nve-accordion-content>\n </nve-accordion>\n\n <nve-accordion>\n <nve-accordion-header>\n <div slot=\"title\">${4:Title}</div>\n </nve-accordion-header>\n\n <nve-accordion-content> ${5:Content} </nve-accordion-content>\n </nve-accordion>\n\n <nve-accordion>\n <nve-accordion-header>\n <div slot=\"title\">${6:Title}</div>\n </nve-accordion-header>\n\n <nve-accordion-content> ${7:Content} </nve-accordion-content>\n </nve-accordion>\n</nve-accordion-group>\n$0\n"
280
+ },
281
+ "Alert Group": {
282
+ "srcFile": "alert.snippets.html",
283
+ "prefix": [
284
+ "alert-group"
285
+ ],
286
+ "type": "pattern",
287
+ "description": "Alert group with two alerts.",
288
+ "body": "<nve-alert-group status=\"${1:accent}\" container=\"${2:flat}\" prominence=\"emphasis\">\n <nve-alert closable>${3:Alert Text}</nve-alert>\n <nve-alert closable>${4:Alert Text}</nve-alert>\n</nve-alert-group>\n$0\n"
289
+ },
290
+ "Alert with Action": {
291
+ "srcFile": "alert.snippets.html",
292
+ "prefix": [
293
+ "alert-action"
294
+ ],
295
+ "type": "pattern",
296
+ "description": "Alert with action button.",
297
+ "body": "<nve-alert-group status=\"${1:accent}\" container=\"${2:flat}\" prominence=\"emphasis\">\n <nve-alert> ${3:Alert Text} <nve-button slot=\"actions\" container=\"flat\">${4:OK!}</nve-button> </nve-alert>\n</nve-alert-group>\n$0\n"
298
+ },
299
+ "Multiline Alert ": {
300
+ "srcFile": "alert.snippets.html",
301
+ "prefix": [
302
+ "multiline-alert"
303
+ ],
304
+ "type": "pattern",
305
+ "description": "Alert text and preformatted code output.",
306
+ "body": "<nve-alert-group status=\"danger\">\n <nve-alert>\n Session Paused:\n <div slot=\"content\" nve-layout=\"column gap:sm align:stretch\">\n <p nve-text=\"body sm\">Failed to verify drives. <a href=\"#\" nve-text=\"link\">Check Status</a></p>\n <nve-divider style=\"--color: var(--nve-sys-text-muted-color)\"></nve-divider>\n <pre nve-text=\"code sm\" style=\"background: transparent !important; margin: 0;\">10:06:01 AM [verify] update /virtual:/verify/\n10:06:11 AM [build] update /virtual:/build/\n10:06:22 AM [error] update /virtual:/error/ - failed to connect to remote\n </pre>\n </div>\n </nve-alert>\n</nve-alert-group>\n$0\n"
307
307
  }
308
308
  }
@@ -19,7 +19,7 @@ var l = class extends r {
19
19
  static {
20
20
  this.metadata = {
21
21
  tag: "nve-date",
22
- version: "0.1.3"
22
+ version: "0.1.4"
23
23
  };
24
24
  }
25
25
  static {
@@ -19,7 +19,7 @@ var l = class extends r {
19
19
  static {
20
20
  this.metadata = {
21
21
  tag: "nve-datetime",
22
- version: "0.1.3"
22
+ version: "0.1.4"
23
23
  };
24
24
  }
25
25
  static {
@@ -11,7 +11,7 @@ var o = class extends i {
11
11
  static {
12
12
  this.metadata = {
13
13
  tag: "nve-dialog-footer",
14
- version: "0.1.3",
14
+ version: "0.1.4",
15
15
  parents: ["nve-dialog"]
16
16
  };
17
17
  }
@@ -11,7 +11,7 @@ var o = class extends i {
11
11
  static {
12
12
  this.metadata = {
13
13
  tag: "nve-dialog-header",
14
- version: "0.1.3",
14
+ version: "0.1.4",
15
15
  parents: ["nve-dialog"]
16
16
  };
17
17
  }
@@ -30,7 +30,7 @@ var h = class extends f {
30
30
  static {
31
31
  this.metadata = {
32
32
  tag: "nve-dialog",
33
- version: "0.1.3"
33
+ version: "0.1.4"
34
34
  };
35
35
  }
36
36
  static {
@@ -15,7 +15,7 @@ var s = class extends i {
15
15
  static {
16
16
  this.metadata = {
17
17
  tag: "nve-divider",
18
- version: "0.1.3"
18
+ version: "0.1.4"
19
19
  };
20
20
  }
21
21
  render() {
package/dist/dot/dot2.js CHANGED
@@ -16,7 +16,7 @@ var l = class extends o {
16
16
  static {
17
17
  this.metadata = {
18
18
  tag: "nve-dot",
19
- version: "0.1.3"
19
+ version: "0.1.4"
20
20
  };
21
21
  }
22
22
  render() {
@@ -11,7 +11,7 @@ var o = class extends i {
11
11
  static {
12
12
  this.metadata = {
13
13
  tag: "nve-drawer-content",
14
- version: "0.1.3",
14
+ version: "0.1.4",
15
15
  parents: ["nve-drawer"]
16
16
  };
17
17
  }
@@ -11,7 +11,7 @@ var o = class extends i {
11
11
  static {
12
12
  this.metadata = {
13
13
  tag: "nve-drawer-footer",
14
- version: "0.1.3",
14
+ version: "0.1.4",
15
15
  parents: ["nve-drawer"]
16
16
  };
17
17
  }
@@ -11,7 +11,7 @@ var o = class extends i {
11
11
  static {
12
12
  this.metadata = {
13
13
  tag: "nve-drawer-header",
14
- version: "0.1.3",
14
+ version: "0.1.4",
15
15
  parents: ["nve-drawer"]
16
16
  };
17
17
  }
@@ -30,7 +30,7 @@ var p = class extends u {
30
30
  static {
31
31
  this.metadata = {
32
32
  tag: "nve-drawer",
33
- version: "0.1.3"
33
+ version: "0.1.4"
34
34
  };
35
35
  }
36
36
  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.1.3",
14
+ version: "0.1.4",
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.1.3",
14
+ version: "0.1.4",
15
15
  parents: ["nve-dropdown"]
16
16
  };
17
17
  }
@@ -21,7 +21,7 @@ var p = class extends l {
21
21
  static {
22
22
  this.metadata = {
23
23
  tag: "nve-dropdown",
24
- version: "0.1.3"
24
+ version: "0.1.4"
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.1.3",
17
+ version: "0.1.4",
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.1.3",
23
+ version: "0.1.4",
24
24
  validators: [l, c],
25
25
  valueSchema: {
26
26
  type: "array",
@@ -11,7 +11,7 @@ var a = class extends n {
11
11
  static {
12
12
  this.metadata = {
13
13
  tag: "nve-file",
14
- version: "0.1.3"
14
+ version: "0.1.4"
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.1.3"
16
+ version: "0.1.4"
17
17
  };
18
18
  }
19
19
  get #e() {