@internetstiftelsen/styleguide 4.0.10 → 4.0.12-beta.0.1

package/dist/assets/js/charCounter.js

@@ -0,0 +1,139 @@
+'use strict';
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _className = require('./className');
+
+var _className2 = _interopRequireDefault(_className);
+
+var _htmlTextLength = require('./htmlTextLength');
+
+var _htmlTextLength2 = _interopRequireDefault(_htmlTextLength);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var CharCounter = function () {
+	function CharCounter(el) {
+		_classCallCheck(this, CharCounter);
+
+		this.el = el;
+		this.counterEl = null;
+		this.isRichText = this.el.dataset.richText !== undefined;
+		this.min = parseInt(this.el.getAttribute('data-min') || 0, 10);
+		this.max = parseInt(this.el.getAttribute('data-max') || 0, 10);
+
+		if (!this.min && !this.max) {
+			console.warn('Either min or max must be set and greater than 0.');
+			return;
+		}
+
+		if (this.isRichText) {
+			this.waitForEditor();
+
+			return;
+		}
+
+		this.build();
+		this.attach();
+	}
+
+	_createClass(CharCounter, [{
+		key: 'waitForEditor',
+		value: function waitForEditor() {
+			var _this = this;
+
+			if (this.el.editor) {
+				this.build();
+				this.attach();
+			} else {
+				this.el.addEventListener('editor-ready', function () {
+					_this.build();
+					_this.attach();
+				});
+			}
+		}
+	}, {
+		key: 'count',
+		value: function count() {
+			if (this.isRichText) {
+				return (0, _htmlTextLength2.default)(this.el.editor.getHTML());
+			}
+
+			return this.el.value.length;
+		}
+	}, {
+		key: 'setCountText',
+		value: function setCountText() {
+			var count = this.count();
+
+			if (this.min && count < this.min) {
+				this.counterEl.textContent = count + '/' + this.min;
+				this.counterEl.className = 'color-ruby ' + (0, _className2.default)('a-meta');
+
+				return;
+			}
+
+			if (this.max && count > this.max) {
+				this.counterEl.textContent = count + '/' + this.max;
+				this.counterEl.classList.remove('color-granit');
+				this.counterEl.className = 'color-ruby ' + (0, _className2.default)('a-meta');
+
+				return;
+			}
+
+			this.counterEl.textContent = count + '/' + (this.max || this.min);
+			this.counterEl.className = 'color-jade ' + (0, _className2.default)('a-meta');
+		}
+	}, {
+		key: 'build',
+		value: function build() {
+			var counter = document.createElement('small');
+			var wrapper = void 0;
+
+			if (this.isRichText) {
+				wrapper = this.el.editor.options.element;
+				wrapper.style.paddingRight = '3.8333333333rem';
+			} else {
+				wrapper = document.createElement('div');
+
+				wrapper.className = 'u-position-relative';
+				this.el.parentNode.insertBefore(wrapper, this.el);
+				wrapper.appendChild(this.el);
+
+				this.el.style.paddingRight = '3.8333333333rem';
+			}
+
+			counter.className = 'color-granit ' + (0, _className2.default)('a-meta');
+			counter.style.cssText = 'position: absolute; top: 5px; right: 10px; z-index: 501;';
+
+			wrapper.appendChild(counter);
+
+			this.counterEl = counter;
+			this.setCountText();
+		}
+	}, {
+		key: 'attach',
+		value: function attach() {
+			var _this2 = this;
+
+			if (this.isRichText) {
+				this.el.editor.on('update', function () {
+					_this2.setCountText();
+				});
+			} else {
+				this.el.addEventListener('input', function () {
+					_this2.setCountText();
+				});
+			}
+		}
+	}]);
+
+	return CharCounter;
+}();
+
+var elements = document.querySelectorAll('[data-min], [data-max]');
+elements.forEach(function (el) {
+	el.charCounter = new CharCounter(el);
+});

package/dist/assets/js/htmlTextLength.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+exports.default = htmlTextLength;
+function htmlTextLength(html) {
+	var div = document.createElement('div');
+
+	div.innerHTML = html;
+
+	return div.textContent.length;
+}

package/dist/assets/js/textToggle.js

@@ -14,8 +14,10 @@ function toggleTextOnClick(e) {
 	target.innerText = options[nextIteration];
 }
 
-var toggleTextButton = document.querySelector('[data-toggle-text]');
-
-if (toggleTextButton) {
-	toggleTextButton.addEventListener('click', toggleTextOnClick);
-}
+/* eslint-disable */
+document.addEventListener('click', function (e) {
+	if (e.target.closest('[data-toggle-text]')) {
+		toggleTextOnClick(e);
+		return false;
+	}
+});

package/dist/assets/js/utmGenerator.js

@@ -0,0 +1,40 @@
+'use strict';
+
+// Show/hide target container when Radiobutton is selected
+var radioButtons = document.querySelectorAll('[data-toggle="radio"]');
+
+// Hide all target containers on page load
+radioButtons.forEach(function (radio) {
+	var targetId = radio.getAttribute('data-target');
+	var targetContainer = document.getElementById(targetId);
+	if (targetContainer) {
+		targetContainer.setAttribute('aria-hidden', 'true');
+	}
+});
+
+// Function to toggle visibility
+function toggleVisibility(event) {
+	// Hide all target containers
+	radioButtons.forEach(function (radio) {
+		var targetId = radio.getAttribute('data-target');
+		var targetContainer = document.getElementById(targetId);
+		if (targetContainer) {
+			targetContainer.setAttribute('aria-hidden', 'true');
+		}
+
+		// Update aria-expanded for all radio buttons
+		radio.setAttribute('aria-expanded', radio.checked ? 'true' : 'false');
+	});
+
+	// Show the selected target container
+	var selectedTargetId = event.target.getAttribute('data-target');
+	var selectedTargetContainer = document.getElementById(selectedTargetId);
+	if (selectedTargetContainer) {
+		selectedTargetContainer.setAttribute('aria-hidden', 'false');
+	}
+}
+
+// Add event listener to radio buttons
+radioButtons.forEach(function (radio) {
+	radio.addEventListener('change', toggleVisibility);
+});

package/dist/assets/js/youtube.js

@@ -96,6 +96,9 @@ function createCover(el) {
 
 	img.loading = 'lazy';
 	img.src = url;
+	img.alt = 'tumnagel för video';
+	img.width = 480;
+	img.height = 270;
 }
 
 function setupYoutubePlayer(el) {

package/dist/atoms/textarea/rich-text.js

@@ -203,6 +203,14 @@ function setupTextArea(el) {
 	el.parentNode.insertBefore(editorEl, el);
 
 	createToolbar(editorEl, editor);
+
+	var event = new CustomEvent('editor-ready', {
+		detail: {
+			editor: editor
+		}
+	});
+
+	el.dispatchEvent(event);
 }
 
 function init() {

package/dist/components.js

@@ -64,4 +64,12 @@ require('./organisms/schedule/schedule-filter');
 
 require('./assets/js/ot');
 
-require('./atoms/range/range');
+require('./assets/js/charCounter');
+
+require('./atoms/range/range');
+
+require('./assets/js/utmGenerator');
+
+require('./assets/js/textToggle');
+
+require('./molecules/multi-select/multi-select');

package/dist/molecules/multi-select/multi-select.js

@@ -0,0 +1,140 @@
+'use strict';
+
+/* eslint-disable */
+var className = 'm-multi-select';
+var multiSelectElements = document.querySelectorAll('.js-' + className);
+var namespace = void 0;
+
+if (multiSelectElements) {
+	namespace = getComputedStyle(multiSelectElements[0], ':before').content.replace(/["']/g, '');
+}
+
+var currentFocus = -1; // Tracks the currently focused item in the suggestions
+
+// Highlight the active (focused) suggestion
+function setActive(items) {
+	if (!items.length) return false;
+	removeActive(items);
+	if (currentFocus >= items.length) currentFocus = 0;
+	if (currentFocus < 0) currentFocus = items.length - 1;
+	items[currentFocus].classList.add('autocomplete-active');
+
+	return items;
+}
+
+// Remove highlighting from all suggestions
+function removeActive(items) {
+	for (var i = 0; i < items.length; i += 1) {
+		items[i].classList.remove('autocomplete-active');
+	}
+}
+
+// Add a selected item to the list of selected items
+function addSelectedItem(item) {
+	var selectedItemsList = document.querySelector('.js-m-multi-select-selected-items');
+	var newItem = document.createElement('li');
+	newItem.textContent = item + ' ';
+	newItem.classList.add(namespace + 'a-tag');
+	newItem.classList.add(namespace + 'm-multi-select__tag');
+
+	var removeBtn = document.createElement('button');
+	removeBtn.classList.add(namespace + 'm-multi-select-selected-items__remove-btn');
+
+	var buttonTextContainer = document.createElement('span');
+	buttonTextContainer.classList.add('u-visuallyhidden');
+	removeBtn.appendChild(buttonTextContainer);
+	buttonTextContainer.textContent = 'Ta bort ' + item; // Accessibility label for screen readers
+
+	// Event listener for removing the selected item
+	removeBtn.addEventListener('click', function () {
+		removeItem(newItem, Array.from(selectedItemsList.children).indexOf(newItem));
+	});
+	newItem.appendChild(removeBtn);
+	selectedItemsList.appendChild(newItem);
+}
+
+// Remove an item and manage focus appropriately
+function removeItem(item, index) {
+	var selectedItemsList = document.querySelector('.js-m-multi-select-selected-items');
+	selectedItemsList.removeChild(item);
+
+	var remainingItems = selectedItemsList.getElementsByTagName('div');
+	// Focus management: set focus to the next item, or the search input if no items left
+	if (remainingItems.length > 0) {
+		if (index < remainingItems.length) {
+			remainingItems[index].getElementsByTagName('button')[0].focus();
+		} else {
+			remainingItems[remainingItems.length - 1].getElementsByTagName('button')[0].focus();
+		}
+	} else {
+		multiSelectInput.focus();
+	}
+}
+
+function setup(multiSelectElement) {
+	var multiSelectInput = multiSelectElement.querySelector('.js-' + className + '__input');
+	var suggestionsBox = multiSelectElement.querySelector('.js-' + className + '-suggestions-box');
+	var suggestionsData = multiSelectInput.getAttribute('data-multi-select-suggestions');
+
+	// Event listener for input changes in the search field
+	multiSelectInput.addEventListener('input', function () {
+		var value = this.value;
+		// Clear suggestions if less than 2 characters are typed
+		if (value.length < 2) {
+			suggestionsBox.innerHTML = '';
+			return;
+		}
+
+		// Define JSON
+		var suggestions = document.getElementById(suggestionsData).textContent;
+		suggestions = JSON.parse(suggestions);
+
+		// Filter suggestions based on the input value
+		var filtered = suggestions.filter(function (item) {
+			return item.name.toLowerCase().startsWith(value.toLowerCase());
+		});
+		// Populate the suggestions box with the filtered results
+		suggestionsBox.innerHTML = filtered.map(function (item) {
+			return '<button class=\'' + namespace + 'm-multi-select__suggestion-btn\' tabindex=\'0\'>' + item.name + '</button>';
+		}).join('');
+		// Reset the current focus
+		currentFocus = -1;
+	});
+
+	// Event listener for keydown events for navigation and selection in the suggestions box
+	multiSelectInput.addEventListener('keydown', function (e) {
+		var items = suggestionsBox.getElementsByClassName(namespace + 'm-multi-select__suggestion-btn');
+		// Navigate down in the suggestions list
+		if (e.keyCode == 40) {
+			currentFocus = (currentFocus + 1) % items.length;
+			setActive(items);
+			// Navigate up in the suggestions list
+		} else if (e.keyCode == 38) {
+			currentFocus = (currentFocus - 1 + items.length) % items.length;
+			setActive(items);
+			// Handle Enter key to select a focused item
+		} else if (e.keyCode == 13) {
+			e.preventDefault();
+			if (currentFocus > -1 && items[currentFocus]) {
+				addSelectedItem(items[currentFocus].textContent);
+				suggestionsBox.innerHTML = '';
+				multiSelectInput.value = '';
+				currentFocus = -1;
+			}
+		}
+	});
+
+	// Event listener for the suggestions box
+	suggestionsBox.addEventListener('click', function (e) {
+		// Add the clicked suggestion to the selected items list
+		if (e.target && e.target.classList.contains('suggestion-btn')) {
+			addSelectedItem(e.target.textContent);
+			suggestionsBox.innerHTML = '';
+			multiSelectInput.value = '';
+		}
+	});
+}
+
+if (multiSelectElements) {
+	[].forEach.call(multiSelectElements, setup);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "4.0.10",
+	"version": "4.0.12-beta.0.1",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/app.scss

@@ -68,6 +68,7 @@ $namespace: '';
 @import 'molecules/glider/glider-hero';
 @import 'molecules/continue-video-guide/continue-video-guide';
 @import 'molecules/overview-navigation/overview-navigation';
+@import 'molecules/multi-select/multi-select';
 
 // Organisms
 @import 'organisms/header/header';

package/src/assets/js/textToggle.js

@@ -12,8 +12,10 @@ function toggleTextOnClick(e) {
 	target.innerText = options[nextIteration];
 }
 
-const toggleTextButton = document.querySelector('[data-toggle-text]');
-
-if (toggleTextButton) {
-	toggleTextButton.addEventListener('click', toggleTextOnClick);
-}
+/* eslint-disable */
+document.addEventListener('click', (e) => {
+	if (e.target.closest('[data-toggle-text]')) {
+		toggleTextOnClick(e);
+		return false;
+	}
+});

package/src/assets/js/utmGenerator.js

@@ -0,0 +1,38 @@
+// Show/hide target container when Radiobutton is selected
+const radioButtons = document.querySelectorAll('[data-toggle="radio"]');
+
+// Hide all target containers on page load
+radioButtons.forEach((radio) => {
+	const targetId = radio.getAttribute('data-target');
+	const targetContainer = document.getElementById(targetId);
+	if (targetContainer) {
+		targetContainer.setAttribute('aria-hidden', 'true');
+	}
+});
+
+// Function to toggle visibility
+function toggleVisibility(event) {
+	// Hide all target containers
+	radioButtons.forEach((radio) => {
+		const targetId = radio.getAttribute('data-target');
+		const targetContainer = document.getElementById(targetId);
+		if (targetContainer) {
+			targetContainer.setAttribute('aria-hidden', 'true');
+		}
+
+		// Update aria-expanded for all radio buttons
+		radio.setAttribute('aria-expanded', radio.checked ? 'true' : 'false');
+	});
+
+	// Show the selected target container
+	const selectedTargetId = event.target.getAttribute('data-target');
+	const selectedTargetContainer = document.getElementById(selectedTargetId);
+	if (selectedTargetContainer) {
+		selectedTargetContainer.setAttribute('aria-hidden', 'false');
+	}
+}
+
+// Add event listener to radio buttons
+radioButtons.forEach((radio) => {
+	radio.addEventListener('change', toggleVisibility);
+});

package/src/assets/js/youtube.js

@@ -81,6 +81,9 @@ function createCover(el) {
 
 	img.loading = 'lazy';
 	img.src = url;
+	img.alt = 'tumnagel för video';
+	img.width = 480;
+	img.height = 270;
 }
 
 function setupYoutubePlayer(el) {

package/src/components.js

@@ -32,3 +32,6 @@ import './organisms/schedule/schedule-filter';
 import './assets/js/ot';
 import './assets/js/charCounter';
 import './atoms/range/range';
+import './assets/js/utmGenerator';
+import './assets/js/textToggle';
+import './molecules/multi-select/multi-select';

package/src/molecules/multi-select/_multi-select.scss

@@ -0,0 +1,108 @@
+@charset "UTF-8";
+
+@include molecule(multi-select) {
+	position: relative;
+
+	&::before {
+		@extend %u-visuallyhidden;
+
+		content: $namespace;
+	}
+
+	@include e(suggestions-box) {
+		position: absolute;
+		border-top: none;
+		z-index: z_index(foreground);
+		top: 100%;
+		left: 0;
+		right: 0;
+		background-color: $color-snow;
+		overflow-y: auto;
+		max-height: rhythm(15);
+		border-bottom-left-radius: $border-radius;
+		border-bottom-right-radius: $border-radius;
+
+		@extend %box-shadow;
+	}
+
+	@include e(suggestion-btn) {
+		padding: rhythm(1);
+		cursor: pointer;
+		background-color: $color-snow;
+		border: none;
+		border-bottom: 1px solid $color-concrete;
+		width: 100%;
+		text-align: left;
+
+		&:hover,
+		&.autocomplete-active {
+			background-color: $color-ocean-dark;
+			color: $color-snow;
+		}
+	}
+
+	@include e(tag){
+		margin-bottom: rhythm(1);
+		background-color: $color-ash;
+		text-transform: none;
+		font-size: $size-medium;
+
+		&:hover,
+		&:focus {
+			background-color: $color-ash;
+			color: $color-cyberspace;
+		}
+	}
+}
+
+/* Selected items container */
+@include molecule(multi-select-selected-items) {
+	margin-top: -#{rhythm(1)};
+	padding: rhythm(2) rhythm(1) 0 rhythm(1);
+	border: 1px solid #d4d4d4;
+	background-color: $color-concrete;
+	border-bottom-left-radius: $border-radius;
+	border-bottom-right-radius: $border-radius;
+
+	&:empty {
+		display: none;
+	}
+
+	@include e(remove-btn) {
+		margin-left: 5px;
+		border: none;
+		background-color: #d80000;
+		color: white;
+		border-radius: 50%;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 1;
+		width: $icon-size-small;
+		height: $icon-size-small;
+		position: relative;
+		transform: translateX(rhythm(0.5));
+
+		&::after {
+			content: '';
+			display: block;
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSI4LDEwIDIsMTYgMCwxNCA2LDggMCwyIDIsMCA4LDYgMTQsMCAxNiwyIDEwLDggMTYsMTQgMTQsMTYgIi8+Cjwvc3ZnPgo=);
+			background-repeat: no-repeat;
+			background-position: center center;
+			background-size: calc($icon-size-small / 2) calc($icon-size-small / 2);
+		}
+
+		&:hover,
+		&:focus {
+			background-color: $color-cyberspace;
+		}
+	}
+}

package/src/molecules/multi-select/multi-select.js

@@ -0,0 +1,134 @@
+/* eslint-disable */
+const className = 'm-multi-select';
+const multiSelectElements = document.querySelectorAll(`.js-${className}`);
+let namespace;
+
+if( multiSelectElements ) {
+	namespace = getComputedStyle(multiSelectElements[0], ':before').content.replace(/["']/g, '');
+}
+
+let currentFocus = -1; // Tracks the currently focused item in the suggestions
+
+// Highlight the active (focused) suggestion
+function setActive(items) {
+	if (!items.length) return false;
+	removeActive(items);
+	if (currentFocus >= items.length) currentFocus = 0;
+	if (currentFocus < 0) currentFocus = items.length - 1;
+	items[currentFocus].classList.add('autocomplete-active');
+
+	return items;
+}
+
+// Remove highlighting from all suggestions
+function removeActive(items) {
+	for (let i = 0; i < items.length; i+=1) {
+		items[i].classList.remove('autocomplete-active');
+	}
+}
+
+// Add a selected item to the list of selected items
+function addSelectedItem(item) {
+	const selectedItemsList = document.querySelector('.js-m-multi-select-selected-items');
+	const newItem = document.createElement('li');
+	newItem.textContent = item + ' ';
+	newItem.classList.add(`${namespace}a-tag`);
+	newItem.classList.add(`${namespace}m-multi-select__tag`);
+
+	const removeBtn = document.createElement('button');
+	removeBtn.classList.add(`${namespace}m-multi-select-selected-items__remove-btn`);
+
+	const buttonTextContainer = document.createElement('span');
+	buttonTextContainer.classList.add('u-visuallyhidden');
+	removeBtn.appendChild(buttonTextContainer);
+	buttonTextContainer.textContent ='Ta bort ' + item; // Accessibility label for screen readers
+
+	// Event listener for removing the selected item
+	removeBtn.addEventListener('click', function () {
+		removeItem(newItem, Array.from(selectedItemsList.children).indexOf(newItem));
+	});
+	newItem.appendChild(removeBtn);
+	selectedItemsList.appendChild(newItem);
+}
+
+// Remove an item and manage focus appropriately
+function removeItem(item, index) {
+	const selectedItemsList = document.querySelector('.js-m-multi-select-selected-items');
+	selectedItemsList.removeChild(item);
+
+	let remainingItems = selectedItemsList.getElementsByTagName('div');
+	// Focus management: set focus to the next item, or the search input if no items left
+	if (remainingItems.length > 0) {
+		if (index < remainingItems.length) {
+			remainingItems[index].getElementsByTagName('button')[0].focus();
+		} else {
+			remainingItems[remainingItems.length - 1].getElementsByTagName('button')[0].focus();
+		}
+	} else {
+		multiSelectInput.focus();
+	}
+}
+
+function setup(multiSelectElement) {
+	const multiSelectInput = multiSelectElement.querySelector(`.js-${className}__input`);
+	const suggestionsBox = multiSelectElement.querySelector(`.js-${className}-suggestions-box`);
+	const suggestionsData = multiSelectInput.getAttribute('data-multi-select-suggestions');
+
+	// Event listener for input changes in the search field
+	multiSelectInput.addEventListener('input', function () {
+		const value = this.value;
+		// Clear suggestions if less than 2 characters are typed
+		if (value.length < 2) {
+			suggestionsBox.innerHTML = '';
+			return;
+		}
+
+		// Define JSON
+		let suggestions = document.getElementById(suggestionsData).textContent;
+		suggestions = JSON.parse(suggestions);
+
+		// Filter suggestions based on the input value
+		const filtered = suggestions.filter(item => item.name.toLowerCase().startsWith(value.toLowerCase()));
+		// Populate the suggestions box with the filtered results
+		suggestionsBox.innerHTML = filtered.map(item => `<button class='${namespace}m-multi-select__suggestion-btn' tabindex='0'>${item.name}</button>`).join('');
+		// Reset the current focus
+		currentFocus = -1;
+	});
+
+	// Event listener for keydown events for navigation and selection in the suggestions box
+	multiSelectInput.addEventListener('keydown', function (e) {
+		let items = suggestionsBox.getElementsByClassName(`${namespace}m-multi-select__suggestion-btn`);
+		// Navigate down in the suggestions list
+		if (e.keyCode == 40) {
+			currentFocus = (currentFocus + 1) % items.length;
+			setActive(items);
+			// Navigate up in the suggestions list
+		} else if (e.keyCode == 38) {
+			currentFocus = (currentFocus - 1 + items.length) % items.length;
+			setActive(items);
+			// Handle Enter key to select a focused item
+		} else if (e.keyCode == 13) {
+			e.preventDefault();
+			if (currentFocus > -1 && items[currentFocus]) {
+				addSelectedItem(items[currentFocus].textContent);
+				suggestionsBox.innerHTML = '';
+				multiSelectInput.value = '';
+				currentFocus = -1;
+			}
+		}
+	});
+
+	// Event listener for the suggestions box
+	suggestionsBox.addEventListener('click', function (e) {
+		// Add the clicked suggestion to the selected items list
+		if (e.target && e.target.classList.contains('suggestion-btn')) {
+			addSelectedItem(e.target.textContent);
+			suggestionsBox.innerHTML = '';
+			multiSelectInput.value = '';
+		}
+	});
+}
+
+if (multiSelectElements) {
+	[].forEach.call(multiSelectElements, setup);
+}

package/src/molecules/multi-select/readme.md

@@ -0,0 +1,2 @@
+# Accessible Multi Select with Autocomplete
+Use your mouse or keyboard to select and remove items. Compatible with screen readers.

package/src/utilities/_hide.scss

@@ -107,3 +107,7 @@
 		display: none !important;
 	}
 }
+
+.u-aria-hidden[aria-hidden='true'] {
+	display: none !important;
+}