Fixed naming

listbox.bux.css

-.bux-multiselection-dropdown button,
-.bux-multiselection-dropdown button:hover
+.bux-listbox button,
+.bux-listbox button:hover
 {
     background-color: #fff;
     text-align: left;
@@ -10,14 +10,14 @@
     padding: 0.625rem 1.25rem 0.625rem 6px;
     color: #000;
 }
-.bux-multiselection-dropdown button:focus
+.bux-listbox button:focus
 {
     background-color: #fff;
     color: #000;
     outline: 2px solid #3492b8;
     border: 2px solid #212325;
 }
-.bux-multiselection-dropdown .bux-checkbox
+.bux-listbox .bux-checkbox
 {
     border: 2px solid #212325;
     background-color: #fff;
@@ -29,20 +29,20 @@
     border: 2px solid #B0B0B0;
     box-shadow: 1px 1px 5px #C0C0C0;
 }
-.bux-multiselection-dropdown tr:hover,
-.bux-multiselection-dropdown tr:focus-within
+.bux-listbox tr:hover,
+.bux-listbox tr:focus-within
 {
     background-color:#E0E0E6;
 }
-.bux-multiselection-dropdown fieldset table
+.bux-listbox fieldset table
 {
     width:100%;
 }
-.bux-multiselection-dropdown fieldset td
+.bux-listbox fieldset td
 {
     padding: 8px 8px 8px 8px;
 }
-.bux-multiselection-dropdown fieldset .bux-checkbox__option
+.bux-listbox fieldset .bux-checkbox__option
 {
     margin: 0 0.125rem 0 0.125rem;
 }

listbox.bux.js

 // opening = true, false, or the word "toggle"
-function buxMultiselectionDropdownChangeState($multiselect, opening, focus)
+function buxListboxChangeState($listbox, opening, focus)
 {
-    var $checkboxContainer = $multiselect.find(".bux-checkbox");
-    var $button = $multiselect.find("button");
+    var $checkboxContainer = $listbox.find(".bux-checkbox");
+    var $button = $listbox.find("button");
 
     if(opening == "toggle")
     {
@@ -22,39 +22,44 @@ function buxMultiselectionDropdownChangeState($multiselect, opening, focus)
     }
 }
 
-// Update the text of the button to reflect the newly selected values.
-$(document).on("refreshText", ".bux-multiselection-dropdown button", function ()
+function buxListboxUpdateButtonText($listbox)
 {
-    var $multiselect = $(this).parent().parent();
-    var selectedLabels = $multiselect.find("input[type=checkbox]:checked").toArray().map(cb => { return $(cb).parent().find("label").text(); }).join(", ");
+    var selectedLabels = $listbox.find("input[type=checkbox]:checked").toArray().map(cb => { return $(cb).parent().find("label").text(); }).join(", ");
     if(selectedLabels.trim().length == 0) selectedLabels = " ";
-    $(this).html(selectedLabels);
+    $listbox.find("button").html(selectedLabels);
+}
+
+// Update the text of the button to reflect the newly selected values.
+$(document).on("refreshText", ".bux-listbox button", function ()
+{
+    var $listbox = $(this).parent().parent();
+    buxListboxUpdateButtonText($listbox);
 });
 
 // User changed state of a checkbox.
-$(document).on("change", ".bux-multiselection-dropdown input[type=checkbox]", function()
+$(document).on("change", ".bux-listbox input[type=checkbox]", function()
 {
-    var $multiselect = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
-    $multiselect.find("button").trigger("refreshText");
+    var $listbox = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
+    $listbox.find("button").trigger("refreshText");
 });
 
 // User toggled open the checkbox list.
-$(document).on("click", ".bux-multiselection-dropdown button", function ()
+$(document).on("click", ".bux-listbox button", function(e)
 {
-    var $multiselect = $(this).parent().parent();
-    buxMultiselectionDropdownChangeState($multiselect, "toggle", true);
+    var $listbox = $(this).parent().parent();
+    buxListboxChangeState($listbox, "toggle", true);
 });
 
 // Handle keystrokes inside the checkbox list.
-$(".bux-multiselection-dropdown").on("keyup", "input[type=checkbox]", function(e)
+$(".bux-listbox").on("keyup", "input[type=checkbox]", function(e)
 {
     var $tr = $(this).parent().parent().parent();
     var $table = $tr.parent();
-    var $multiselect = $table.parent().parent().parent().parent();
+    var $listbox = $table.parent().parent().parent().parent();
 
-    if (e.key === "Escape" || e.key === "Enter")
+    if (e.key === "Escape")
     {
-        buxMultiselectionDropdownChangeState($multiselect, false, true);
+        buxListboxChangeState($listbox, false, true);
         e.preventDefault();
     }
 
@@ -66,7 +71,7 @@ $(".bux-multiselection-dropdown").on("keyup", "input[type=checkbox]", function(e
         case "End": $table.children().last().find("input[type=checkbox]").focus(); e.preventDefault(); break;
     }
 });
-$(".bux-multiselection-dropdown").on("keydown", "input[type=checkbox]", function (e)
+$(".bux-listbox").on("keydown", "input[type=checkbox]", function (e)
 {
     switch (e.key)
     {
@@ -77,6 +82,24 @@ $(".bux-multiselection-dropdown").on("keydown", "input[type=checkbox]", function
     }
 });
 
+// Close the checkbox list with Escape
+$(".bux-listbox").on("keyup", "button", function(e)
+{
+    var $listbox = $(this).parent().parent();
+ 
+    if (e.key === "Escape")
+    {
+        buxListboxChangeState($listbox, false, true);
+        e.preventDefault();
+    }s
+});
+
 // User leaves the checkbox list.
-$(document).mouseup(function (e) { $(".bux-multiselection-dropdown").each(function (i, ms) { var $ms = $(ms);  if (!$ms.is(e.target) && $ms.has(e.target).length === 0) buxMultiselectionDropdownChangeState($ms, false); }); });
-$(document).keyup(function (e) { $(".bux-multiselection-dropdown").each(function (i, ms) { var $ms = $(ms); if (!$ms.is(e.target) && $ms.has(e.target).length === 0) buxMultiselectionDropdownChangeState($ms, false); }); });
+$(document).mouseup(function (e) { $(".bux-listbox").each(function (i, ms) { var $ms = $(ms);  if (!$ms.is(e.target) && $ms.has(e.target).length === 0) buxListboxChangeState($ms, false); }); });
+$(document).keyup(function (e) { $(".bux-listbox").each(function (i, ms) { var $ms = $(ms); if (!$ms.is(e.target) && $ms.has(e.target).length === 0) buxListboxChangeState($ms, false); }); });
+
+// Initialization
+$(function()
+{
+    $(".bux-listbox").each((i, lb) => buxListboxUpdateButtonText($(lb))); 
+});
\ No newline at end of file

sample.html

@@ -15,7 +15,7 @@
 	<main>
 		<div class="bux-container bux-grid">
 			<div class="bux-grid__cell bux-grid__cell--12">
-				<div class="bux-selection-dropdown bux-multiselection-dropdown">
+				<div class="bux-selection-dropdown bux-listbox">
 					<label for="weekdays" class="bux-selection-dropdown__label">Weekdays</label>
 					<div class="bux-selection-dropdown__input">
 						<button id="weekdays" type="button" name="weekdays" role="combobox" aria-expanded="false" aria-controls="weekdays-checkboxlist" aria-description="multiselect">&nbsp;</button>