update docs

docs/api/index.html

@@ -5,7 +5,7 @@
   <meta name="keywords" content="bootstrap tag, tag input, bootstrap input">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>use-bootstrap-tag | Tag input for Bootstrap 5</title>
-  <script type="module" crossorigin="" src="/assets/index-65e135c7.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-d07bd47f.js"></script>
   <link rel="stylesheet" href="/assets/index-088aae3b.css">
 </head>
 

docs/customize/index.html

@@ -5,7 +5,7 @@
   <meta name="keywords" content="bootstrap tag, tag input, bootstrap input">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>use-bootstrap-tag | Tag input for Bootstrap 5</title>
-  <script type="module" crossorigin="" src="/assets/index-65e135c7.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-d07bd47f.js"></script>
   <link rel="stylesheet" href="/assets/index-088aae3b.css">
 </head>
 
@@ -65,10 +65,10 @@
 // 8. Include use-bootstrap-tag
 <span class="token atrule"><span class="token rule">@import</span> <span class="token string">"../node_modules/use-bootstrap-tag/scss/use-bootstrap-tag"</span><span class="token punctuation">;</span></span>
 
-// 9. Add additional custom code here</code></pre> <p>By default, use-bootstrap-tag inherits its style from default bootstrap
-    style, so anything you change in bootstrap automatically changes
-    use-bootstrap-tag style as well. Read more about customize bootstrap styles
-    at <a class="text-break" href="https://getbootstrap.com/docs/5.3/customize/sass/" target="_blank">https://getbootstrap.com/docs/5.3/customize/sass/</a>.</p> <div class="d-flex justify-content-between gap-3 mt-4"><a href="/api" class="btn btn-link link-body-emphasis text-decoration-none border d-inline-flex flex-column align-items-start w-50"><span class="text-body-secondary small">Previous page</span>
+// 9. Add additional custom code here</code></pre> <p>By default, use-bootstrap-tag inherits its style from default bootstrap style, so anything
+    you change in bootstrap automatically changes
+    use-bootstrap-tag style as well. Read more about customize bootstrap styles at
+    <a class="text-break" href="https://getbootstrap.com/docs/5.3/customize/sass/" target="_blank">https://getbootstrap.com/docs/5.3/customize/sass/</a>.</p> <div class="d-flex justify-content-between gap-3 mt-4"><a href="/api" class="btn btn-link link-body-emphasis text-decoration-none border d-inline-flex flex-column align-items-start w-50"><span class="text-body-secondary small">Previous page</span>
       API</a></div></div></div></div></div>
 
 

docs/demo/index.html

@@ -5,7 +5,7 @@
   <meta name="keywords" content="bootstrap tag, tag input, bootstrap input">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>use-bootstrap-tag | Tag input for Bootstrap 5</title>
-  <script type="module" crossorigin="" src="/assets/index-65e135c7.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-d07bd47f.js"></script>
   <link rel="stylesheet" href="/assets/index-088aae3b.css">
 </head>
 
@@ -15,12 +15,12 @@
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
   <span class="token function">UseBootstrapTag</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'example-basic'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
 </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div></div></div></div></div> <div class="col-12 col-lg-6 col-xxl-4"><div class="card h-100"><div class="card-header"><ul class="nav nav-tabs card-header-tabs" role="tablist"><li class="nav-item" role="presentation"><button class="nav-link active" id="placeholder-preview-tab" data-bs-toggle="tab" data-bs-target="#placeholder-preview-tab-pane" type="button" role="tab" aria-controls="placeholder-preview-tab-pane" aria-selected="true">Preview</button></li> <li class="nav-item" role="presentation"><button class="nav-link" id="placeholder-code-tab" data-bs-toggle="tab" data-bs-target="#placeholder-code-tab-pane" type="button" role="tab" aria-controls="placeholder-code-tab-pane" aria-selected="false" tabindex="-1">Code</button></li></ul></div> <div class="card-body"><h5 class="card-title">Placeholder</h5> <div class="tab-content"><div class="tab-pane show active" id="placeholder-preview-tab-pane" role="tabpanel" aria-labelledby="placeholder-preview-tab"><input type="text" class="form-control use-bootstrap-tag-target" placeholder="Add a color then press comma" tabindex="-1"><div class="ub-wrapper"><div class="use-bootstrap-tag d-flex flex-wrap align-items-center gap-1 form-control use-bootstrap-tag-target" role="none"> <input type="text" placeholder="Add a color then press comma" style="width: 180.756px;"></div></div></div> <div class="tab-pane" id="placeholder-code-tab-pane" role="tabpanel" aria-labelledby="placeholder-code-tab"><pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Add a color then press comma<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>example-placeholder<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+</code></pre></div></div></div></div></div> <div class="col-12 col-lg-6 col-xxl-4"><div class="card h-100"><div class="card-header"><ul class="nav nav-tabs card-header-tabs" role="tablist"><li class="nav-item" role="presentation"><button class="nav-link active" id="placeholder-preview-tab" data-bs-toggle="tab" data-bs-target="#placeholder-preview-tab-pane" type="button" role="tab" aria-controls="placeholder-preview-tab-pane" aria-selected="true">Preview</button></li> <li class="nav-item" role="presentation"><button class="nav-link" id="placeholder-code-tab" data-bs-toggle="tab" data-bs-target="#placeholder-code-tab-pane" type="button" role="tab" aria-controls="placeholder-code-tab-pane" aria-selected="false" tabindex="-1">Code</button></li></ul></div> <div class="card-body"><h5 class="card-title">Placeholder</h5> <div class="tab-content"><div class="tab-pane show active" id="placeholder-preview-tab-pane" role="tabpanel" aria-labelledby="placeholder-preview-tab"><input type="text" class="form-control use-bootstrap-tag-target" placeholder="Add a tag then press comma" tabindex="-1"><div class="ub-wrapper"><div class="use-bootstrap-tag d-flex flex-wrap align-items-center gap-1 form-control use-bootstrap-tag-target" role="none"> <input type="text" placeholder="Add a tag then press comma" style="width: 170.396px;"></div></div></div> <div class="tab-pane" id="placeholder-code-tab-pane" role="tabpanel" aria-labelledby="placeholder-code-tab"><pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Add a color then press comma<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>example-placeholder<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
 
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
   <span class="token function">UseBootstrapTag</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'example-placeholder'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
 </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
-</code></pre></div></div></div></div></div> <div class="col-12 col-lg-6 col-xxl-4"><div class="card h-100"><div class="card-header"><ul class="nav nav-tabs card-header-tabs" role="tablist"><li class="nav-item" role="presentation"><button class="nav-link active" id="separator-preview-tab" data-bs-toggle="tab" data-bs-target="#separator-preview-tab-pane" type="button" role="tab" aria-controls="separator-preview-tab-pane" aria-selected="true">Preview</button></li> <li class="nav-item" role="presentation"><button class="nav-link" id="separator-code-tab" data-bs-toggle="tab" data-bs-target="#separator-code-tab-pane" type="button" role="tab" aria-controls="separator-code-tab-pane" aria-selected="false" tabindex="-1">Code</button></li></ul></div> <div class="card-body"><h5 class="card-title">Custom separator</h5> <div class="tab-content"><div class="tab-pane show active" id="separator-preview-tab-pane" role="tabpanel" aria-labelledby="separator-preview-tab"><input type="text" class="form-control use-bootstrap-tag-target" placeholder="Add a color then press space" data-ub-tag-separator=" " tabindex="-1"><div class="ub-wrapper"><div class="use-bootstrap-tag d-flex flex-wrap align-items-center gap-1 form-control use-bootstrap-tag-target" role="none"> <input type="text" placeholder="Add a color then press space" style="width: 172.628px;"></div></div></div> <div class="tab-pane" id="separator-code-tab-pane" role="tabpanel" aria-labelledby="separator-code-tab"><pre class="language-html" tabindex="0"><code class="language-html"><span class="token comment">&lt;!-- Using data-ub-tag-separator attribute: --&gt;</span>
+</code></pre></div></div></div></div></div> <div class="col-12 col-lg-6 col-xxl-4"><div class="card h-100"><div class="card-header"><ul class="nav nav-tabs card-header-tabs" role="tablist"><li class="nav-item" role="presentation"><button class="nav-link active" id="separator-preview-tab" data-bs-toggle="tab" data-bs-target="#separator-preview-tab-pane" type="button" role="tab" aria-controls="separator-preview-tab-pane" aria-selected="true">Preview</button></li> <li class="nav-item" role="presentation"><button class="nav-link" id="separator-code-tab" data-bs-toggle="tab" data-bs-target="#separator-code-tab-pane" type="button" role="tab" aria-controls="separator-code-tab-pane" aria-selected="false" tabindex="-1">Code</button></li></ul></div> <div class="card-body"><h5 class="card-title">Custom separator</h5> <div class="tab-content"><div class="tab-pane show active" id="separator-preview-tab-pane" role="tabpanel" aria-labelledby="separator-preview-tab"><input type="text" class="form-control use-bootstrap-tag-target" placeholder="Add a tag then press space" data-ub-tag-separator=" " tabindex="-1"><div class="ub-wrapper"><div class="use-bootstrap-tag d-flex flex-wrap align-items-center gap-1 form-control use-bootstrap-tag-target" role="none"> <input type="text" placeholder="Add a tag then press space" style="width: 162.267px;"></div></div></div> <div class="tab-pane" id="separator-code-tab-pane" role="tabpanel" aria-labelledby="separator-code-tab"><pre class="language-html" tabindex="0"><code class="language-html"><span class="token comment">&lt;!-- Using data-ub-tag-separator attribute: --&gt;</span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Add a color then press space<span class="token punctuation">"</span></span> <span class="token attr-name">data-ub-tag-separator</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span> <span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>example-separator<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
 
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">

docs/index.html

@@ -5,7 +5,7 @@
   <meta name="keywords" content="bootstrap tag, tag input, bootstrap input">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>use-bootstrap-tag | Tag input for Bootstrap 5</title>
-  <script type="module" crossorigin="" src="/assets/index-65e135c7.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-d07bd47f.js"></script>
   <link rel="stylesheet" href="/assets/index-088aae3b.css">
 </head>
 

docs/install/index.html

@@ -5,7 +5,7 @@
   <meta name="keywords" content="bootstrap tag, tag input, bootstrap input">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>use-bootstrap-tag | Tag input for Bootstrap 5</title>
-  <script type="module" crossorigin="" src="/assets/index-65e135c7.js"></script>
+  <script type="module" crossorigin="" src="/assets/index-d07bd47f.js"></script>
   <link rel="stylesheet" href="/assets/index-088aae3b.css">
 </head>
 

src/docs/pages/Demo.svelte

@@ -160,7 +160,7 @@
               <input
                 type="text"
                 class="form-control"
-                placeholder="Add a color then press comma"
+                placeholder="Add a tag then press comma"
               />
             </div>
             <div
@@ -217,7 +217,7 @@
               <input
                 type="text"
                 class="form-control"
-                placeholder="Add a color then press space"
+                placeholder="Add a tag then press space"
                 data-ub-tag-separator=" "
               />
             </div>