@nvidia-elements/core 2.11.2 → 2.12.1

package/dist/search/search.examples.json

@@ -32,7 +32,7 @@
     {
       "id": "search-vertical",
       "name": "Vertical",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-search>\n    <label>label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n  <nve-search>\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n  <nve-search>\n    <label>success</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-search>\n  <nve-search>\n    <label>error</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-search>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-search>\n    <label>label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-search>\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-search>\n    <label>success</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-search>\n\n  <nve-search>\n    <label>error</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-search>\n</div>\n",
       "summary": "Search inputs with vertical layout including validation states for disabled, success, and error.",
       "description": "",
       "composition": false,
@@ -43,7 +43,7 @@
     {
       "id": "search-horizontal",
       "name": "Horizontal",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-search layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n  <nve-search layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n  <nve-search layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-search>\n  <nve-search layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-search>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-search layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-search layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-search layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-search>\n\n  <nve-search layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-search>\n</div>\n",
       "summary": "Search inputs with horizontal layout showing validation states for inline forms and compact layouts.",
       "description": "",
       "composition": false,

package/dist/search/search2.js

@@ -22,7 +22,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-search",
-			version: "2.11.2"
+			version: "2.12.1"
 		};
 	}
 	static {

package/dist/select/select.examples.json

@@ -34,7 +34,7 @@
     {
       "id": "select-flat",
       "name": "Flat",
-      "template": "<div nve-layout=\"column gap:xl align:stretch\">\n  <nve-select container=\"flat\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select container=\"flat\">\n    <label>multiple</label>\n    <select multiple>\n      <option selected value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select container=\"flat\">\n    <label>multiple + size</label>\n    <select multiple size=\"5\">\n      <option selected value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:xl align:stretch\">\n  <nve-select container=\"flat\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-select container=\"flat\">\n    <label>multiple</label>\n    <select multiple>\n      <option selected value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-select container=\"flat\">\n    <label>multiple + size</label>\n    <select multiple size=\"5\">\n      <option selected value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
       "summary": "Flat container style for single and multi select, providing a minimal visual treatment.",
       "description": "",
       "composition": false,
@@ -43,7 +43,7 @@
     {
       "id": "select-vertical",
       "name": "Vertical",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select>\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select>\n    <label>disabled</label>\n    <select disabled>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select>\n    <label>success</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-select>\n  <nve-select>\n    <label>error</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-select>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select>\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-select>\n    <label>disabled</label>\n    <select disabled>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-select>\n    <label>success</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-select>\n\n  <nve-select>\n    <label>error</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-select>\n</div>\n",
       "summary": "Vertical layout showcasing states: default, disabled, success, and error.",
       "description": "",
       "composition": false,
@@ -54,7 +54,7 @@
     {
       "id": "select-horizontal",
       "name": "Horizontal",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select layout=\"horizontal\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select layout=\"horizontal\">\n    <label>disabled</label>\n    <select disabled>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select layout=\"horizontal\">\n    <label>success</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-select>\n  <nve-select layout=\"horizontal\">\n    <label>error</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-select>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select layout=\"horizontal\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-select layout=\"horizontal\">\n    <label>disabled</label>\n    <select disabled>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-select layout=\"horizontal\">\n    <label>success</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-select>\n\n  <nve-select layout=\"horizontal\">\n    <label>error</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-select>\n</div>\n",
       "summary": "Horizontal layout showcasing states: default, disabled, success, and error.",
       "description": "",
       "composition": false,
@@ -92,7 +92,7 @@
     {
       "id": "select-size",
       "name": "Size",
-      "template": "<div nve-layout=\"column gap:xl\">\n  <nve-select>\n    <label>label</label>\n    <select size=\"5\">\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\" selected>Option 2</option>\n      <option value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select>\n    <label>label</label>\n    <select size=\"3\">\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\" selected>Option 2</option>\n      <option value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:xl\">\n  <nve-select>\n    <label>label</label>\n    <select size=\"5\">\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\" selected>Option 2</option>\n      <option value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-select>\n    <label>label</label>\n    <select size=\"3\">\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\" selected>Option 2</option>\n      <option value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
       "summary": "Size attribute controls the number of visible options without scrolling.",
       "description": "",
       "composition": false,
@@ -101,7 +101,7 @@
     {
       "id": "select-height",
       "name": "Height",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select style=\"--scroll-height: 150px\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n      <option value=\"6\">Option 6</option>\n      <option value=\"7\">Option 7</option>\n      <option value=\"8\">Option 8</option>\n      <option value=\"9\">Option 9</option>\n      <option value=\"10\">Option 10</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select>\n    <label>label</label>\n    <select>\n      <option>Option 1</option>\n      <option>Option 2</option>\n      <option>Option 3</option>\n      <option>Option 4</option>\n      <option>Option 5</option>\n      <option>Option 6</option>\n      <option>Option 7</option>\n      <option>Option 8</option>\n      <option>Option 9</option>\n      <option>Option 10</option>\n      <option>Option 11</option>\n      <option>Option 12</option>\n      <option>Option 13</option>\n      <option>Option 14</option>\n      <option>Option 15</option>\n      <option>Option 16</option>\n      <option>Option 17</option>\n      <option>Option 18</option>\n      <option>Option 19</option>\n      <option>Option 20</option>\n      <option>Option 21</option>\n      <option>Option 22</option>\n      <option>Option 23</option>\n      <option>Option 24</option>\n      <option>Option 25</option>\n      <option>Option 26</option>\n      <option>Option 27</option>\n      <option>Option 28</option>\n      <option>Option 29</option>\n      <option>Option 30</option>\n      <option>Option 31</option>\n      <option>Option 32</option>\n      <option>Option 33</option>\n      <option>Option 34</option>\n      <option>Option 35</option>\n      <option>Option 36</option>\n      <option>Option 37</option>\n      <option>Option 38</option>\n      <option>Option 39</option>\n      <option>Option 40</option>\n      <option>Option 41</option>\n      <option>Option 42</option>\n      <option>Option 43</option>\n      <option>Option 44</option>\n      <option>Option 45</option>\n      <option>Option 46</option>\n      <option>Option 47</option>\n      <option>Option 48</option>\n      <option>Option 49</option>\n      <option>Option 50</option>\n      <option>Option 51</option>\n      <option>Option 52</option>\n      <option>Option 53</option>\n      <option>Option 54</option>\n      <option>Option 55</option>\n      <option>Option 56</option>\n      <option>Option 57</option>\n      <option>Option 58</option>\n      <option>Option 59</option>\n      <option>Option 60</option>\n      <option>Option 61</option>\n      <option>Option 62</option>\n      <option>Option 63</option>\n      <option>Option 64</option>\n      <option>Option 65</option>\n      <option>Option 66</option>\n      <option>Option 67</option>\n      <option>Option 68</option>\n      <option>Option 69</option>\n      <option>Option 70</option>\n      <option>Option 71</option>\n      <option>Option 72</option>\n      <option>Option 73</option>\n      <option>Option 74</option>\n      <option>Option 75</option>\n      <option>Option 76</option>\n      <option>Option 77</option>\n      <option>Option 78</option>\n      <option>Option 79</option>\n      <option>Option 80</option>\n      <option>Option 81</option>\n      <option>Option 82</option>\n      <option>Option 83</option>\n      <option>Option 84</option>\n      <option>Option 85</option>\n      <option>Option 86</option>\n      <option>Option 87</option>\n      <option>Option 88</option>\n      <option>Option 89</option>\n      <option>Option 90</option>\n      <option>Option 91</option>\n      <option>Option 92</option>\n      <option>Option 93</option>\n      <option>Option 94</option>\n      <option>Option 95</option>\n      <option>Option 96</option>\n      <option>Option 97</option>\n      <option>Option 98</option>\n      <option>Option 99</option>\n      <option>Option 100</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select style=\"--scroll-height: 150px\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n      <option value=\"6\">Option 6</option>\n      <option value=\"7\">Option 7</option>\n      <option value=\"8\">Option 8</option>\n      <option value=\"9\">Option 9</option>\n      <option value=\"10\">Option 10</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-select>\n    <label>label</label>\n    <select>\n      <option>Option 1</option>\n      <option>Option 2</option>\n      <option>Option 3</option>\n      <option>Option 4</option>\n      <option>Option 5</option>\n      <option>Option 6</option>\n      <option>Option 7</option>\n      <option>Option 8</option>\n      <option>Option 9</option>\n      <option>Option 10</option>\n      <option>Option 11</option>\n      <option>Option 12</option>\n      <option>Option 13</option>\n      <option>Option 14</option>\n      <option>Option 15</option>\n      <option>Option 16</option>\n      <option>Option 17</option>\n      <option>Option 18</option>\n      <option>Option 19</option>\n      <option>Option 20</option>\n      <option>Option 21</option>\n      <option>Option 22</option>\n      <option>Option 23</option>\n      <option>Option 24</option>\n      <option>Option 25</option>\n      <option>Option 26</option>\n      <option>Option 27</option>\n      <option>Option 28</option>\n      <option>Option 29</option>\n      <option>Option 30</option>\n      <option>Option 31</option>\n      <option>Option 32</option>\n      <option>Option 33</option>\n      <option>Option 34</option>\n      <option>Option 35</option>\n      <option>Option 36</option>\n      <option>Option 37</option>\n      <option>Option 38</option>\n      <option>Option 39</option>\n      <option>Option 40</option>\n      <option>Option 41</option>\n      <option>Option 42</option>\n      <option>Option 43</option>\n      <option>Option 44</option>\n      <option>Option 45</option>\n      <option>Option 46</option>\n      <option>Option 47</option>\n      <option>Option 48</option>\n      <option>Option 49</option>\n      <option>Option 50</option>\n      <option>Option 51</option>\n      <option>Option 52</option>\n      <option>Option 53</option>\n      <option>Option 54</option>\n      <option>Option 55</option>\n      <option>Option 56</option>\n      <option>Option 57</option>\n      <option>Option 58</option>\n      <option>Option 59</option>\n      <option>Option 60</option>\n      <option>Option 61</option>\n      <option>Option 62</option>\n      <option>Option 63</option>\n      <option>Option 64</option>\n      <option>Option 65</option>\n      <option>Option 66</option>\n      <option>Option 67</option>\n      <option>Option 68</option>\n      <option>Option 69</option>\n      <option>Option 70</option>\n      <option>Option 71</option>\n      <option>Option 72</option>\n      <option>Option 73</option>\n      <option>Option 74</option>\n      <option>Option 75</option>\n      <option>Option 76</option>\n      <option>Option 77</option>\n      <option>Option 78</option>\n      <option>Option 79</option>\n      <option>Option 80</option>\n      <option>Option 81</option>\n      <option>Option 82</option>\n      <option>Option 83</option>\n      <option>Option 84</option>\n      <option>Option 85</option>\n      <option>Option 86</option>\n      <option>Option 87</option>\n      <option>Option 88</option>\n      <option>Option 89</option>\n      <option>Option 90</option>\n      <option>Option 91</option>\n      <option>Option 92</option>\n      <option>Option 93</option>\n      <option>Option 94</option>\n      <option>Option 95</option>\n      <option>Option 96</option>\n      <option>Option 97</option>\n      <option>Option 98</option>\n      <option>Option 99</option>\n      <option>Option 100</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
       "summary": "Custom scroll height for dropdown with many options to control vertical space usage.",
       "description": "",
       "composition": false,
@@ -123,7 +123,7 @@
     {
       "id": "select-fit-content",
       "name": "FitContent",
-      "template": "<div nve-layout=\"column gap:lg\">\n  <nve-select fit-content>\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 1234</option>\n      <option value=\"3\">Option 1234567809</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-select fit-content layout=\"horizontal\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 1234</option>\n      <option value=\"3\">Option 1234567809</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg\">\n  <nve-select fit-content>\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 1234</option>\n      <option value=\"3\">Option 1234567809</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-select fit-content layout=\"horizontal\">\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 1234</option>\n      <option value=\"3\">Option 1234567809</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>\n",
       "summary": "Select width adjusts to fit the longest option in both vertical and horizontal layouts.",
       "description": "",
       "composition": false,
@@ -134,7 +134,7 @@
     {
       "id": "select-placeholder",
       "name": "Placeholder",
-      "template": "<nve-select>\n  <label>label</label>\n  <select>\n    <option value selected disabled hidden>Select Option</option>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
+      "template": "<nve-select>\n  <label>label</label>\n  <select>\n    <option value=\"\" selected disabled hidden>Select Option</option>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
       "summary": "Placeholder text prompts users to make a selection when no option exists yet.",
       "description": "",
       "composition": false,
@@ -143,7 +143,7 @@
     {
       "id": "select-placeholder-multiple",
       "name": "PlaceholderMultiple",
-      "template": "<nve-select>\n  <label>label</label>\n  <select multiple>\n    <option value selected disabled hidden>Select Option</option>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
+      "template": "<nve-select>\n  <label>label</label>\n  <select multiple>\n    <option value=\"\" selected disabled hidden>Select Option</option>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n",
       "summary": "Placeholder text in multi-selection mode guides users before they select any options.",
       "description": "",
       "composition": false,

package/dist/select/select2.js

@@ -27,7 +27,7 @@ var S = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-select",
-			version: "2.11.2"
+			version: "2.12.1"
 		};
 	}
 	static {

package/dist/skeleton/skeleton2.js

@@ -15,7 +15,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-skeleton",
-			version: "2.11.2"
+			version: "2.12.1"
 		};
 	}
 	render() {

package/dist/sort-button/sort-button2.js

@@ -19,7 +19,7 @@ var u = {
 	static {
 		this.metadata = {
 			tag: "nve-sort-button",
-			version: "2.11.2"
+			version: "2.12.1"
 		};
 	}
 	static {

package/dist/sparkline/sparkline2.js

@@ -21,7 +21,7 @@ var C = class extends _ {
 	static {
 		this.metadata = {
 			tag: "nve-sparkline",
-			version: "2.11.2"
+			version: "2.12.1"
 		};
 	}
 	render() {

package/dist/star-rating/star-rating2.js

@@ -18,7 +18,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-star-rating",
-			version: "2.11.2"
+			version: "2.12.1"
 		};
 	}
 	static {

package/dist/steps/steps2.js

@@ -23,7 +23,7 @@ var v = class extends h(d) {
 	static {
 		this.metadata = {
 			tag: "nve-steps-item",
-			version: "2.11.2",
+			version: "2.12.1",
 			parents: ["nve-steps"]
 		};
 	}
@@ -69,7 +69,7 @@ var y = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-steps",
-			version: "2.11.2",
+			version: "2.12.1",
 			children: ["nve-steps-item"]
 		};
 	}

package/dist/switch/switch-group2.js

@@ -11,7 +11,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-switch-group",
-			version: "2.11.2",
+			version: "2.12.1",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/switch/switch.examples.json

@@ -25,7 +25,7 @@
     {
       "id": "switch-states",
       "name": "States",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch>\n    <label>label</label>\n    <input type=\"checkbox\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>disabled</label>\n    <input type=\"checkbox\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-switch>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch>\n    <label>label</label>\n    <input type=\"checkbox\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n\n  <nve-switch>\n    <label>disabled</label>\n    <input type=\"checkbox\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n\n  <nve-switch>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-switch>\n\n  <nve-switch>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-switch>\n</div>\n",
       "summary": "Toggle switches with different states including default, disabled, success, and error with control messages.",
       "description": "",
       "composition": false,
@@ -34,7 +34,7 @@
     {
       "id": "switch-vertical-group",
       "name": "VerticalGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group>\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group>\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group>\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group>\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group>\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group>\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group>\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group>\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
       "summary": "Switch groups with vertical layout for many related toggles stacked in a column with validation states.",
       "description": "",
       "composition": false,
@@ -43,7 +43,7 @@
     {
       "id": "switch-vertical-inline-group",
       "name": "VerticalInlineGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
       "summary": "Switch groups with vertical inline layout for compact vertical stacking with inline label positioning.",
       "description": "",
       "composition": false,
@@ -54,7 +54,7 @@
     {
       "id": "switch-horizontal-group",
       "name": "HorizontalGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
       "summary": "Switch groups with horizontal layout for many toggles arranged in a row, ideal for limited options.",
       "description": "",
       "composition": false,
@@ -65,7 +65,7 @@
     {
       "id": "switch-horizontal-inline-group",
       "name": "HorizontalInlineGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
       "summary": "Switch groups with horizontal inline layout for space-efficient horizontal arrangement with inline labels.",
       "description": "",
       "composition": false,

package/dist/switch/switch2.js

@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-switch",
-			version: "2.11.2",
+			version: "2.12.1",
 			children: [
 				"label",
 				"input",

package/dist/tabs/tabs-group2.js

@@ -33,7 +33,7 @@ var m, h = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-group",
-			version: "2.11.2",
+			version: "2.12.1",
 			children: ["nve-tabs"]
 		};
 	}

package/dist/tabs/tabs.examples.json

@@ -132,7 +132,7 @@
     {
       "id": "tabs-external-controls",
       "name": "ExternalControls",
-      "template": "<div nve-layout=\"column gap:lg\">\n  <nve-tabs-group id=\"tab-group-controls\">\n    <nve-tabs>\n      <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\">Overview</nve-tabs-item>\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">Details</nve-tabs-item>\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">Settings</nve-tabs-item>\n    </nve-tabs>\n    <div slot=\"overview\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Overview</h2>\n            <p nve-text=\"body sm muted\">Quick status for the current tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Overview is active</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab for a summary of the current workflow</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Pair it with external controls for quick switching</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"details\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Details</h2>\n            <p nve-text=\"body sm muted\">Deeper context for follow-up tasks and implementation notes.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Details are available on demand</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab when readers need extra context</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Keep the content specific to the selected tab</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"settings\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Settings</h2>\n            <p nve-text=\"body sm muted\">Preferences and coordination notes for the shared tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Settings remain in sync with the selected value</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Useful for configuration and admin actions</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use external buttons when the layout needs extra actions</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n  </nve-tabs-group>\n  <div nve-layout=\"row gap:xs\">\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\">overview</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">details</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">settings</nve-button>\n  </div>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg\">\n  <nve-tabs-group id=\"tab-group-controls\">\n    <nve-tabs>\n      <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\">Overview</nve-tabs-item>\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">Details</nve-tabs-item>\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">Settings</nve-tabs-item>\n    </nve-tabs>\n    <div slot=\"overview\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Overview</h2>\n            <p nve-text=\"body sm muted\">Quick status for the current tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Overview is active</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab for a summary of the current workflow</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Pair it with external controls for quick switching</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"details\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Details</h2>\n            <p nve-text=\"body sm muted\">Deeper context for follow-up tasks and implementation notes.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Details are available on demand</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab when readers need extra context</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Keep the content specific to the selected tab</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"settings\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Settings</h2>\n            <p nve-text=\"body sm muted\">Preferences and coordination notes for the shared tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Settings remain in sync with the selected value</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Useful for configuration and admin actions</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use external buttons when the layout needs extra actions</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n  </nve-tabs-group>\n\n  <div nve-layout=\"row gap:xs\">\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\">overview</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">details</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">settings</nve-button>\n  </div>\n</div>\n",
       "summary": "Drive the same tabs group from external buttons when layouts need tabs and secondary actions to stay in sync with structured panel content.",
       "description": "",
       "composition": true,

package/dist/tabs/tabs2.js

@@ -20,7 +20,7 @@ var _ = class extends h(f) {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-item",
-			version: "2.11.2",
+			version: "2.12.1",
 			parents: ["nve-tabs"]
 		};
 	}
@@ -53,7 +53,7 @@ var v = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-tabs",
-			version: "2.11.2",
+			version: "2.12.1",
 			children: ["nve-tabs-item"]
 		};
 	}

package/dist/tag/tag2.js

@@ -17,7 +17,7 @@ var p = class extends d(c) {
 	static {
 		this.metadata = {
 			tag: "nve-tag",
-			version: "2.11.2"
+			version: "2.12.1"
 		};
 	}
 	static {

package/dist/textarea/textarea.examples.json

@@ -14,7 +14,7 @@
     {
       "id": "textarea-vertical",
       "name": "Vertical",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-textarea>\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea>\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea>\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea>\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-textarea>\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>\n",
       "summary": "Textareas with vertical layout including validation states for disabled, success, and error.",
       "description": "",
       "composition": false,
@@ -25,7 +25,7 @@
     {
       "id": "textarea-horizontal",
       "name": "Horizontal",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-textarea layout=\"horizontal\">\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea layout=\"horizontal\">\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea layout=\"horizontal\">\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea layout=\"horizontal\">\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-textarea layout=\"horizontal\">\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>\n",
       "summary": "Textareas with horizontal layout showing validation states for inline forms and compact layouts.",
       "description": "",
       "composition": false,

package/dist/textarea/textarea2.js

@@ -16,7 +16,7 @@ var i = class extends t {
 	static {
 		this.metadata = {
 			tag: "nve-textarea",
-			version: "2.11.2"
+			version: "2.12.1"
 		};
 	}
 };

package/dist/time/time.examples.json

@@ -23,7 +23,7 @@
     {
       "id": "time-vertical",
       "name": "Vertical",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-time>\n    <label>label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-time>\n    <label>disabled</label>\n    <input type=\"time\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-time>\n    <label>success</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-time>\n  <nve-time>\n    <label>error</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-time>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-time>\n    <label>label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n\n  <nve-time>\n    <label>disabled</label>\n    <input type=\"time\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n\n  <nve-time>\n    <label>success</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-time>\n\n  <nve-time>\n    <label>error</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-time>\n</div>\n",
       "summary": "Vertical field layout showcasing default, disabled, success, and error states",
       "description": "",
       "composition": false,
@@ -34,7 +34,7 @@
     {
       "id": "time-horizontal",
       "name": "Horizontal",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-time layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-time layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"time\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-time layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-time>\n  <nve-time layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-time>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-time layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n\n  <nve-time layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"time\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n\n  <nve-time layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-time>\n\n  <nve-time layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-time>\n</div>\n",
       "summary": "Horizontal field layout with label beside input, showing default, disabled, success, and error states",
       "description": "",
       "composition": false,

package/dist/time/time2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-time",
-			version: "2.11.2"
+			version: "2.12.1"
 		};
 	}
 	static {

package/dist/toast/toast.examples.json

@@ -95,7 +95,7 @@
     {
       "id": "toast-shadow-root",
       "name": "ShadowRoot",
-      "template": "<toast-test-shadow-root></toast-test-shadow-root>\n<script type=\"module\">\n  customElements.define(\n    \"toast-test-shadow-root\",\n    class ToastTestShadowRoot extends HTMLElement {\n      constructor() {\n        super();\n        this._shadow = this.attachShadow({ mode: \"open\" });\n        const template = document.createElement(\"template\");\n        template.innerHTML = `\n        <style>:host { box-sizing: border-box; }</style>\n        <nve-toast size=\"sm\">center</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\">top center</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\" alignment=\"start\">top start</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\" alignment=\"end\">top end</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\" alignment=\"start\">right start</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\">right center</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\" alignment=\"end\">right end</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\" alignment=\"start\">bottom start</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\">bottom center</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\" alignment=\"end\">bottom end</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\" alignment=\"start\">left start</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\">left center</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\" alignment=\"end\">left end</nve-toast>\n      `;\n        this._shadow.appendChild(template.content);\n      }\n    },\n  );\n</script>\n",
+      "template": "<toast-test-shadow-root></toast-test-shadow-root>\n<script type=\"module\">\n  customElements.define(\n    \"toast-test-shadow-root\",\n    class ToastTestShadowRoot extends HTMLElement {\n      constructor() {\n        super();\n        this._shadow = this.attachShadow({ mode: \"open\" });\n\n        const template = document.createElement(\"template\");\n        template.innerHTML = `\n        <style>:host { box-sizing: border-box; }</style>\n        <nve-toast size=\"sm\">center</nve-toast>\n\n        <nve-toast size=\"sm\" position=\"top\">top center</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\" alignment=\"start\">top start</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\" alignment=\"end\">top end</nve-toast>\n\n        <nve-toast size=\"sm\" position=\"right\" alignment=\"start\">right start</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\">right center</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\" alignment=\"end\">right end</nve-toast>\n\n        <nve-toast size=\"sm\" position=\"bottom\" alignment=\"start\">bottom start</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\">bottom center</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\" alignment=\"end\">bottom end</nve-toast>\n\n        <nve-toast size=\"sm\" position=\"left\" alignment=\"start\">left start</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\">left center</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\" alignment=\"end\">left end</nve-toast>\n      `;\n        this._shadow.appendChild(template.content);\n      }\n    },\n  );\n</script>\n",
       "summary": "Toast functionality within shadow DOM for Web Component architectures. Proper toast positioning and behavior in encapsulated component environments, essential for component library implementations.",
       "description": "",
       "composition": false,

package/dist/toast/toast2.js

@@ -23,7 +23,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-toast",
-			version: "2.11.2"
+			version: "2.12.1"
 		};
 	}
 	static {

package/dist/toggletip/toggletip-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-toggletip-footer",
-			version: "2.11.2",
+			version: "2.12.1",
 			parents: ["nve-toggletip"]
 		};
 	}

package/dist/toggletip/toggletip-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-toggletip-header",
-			version: "2.11.2",
+			version: "2.12.1",
 			parents: ["nve-toggletip"]
 		};
 	}