diff --git a/package-lock.json b/package-lock.json
index 23f94971..4ef9b493 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9074,6 +9074,12 @@
"integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=",
"dev": true
},
+ "elix": {
+ "version": "14.1.1",
+ "resolved": "https://registry.npmjs.org/elix/-/elix-14.1.1.tgz",
+ "integrity": "sha512-o+6YAp1qhn0Itz2LzEAQtzi9se43eiXdrdSVvXpTrj3bsp4p/c1bY6VVeYfdaJy9a8QRnMkH9WrLGdFbRcFsuA==",
+ "dev": true
+ },
"elliptic": {
"version": "6.5.3",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
diff --git a/package.json b/package.json
index ff9d2755..87e99872 100644
--- a/package.json
+++ b/package.json
@@ -170,6 +170,7 @@
"cypress-multi-reporters": "1.4.0",
"cypress-plugin-snapshots": "1.4.4",
"deparam": "git+https://github.com/brettz9/deparam.git#updates",
+ "elix": "^14.1.1",
"es-dev-commonjs-transformer": "0.2.0",
"es-dev-server": "1.57.8",
"es-dev-server-rollup": "0.0.8",
diff --git a/src/editor/components/index.js b/src/editor/components/index.js
index 177494d9..821da075 100644
--- a/src/editor/components/index.js
+++ b/src/editor/components/index.js
@@ -1,3 +1,4 @@
import './seButton.js';
import './seFlyingButton.js';
import './seExplorerButton.js';
+import './seDropdown.js';
diff --git a/src/editor/components/seDropdown.js b/src/editor/components/seDropdown.js
new file mode 100644
index 00000000..0c07ecec
--- /dev/null
+++ b/src/editor/components/seDropdown.js
@@ -0,0 +1,122 @@
+/* eslint-disable node/no-unpublished-import */
+import ListComboBox from 'elix/define/ListComboBox.js';
+import SpinBox from 'elix/define/NumberSpinBox.js';
+import {defaultState, template} from 'elix/src/base/internal.js';
+import {templateFrom} from 'elix/src/core/htmlLiterals.js';
+
+class MyCombo extends ListComboBox {
+ get [defaultState] () {
+ return Object.assign(super[defaultState], {
+ inputPartType: SpinBox
+ });
+ }
+ get [template] () {
+ const result = super[template];
+ result.content.append(
+ templateFrom.html`
+
+ `.content
+ );
+ return result;
+ }
+}
+
+customElements.define('my-combo', MyCombo);
+
+const mytemplate = document.createElement('template');
+mytemplate.innerHTML = `
+
+
+ 
+
+
+
+
+`;
+/**
+ * @class Dropdown
+ */
+export class Dropdown extends HTMLElement {
+ /**
+ * @function constructor
+ */
+ constructor () {
+ super();
+ // create the shadowDom and insert the template
+ this._shadowRoot = this.attachShadow({mode: 'open'});
+ this._shadowRoot.appendChild(mytemplate.content.cloneNode(true));
+ this.$dropdown = this._shadowRoot.querySelector('my-combo');
+ this.$img = this._shadowRoot.querySelector('img');
+ this.$span = this._shadowRoot.querySelector('span');
+ // we retrieve all elements added in the slot (i.e. se-buttons)
+ // this.$elements = this.$menu.lastElementChild.assignedElements();
+ }
+ /**
+ * @function observedAttributes
+ * @returns {any} observed
+ */
+ static get observedAttributes () {
+ return ['title', 'src'];
+ }
+ /**
+ * @function attributeChangedCallback
+ * @param {string} name
+ * @param {string} oldValue
+ * @param {string} newValue
+ * @returns {void}
+ */
+ attributeChangedCallback (name, oldValue, newValue) {
+ if (oldValue === newValue) return;
+ switch (name) {
+ case 'title':
+ {
+ const shortcut = this.getAttribute('shortcut');
+ this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
+ }
+ break;
+ case 'src':
+ this.$img.setAttribute('src', newValue);
+ break;
+ default:
+ // eslint-disable-next-line no-console
+ console.error(`unknown attribute: ${name}`);
+ break;
+ }
+ }
+ /**
+ * @function connectedCallback
+ * @returns {void}
+ */
+ connectedCallback () {
+ this.$dropdown.addEventListener('selectedindexchange', (e) => {
+ console.log(e.detail);
+ console.log(this.children[e.detail.selectedIndex].getAttribute('value'));
+ });
+ }
+}
+
+// Register
+customElements.define('se-dropdown', Dropdown);
diff --git a/src/editor/index.html b/src/editor/index.html
index f50354d4..23b8a902 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -411,29 +411,18 @@