{"project":{"id":"AByFzYj","userId":"davidyarham@gmail.com","username":null,"userPicture":null,"name":"Custom Element Dropdown","visible":true,"contributors":"","githubRepo":null,"forkedFrom":null,"isTemplate":false,"tags":"","files":{"folder":"","files":[{"name":"index.html","content":"\n\n\n \n \n Untitled\n \n\n\n
\n\t

WC Dropdown Demo

\n\n\t\n\t\t\n\t\t
\n\t\t\t\n\t\t
\n\t\n\n\t\n\t\t\n\t\t
\n\t\t\t\"I\n\t\t
\n\t\n\n\t\n
\n \n\n"},{"name":"main.js","content":"class MyDropdown extends HTMLElement {\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._open = false;\n\t\tthis._id = `wc-${crypto.randomUUID()}`;\n\n\t\tthis._handleClickOutside = this.handleClickOutside.bind(this);\n\t\tthis._handleEscape = this.handleEscape.bind(this);\n\t}\n\n\tconnectedCallback() {\n\n\t\tif (this.hasAttribute('open')) {\n\t\t\tthis._open = true;\n\t\t}\n\n\t\tthis.toggleEl = this.querySelector('[data-part=\"dropdown__toggle\"]');\n\t\tthis.containerEl = this.querySelector('[data-part=\"dropdown__container\"]');\n\n\t\tif (!this.toggleEl || !this.containerEl) {\n\t\t\tthis.innerHTML ='Missing slots!!!!'\n\t\t\treturn;\n\t\t}\n\t\t\n\t\t//Setup attributes\n\t\tthis.toggleEl.setAttribute('aria-haspopup', 'true');\n\t\tthis.toggleEl.setAttribute('aria-controls', this._id);\n\t\tthis.containerEl.id = this._id;\n\n\t\tthis.toggleEl.addEventListener('click', this); // handleEvent\n\n\t\tdocument.addEventListener('click', this._handleClickOutside);\n\t\tdocument.addEventListener('keyup', this._handleEscape);\n\n\t\tthis.updateState();\n\t}\n\n\thandleEvent(e) {\n\t\tthis.toggleOpen();\n\t}\n\t \n\tdisconnectedCallback() {\n\t\tdocument.removeEventListener('click', this._handleClickOutside);\n\t\tdocument.removeEventListener('keyup', this._handleEscape);\n\t}\n\n\ttoggleOpen() {\n\t\tthis._open = !this._open;\n\t\tthis.updateState();\n\t}\n\n\tclose() {\n\t\tthis._open = false;\n\t\tthis.updateState();\n\t}\n\n\thandleClickOutside(e) {\n\t\tif (!this.contains(e.target)) this.close();\n\t}\n\n\thandleEscape(e) {\n\t\tif (e.key === 'Escape') this.close();\n\t}\n\n\tupdateState() {\n\t\tthis.toggleEl.setAttribute('aria-expanded', String(this._open));\n\t\tif (this._open) {\n\t\t\tthis.containerEl.removeAttribute('hidden');\n\t\t}\n\t\telse {\n\t\t\tthis.containerEl.setAttribute('hidden', '');\n\t\t}\n\t}\n}\n\ncustomElements.define('cib-dropdown', MyDropdown);"},{"name":"style.css","content":"body {\n\tfont-family: system-ui, sans-serif;\n\tpadding: 2rem;\n}\n\n\ncib-dropdown:not(:defined){\n\tdisplay: none;\n}\n\ncib-dropdown {\n\tposition: relative;\n\tdisplay: inline-block;\n}\n\n.cib-dropdown__container {\n\tposition: absolute;\n\ttop: 100%;\n\tleft: 0;\n\tmin-width: 170px;\n\twidth: 100%;\n\tbackground: white;\n\tborder: 1px solid #ccc;\n\tbox-shadow: 0 4px 10px rgba(0, 0, 0, .25);\n\tpadding:10px;\n\tmargin-top:5px;\n\tborder-radius:10px;\n}\n\nimg{\n\twidth:100%;\n}\n\n.cib-button {\n\tpadding: 0.5rem 1rem;\n\tcursor: pointer;\n\tbackground:blue;\n\tcolor:white;\n\tborder:0\n}\n\n.cib-list {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n}\n\n.cib-list a {\n\tdisplay: block;\n\tpadding: 0.5rem 1rem;\n\ttext-decoration: none;\n\tcolor: black;\n}\n\n.cib-list a:hover {\n\tbackground: #f0f0f0;\n}"}],"folders":[]},"variants":null,"createdAt":"2026-01-09T20:40:08.845Z","updatedAt":"2026-01-28T22:44:19.216Z","hasThumbnail":true}}