diff --git a/docs/assets/index-8N5mZr77.css b/docs/assets/index-8N5mZr77.css deleted file mode 100644 index 1a925cd..0000000 --- a/docs/assets/index-8N5mZr77.css +++ /dev/null @@ -1 +0,0 @@ -@import"https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300;1,400&display=swap";:root{--primary-color: #4cb5ae;--primary-color-dark: #3a8c87;--text-color: #f7f7ff;--background-color: #111;--background-color-dark: #000}::selection{background:var(--primary-color);color:var(--background-color-dark)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{border-radius:100vw;background:var(--background-color-dark)}::-webkit-scrollbar-thumb{border-radius:100vw;background:var(--primary-color)}::-webkit-scrollbar-thumb:hover{background:var(--primary-color-dark)}body{background-color:var(--background-color);color:var(--text-color);padding:min(2.5rem,5vw);font-family:Atkinson Hyperlegible,sans-serif;max-width:min(80ch,100dvw);margin:0 auto}h1,h2,h3,h4,h5,h6{font-family:Source Code Pro,monospace}h1{font-size:3rem}nav{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}a{color:var(--primary-color)}pre{background-color:var(--background-color-dark);color:var(--text-color);padding:1rem;display:inline-block;border-radius:.5rem;font-family:Source Code Pro,monospace;max-width:90%;overflow-x:auto}code{font-family:Source Code Pro,monospace}:not(combobox-framework)>ul{list-style:none;padding-inline-start:1.5rem}:not(combobox-framework)>ul li{margin-block:1rem}.features li{padding-left:.5ch}.features .accessible::marker{content:"🌟"}.features .styling::marker{content:"🎨"}section:has(h2):not(:has(h3)),section:not(:has(h2)):has(h3){border-left:5px solid var(--primary-color);padding-left:2rem;margin-left:-2rem}combobox-framework [slot=list]{color:var(--background-color);background-color:var(--text-color);position:absolute;top:anchor(bottom);left:anchor(left);right:anchor(right);list-style:none;margin:0;padding:0;border:1px solid black;border-radius:0 0 .2rem .2rem}combobox-framework [slot=list]>*{padding:.2rem;cursor:pointer}combobox-framework [slot=list] li:hover,combobox-framework [slot=list] tr:hover td{background-color:var(--primary-color)}combobox-framework input[aria-expanded=false]+[slot=list]{display:none} diff --git a/docs/assets/index-FgS8rcFc.js b/docs/assets/index-FgS8rcFc.js deleted file mode 100644 index 9f19b61..0000000 --- a/docs/assets/index-FgS8rcFc.js +++ /dev/null @@ -1,4 +0,0 @@ -var lt=Object.defineProperty;var ut=(r,t,e)=>t in r?lt(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e;var S=(r,t,e)=>(ut(r,typeof t!="symbol"?t+"":t,e),e);(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))e(s);new MutationObserver(s=>{for(const i of s)if(i.type==="childList")for(const n of i.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&e(n)}).observe(document,{childList:!0,subtree:!0});function t(s){const i={};return s.integrity&&(i.integrity=s.integrity),s.referrerPolicy&&(i.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?i.credentials="include":s.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function e(s){if(s.ep)return;s.ep=!0;const i=t(s);fetch(s.href,i)}})();function M(r){return Array.isArray?Array.isArray(r):st(r)==="[object Array]"}const dt=1/0;function ft(r){if(typeof r=="string")return r;let t=r+"";return t=="0"&&1/r==-dt?"-0":t}function pt(r){return r==null?"":ft(r)}function y(r){return typeof r=="string"}function tt(r){return typeof r=="number"}function gt(r){return r===!0||r===!1||_t(r)&&st(r)=="[object Boolean]"}function et(r){return typeof r=="object"}function _t(r){return et(r)&&r!==null}function _(r){return r!=null}function D(r){return!r.trim().length}function st(r){return r==null?r===void 0?"[object Undefined]":"[object Null]":Object.prototype.toString.call(r)}const mt="Incorrect 'index' type",Lt=r=>`Invalid value for key ${r}`,bt=r=>`Pattern length exceeds max of ${r}.`,yt=r=>`Missing ${r} property in key`,Et=r=>`Property 'weight' in key '${r}' must be a positive integer`,X=Object.prototype.hasOwnProperty;class Mt{constructor(t){this._keys=[],this._keyMap={};let e=0;t.forEach(s=>{let i=it(s);this._keys.push(i),this._keyMap[i.id]=i,e+=i.weight}),this._keys.forEach(s=>{s.weight/=e})}get(t){return this._keyMap[t]}keys(){return this._keys}toJSON(){return JSON.stringify(this._keys)}}function it(r){let t=null,e=null,s=null,i=1,n=null;if(y(r)||M(r))s=r,t=J(r),e=j(r);else{if(!X.call(r,"name"))throw new Error(yt("name"));const c=r.name;if(s=c,X.call(r,"weight")&&(i=r.weight,i<=0))throw new Error(Et(c));t=J(c),e=j(c),n=r.getFn}return{path:t,id:e,weight:i,src:s,getFn:n}}function J(r){return M(r)?r:r.split(".")}function j(r){return M(r)?r.join("."):r}function It(r,t){let e=[],s=!1;const i=(n,c,o)=>{if(_(n))if(!c[o])e.push(n);else{let h=c[o];const a=n[h];if(!_(a))return;if(o===c.length-1&&(y(a)||tt(a)||gt(a)))e.push(pt(a));else if(M(a)){s=!0;for(let l=0,d=a.length;lr.score===t.score?r.idx{this._keysMap[e.id]=s})}create(){this.isCreated||!this.docs.length||(this.isCreated=!0,y(this.docs[0])?this.docs.forEach((t,e)=>{this._addString(t,e)}):this.docs.forEach((t,e)=>{this._addObject(t,e)}),this.norm.clear())}add(t){const e=this.size();y(t)?this._addString(t,e):this._addObject(t,e)}removeAt(t){this.records.splice(t,1);for(let e=t,s=this.size();e{let c=i.getFn?i.getFn(t):this.getFn(t,i.path);if(_(c)){if(M(c)){let o=[];const h=[{nestedArrIndex:-1,value:c}];for(;h.length;){const{nestedArrIndex:a,value:l}=h.pop();if(_(l))if(y(l)&&!D(l)){let d={v:l,i:a,n:this.norm.get(l)};o.push(d)}else M(l)&&l.forEach((d,f)=>{h.push({nestedArrIndex:f,value:d})})}s.$[n]=o}else if(y(c)&&!D(c)){let o={v:c,n:this.norm.get(c)};s.$[n]=o}}}),this.records.push(s)}toJSON(){return{keys:this.keys,records:this.records}}}function rt(r,t,{getFn:e=u.getFn,fieldNormWeight:s=u.fieldNormWeight}={}){const i=new G({getFn:e,fieldNormWeight:s});return i.setKeys(r.map(it)),i.setSources(t),i.create(),i}function Nt(r,{getFn:t=u.getFn,fieldNormWeight:e=u.fieldNormWeight}={}){const{keys:s,records:i}=r,n=new G({getFn:t,fieldNormWeight:e});return n.setKeys(s),n.setIndexRecords(i),n}function C(r,{errors:t=0,currentLocation:e=0,expectedLocation:s=0,distance:i=u.distance,ignoreLocation:n=u.ignoreLocation}={}){const c=t/r.length;if(n)return c;const o=Math.abs(s-e);return i?c+o/i:o?1:c}function Ot(r=[],t=u.minMatchCharLength){let e=[],s=-1,i=-1,n=0;for(let c=r.length;n=t&&e.push([s,i]),s=-1)}return r[n-1]&&n-s>=t&&e.push([s,n-1]),e}const k=32;function Tt(r,t,e,{location:s=u.location,distance:i=u.distance,threshold:n=u.threshold,findAllMatches:c=u.findAllMatches,minMatchCharLength:o=u.minMatchCharLength,includeMatches:h=u.includeMatches,ignoreLocation:a=u.ignoreLocation}={}){if(t.length>k)throw new Error(bt(k));const l=t.length,d=r.length,f=Math.max(0,Math.min(s,d));let p=n,g=f;const m=o>1||h,v=m?Array(d):[];let E;for(;(E=r.indexOf(t,g))>-1;){let L=C(t,{currentLocation:E,expectedLocation:f,distance:i,ignoreLocation:a});if(p=Math.min(L,p),g=E+l,m){let I=0;for(;I=Y;b-=1){let $=b-1,V=e[r.charAt($)];if(m&&(v[$]=+!!V),T[b]=(T[b+1]<<1|1)&V,L&&(T[b]|=(O[b+1]|O[b])<<1|1|O[b+1]),T[b]&at&&(w=C(t,{errors:L,currentLocation:$,expectedLocation:f,distance:i,ignoreLocation:a}),w<=p)){if(p=w,g=$,g<=f)break;Y=Math.max(1,2*f-g)}}if(C(t,{errors:L+1,currentLocation:f,expectedLocation:f,distance:i,ignoreLocation:a})>p)break;O=T}const F={isMatch:g>=0,score:Math.max(.001,w)};if(m){const L=Ot(v,o);L.length?h&&(F.indices=L):F.isMatch=!1}return F}function Rt(r){let t={};for(let e=0,s=r.length;e{this.chunks.push({pattern:f,alphabet:Rt(f),startIndex:p})},d=this.pattern.length;if(d>k){let f=0;const p=d%k,g=d-p;for(;f{const{isMatch:E,score:O,indices:w}=Tt(t,g,m,{location:i+v,distance:n,threshold:c,findAllMatches:o,minMatchCharLength:h,includeMatches:s,ignoreLocation:a});E&&(f=!0),d+=O,E&&w&&(l=[...l,...w])});let p={isMatch:f,score:f?d/this.chunks.length:1};return f&&s&&(p.indices=l),p}}class x{constructor(t){this.pattern=t}static isMultiMatch(t){return Q(t,this.multiRegex)}static isSingleMatch(t){return Q(t,this.singleRegex)}search(){}}function Q(r,t){const e=r.match(t);return e?e[1]:null}class $t extends x{constructor(t){super(t)}static get type(){return"exact"}static get multiRegex(){return/^="(.*)"$/}static get singleRegex(){return/^=(.*)$/}search(t){const e=t===this.pattern;return{isMatch:e,score:e?0:1,indices:[0,this.pattern.length-1]}}}class Ct extends x{constructor(t){super(t)}static get type(){return"inverse-exact"}static get multiRegex(){return/^!"(.*)"$/}static get singleRegex(){return/^!(.*)$/}search(t){const s=t.indexOf(this.pattern)===-1;return{isMatch:s,score:s?0:1,indices:[0,t.length-1]}}}class Pt extends x{constructor(t){super(t)}static get type(){return"prefix-exact"}static get multiRegex(){return/^\^"(.*)"$/}static get singleRegex(){return/^\^(.*)$/}search(t){const e=t.startsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[0,this.pattern.length-1]}}}class Ft extends x{constructor(t){super(t)}static get type(){return"inverse-prefix-exact"}static get multiRegex(){return/^!\^"(.*)"$/}static get singleRegex(){return/^!\^(.*)$/}search(t){const e=!t.startsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[0,t.length-1]}}}class Kt extends x{constructor(t){super(t)}static get type(){return"suffix-exact"}static get multiRegex(){return/^"(.*)"\$$/}static get singleRegex(){return/^(.*)\$$/}search(t){const e=t.endsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[t.length-this.pattern.length,t.length-1]}}}class Dt extends x{constructor(t){super(t)}static get type(){return"inverse-suffix-exact"}static get multiRegex(){return/^!"(.*)"\$$/}static get singleRegex(){return/^!(.*)\$$/}search(t){const e=!t.endsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[0,t.length-1]}}}class ct extends x{constructor(t,{location:e=u.location,threshold:s=u.threshold,distance:i=u.distance,includeMatches:n=u.includeMatches,findAllMatches:c=u.findAllMatches,minMatchCharLength:o=u.minMatchCharLength,isCaseSensitive:h=u.isCaseSensitive,ignoreLocation:a=u.ignoreLocation}={}){super(t),this._bitapSearch=new nt(t,{location:e,threshold:s,distance:i,includeMatches:n,findAllMatches:c,minMatchCharLength:o,isCaseSensitive:h,ignoreLocation:a})}static get type(){return"fuzzy"}static get multiRegex(){return/^"(.*)"$/}static get singleRegex(){return/^(.*)$/}search(t){return this._bitapSearch.searchIn(t)}}class ot extends x{constructor(t){super(t)}static get type(){return"include"}static get multiRegex(){return/^'"(.*)"$/}static get singleRegex(){return/^'(.*)$/}search(t){let e=0,s;const i=[],n=this.pattern.length;for(;(s=t.indexOf(this.pattern,e))>-1;)e=s+n,i.push([s,e-1]);const c=!!i.length;return{isMatch:c,score:c?0:1,indices:i}}}const B=[$t,ot,Pt,Ft,Dt,Kt,Ct,ct],Z=B.length,jt=/ +(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/,Bt="|";function Ut(r,t={}){return r.split(Bt).map(e=>{let s=e.trim().split(jt).filter(n=>n&&!!n.trim()),i=[];for(let n=0,c=s.length;n!!(r[P.AND]||r[P.OR]),Gt=r=>!!r[W.PATH],Yt=r=>!M(r)&&et(r)&&!z(r),q=r=>({[P.AND]:Object.keys(r).map(t=>({[t]:r[t]}))});function ht(r,t,{auto:e=!0}={}){const s=i=>{let n=Object.keys(i);const c=Gt(i);if(!c&&n.length>1&&!z(i))return s(q(i));if(Yt(i)){const h=c?i[W.PATH]:n[0],a=c?i[W.PATTERN]:i[h];if(!y(a))throw new Error(Lt(h));const l={keyId:j(h),pattern:a};return e&&(l.searcher=H(a,t)),l}let o={children:[],operator:n[0]};return n.forEach(h=>{const a=i[h];M(a)&&a.forEach(l=>{o.children.push(s(l))})}),o};return z(r)||(r=q(r)),s(r)}function Vt(r,{ignoreFieldNorm:t=u.ignoreFieldNorm}){r.forEach(e=>{let s=1;e.matches.forEach(({key:i,norm:n,score:c})=>{const o=i?i.weight:null;s*=Math.pow(c===0&&o?Number.EPSILON:c,(o||1)*(t?1:n))}),e.score=s})}function Xt(r,t){const e=r.matches;t.matches=[],_(e)&&e.forEach(s=>{if(!_(s.indices)||!s.indices.length)return;const{indices:i,value:n}=s;let c={indices:i,value:n};s.key&&(c.key=s.key.src),s.idx>-1&&(c.refIndex=s.idx),t.matches.push(c)})}function Jt(r,t){t.score=r.score}function Qt(r,t,{includeMatches:e=u.includeMatches,includeScore:s=u.includeScore}={}){const i=[];return e&&i.push(Xt),s&&i.push(Jt),r.map(n=>{const{idx:c}=n,o={item:t[c],refIndex:c};return i.length&&i.forEach(h=>{h(n,o)}),o})}class N{constructor(t,e={},s){this.options={...u,...e},this.options.useExtendedSearch,this._keyStore=new Mt(this.options.keys),this.setCollection(t,s)}setCollection(t,e){if(this._docs=t,e&&!(e instanceof G))throw new Error(mt);this._myIndex=e||rt(this.options.keys,this._docs,{getFn:this.options.getFn,fieldNormWeight:this.options.fieldNormWeight})}add(t){_(t)&&(this._docs.push(t),this._myIndex.add(t))}remove(t=()=>!1){const e=[];for(let s=0,i=this._docs.length;s-1&&(h=h.slice(0,e)),Qt(h,this._docs,{includeMatches:s,includeScore:i})}_searchStringList(t){const e=H(t,this.options),{records:s}=this._myIndex,i=[];return s.forEach(({v:n,i:c,n:o})=>{if(!_(n))return;const{isMatch:h,score:a,indices:l}=e.searchIn(n);h&&i.push({item:n,idx:c,matches:[{score:a,value:n,norm:o,indices:l}]})}),i}_searchLogical(t){const e=ht(t,this.options),s=(o,h,a)=>{if(!o.children){const{keyId:d,searcher:f}=o,p=this._findMatches({key:this._keyStore.get(d),value:this._myIndex.getValueForItemAtKeyId(h,d),searcher:f});return p&&p.length?[{idx:a,item:h,matches:p}]:[]}const l=[];for(let d=0,f=o.children.length;d{if(_(o)){let a=s(e,o,h);a.length&&(n[h]||(n[h]={idx:h,item:o,matches:[]},c.push(n[h])),a.forEach(({matches:l})=>{n[h].matches.push(...l)}))}}),c}_searchObjectList(t){const e=H(t,this.options),{keys:s,records:i}=this._myIndex,n=[];return i.forEach(({$:c,i:o})=>{if(!_(c))return;let h=[];s.forEach((a,l)=>{h.push(...this._findMatches({key:a,value:c[l],searcher:e}))}),h.length&&n.push({idx:o,item:c,matches:h})}),n}_findMatches({key:t,value:e,searcher:s}){if(!_(e))return[];let i=[];if(M(e))e.forEach(({v:n,i:c,n:o})=>{if(!_(n))return;const{isMatch:h,score:a,indices:l}=s.searchIn(n);h&&i.push({score:a,key:t,value:n,idx:c,norm:o,indices:l})});else{const{v:n,n:c}=e,{isMatch:o,score:h,indices:a}=s.searchIn(n);o&&i.push({score:h,key:t,value:n,norm:c,indices:a})}return i}}N.version="7.0.0";N.createIndex=rt;N.parseIndex=Nt;N.config=u;N.parseQuery=ht;zt(Wt);class Zt extends HTMLElement{constructor(){super();S(this,"_input",null);S(this,"_list",null);S(this,"_originalList",null);S(this,"_isAltModifierPressed",!1);S(this,"_fuse",null);S(this,"_fuseOptions",{includeScore:!0,keys:["dataset.display","dataset.value","innerText"]})}static get observedAttributes(){return["data-value","data-fuse-options"]}attributeChangedCallback(e,s,i){if(s!==i)switch(e){case"data-value":this.selectItemByValue(i,!1);break;case"data-fuse-options":this._originalList||this.fetchOriginalList(),this._fuseOptions=JSON.parse(i),this._fuse=new N(Array.from(this._originalList.cloneNode(!0).children),this._fuseOptions),this.searchList();break}}connectedCallback(){const e=this.attachShadow({mode:"open"});e.innerHTML=` - - - `,this.fetchInput(),this.fetchList(),this.setBasicAttribbutes(),this.fetchOriginalList(),this._fuse=new N(Array.from(this._originalList.cloneNode(!0).children),this._fuseOptions),this.searchList(),this.addEventListeners()}disconnectedCallback(){this.removeEventListener("focusout",this.handleBlur.bind(this)),this._input||this.fetchList(),this._input.removeEventListener("input",this.searchList.bind(this)),this._input.removeEventListener("focus",this.toggleList.bind(this,!0)),this._input.removeEventListener("keydown",this.handleComboBoxKeyPress.bind(this)),this._input.removeEventListener("keyup",this.handleKeyUp.bind(this)),this.removeEventListenersFromListItems()}fetchList(){if(this._list=this.querySelector('[slot="list"] [data-list]'),this._list||(this._list=this.querySelector('[slot="list"]')),!this._list)throw new Error("List element not found")}fetchInput(){if(this._input=this.querySelector('[slot="input"]'),!this._input)throw new Error("Input element not found")}fetchOriginalList(){this._list||this.fetchList(),this._originalList=this._list.cloneNode(!0)}removeEventListenersFromListItems(){this._list||this.fetchList();const e=this._list.children;for(let s=0;si.item);this._list.innerHTML="",this._list.append(...e.map(i=>i.cloneNode(!0)));const s=i=>{if(i.nodeType===Node.TEXT_NODE){const n=i.textContent??"",c=document.createElement("template");c.innerHTML=this.highlightText(n,this._input.value),i.replaceWith(c.content)}else for(const n of i.childNodes)s(n)};for(const i of this._list.children)s(i);this.addEventListenersToListItems(),this.toggleList(!0)}highlightText(e,s){const i=new RegExp(`[${s}]+`,"gmi");return e.replace(i,"$&")}toggleList(e=this._input.getAttribute("aria-expanded")==="true"){this._input.setAttribute("aria-expanded",`${e}`),e||this.unfocusAllItems()}focusItem(e){e&&(e.focus(),this._list.querySelectorAll("[aria-selected]").forEach(s=>s.removeAttribute("aria-selected")),e.setAttribute("aria-selected","true"))}unfocusAllItems(){this._list.querySelectorAll("[aria-selected]").forEach(e=>e.removeAttribute("aria-selected"))}selectItem(e,s=!0){this._input||this.fetchInput(),e.dataset.display?this._input.value=e.dataset.display:e.children.length||Array.from(e.children).every(i=>i.nodeName=="STRONG")?this._input.value=e.innerText:e.dataset.value?this._input.value=e.dataset.value:this._input.value="",e.dataset.value&&(this.dataset.value=e.dataset.value),s&&this._input.focus(),this.toggleList(!1)}selectItemByValue(e,s=!0){if(!e)return;this._list||this.fetchList();const i=this._list.querySelector(`[data-value="${e}"]`);i&&this.selectItem(i,s)}clearInput(){this._input.value="",this._input.focus(),this.toggleList(!1)}handleBlur(){setTimeout(()=>{this.querySelector(":focus")||this.toggleList(!1)},0)}handleComboBoxKeyPress(e){switch(this._input||this.fetchInput(),this._list||this.fetchList(),e.key){case"ArrowDown":this._input.getAttribute("aria-expanded")!=="true"?(this.toggleList(!0),this._isAltModifierPressed||this.focusItem(this._list.children[0])):this.focusItem(this._list.children[0]),e.preventDefault();break;case"UpArrow":this._input.getAttribute("aria-expanded")!=="true"&&(this.toggleList(!0),this.focusItem(this._list.children[this._list.children.length-1])),e.preventDefault();break;case"Escape":this._input.getAttribute("aria-expanded")==="true"?this.toggleList(!1):this._input.value="",this._input.focus();break;case"Enter":this._input.getAttribute("aria-expanded")==="true"&&this.selectItem(this._list.children[0]);break;case"Alt":this._isAltModifierPressed=!0;break}}handleListKeyPress(e){this._input||this.fetchInput(),this._list||this.fetchList();const s=e.target;switch(e.key){case"Enter":this.selectItem(s);break;case"Escape":this.clearInput();break;case"ArrowDown":const i=s.nextElementSibling;i?this.focusItem(i):this.focusItem(this._list.children[0]),e.preventDefault();break;case"ArrowUp":if(this._isAltModifierPressed){this._input.focus(),this.toggleList(!1),e.preventDefault();break}const n=s.previousElementSibling;n?this.focusItem(n):this.focusItem(this._list.children[this._list.children.length-1]),e.preventDefault();break;case"ArrowRight":this._input.focus();break;case"ArrowLeft":this._input.focus();break;case"Home":this._input.focus();break;case"End":this._input.focus();break;case"Backspace":this._input.focus();break;case"Delete":this._input.focus();break;case"Alt":this._isAltModifierPressed=!0;break;default:this._input.focus();break}}handleKeyUp(e){switch(e.key){case"Alt":this._isAltModifierPressed=!1;break}}}customElements.define("combobox-framework",Zt); diff --git a/docs/assets/index-ZOCpBSN9.css b/docs/assets/index-ZOCpBSN9.css new file mode 100644 index 0000000..600605d --- /dev/null +++ b/docs/assets/index-ZOCpBSN9.css @@ -0,0 +1 @@ +@import"https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300;1,400&display=swap";:root{--primary-color: #4cb5ae;--primary-color-dark: #3a8c87;--text-color: #f7f7ff;--background-color: #111;--background-color-dark: #000}::selection{background:var(--primary-color);color:var(--background-color-dark)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{border-radius:100vw;background:var(--background-color-dark)}::-webkit-scrollbar-thumb{border-radius:100vw;background:var(--primary-color)}::-webkit-scrollbar-thumb:hover{background:var(--primary-color-dark)}body{background-color:var(--background-color);color:var(--text-color);padding:min(2.5rem,5vw);font-family:Atkinson Hyperlegible,sans-serif;max-width:min(80ch,100dvw);margin:0 auto}h1,h2,h3,h4,h5,h6{font-family:Source Code Pro,monospace}h1{font-size:clamp(min(11vw,3rem),11vw,3rem)}nav{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}a{color:var(--primary-color)}pre{background-color:var(--background-color-dark);color:var(--text-color);padding:1rem;display:inline-block;border-radius:.5rem;font-family:Source Code Pro,monospace;max-width:90%;overflow-x:auto}code{font-family:Source Code Pro,monospace}:not(combobox-framework)>ul{list-style:none;padding-inline-start:1.5rem}:not(combobox-framework)>ul li{margin-block:1rem}.features li{padding-left:.5ch}.features .accessible::marker{content:"🌟"}.features .styling::marker{content:"🎨"}section:has(h2):not(:has(h3)),section:not(:has(h2)):has(h3){border-left:5px solid var(--primary-color);padding-left:2rem;margin-left:-2rem}combobox-framework [slot=list]{color:var(--background-color);background-color:var(--text-color);position:absolute;top:anchor(bottom);left:anchor(left);right:anchor(right);list-style:none;margin:0;padding:0;border:1px solid black;border-radius:0 0 .2rem .2rem}combobox-framework [slot=list]>*{padding:.2rem;cursor:pointer}combobox-framework [slot=list] li:hover,combobox-framework [slot=list] tr:hover td{background-color:var(--primary-color)}combobox-framework input[aria-expanded=false]+[slot=list],combobox-framework input:not([aria-expanded])+[slot=list]{display:none} diff --git a/docs/assets/index-rWoKsX-6.js b/docs/assets/index-rWoKsX-6.js new file mode 100644 index 0000000..f1cdc91 --- /dev/null +++ b/docs/assets/index-rWoKsX-6.js @@ -0,0 +1,4 @@ +var lt=Object.defineProperty;var ut=(r,e,t)=>e in r?lt(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var A=(r,e,t)=>(ut(r,typeof e!="symbol"?e+"":e,t),t);(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))t(s);new MutationObserver(s=>{for(const i of s)if(i.type==="childList")for(const n of i.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&t(n)}).observe(document,{childList:!0,subtree:!0});function e(s){const i={};return s.integrity&&(i.integrity=s.integrity),s.referrerPolicy&&(i.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?i.credentials="include":s.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function t(s){if(s.ep)return;s.ep=!0;const i=e(s);fetch(s.href,i)}})();function M(r){return Array.isArray?Array.isArray(r):st(r)==="[object Array]"}const ft=1/0;function dt(r){if(typeof r=="string")return r;let e=r+"";return e=="0"&&1/r==-ft?"-0":e}function pt(r){return r==null?"":dt(r)}function y(r){return typeof r=="string"}function tt(r){return typeof r=="number"}function gt(r){return r===!0||r===!1||_t(r)&&st(r)=="[object Boolean]"}function et(r){return typeof r=="object"}function _t(r){return et(r)&&r!==null}function _(r){return r!=null}function D(r){return!r.trim().length}function st(r){return r==null?r===void 0?"[object Undefined]":"[object Null]":Object.prototype.toString.call(r)}const mt="Incorrect 'index' type",Lt=r=>`Invalid value for key ${r}`,bt=r=>`Pattern length exceeds max of ${r}.`,yt=r=>`Missing ${r} property in key`,Et=r=>`Property 'weight' in key '${r}' must be a positive integer`,X=Object.prototype.hasOwnProperty;class Mt{constructor(e){this._keys=[],this._keyMap={};let t=0;e.forEach(s=>{let i=it(s);this._keys.push(i),this._keyMap[i.id]=i,t+=i.weight}),this._keys.forEach(s=>{s.weight/=t})}get(e){return this._keyMap[e]}keys(){return this._keys}toJSON(){return JSON.stringify(this._keys)}}function it(r){let e=null,t=null,s=null,i=1,n=null;if(y(r)||M(r))s=r,e=J(r),t=j(r);else{if(!X.call(r,"name"))throw new Error(yt("name"));const c=r.name;if(s=c,X.call(r,"weight")&&(i=r.weight,i<=0))throw new Error(Et(c));e=J(c),t=j(c),n=r.getFn}return{path:e,id:t,weight:i,src:s,getFn:n}}function J(r){return M(r)?r:r.split(".")}function j(r){return M(r)?r.join("."):r}function It(r,e){let t=[],s=!1;const i=(n,c,o)=>{if(_(n))if(!c[o])t.push(n);else{let h=c[o];const a=n[h];if(!_(a))return;if(o===c.length-1&&(y(a)||tt(a)||gt(a)))t.push(pt(a));else if(M(a)){s=!0;for(let l=0,f=a.length;lr.score===e.score?r.idx{this._keysMap[t.id]=s})}create(){this.isCreated||!this.docs.length||(this.isCreated=!0,y(this.docs[0])?this.docs.forEach((e,t)=>{this._addString(e,t)}):this.docs.forEach((e,t)=>{this._addObject(e,t)}),this.norm.clear())}add(e){const t=this.size();y(e)?this._addString(e,t):this._addObject(e,t)}removeAt(e){this.records.splice(e,1);for(let t=e,s=this.size();t{let c=i.getFn?i.getFn(e):this.getFn(e,i.path);if(_(c)){if(M(c)){let o=[];const h=[{nestedArrIndex:-1,value:c}];for(;h.length;){const{nestedArrIndex:a,value:l}=h.pop();if(_(l))if(y(l)&&!D(l)){let f={v:l,i:a,n:this.norm.get(l)};o.push(f)}else M(l)&&l.forEach((f,d)=>{h.push({nestedArrIndex:d,value:f})})}s.$[n]=o}else if(y(c)&&!D(c)){let o={v:c,n:this.norm.get(c)};s.$[n]=o}}}),this.records.push(s)}toJSON(){return{keys:this.keys,records:this.records}}}function rt(r,e,{getFn:t=u.getFn,fieldNormWeight:s=u.fieldNormWeight}={}){const i=new z({getFn:t,fieldNormWeight:s});return i.setKeys(r.map(it)),i.setSources(e),i.create(),i}function Nt(r,{getFn:e=u.getFn,fieldNormWeight:t=u.fieldNormWeight}={}){const{keys:s,records:i}=r,n=new z({getFn:e,fieldNormWeight:t});return n.setKeys(s),n.setIndexRecords(i),n}function C(r,{errors:e=0,currentLocation:t=0,expectedLocation:s=0,distance:i=u.distance,ignoreLocation:n=u.ignoreLocation}={}){const c=e/r.length;if(n)return c;const o=Math.abs(s-t);return i?c+o/i:o?1:c}function Ot(r=[],e=u.minMatchCharLength){let t=[],s=-1,i=-1,n=0;for(let c=r.length;n=e&&t.push([s,i]),s=-1)}return r[n-1]&&n-s>=e&&t.push([s,n-1]),t}const k=32;function Tt(r,e,t,{location:s=u.location,distance:i=u.distance,threshold:n=u.threshold,findAllMatches:c=u.findAllMatches,minMatchCharLength:o=u.minMatchCharLength,includeMatches:h=u.includeMatches,ignoreLocation:a=u.ignoreLocation}={}){if(e.length>k)throw new Error(bt(k));const l=e.length,f=r.length,d=Math.max(0,Math.min(s,f));let p=n,g=d;const m=o>1||h,w=m?Array(f):[];let E;for(;(E=r.indexOf(e,g))>-1;){let L=C(e,{currentLocation:E,expectedLocation:d,distance:i,ignoreLocation:a});if(p=Math.min(L,p),g=E+l,m){let I=0;for(;I=G;b-=1){let $=b-1,Y=t[r.charAt($)];if(m&&(w[$]=+!!Y),T[b]=(T[b+1]<<1|1)&Y,L&&(T[b]|=(O[b+1]|O[b])<<1|1|O[b+1]),T[b]&at&&(S=C(e,{errors:L,currentLocation:$,expectedLocation:d,distance:i,ignoreLocation:a}),S<=p)){if(p=S,g=$,g<=d)break;G=Math.max(1,2*d-g)}}if(C(e,{errors:L+1,currentLocation:d,expectedLocation:d,distance:i,ignoreLocation:a})>p)break;O=T}const F={isMatch:g>=0,score:Math.max(.001,S)};if(m){const L=Ot(w,o);L.length?h&&(F.indices=L):F.isMatch=!1}return F}function Rt(r){let e={};for(let t=0,s=r.length;t{this.chunks.push({pattern:d,alphabet:Rt(d),startIndex:p})},f=this.pattern.length;if(f>k){let d=0;const p=f%k,g=f-p;for(;d{const{isMatch:E,score:O,indices:S}=Tt(e,g,m,{location:i+w,distance:n,threshold:c,findAllMatches:o,minMatchCharLength:h,includeMatches:s,ignoreLocation:a});E&&(d=!0),f+=O,E&&S&&(l=[...l,...S])});let p={isMatch:d,score:d?f/this.chunks.length:1};return d&&s&&(p.indices=l),p}}class v{constructor(e){this.pattern=e}static isMultiMatch(e){return Q(e,this.multiRegex)}static isSingleMatch(e){return Q(e,this.singleRegex)}search(){}}function Q(r,e){const t=r.match(e);return t?t[1]:null}class $t extends v{constructor(e){super(e)}static get type(){return"exact"}static get multiRegex(){return/^="(.*)"$/}static get singleRegex(){return/^=(.*)$/}search(e){const t=e===this.pattern;return{isMatch:t,score:t?0:1,indices:[0,this.pattern.length-1]}}}class Ct extends v{constructor(e){super(e)}static get type(){return"inverse-exact"}static get multiRegex(){return/^!"(.*)"$/}static get singleRegex(){return/^!(.*)$/}search(e){const s=e.indexOf(this.pattern)===-1;return{isMatch:s,score:s?0:1,indices:[0,e.length-1]}}}class Pt extends v{constructor(e){super(e)}static get type(){return"prefix-exact"}static get multiRegex(){return/^\^"(.*)"$/}static get singleRegex(){return/^\^(.*)$/}search(e){const t=e.startsWith(this.pattern);return{isMatch:t,score:t?0:1,indices:[0,this.pattern.length-1]}}}class Ft extends v{constructor(e){super(e)}static get type(){return"inverse-prefix-exact"}static get multiRegex(){return/^!\^"(.*)"$/}static get singleRegex(){return/^!\^(.*)$/}search(e){const t=!e.startsWith(this.pattern);return{isMatch:t,score:t?0:1,indices:[0,e.length-1]}}}class Kt extends v{constructor(e){super(e)}static get type(){return"suffix-exact"}static get multiRegex(){return/^"(.*)"\$$/}static get singleRegex(){return/^(.*)\$$/}search(e){const t=e.endsWith(this.pattern);return{isMatch:t,score:t?0:1,indices:[e.length-this.pattern.length,e.length-1]}}}class Dt extends v{constructor(e){super(e)}static get type(){return"inverse-suffix-exact"}static get multiRegex(){return/^!"(.*)"\$$/}static get singleRegex(){return/^!(.*)\$$/}search(e){const t=!e.endsWith(this.pattern);return{isMatch:t,score:t?0:1,indices:[0,e.length-1]}}}class ct extends v{constructor(e,{location:t=u.location,threshold:s=u.threshold,distance:i=u.distance,includeMatches:n=u.includeMatches,findAllMatches:c=u.findAllMatches,minMatchCharLength:o=u.minMatchCharLength,isCaseSensitive:h=u.isCaseSensitive,ignoreLocation:a=u.ignoreLocation}={}){super(e),this._bitapSearch=new nt(e,{location:t,threshold:s,distance:i,includeMatches:n,findAllMatches:c,minMatchCharLength:o,isCaseSensitive:h,ignoreLocation:a})}static get type(){return"fuzzy"}static get multiRegex(){return/^"(.*)"$/}static get singleRegex(){return/^(.*)$/}search(e){return this._bitapSearch.searchIn(e)}}class ot extends v{constructor(e){super(e)}static get type(){return"include"}static get multiRegex(){return/^'"(.*)"$/}static get singleRegex(){return/^'(.*)$/}search(e){let t=0,s;const i=[],n=this.pattern.length;for(;(s=e.indexOf(this.pattern,t))>-1;)t=s+n,i.push([s,t-1]);const c=!!i.length;return{isMatch:c,score:c?0:1,indices:i}}}const B=[$t,ot,Pt,Ft,Dt,Kt,Ct,ct],Z=B.length,jt=/ +(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/,Bt="|";function Ut(r,e={}){return r.split(Bt).map(t=>{let s=t.trim().split(jt).filter(n=>n&&!!n.trim()),i=[];for(let n=0,c=s.length;n!!(r[P.AND]||r[P.OR]),zt=r=>!!r[W.PATH],Gt=r=>!M(r)&&et(r)&&!V(r),q=r=>({[P.AND]:Object.keys(r).map(e=>({[e]:r[e]}))});function ht(r,e,{auto:t=!0}={}){const s=i=>{let n=Object.keys(i);const c=zt(i);if(!c&&n.length>1&&!V(i))return s(q(i));if(Gt(i)){const h=c?i[W.PATH]:n[0],a=c?i[W.PATTERN]:i[h];if(!y(a))throw new Error(Lt(h));const l={keyId:j(h),pattern:a};return t&&(l.searcher=H(a,e)),l}let o={children:[],operator:n[0]};return n.forEach(h=>{const a=i[h];M(a)&&a.forEach(l=>{o.children.push(s(l))})}),o};return V(r)||(r=q(r)),s(r)}function Yt(r,{ignoreFieldNorm:e=u.ignoreFieldNorm}){r.forEach(t=>{let s=1;t.matches.forEach(({key:i,norm:n,score:c})=>{const o=i?i.weight:null;s*=Math.pow(c===0&&o?Number.EPSILON:c,(o||1)*(e?1:n))}),t.score=s})}function Xt(r,e){const t=r.matches;e.matches=[],_(t)&&t.forEach(s=>{if(!_(s.indices)||!s.indices.length)return;const{indices:i,value:n}=s;let c={indices:i,value:n};s.key&&(c.key=s.key.src),s.idx>-1&&(c.refIndex=s.idx),e.matches.push(c)})}function Jt(r,e){e.score=r.score}function Qt(r,e,{includeMatches:t=u.includeMatches,includeScore:s=u.includeScore}={}){const i=[];return t&&i.push(Xt),s&&i.push(Jt),r.map(n=>{const{idx:c}=n,o={item:e[c],refIndex:c};return i.length&&i.forEach(h=>{h(n,o)}),o})}class N{constructor(e,t={},s){this.options={...u,...t},this.options.useExtendedSearch,this._keyStore=new Mt(this.options.keys),this.setCollection(e,s)}setCollection(e,t){if(this._docs=e,t&&!(t instanceof z))throw new Error(mt);this._myIndex=t||rt(this.options.keys,this._docs,{getFn:this.options.getFn,fieldNormWeight:this.options.fieldNormWeight})}add(e){_(e)&&(this._docs.push(e),this._myIndex.add(e))}remove(e=()=>!1){const t=[];for(let s=0,i=this._docs.length;s-1&&(h=h.slice(0,t)),Qt(h,this._docs,{includeMatches:s,includeScore:i})}_searchStringList(e){const t=H(e,this.options),{records:s}=this._myIndex,i=[];return s.forEach(({v:n,i:c,n:o})=>{if(!_(n))return;const{isMatch:h,score:a,indices:l}=t.searchIn(n);h&&i.push({item:n,idx:c,matches:[{score:a,value:n,norm:o,indices:l}]})}),i}_searchLogical(e){const t=ht(e,this.options),s=(o,h,a)=>{if(!o.children){const{keyId:f,searcher:d}=o,p=this._findMatches({key:this._keyStore.get(f),value:this._myIndex.getValueForItemAtKeyId(h,f),searcher:d});return p&&p.length?[{idx:a,item:h,matches:p}]:[]}const l=[];for(let f=0,d=o.children.length;f{if(_(o)){let a=s(t,o,h);a.length&&(n[h]||(n[h]={idx:h,item:o,matches:[]},c.push(n[h])),a.forEach(({matches:l})=>{n[h].matches.push(...l)}))}}),c}_searchObjectList(e){const t=H(e,this.options),{keys:s,records:i}=this._myIndex,n=[];return i.forEach(({$:c,i:o})=>{if(!_(c))return;let h=[];s.forEach((a,l)=>{h.push(...this._findMatches({key:a,value:c[l],searcher:t}))}),h.length&&n.push({idx:o,item:c,matches:h})}),n}_findMatches({key:e,value:t,searcher:s}){if(!_(t))return[];let i=[];if(M(t))t.forEach(({v:n,i:c,n:o})=>{if(!_(n))return;const{isMatch:h,score:a,indices:l}=s.searchIn(n);h&&i.push({score:a,key:e,value:n,idx:c,norm:o,indices:l})});else{const{v:n,n:c}=t,{isMatch:o,score:h,indices:a}=s.searchIn(n);o&&i.push({score:h,key:e,value:n,norm:c,indices:a})}return i}}N.version="7.0.0";N.createIndex=rt;N.parseIndex=Nt;N.config=u;N.parseQuery=ht;Vt(Wt);class Zt extends HTMLElement{constructor(){super();A(this,"_input",null);A(this,"_list",null);A(this,"_originalList",null);A(this,"_isAltModifierPressed",!1);A(this,"_forceValue",!1);A(this,"_fuse",null);A(this,"_fuseOptions",{includeScore:!0,keys:["dataset.display","dataset.value","innerText"]})}static get observedAttributes(){return["data-value","data-fuse-options","data-listbox"]}attributeChangedCallback(t,s,i){if(s!==i)switch(t){case"data-value":this.selectItemByValue(i,!1);break;case"data-fuse-options":this._originalList||this.fetchOriginalList(),this._fuseOptions=JSON.parse(i),this._fuse=new N(Array.from(this._originalList.cloneNode(!0).children),this._fuseOptions),this.searchList();break;case"data-listbox":this._forceValue=!!i}}connectedCallback(){const t=this.attachShadow({mode:"open"});t.innerHTML=` + + + `,this.fetchInput(),this.fetchList(),this.setBasicAttribbutes(),this.fetchOriginalList(),this._fuse=new N(Array.from(this._originalList.cloneNode(!0).children),this._fuseOptions),this.searchList(),this.addEventListeners(),this.forceValue()}disconnectedCallback(){this.removeEventListener("focusout",this.handleBlur.bind(this)),this._input||this.fetchList(),this._input.removeEventListener("input",this.searchList.bind(this)),this._input.removeEventListener("focus",this.toggleList.bind(this,!0)),this._input.removeEventListener("keydown",this.handleComboBoxKeyPress.bind(this)),this._input.removeEventListener("keyup",this.handleKeyUp.bind(this)),this.removeEventListenersFromListItems()}fetchList(){if(this._list=this.querySelector('[slot="list"] [data-list]'),this._list||(this._list=this.querySelector('[slot="list"]')),!this._list)throw new Error("List element not found")}fetchInput(){if(this._input=this.querySelector('[slot="input"]'),!this._input)throw new Error("Input element not found")}fetchOriginalList(){this._list||this.fetchList(),this._originalList=this._list.cloneNode(!0)}removeEventListenersFromListItems(){this._list||this.fetchList();const t=this._list.children;for(let s=0;si.item);this._list.innerHTML="",this._list.append(...t.map(i=>i.cloneNode(!0)));const s=i=>{if(i.nodeType===Node.TEXT_NODE){const n=i.textContent??"",c=document.createElement("template");c.innerHTML=this.highlightText(n,this._input.value),i.replaceWith(c.content)}else for(const n of i.childNodes)s(n)};for(const i of this._list.children)s(i);this.addEventListenersToListItems(),this.toggleList(!0)}highlightText(t,s){const i=new RegExp(`[${s}]+`,"gmi");return t.replace(i,"$&")}toggleList(t=this._input.getAttribute("aria-expanded")==="true"){this._input.setAttribute("aria-expanded",`${t}`),t||this.unfocusAllItems()}focusItem(t){t&&(t.focus(),this._list.querySelectorAll("[aria-selected]").forEach(s=>s.removeAttribute("aria-selected")),t.setAttribute("aria-selected","true"))}unfocusAllItems(){this._list.querySelectorAll("[aria-selected]").forEach(t=>t.removeAttribute("aria-selected"))}selectItem(t,s=!0){this._input||this.fetchInput(),t.dataset.display?this._input.value=t.dataset.display:t.children.length||Array.from(t.children).every(i=>i.nodeName=="STRONG")?this._input.value=t.innerText:t.dataset.value?this._input.value=t.dataset.value:this._input.value="",t.dataset.value&&(this.dataset.value=t.dataset.value),s&&this._input.focus(),this.toggleList(!1)}selectItemByValue(t,s=!0){if(!t)return;this._list||this.fetchList();const i=this._list.querySelector(`[data-value="${t}"]`);i&&this.selectItem(i,s)}clearInput(){this._input.value="",this._input.focus(),this.toggleList(!1)}handleBlur(){setTimeout(()=>{this.querySelector(":focus")||(this.forceValue(),this.toggleList(!1))},0)}forceValue(){var t;this._forceValue&&((t=this._input)!=null&&t.value)&&this.selectItem(this._list.children[0],!1)}handleComboBoxKeyPress(t){switch(this._input||this.fetchInput(),this._list||this.fetchList(),t.key){case"ArrowDown":this._input.getAttribute("aria-expanded")!=="true"?(this.toggleList(!0),this._isAltModifierPressed||this.focusItem(this._list.children[0])):this.focusItem(this._list.children[0]),t.preventDefault();break;case"UpArrow":this._input.getAttribute("aria-expanded")!=="true"&&(this.toggleList(!0),this.focusItem(this._list.children[this._list.children.length-1])),t.preventDefault();break;case"Escape":this._input.getAttribute("aria-expanded")==="true"?this.toggleList(!1):this._input.value="",this._input.focus();break;case"Enter":this._input.getAttribute("aria-expanded")==="true"&&this.selectItem(this._list.children[0]);break;case"Alt":this._isAltModifierPressed=!0;break}}handleListKeyPress(t){this._input||this.fetchInput(),this._list||this.fetchList();const s=t.target;switch(t.key){case"Enter":this.selectItem(s);break;case"Escape":this.clearInput();break;case"ArrowDown":const i=s.nextElementSibling;i?this.focusItem(i):this.focusItem(this._list.children[0]),t.preventDefault();break;case"ArrowUp":if(this._isAltModifierPressed){this._input.focus(),this.toggleList(!1),t.preventDefault();break}const n=s.previousElementSibling;n?this.focusItem(n):this.focusItem(this._list.children[this._list.children.length-1]),t.preventDefault();break;case"ArrowRight":this._input.focus();break;case"ArrowLeft":this._input.focus();break;case"Home":this._input.focus();break;case"End":this._input.focus();break;case"Backspace":this._input.focus();break;case"Delete":this._input.focus();break;case"Alt":this._isAltModifierPressed=!0;break;default:this._input.focus();break}}handleKeyUp(t){switch(t.key){case"Alt":this._isAltModifierPressed=!1;break}}}customElements.define("combobox-framework",Zt); diff --git a/docs/index.html b/docs/index.html index e5d20d4..75ad45c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,8 +4,8 @@ Combobox Framework - - + + @@ -51,7 +51,7 @@

Installation

Link in from CDN

- 
<script type="module" src=""></script>
+ 
<script type="module" src="https://unpkg.com/combobox-framework"></script>
@@ -318,6 +318,36 @@

Custom Fuse/Fuzzy search options

</ul> </combobox-framework>
+ +
+

Force value/Listbox

+ + + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
  • Item 4
    • +
+ + +

+ To force the combobox-framework to act as a searchable listbox, you need to add the + data-listbox attribute to the combobox-framework element. This will + tell the combobox-framework to act as a searchable listbox instead of a combobox. And only allow + the value to be one of the options in the list or null. +

+ 
<combobox-framework data-listbox="true">
+    <input type="text" slot="input" />
+    <ul slot="list">
+        <li data-value="1">Item 1</li>
+        <li data-value="2">Item 2</li>
+        <li data-value="3">Item 3</li>
+        <li data-value="4">Item 4</li>
+    </ul>
+</combobox-framework>
+
@@ -349,7 +379,8 @@

Styling

background-color: var(--primary-color); } -combobox-framework input[aria-expanded="false"] + [slot="list"] { +combobox-framework input[aria-expanded="false"] + [slot="list"], +combobox-framework input:not([aria-expanded]) + [slot="list"] { display: none; }
diff --git a/package.json b/package.json index 2a1c042..c0d6c1d 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.3.0", + "version": "0.3.1", "name": "combobox-framework", "description": "A framework for building comboboxes", "keywords": [