@internetstiftelsen/styleguide 4.0.10-beta.0.1 → 4.0.11

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]');
+var toggleTextButtons = document.querySelectorAll('[data-toggle-text]');
 
-if (toggleTextButton) {
-	toggleTextButton.addEventListener('click', toggleTextOnClick);
+if (toggleTextButtons) {
+	[].forEach.call(toggleTextButtons, function (toggleTextButton) {
+		toggleTextButton.addEventListener('click', toggleTextOnClick);
+	});
 }

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,132 @@
+'use strict';
+
+/* eslint-disable */
+// Get references to the search input and suggestions box elements
+var className = 'm-multi-select';
+var multiSelectElement = document.querySelector('.js-' + className);
+var multiSelectInput = document.querySelector('.js-' + className + '__input');
+var suggestionsBox = document.querySelector('.js-' + className + '-suggestions-box');
+
+if (multiSelectInput && suggestionsBox) {
+
+	// Function to highlight the active (focused) suggestion
+	var setActive = 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;
+	};
+
+	// Function to remove highlighting from all suggestions
+
+
+	var removeActive = function removeActive(items) {
+		for (var i = 0; i < items.length; i++) {
+			items[i].classList.remove('autocomplete-active');
+		}
+	};
+
+	// Function to add a selected item to the list of selected items
+
+
+	var addSelectedItem = function addSelectedItem(item) {
+		var container = document.getElementById('selectedItemsContainer');
+		var newItem = document.createElement('li');
+		newItem.textContent = item + ' ';
+		var removeBtn = document.createElement('button');
+		var buttonTextContainer = document.createElement('span');
+		//removeBtn.textContent = 'x';
+		buttonTextContainer.classList.add('visually-hidden');
+		removeBtn.appendChild(buttonTextContainer);
+		buttonTextContainer.textContent = 'Remove ' + item; // Accessibility label for screen readers
+		// Event listener for removing the selected item
+		removeBtn.addEventListener('click', function () {
+			removeItem(newItem, Array.from(container.children).indexOf(newItem));
+		});
+		newItem.appendChild(removeBtn);
+		container.appendChild(newItem);
+	};
+
+	// Function to remove an item and manage focus appropriately
+
+
+	var removeItem = function removeItem(item, index) {
+		var container = document.getElementById('selectedItemsContainer');
+		container.removeChild(item);
+
+		var remainingItems = container.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();
+		}
+	};
+
+	// Event listener for input changes in the search field
+
+
+	var currentFocus = -1; // Tracks the currently focused item in the suggestions
+	var namespace = getComputedStyle(multiSelectElement, ':before').content.replace(/["']/g, '');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 a JSON array of 100 real cities
+		var suggestions = [{ name: 'New York' }, { name: 'Los Angeles' }, { name: 'Chicago' }, { name: 'Houston' }, { name: 'Phoenix' }, { name: 'Philadelphia' }, { name: 'San Antonio' }, { name: 'San Diego' }, { name: 'Dallas' }, { name: 'San Jose' }, { name: 'Austin' }, { name: 'Jacksonville' }, { name: 'Fort Worth' }, { name: 'Columbus' }, { name: 'San Francisco' }, { name: 'Tokyo' }, { name: 'Delhi' }, { name: 'Shanghai' }, { name: 'Sao Paulo' }, { name: 'Mumbai' }, { name: 'Beijing' }, { name: 'Cairo' }, { name: 'Dhaka' }, { name: 'Mexico City' }, { name: 'Osaka' }, { name: 'Karachi' }, { name: 'Chongqing' }, { name: 'Istanbul' }, { name: 'Buenos Aires' }, { name: 'Kolkata' }, { name: 'Kinshasa' }, { name: 'Lagos' }, { name: 'Manila' }, { name: 'Tianjin' }, { name: 'Rio de Janeiro' }, { name: 'Guangzhou' }, { name: 'Lahore' }, { name: 'Moscow' }, { name: 'Shenzhen' }, { name: 'Bangalore' }, { name: 'Paris' }, { name: 'Bogota' }, { name: 'Jakarta' }, { name: 'Chennai' }, { name: 'Lima' }, { name: 'Bangkok' }, { name: 'Seoul' }, { name: 'Nagoya' }, { name: 'Hyderabad' }, { name: 'London' }, { name: 'Tehran' }, { name: 'Chengdu' }, { name: 'Nanjing' }, { name: 'Wuhan' }, { name: 'Ho Chi Minh City' }, { name: 'Luanda' }, { name: 'Ahmedabad' }, { name: 'Kuala Lumpur' }, { name: 'Xi’an' }, { name: 'Hong Kong' }, { name: 'Dongguan' }, { name: 'Hangzhou' }, { name: 'Foshan' }, { name: 'Shenyang' }, { name: 'Riyadh' }, { name: 'Baghdad' }, { name: 'Santiago' }, { name: 'Surat' }, { name: 'Madrid' }, { name: 'Suzhou' }, { name: 'Pune' }, { name: 'Harbin' }, { name: 'Houston' }, { name: 'Toronto' }, { name: 'Dar es Salaam' }, { name: 'Miami' }, { name: 'Belo Horizonte' }, { name: 'Singapore' }, { name: 'Atlanta' }, { name: 'Fukuoka' }, { name: 'Khartoum' }, { name: 'Barcelona' }, { name: 'Johannesburg' }, { name: 'Saint Petersburg' }, { name: 'Qingdao' }, { name: 'Dalian' }, { name: 'Washington, D.C.' }, { name: 'Yangon' }, { name: 'Alexandria' }, { name: 'Jinan' }, { name: 'Guadalajara' }, { name: 'Sydney' }, { name: 'Melbourne' }, { name: 'Montreal' }, { name: 'Ankara' }, { name: 'Recife' }, { name: 'Durban' }, { name: 'Porto Alegre' }, { name: 'Dusseldorf' }, { name: 'Hamburg' }, { name: 'Cape Town' }];
+
+		// 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;
+			}
+		}
+	});
+
+	// Click 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 = '';
+		}
+	});
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "4.0.10-beta.0.1",
+	"version": "4.0.11",
 	"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/charCounter.js

@@ -0,0 +1,111 @@
+import className from './className';
+import htmlTextLength from './htmlTextLength';
+
+class CharCounter {
+	constructor(el) {
+		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();
+	}
+
+	waitForEditor() {
+		if (this.el.editor) {
+			this.build();
+			this.attach();
+		} else {
+			this.el.addEventListener('editor-ready', () => {
+				this.build();
+				this.attach();
+			});
+		}
+	}
+
+	count() {
+		if (this.isRichText) {
+			return htmlTextLength(this.el.editor.getHTML());
+		}
+
+		return this.el.value.length;
+	}
+
+	setCountText() {
+		const count = this.count();
+
+		if (this.min && count < this.min) {
+			this.counterEl.textContent = `${count}/${this.min}`;
+			this.counterEl.className = `color-ruby ${className('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 ${className('a-meta')}`;
+
+			return;
+		}
+
+		this.counterEl.textContent = `${count}/${this.max || this.min}`;
+		this.counterEl.className = `color-jade ${className('a-meta')}`;
+	}
+
+	build() {
+		const counter = document.createElement('small');
+		let wrapper;
+
+		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 ${className('a-meta')}`;
+		counter.style.cssText = 'position: absolute; top: 5px; right: 10px; z-index: 501;';
+
+		wrapper.appendChild(counter);
+
+		this.counterEl = counter;
+		this.setCountText();
+	}
+
+	attach() {
+		if (this.isRichText) {
+			this.el.editor.on('update', () => {
+				this.setCountText();
+			});
+		} else {
+			this.el.addEventListener('input', () => {
+				this.setCountText();
+			});
+		}
+	}
+}
+
+const elements = document.querySelectorAll('[data-min], [data-max]');
+elements.forEach((el) => {
+	el.charCounter = new CharCounter(el);
+});

package/src/assets/js/htmlTextLength.js

@@ -0,0 +1,7 @@
+export default function htmlTextLength(html) {
+	const div = document.createElement('div');
+
+	div.innerHTML = html;
+
+	return div.textContent.length;
+}

package/src/assets/js/textToggle.js

@@ -12,8 +12,10 @@ function toggleTextOnClick(e) {
 	target.innerText = options[nextIteration];
 }
 
-const toggleTextButton = document.querySelector('[data-toggle-text]');
+const toggleTextButtons = document.querySelectorAll('[data-toggle-text]');
 
-if (toggleTextButton) {
-	toggleTextButton.addEventListener('click', toggleTextOnClick);
+if (toggleTextButtons) {
+	[].forEach.call(toggleTextButtons, (toggleTextButton) => {
+		toggleTextButton.addEventListener('click', toggleTextOnClick);
+	});
 }

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/atoms/textarea/rich-text.js

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

package/src/atoms/textarea/textarea.config.js

@@ -51,6 +51,44 @@ module.exports = {
 				is_richtext: true,
 				has_help: false
 			}
+		},
+		{
+			name: 'Counter (max)',
+			status: 'wip',
+			context: {
+				is_richtext: false,
+				has_help: false,
+				max: 300,
+			},
+		},
+		{
+			name: 'Counter (min)',
+			status: 'wip',
+			context: {
+				is_richtext: false,
+				has_help: false,
+				min: 30,
+			},
+		},
+		{
+			name: 'Counter (min and max)',
+			status: 'wip',
+			context: {
+				is_richtext: false,
+				has_help: false,
+				min: 30,
+				max: 300,
+			},
+		},
+		{
+			name: 'Rich text with counter',
+			status: 'wip',
+			context: {
+				is_richtext: true,
+				has_help: true,
+				min: 30,
+				max: 300,
+			},
 		}
 	]
 }

package/src/components.js

@@ -30,4 +30,8 @@ import './organisms/timeline/timeline';
 import './molecules/overview-navigation/overview-navigation';
 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,116 @@
+@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: 10px;
+		cursor: pointer;
+		background-color: #fff;
+		border: none;
+		border-bottom: 1px solid #d4d4d4;
+		width: 100%;
+		text-align: left;
+
+		&:hover,
+		&.autocomplete-active {
+			background-color: $color-ocean;
+			color: $color-snow;
+		}
+	}
+}
+
+/* Selected items container */
+.selected-items-container {
+	margin-top: -#{rhythm(1)};
+	padding: rhythm(2) rhythm(1) rhythm(1) rhythm(1);
+	border: 1px solid #d4d4d4;
+	background-color: $color-concrete;
+	border-bottom-left: $border-radius;
+	border-bottom-right-radius: $border-radius;
+}
+
+.selected-items-container:empty {
+	display: none;
+}
+
+/* Style for selected items */
+.selected-items-container li {
+	margin-right: 5px;
+	padding: 5px;
+	border: 1px solid #ccc;
+	background-color: #e4e4e4;
+	border-radius: 4px;
+	display: inline-flex;
+	align-items: center;
+	margin-bottom: 0;
+	font-size: 90%;
+}
+
+/* Remove button for selected items */
+.selected-items-container button {
+	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: 16px;
+	height: 16px;
+	position: relative;
+}
+
+.selected-items-container button::after {
+	content: '';
+	display: block;
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	top: 0;
+	left: 0;
+	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSI4LDEwIDIsMTYgMCwxNCA2LDggMCwyIDIsMCA4LDYgMTQsMCAxNiwyIDEwLDggMTYsMTQgMTQsMTYgIi8+Cjwvc3ZnPgo=);
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: 8px 8px;
+}
+
+.selected-items-container button:hover {
+	background-color: darkred;
+}
+
+.visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip: rect(0 0 0 0);
+	clip: rect(0, 0, 0, 0);
+}

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

@@ -0,0 +1,159 @@
+/* eslint-disable */
+// Get references to the search input and suggestions box elements
+const className = 'm-multi-select';
+const multiSelectElement = document.querySelector(`.js-${className}`);
+const multiSelectInput = document.querySelector(`.js-${className}__input`);
+const suggestionsBox = document.querySelector(`.js-${className}-suggestions-box`);
+
+if (multiSelectInput && suggestionsBox) {
+	let currentFocus = -1; // Tracks the currently focused item in the suggestions
+	const namespace = getComputedStyle(multiSelectElement, ':before').content.replace(/["']/g, '');
+
+	// Function to 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;
+	}
+
+// Function to remove highlighting from all suggestions
+	function removeActive(items) {
+		for (let i = 0; i < items.length; i++) {
+			items[i].classList.remove('autocomplete-active');
+		}
+	}
+
+// Function to add a selected item to the list of selected items
+	function addSelectedItem(item) {
+		const container = document.getElementById('selectedItemsContainer');
+		const newItem = document.createElement('li');
+		newItem.textContent = item + ' ';
+		const removeBtn = document.createElement('button');
+		const buttonTextContainer = document.createElement('span');
+		//removeBtn.textContent = 'x';
+		buttonTextContainer.classList.add('visually-hidden');
+		removeBtn.appendChild(buttonTextContainer);
+		buttonTextContainer.textContent ='Remove ' + item; // Accessibility label for screen readers
+		// Event listener for removing the selected item
+		removeBtn.addEventListener('click', function () {
+			removeItem(newItem, Array.from(container.children).indexOf(newItem));
+		});
+		newItem.appendChild(removeBtn);
+		container.appendChild(newItem);
+	}
+
+// Function to remove an item and manage focus appropriately
+	function removeItem(item, index) {
+		const container = document.getElementById('selectedItemsContainer');
+		container.removeChild(item);
+
+		let remainingItems = container.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();
+		}
+	}
+
+// 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 a JSON array of 100 real cities
+		let suggestions = [
+			{ name: 'New York' }, { name: 'Los Angeles' }, { name: 'Chicago' },
+			{ name: 'Houston' }, { name: 'Phoenix' }, { name: 'Philadelphia' },
+			{ name: 'San Antonio' }, { name: 'San Diego' }, { name: 'Dallas' },
+			{ name: 'San Jose' }, { name: 'Austin' }, { name: 'Jacksonville' },
+			{ name: 'Fort Worth' }, { name: 'Columbus' }, { name: 'San Francisco' },
+			{ name: 'Tokyo' }, { name: 'Delhi' }, { name: 'Shanghai' },
+			{ name: 'Sao Paulo' }, { name: 'Mumbai' }, { name: 'Beijing' },
+			{ name: 'Cairo' }, { name: 'Dhaka' }, { name: 'Mexico City' },
+			{ name: 'Osaka' }, { name: 'Karachi' }, { name: 'Chongqing' },
+			{ name: 'Istanbul' }, { name: 'Buenos Aires' }, { name: 'Kolkata' },
+			{ name: 'Kinshasa' }, { name: 'Lagos' }, { name: 'Manila' },
+			{ name: 'Tianjin' }, { name: 'Rio de Janeiro' }, { name: 'Guangzhou' },
+			{ name: 'Lahore' }, { name: 'Moscow' }, { name: 'Shenzhen' },
+			{ name: 'Bangalore' }, { name: 'Paris' }, { name: 'Bogota' },
+			{ name: 'Jakarta' }, { name: 'Chennai' }, { name: 'Lima' },
+			{ name: 'Bangkok' }, { name: 'Seoul' }, { name: 'Nagoya' },
+			{ name: 'Hyderabad' }, { name: 'London' }, { name: 'Tehran' },
+			{ name: 'Chengdu' }, { name: 'Nanjing' },
+			{ name: 'Wuhan' }, { name: 'Ho Chi Minh City' }, { name: 'Luanda' },
+			{ name: 'Ahmedabad' }, { name: 'Kuala Lumpur' }, { name: 'Xi’an' },
+			{ name: 'Hong Kong' }, { name: 'Dongguan' }, { name: 'Hangzhou' },
+			{ name: 'Foshan' }, { name: 'Shenyang' }, { name: 'Riyadh' },
+			{ name: 'Baghdad' }, { name: 'Santiago' }, { name: 'Surat' },
+			{ name: 'Madrid' }, { name: 'Suzhou' }, { name: 'Pune' },
+			{ name: 'Harbin' }, { name: 'Houston' },
+			{ name: 'Toronto' }, { name: 'Dar es Salaam' }, { name: 'Miami' },
+			{ name: 'Belo Horizonte' }, { name: 'Singapore' },
+			{ name: 'Atlanta' }, { name: 'Fukuoka' }, { name: 'Khartoum' },
+			{ name: 'Barcelona' }, { name: 'Johannesburg' }, { name: 'Saint Petersburg' },
+			{ name: 'Qingdao' }, { name: 'Dalian' }, { name: 'Washington, D.C.' },
+			{ name: 'Yangon' }, { name: 'Alexandria' }, { name: 'Jinan' },
+			{ name: 'Guadalajara' }, { name: 'Sydney' }, { name: 'Melbourne' },
+			{ name: 'Montreal' }, { name: 'Ankara' }, { name: 'Recife' },
+			{ name: 'Durban' }, { name: 'Porto Alegre' },
+			{ name: 'Dusseldorf' }, { name: 'Hamburg' }, { name: 'Cape Town' },
+		];
+
+		// 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;
+			}
+		}
+	});
+
+// Click 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 = '';
+		}
+	});
+
+
+
+
+}

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;
+}