From 713c163fb8d9d4ab565d8a86e43c360863c68ea7 Mon Sep 17 00:00:00 2001
From: Ronan Berder <hunvreus@gmail.com>
Date: Tue, 13 Jan 2026 19:33:59 +0800
Subject: [PATCH] Preparing 0.3.10

---
 .../partials/kitchen-sink/select.njk          | 23 -------------------
 docs/src/components/select.njk                |  1 +
 package.json                                  |  2 +-
 packages/cli/package.json                     |  2 +-
 packages/css/package.json                     |  2 +-
 src/jinja/select.html.jinja                   |  3 +++
 src/js/select.js                              | 16 +++++++++----
 src/nunjucks/select.njk                       |  3 +++
 8 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/docs/src/_includes/partials/kitchen-sink/select.njk b/docs/src/_includes/partials/kitchen-sink/select.njk
index 26f0bc4..937d0aa 100644
--- a/docs/src/_includes/partials/kitchen-sink/select.njk
+++ b/docs/src/_includes/partials/kitchen-sink/select.njk
@@ -10,29 +10,6 @@
   <div class="p-4 gap">
     <div class="flex flex-col gap-4">
       <div class="flex flex-wrap items-center gap-2 md:flex-row">
-        {{ select(
-          id="select-default",
-          trigger_attrs={"class": "w-[180px]"},
-          selected="blueberry",
-          items=[
-            {
-              type: "group",
-              label: "Fruits",
-              items: [
-                { type: "item", label: "Apple", value: "apple" },
-                { type: "item", label: "Banana", value: "banana" },
-                { type: "item", label: "Blueberry", value: "blueberry" }
-              ]
-            },
-            {
-              type: "group",
-              label: "Grapes",
-              items: [
-                { type: "item", label: "Pineapple", value: "pineapple" }
-              ]
-            }
-          ]
-        ) }}
         <select class="select w-[180px]">
           <optgroup label="Fruits">
             <option>Apple</option>
diff --git a/docs/src/components/select.njk b/docs/src/components/select.njk
index cf15f09..4eef7f4 100644
--- a/docs/src/components/select.njk
+++ b/docs/src/components/select.njk
@@ -126,6 +126,7 @@ toc:
       <p>Wraps around the entire component. Can have the following attributes:</p>
       <ul>
         <li><code>data-placeholder="{ TEXT }"</code> <span class="badge-secondary">Optional</span>: placeholder text shown when no options are selected (multiselect only).</li>
+        <li><code>data-close-on-select="true"</code> <span class="badge-secondary">Optional</span>: closes the popover when selecting an option in multiselect mode.</li>
       </ul>
       <dl>
         <dt><code class="highlight language-html">&lt;button type="button"&gt;</code></dt>
diff --git a/package.json b/package.json
index c324c48..193bfa0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basecoat",
-  "version": "0.3.10-beta.2",
+  "version": "0.3.10",
   "description": "shadcn/ui for the rest of us",
   "author": "hunvreus",
   "type": "module",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index b3a2ad7..7e4c552 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basecoat-cli",
-  "version": "0.3.10-beta.2",
+  "version": "0.3.10",
   "description": "Add Basecoat components to your project",
   "author": "hunvreus",
   "license": "MIT",
diff --git a/packages/css/package.json b/packages/css/package.json
index 110f906..051595d 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basecoat-css",
-  "version": "0.3.10-beta.2",
+  "version": "0.3.10",
   "description": "Tailwind CSS for Basecoat components",
   "author": {
     "name": "hunvreus",
diff --git a/src/jinja/select.html.jinja b/src/jinja/select.html.jinja
index 1be4ba2..08cab89 100644
--- a/src/jinja/select.html.jinja
+++ b/src/jinja/select.html.jinja
@@ -6,6 +6,7 @@
   @param name {string} [optional] - The name attribute for the hidden input storing the selected value.
   @param multiple {boolean} [optional] [default=false] - Enables multiple selection mode.
   @param placeholder {string} [optional] - Placeholder text shown when no options are selected (multiple mode only).
+  @param close_on_select {boolean} [optional] [default=false] - Closes the popover when selecting an option in multiple mode.
   @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
   @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
   @param popover_attrs {object} [optional] - Additional HTML attributes for the popover content div.
@@ -21,6 +22,7 @@
   items=[],
   multiple=false,
   placeholder=None,
+  close_on_select=false,
   main_attrs={},
   trigger_attrs={},
   popover_attrs={},
@@ -76,6 +78,7 @@
   id="{{ id }}"
   class="select {{ main_attrs.class }}"
   {% if multiple and placeholder %}data-placeholder="{{ placeholder }}"{% endif %}
+  {% if multiple and close_on_select %}data-close-on-select="true"{% endif %}
   {% for key, value in main_attrs.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
diff --git a/src/js/select.js b/src/js/select.js
index cf3ecda..6fb05be 100644
--- a/src/js/select.js
+++ b/src/js/select.js
@@ -24,6 +24,7 @@
     const isMultiple = listbox.getAttribute('aria-multiselectable') === 'true';
     const selectedOptions = isMultiple ? new Set() : null;
     const placeholder = isMultiple ? (selectComponent.dataset.placeholder || '') : null;
+    const closeOnSelect = selectComponent.dataset.closeOnSelect === 'true';
 
     const getValue = (opt) => opt.dataset.value ?? opt.textContent.trim();
 
@@ -248,6 +249,9 @@
           const option = options[activeIndex];
           if (isMultiple) {
             toggleMultipleValue(option);
+            if (closeOnSelect) {
+              closePopover();
+            }
           } else {
             if (input.value !== getValue(option)) {
               updateValue(option);
@@ -358,11 +362,15 @@
 
       if (isMultiple) {
         toggleMultipleValue(option);
-        setActiveOption(options.indexOf(option));
-        if (filter) {
-          filter.focus();
+        if (closeOnSelect) {
+          closePopover();
         } else {
-          trigger.focus();
+          setActiveOption(options.indexOf(option));
+          if (filter) {
+            filter.focus();
+          } else {
+            trigger.focus();
+          }
         }
       } else {
         if (input.value !== getValue(option)) {
diff --git a/src/nunjucks/select.njk b/src/nunjucks/select.njk
index d53bafc..d84bfbe 100644
--- a/src/nunjucks/select.njk
+++ b/src/nunjucks/select.njk
@@ -6,6 +6,7 @@
   @param name {string} [optional] - The name attribute for the hidden input storing the selected value.
   @param multiple {boolean} [optional] [default=false] - Enables multiple selection mode.
   @param placeholder {string} [optional] - Placeholder text shown when no options are selected (multiple mode only).
+  @param close_on_select {boolean} [optional] [default=false] - Closes the popover when selecting an option in multiple mode.
   @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
   @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
   @param popover_attrs {object} [optional] - Additional HTML attributes for the popover content div.
@@ -21,6 +22,7 @@
   items=None,
   multiple=false,
   placeholder=None,
+  close_on_select=false,
   main_attrs={},
   trigger_attrs={},
   popover_attrs={},
@@ -76,6 +78,7 @@
   id="{{ id }}"
   class="select {{ main_attrs.class }}"
   {% if multiple and placeholder %}data-placeholder="{{ placeholder }}"{% endif %}
+  {% if multiple and close_on_select %}data-close-on-select="true"{% endif %}
   {% for key, value in main_attrs %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}