Update dist files and bump version

dist/demo.html

@@ -16,7 +16,7 @@ <h1>fancySelect examples</h1>
         <select id="default-style">
           <option>Neptunium</option>
           <option>Plutonium</option>
-          <option>Americium</option>
+          <option disabled>Americium</option>
           <option>Curium</option>
           <option>Berkelium</option>
           <option>Californium</option>
@@ -47,7 +47,7 @@ <h1>fancySelect examples</h1>
         <select id="full-width">
           <option>Neptunium</option>
           <option>Plutonium</option>
-          <option>Americium</option>
+          <option disabled>Americium</option>
           <option>Curium</option>
           <option>Berkelium</option>
           <option>Californium</option>
@@ -78,7 +78,7 @@ <h1>fancySelect examples</h1>
         <select id="custom-style">
           <option>Neptunium</option>
           <option>Plutonium</option>
-          <option>Americium</option>
+          <option disabled>Americium</option>
           <option>Curium</option>
           <option>Berkelium</option>
           <option>Californium</option>
@@ -109,7 +109,7 @@ <h1>fancySelect examples</h1>
         <select id="icon-support">
           <option data-icon="demo-icons.svg#home">Neptunium</option>
           <option data-icon="demo-icons.svg#share">Plutonium</option>
-          <option data-icon="demo-icons.svg#image">Americium</option>
+          <option data-icon="demo-icons.svg#image" disabled>Americium</option>
           <option data-icon="demo-icons.svg#camera">Curium</option>
           <option data-icon="demo-icons.svg#music">Berkelium</option>
           <option data-icon="demo-icons.svg#play">Californium</option>
@@ -140,7 +140,7 @@ <h1>fancySelect examples</h1>
         <select id="auto-position">
           <option>Neptunium</option>
           <option>Plutonium</option>
-          <option>Americium</option>
+          <option disabled>Americium</option>
           <option>Curium</option>
           <option>Berkelium</option>
           <option>Californium</option>

dist/fancyselect.css

@@ -18,6 +18,7 @@
   --fsb-list-background: var(--fsb-background);
   --fsb-hover-color: var(--fsb-color);
   --fsb-hover-background: #ddd;
+  --fsb-disabled-opacity: .3;
 }
 
 .fsb-original-select {
@@ -91,6 +92,7 @@ select[disabled] + .fsb-select {
   position: relative !important;
   width: 100% !important;
   height: 100% !important;
+  margin: 0 !important;
   padding: 8px 22px 8px 8px !important;
   padding: var(--fsb-padding) !important;
   padding-right: calc(var(--fsb-arrow-size) + var(--fsb-arrow-padding) + var(--fsb-padding-right)) !important;
@@ -196,12 +198,16 @@ select[disabled] + .fsb-select .fsb-list {
   overflow: hidden;
 }
 
-.fsb-option:focus {
+.fsb-option:not([aria-disabled="true"]):focus {
   outline: none;
   color: var(--fsb-hover-color);
   background-color: var(--fsb-hover-background);
 }
 
+.fsb-option[aria-disabled="true"] {
+  opacity: var(--fsb-disabled-opacity);
+}
+
 .fsb-resize {
   display: block;
   height: 0;

dist/fancyselect.js

@@ -7,6 +7,7 @@
 (function (window, document, autoInitialize) {
 
   var currentElement = null;
+  var currentFocus = null;
   var searchString = '';
   var searchTimeout = null;
   var counter = 0;
@@ -53,7 +54,7 @@
     // List box button
     button.id = "fsb_" + index + "_button";
     button.className = 'fsb-button';
-    button.textContent = ' ';
+    button.innerHTML = ' ';
     button.setAttribute('type', 'button');
     button.setAttribute('aria-disabled', select.disabled);
     button.setAttribute('aria-haspopup', 'listbox');
@@ -214,6 +215,10 @@
     item.setAttribute('tabindex', '-1');
     item.setAttribute('aria-selected', selected);
 
+    if (option.disabled) {
+      item.setAttribute('aria-disabled', option.disabled);
+    }
+
     return { item: item, selected: selected, itemLabel: itemLabel };
   }
 
@@ -260,6 +265,7 @@
     button.setAttribute('aria-expanded', 'true');
     selectedItem.focus();
     currentElement = button;
+    currentFocus = selectedItem;
 
     // Position the list box on top of the button if there isn't enough space on the bottom
     if (rect.y + rect.height + list.offsetHeight > document.documentElement.clientHeight) {
@@ -287,6 +293,7 @@
     }
 
     currentElement = null;
+    currentFocus = null;
   }
 
   /**
@@ -402,6 +409,42 @@
     return characters.every(function (char) {return char === characters[0];});
   }
 
+  /**
+   * Find and focus the closest active option.
+   * @param {object} option The starting option.
+   * @param {string} dir The direction of the lookup (next, prev).
+   */
+  function focusClosestActiveOption(option, dir) {
+    if (!option) {
+      return;
+    }
+
+    // Focus the starting option itself if it's active
+    if (!option.getAttribute('aria-disabled')) {
+      currentFocus = option;
+      return option.focus();
+    }
+
+    var options = Array.from(option.parentNode.children);
+    var index = options.indexOf(option);
+
+    if (dir === 'next') {
+      for (var i = index + 1, len = options.length; i < len; i++) {
+        if (!options[i].getAttribute('aria-disabled')) {
+          currentFocus = options[i];
+          return options[i].focus();
+        }
+      }
+    } else {
+      for (var _i = index - 1; _i >= 0; _i--) {
+        if (!options[_i].getAttribute('aria-disabled')) {
+          currentFocus = options[_i];
+          return options[_i].focus();
+        }
+      }
+    }
+  }
+
   /**
    * Shortcut for addEventListener with delegation support.
    * @param {object} context The context to which the listener is attached.
@@ -490,14 +533,22 @@
   // Use mousemove instead of mouseover to prevent accidental focus on the wrong item,
   // namely when the list box is opened with a keyboard shortcut, and the mouse arrow
   // just happens to be on an item.
-  addListener(document.documentElement, 'mousemove', '.fsb-option', function (event) {
+  addListener(document.documentElement, 'mousemove', '.fsb-option:not([aria-disabled="true"])', function (event) {
     event.target.focus();
+    currentFocus = event.target;
   });
 
   // On click on an item
   addListener(document, 'click', '.fsb-option', function (event) {
-    selectItem(event.target);
-    closeListBox(true);
+    var item = event.target;
+
+    if (!item.getAttribute('aria-disabled')) {
+      selectItem(item);
+      closeListBox(true);
+    } else {
+      event.stopImmediatePropagation();
+      currentFocus.focus();
+    }
   });
 
   // On key press on an item
@@ -509,21 +560,17 @@
     switch (event.key) {
       case 'ArrowUp':
       case 'ArrowLeft':
-        if (item.previousElementSibling) {
-          item.previousElementSibling.focus();
-        }
+        focusClosestActiveOption(item.previousElementSibling, 'prev');
         break;
       case 'ArrowDown':
       case 'ArrowRight':
-        if (item.nextElementSibling) {
-          item.nextElementSibling.focus();
-        }
+        focusClosestActiveOption(item.nextElementSibling, 'next');
         break;
       case 'Home':
-        list.firstElementChild.focus();
+        focusClosestActiveOption(list.firstElementChild, 'next');
         break;
       case 'End':
-        list.lastElementChild.focus();
+        focusClosestActiveOption(list.lastElementChild, 'prev');
         break;
       case 'PageUp':
       case 'PageDown':