@simai-studio/ui 0.0.0-stage → 5.20261019.1710

package/distr/smart/dropdown/js/dropdown.min.js

@@ -0,0 +1,214 @@
+(()=>{"use strict";var e={"3a03d4610486"(e,t,i){i.d(t,{Q:()=>o});let s=0;function n(e,t){if(!e.id){let i;do{i=`${t}-${++s}`}while(document.getElementById(i));e.id=i}return e.id}function o(e,t){let i=null,s=null,o=null,r=!1;const a=new WeakMap,l=(e,t,i)=>{const s=a.get(e)||{};void 0!==s[t]&&e.getAttribute(t)===s[t]&&e.removeAttribute(t),delete s[t],!e.hasAttribute(t)&&i&&(e.setAttribute(t,i),s[t]=i),a.set(e,s)},c=()=>e.querySelector(".sf-dropdown-field, .sf-dropdown-trigger"),d=()=>c()?.querySelector(":scope > button")||c(),u=()=>c()?.querySelector('input:not([type="hidden"])'),p=()=>t.getList()?.querySelector(".sf-input input"),h=()=>[...t.getList()?.querySelectorAll(".sf-list-item")||[]],f=()=>h().filter(e=>!e.hidden&&!e.classList.contains("disabled")&&"true"!==e.getAttribute("aria-disabled")&&"true"!==e.getAttribute("aria-hidden")),g=e=>e.querySelector(".sf-list-item-container, .sf-avatar-label-group-title, .sf-tag-container")?.textContent?.trim()||e.dataset.value||"",b=e=>{e&&!e.disabled&&(e.focus({preventScroll:!0}),e.scrollIntoView({block:"nearest",inline:"nearest"}))},m=()=>{s="trigger",b(d()),t.close(),x()},v=e=>{if(t.isDisabled()||e.altKey||e.ctrlKey||e.metaKey)return;const i=e.target,n=i.closest?.(".sf-list-item"),o=t.getList()?.contains(i),r=i===d()||i===u()||i===c();let a=!1;if("Escape"===e.key&&t.isOpen())m(),a=!0;else{if("Tab"===e.key&&t.isOpen())return o&&b(d()),t.close(),void x();if(r&&["ArrowDown","ArrowUp","Enter"," "].includes(e.key))t.isOpen()&&["Enter"," "].includes(e.key)?m():(e=>{s=e,t.open(),x()})("ArrowUp"===e.key?"last":"search"),a=!0;else if(o&&["ArrowDown","ArrowUp"].includes(e.key)){const t=f(),i=t.indexOf(n),s=i<0?"ArrowUp"===e.key?t.length-1:0:Math.max(0,Math.min(t.length-1,i+("ArrowUp"===e.key?-1:1)));b(t[s]),a=!0}else if(n&&o&&["Home","End"].includes(e.key)){const t=f();b("Home"===e.key?t[0]:t.at(-1)),a=!0}else n&&o&&["Enter"," "].includes(e.key)&&(f().includes(n)&&(s=t.isMultiple()?{value:n.dataset.value}:"trigger",t.select(n),x()),a=!0)}a&&(e.preventDefault(),e.stopImmediatePropagation())},y=()=>{null!==o&&cancelAnimationFrame(o),o=requestAnimationFrame(()=>{var i;o=null,r||!t.isOpen()||s||(i=document.activeElement)&&(e.contains(i)||t.getList()?.contains(i))||(t.close(),x())})};let w=document.createElement("span");w.className="sf-dropdown-value",e.append(w),n(w,"sf-dropdown-value");const x=()=>{if(r)return;const o=t.getList();i!==o&&(i?.removeEventListener("keydown",v,!0),i?.removeEventListener("focusout",y),i=o,i?.addEventListener("keydown",v,!0),i?.addEventListener("focusout",y));const m=d(),x=i?.querySelector(".sf-list-container");if(!m||!x)return;w.isConnected||e.append(w);const _=e.querySelector(".sf-dropdown-label .sf-dropdown-text"),$=t.owner||e,S=_?.textContent.trim()?n(_,"sf-dropdown-label"):"",A=$.getAttribute("aria-label")||e.getAttribute("aria-label"),k=$.getAttribute("aria-labelledby")||e.getAttribute("aria-labelledby"),C=n(m,"sf-dropdown-trigger"),L=m.hasAttribute("aria-label")&&a.get(m)?.["aria-label"]!==m.getAttribute("aria-label");l(m,"aria-labelledby",k||(!A&&S?L?`${C} ${S}`:S:"")),l(m,"aria-label",A),"BUTTON"!==m.tagName&&m.setAttribute("role","button"),m.tabIndex=t.isDisabled()?-1:0,m.setAttribute("aria-expanded",String(t.isOpen())),m.setAttribute("aria-haspopup","listbox"),m.setAttribute("aria-controls",n(x,"sf-dropdown-listbox")),m.querySelectorAll(".sf-icon").forEach(e=>e.setAttribute("aria-hidden","true")),c()!==m&&(c().tabIndex=-1),u()&&(u().tabIndex=-1),x.setAttribute("role","listbox"),x.setAttribute("aria-multiselectable",String(t.isMultiple())),l(x,"aria-labelledby",k||S||C);const z=p();z&&(z.setAttribute("role","searchbox"),z.setAttribute("aria-controls",x.id),l(z,"aria-labelledby",z.hasAttribute("aria-label")?"":k||S||C)),h().forEach(e=>{e.setAttribute("role","option"),e.tabIndex=-1,e.setAttribute("aria-selected",String(e.classList.contains("selected"))),l(e,"aria-disabled",e.classList.contains("disabled")?"true":""),function(e,t){const i=e.querySelector('.sf-checkbox input[type="checkbox"]');if(!i)return;const s=e.querySelector(".sf-checkbox-box sf-icon, .sf-checkbox-box .sf-icon"),n="sf-icon"===s?.tagName?.toLowerCase()?s.getAttribute("icon")||"":s?.textContent;(i.checked!==t||i.indeterminate||s&&n!==(t?"check":""))&&(i.checked=t,i.indeterminate=!1,globalThis.SF?.Checkbox?.setState?.(i,{checked:t,indeterminate:!1}))}(e,e.classList.contains("selected")),e.querySelectorAll(".sf-checkbox").forEach(e=>{"true"!==e.getAttribute("aria-hidden")&&e.setAttribute("aria-hidden","true")}),e.querySelectorAll(".sf-icon, sf-icon").forEach(e=>{"true"!==e.getAttribute("aria-hidden")&&e.setAttribute("aria-hidden","true")}),e.querySelectorAll("input, button, a[href], [tabindex]").forEach(e=>{e.tabIndex=-1})});const V=t.selectedLabels?.()||h().filter(e=>e.classList.contains("selected")).map(g);w.textContent=V.join(", ")||u()?.value||u()?.placeholder||"";const T=new Set((m.getAttribute("aria-describedby")||"").split(/\s+/).filter(Boolean));T.add(w.id),m.setAttribute("aria-describedby",[...T].join(" ")),(()=>{if(!s)return;if("trigger"===s)return s=null,void b(d());if(!t.isOpen()||t.getList()?.hidden)return;const e=f(),i="search"===s?p()||e[0]||d():"last"===s?e.at(-1):"object"==typeof s?e.find(e=>e.dataset.value===s.value):e[0];s=null,b(i)})()};return e.addEventListener("keydown",v,!0),e.addEventListener("focusout",y),x(),{refresh:x,beforeClose:()=>{t.getList()?.contains(document.activeElement)&&(s="trigger")},release(){r=!0,null!==o&&cancelAnimationFrame(o),e.removeEventListener("keydown",v,!0),e.removeEventListener("focusout",y),i?.removeEventListener("keydown",v,!0),i?.removeEventListener("focusout",y);const t=d();if(t){const e=(t.getAttribute("aria-describedby")||"").split(/\s+/).filter(e=>e&&e!==w.id);e.length?t.setAttribute("aria-describedby",e.join(" ")):t.removeAttribute("aria-describedby")}w.remove()}}}},a0f23dca0b37(e,t,i){i.a(e,async(e,s)=>{try{i.d(t,{AL:()=>g,GD:()=>f});var n=i("5c1dc214bb5e"),o=e([n]);n=(o.then?(await o)():o)[0];var r=i.n(n);const a=()=>globalThis.SF?.Position||r(),l=new WeakMap,c=["position","inset","margin","width","max-width","max-height","overflow","left","top","right","bottom","z-index"],d=["font-family","font-size","font-weight","font-style","font-stretch","font-variant","font-feature-settings","font-variation-settings","font-optical-sizing","font-kerning","line-height","letter-spacing","word-spacing","text-transform","text-indent","white-space","word-break","overflow-wrap","text-rendering","direction","writing-mode","text-orientation","color","color-scheme","text-align"];function u(e,t){if(!t.context)return;const i=t.context,s=getComputedStyle(e),n=["sf-dropdown",...Array.from(e.classList).filter(e=>e.startsWith("sf-dropdown--")&&!["sf-dropdown--open","sf-dropdown--drop-up","sf-dropdown--drop-down"].includes(e))].join(" ");i.className!==n&&(i.className=n);const o=[...Array.from(s).filter(e=>e.startsWith("--sf-")),...d],r=new Set(o);for(const e of t.contextProperties||[])r.has(e)||i.style.removeProperty(e);for(const e of o){const t=s.getPropertyValue(e);i.style.getPropertyValue(e)!==t&&i.style.setProperty(e,t)}t.contextProperties=o}function p(e){return e?.querySelector(".sf-dropdown-field, .sf-dropdown-trigger")??null}function h(e,t){const i=l.get(t);if(!i||!e.isConnected||t.hidden)return!1;const s=p(e);return!!s&&(e.closest('[hidden], [inert], [aria-hidden="true"], dialog:not([open])')||!s.getClientRects().length||["hidden","collapse"].includes(getComputedStyle(s).visibility)?(i.onUnavailable?.(),!1):(u(e,i),i.wrap&&(i.wrap.style.minHeight="0",i.wrap.style.overflowY="auto"),i.anchor||(i.anchor=a().anchor(s,t,{side:"block-end",align:"start",matchWidth:s.classList.contains("sf-dropdown-field"),fitHeight:!0,autoUpdate:!1,onPosition:({side:i})=>{const s="block-start"===i;t.dataset.placement=e.dataset.placement=s?"top":"bottom",e.classList.toggle("sf-dropdown--drop-up",s),e.classList.toggle("sf-dropdown--drop-down",!s)}})),i.anchor.update(),!0))}function f(e,t,i){if(!t?.isConnected||!p(e))return!1;const s=t.contains(document.activeElement)?document.activeElement:null;if(!l.has(t)){const s=c.map(e=>[e,t.style.getPropertyValue(e),t.style.getPropertyPriority(e)]),n={root:e,saved:s,onUnavailable:i,popover:t.getAttribute("popover"),frame:0,native:"function"==typeof t.showPopover};if(n.wrap=t.querySelector(".sf-list-container-wrap"),n.wrapStyles=n.wrap?["min-height","overflow-y"].map(e=>[e,n.wrap.style.getPropertyValue(e),n.wrap.style.getPropertyPriority(e)]):[],n.schedule=()=>{n.frame||(n.frame=requestAnimationFrame(()=>{n.frame=0,h(e,t)}))},l.set(t,n),e.__sfDropdownPortalList=t,n.native)t.setAttribute("popover","manual");else{n.parent=t.parentNode,n.next=t.nextSibling,n.context=document.createElement("div"),n.context.style.cssText="display:contents;position:static",u(e,n);(e.closest('dialog[open], [role="dialog"][aria-modal="true"]')||document.body).append(n.context),n.context.append(t),t.style.zIndex="var(--sf-z-index-9)"}n.inheritance=new MutationObserver(n.schedule);for(let t=e;t;t=t.parentElement)n.inheritance.observe(t,{attributes:!0,attributeFilter:["class","style","dir","hidden","inert","aria-hidden","open"]});Object.assign(t.style,{position:"fixed",inset:"auto",margin:"0",overflow:n.wrap?"hidden":"auto"}),"function"==typeof ResizeObserver&&(n.resize=new ResizeObserver(n.schedule),n.resize.observe(p(e)),n.resize.observe(t)),window.visualViewport?.addEventListener("resize",n.schedule),window.visualViewport?.addEventListener("scroll",n.schedule)}return t.hidden=!1,l.get(t).native&&!t.matches(":popover-open")&&t.showPopover(),!!h(e,t)&&(s&&document.activeElement!==s&&s.focus({preventScroll:!0}),!0)}function g(e){const t=l.get(e);if(!t)return!1;const i=e.contains(document.activeElement)?document.activeElement:null;t.anchor?.stop(),t.resize?.disconnect(),cancelAnimationFrame(t.frame),t.inheritance?.disconnect(),window.visualViewport?.removeEventListener("resize",t.schedule),window.visualViewport?.removeEventListener("scroll",t.schedule),t.native?(e.matches(":popover-open")&&e.hidePopover(),null===t.popover?e.removeAttribute("popover"):e.setAttribute("popover",t.popover)):(t.next?.parentNode===t.parent?t.parent.insertBefore(e,t.next):t.parent.append(e),t.context.remove());for(const[i,s,n]of t.saved)s?e.style.setProperty(i,s,n):e.style.removeProperty(i);for(const[e,i,s]of t.wrapStyles)i?t.wrap.style.setProperty(e,i,s):t.wrap.style.removeProperty(e);return delete e.dataset.placement,delete t.root.dataset.placement,t.root.classList.remove("sf-dropdown--drop-up","sf-dropdown--drop-down"),t.root.__sfDropdownPortalList===e&&delete t.root.__sfDropdownPortalList,l.delete(e),i&&!e.hidden&&t.root.isConnected&&document.activeElement!==i&&i.focus({preventScroll:!0}),!0}s()}catch(b){s(b)}})},"98e26702f55a"(e,t,i){function s(){const e=globalThis.SF=globalThis.SF||{};return e.__deprecationNotes instanceof Map||Object.defineProperty(e,"__deprecationNotes",{value:new Map,configurable:!0}),e.__deprecationNotes}function n({component:e="",kind:t="attribute",attribute:i="",from:n,to:o=null}={}){if(!n)return;const r=[e,t,i,n].join("|"),a=s(),l=a.get(r);if(l)l.count+=1;else if(a.set(r,{component:e,kind:t,attribute:i,from:n,to:o,count:1}),function(){const e=globalThis.document?.documentElement;return"warn"===e?.dataset?.sfDeprecations||!0===globalThis.SF?.deprecations?.warn}()){const s=e?`${e}: `:"",r="value"===t?`${i}="${n}"`:`${t} ${n}`;globalThis.console?.warn?.(`[Simai Framework] ${s}${r} is a legacy name${o?`; write ${o}`:""}. See contracts/changes/journal.json.`)}}if(i.d(t,{id:()=>c,kA:()=>l}),"undefined"!=typeof globalThis){globalThis.SF=globalThis.SF||{};const e=globalThis.SF.deprecations||{};e.list=function(){return[...s().values()].map(e=>({...e}))},e.clear=function(){s().clear()},e.note=n,globalThis.SF.deprecations=e}const o=Object.freeze(["1/2","1","2"]),r=Object.freeze({"1/3":"1/2",3:"2"}),a=new Set;function l(e){const t=String(e??"").trim().toLowerCase();return o.includes(t)?t:Object.hasOwn(r,t)?r[t]:"1"}function c(e,t="field",i="1"){const s=String(e??"").trim().toLowerCase();if(o.includes(s))return s;if(Object.hasOwn(r,s)){const e=r[s];n({component:t,kind:"value",attribute:"size",from:s,to:e});const i=`${t}:${s}`;return a.has(i)||"undefined"==typeof console||(a.add(i),console.warn(`[Simai Framework] ${t}: size ${s} is retired for form fields; rendering size ${e}.`)),e}return i}},"67eed2647f47"(e,t,i){i.d(t,{z:()=>o});const s=new WeakMap,n=new WeakSet;function o(e,t){const i=e.ownerDocument;n.has(i)||(i.addEventListener("reset",e=>{const t=e.target;if("FORM"!==t?.tagName)return;const i=Array.from(t.elements);setTimeout(()=>{if(!e.defaultPrevented)for(const e of i)if(e.isConnected&&e.form===t)for(const t of s.get(e)||[])t()},0)},!0),n.add(i));let o=s.get(e);return o||s.set(e,o=new Set),o.add(t),()=>o.delete(t)}},"50a1017ded91"(e,t,i){i.a(e,async(e,t)=>{try{var s=i("fbe0570fcc69"),n=i("0d662e4d7d63"),o=i("98e26702f55a"),r=i("5429d6e80991"),a=i("3a03d4610486"),l=i("67eed2647f47"),c=i("a0f23dca0b37"),d=e([s,n,r,c]);[s,n,r,c]=d.then?(await d)():d;var u=i.n(s);const p={en:{search:"Search"},ru:{search:"Поиск"}};function h(e){return(0,o.id)(e,"sf-dropdown")}function f(e){const t=String(e||"").toLowerCase();return["text","icon","checkbox","avatar","color"].includes(t)?t:"text"}function g(e,t="1"){return e instanceof HTMLElement?"sf-list-item"!==e.tagName.toLowerCase()?null:{type:f(e.getAttribute("kind")||e.getAttribute("type")),size:h(e.getAttribute("size")||t),text:e.getAttribute("text")||"",icon:e.getAttribute("icon")||"person",checked:e.hasAttribute("checked")||(0,s.toBoolean)(e.getAttribute("checked")),selected:e.hasAttribute("selected")||(0,s.toBoolean)(e.getAttribute("selected")),disabled:e.hasAttribute("disabled")||(0,s.toBoolean)(e.getAttribute("disabled")),colorClass:e.getAttribute("color-class")||"bg-tertiary",avatarImageUrl:e.getAttribute("avatar-image-url")||"",avatarTitle:e.getAttribute("avatar-title")||e.getAttribute("text")||"",value:e.getAttribute("value")??e.getAttribute("text")??"",ariaLabel:e.getAttribute("aria-label")||"",group:e.getAttribute("group")||""}:null}function b(e,t="1"){if(!e||"object"!=typeof e)return null;const i=void 0===e.text||null===e.text?"":String(e.text),n=void 0===e.value||null===e.value?i:String(e.value);return""===i&&""===n?null:{type:f(e.kind||e.type),size:h(e.size||t),text:i,icon:e.icon?String(e.icon):"person",checked:(0,s.toBoolean)(e.checked),selected:(0,s.toBoolean)(e.selected),disabled:(0,s.toBoolean)(e.disabled),colorClass:e.colorClass?String(e.colorClass):"bg-tertiary",avatarImageUrl:e.avatarImageUrl?String(e.avatarImageUrl):"",avatarTitle:e.avatarTitle?String(e.avatarTitle):i,value:n,ariaLabel:e.ariaLabel?String(e.ariaLabel):"",group:e.group?String(e.group):""}}function m(e,t="1"){let i=e;if("string"==typeof i){const e=i.trim();if(""===e)return[];try{i=JSON.parse(e)}catch{return[]}}return Array.isArray(i)?i.map(e=>b("string"==typeof e||"number"==typeof e?{text:String(e),value:String(e)}:e,t)).filter(Boolean):[]}function v(e=""){return String(e||"").split(",").map(e=>e.trim()).filter(Boolean)}function y(e=[]){return e.map(e=>String(e)).join(",")}function w(e={}){return"avatar"===e.type?e.avatarTitle||e.text||e.value||"":e.text||e.avatarTitle||e.value||""}class x extends(u()){constructor(){super(),this._options=[],this._optionsCaptured=!1,this._optionsFromData=!1,this._open=!1,this._searchValue="",this._selectedValues=[],this._dropdownRoot=null,this._list=null,this._documentClickHandler=this.handleDocumentClick.bind(this),this._viewportHandler=this.positionPortalList.bind(this)}static get props(){return{templateName:{attribute:"template",default:"default"},size:{default:"1"},appearance:{default:"outlined",values:["filled","outlined"],aliases:["type"]},mode:{default:"select",values:["tag","select"]},multiple:{type:Boolean,default:!1},portal:{type:Boolean,default:!0},value:{default:""},name:{default:""},label:{default:""},required:{type:Boolean,default:!1},placeholder:{default:""},searchPlaceholder:{default:""},search:{type:Boolean,default:!0},layout:{default:"list",values:["list","grid"]},columns:{default:"6"},disabled:{type:Boolean,default:!1},ariaLabel:{default:""}}}connectedCallback(){this.captureOptions(),Object.prototype.hasOwnProperty.call(this,"_resetValues")||(this._resetValues=[...this.selectedValues]),super.connectedCallback()}attributeChangedCallback(e,t,i){t!==i&&("value"===e&&(this._selectedValues=v(i)),"disabled"===e&&this.disabled&&(this._open=!1,this._searchValue="")),super.attributeChangedCallback(e,t,i)}get componentName(){return"dropdown"}get templateName(){return this.getAttribute("template")||"default"}get size(){return h(this.getAttribute("size"))}get appearance(){return this.getProp("appearance")}get type(){return this.appearance}get mode(){return this.getEnumAttr("mode",["tag","select"],"select")}get multiple(){return this.hasAttribute("multiple")?this.getBooleanAttr("multiple",!0):"tag"===this.mode}get portal(){return this.getBooleanAttr("portal",!0)}get name(){return this.getAttribute("name")||""}get selectedValue(){return this.getAttribute("value")||""}get label(){return this.getAttribute("label")||""}get required(){return this.getBooleanAttr("required",!1)}get placeholder(){return this.getAttribute("placeholder")||""}get searchPlaceholder(){return this.getAttribute("search-placeholder")||(0,n.pageText)(p,"search",this)}get layout(){return this.getEnumAttr("layout",["list","grid"],"list")}get columns(){const e=Number.parseInt(this.getAttribute("columns")??"",10);return Number.isFinite(e)&&e>0?String(e):"6"}get search(){return this.getBooleanAttr("search",!0)}get disabled(){return this.getBooleanAttr("disabled",!1)}get ariaLabel(){return this.getAttribute("aria-label")||""}get selectedValues(){return this.hasAttribute("value")?v(this.selectedValue):this._selectedValues}get selectedOptions(){const e=this.options;return[...new Set(this.selectedValues)].map(t=>e.find(e=>String(e.value)===t)).filter(Boolean)}get triggerText(){if("tag"===this.mode)return"";return(this.multiple?this.selectedOptions:this.selectedOptions.slice(0,1)).map(w).join(", ")}get hiddenValue(){return this.selectedValues.join(",")}captureOptions(){if(this._optionsFromData)return;const e=Array.from(this.children).filter(e=>e instanceof HTMLElement&&"sf-list-item"===e.tagName.toLowerCase());e.length&&(this._options=e.map(e=>g(e,this.size)).filter(Boolean),this._optionsCaptured=!0,this.selectedValue||this._selectedValues.length||(this._selectedValues=this._options.filter(e=>e.selected).map(e=>String(e.value))),e.forEach(e=>e.remove()))}set options(e){const t=m(e,this.size);this._optionsFromData=!0,this._options=t,this._optionsCaptured=!0,this.selectedValue||this._selectedValues.length||(this._selectedValues=t.filter(e=>e.selected).map(e=>String(e.value))),this.requestComponentUpdate("options")}get options(){if(!Array.isArray(this._options)||!this._options.length)return[];const e=new Set(this.selectedValues);return this._options.map(t=>({...t,size:h(t.size||this.size),selected:e.has(String(t.value))}))}get visibleOptions(){const e=String(this._searchValue||"").trim().toLowerCase();return e?this.options.filter(t=>w(t).toLowerCase().includes(e)):this.options}templateContext(){const e=this.getPropsContext();return this.createTemplateContext({...e,component:this,open:this._open,multiple:this.multiple,value:this.hiddenValue,triggerText:this.triggerText,searchValue:this._searchValue,searchPlaceholder:this.searchPlaceholder,selectedValues:this.selectedValues,selectedOptions:this.selectedOptions,options:this.visibleOptions})}template(){return(0,r.g)(this.templateContext())}beforeRender(){this.captureOptions()}afterRender(){const e=this._dropdownRoot,t=this._list;this._dropdownRoot=this.querySelector(".sf-dropdown"),this._list=this.querySelector(".sf-list")||(e===this._dropdownRoot?t:null),t!==this._list&&(0,c.AL)(t),this.syncDocumentListeners(),this.syncPortalListeners(),this.positionPortalList(),e!==this._dropdownRoot&&(this._interaction?.release(),this._interaction=null),this._dropdownRoot&&!this._interaction&&(this._interaction=(0,a.Q)(this._dropdownRoot,{owner:this,getList:()=>this._list,isOpen:()=>this._open,isDisabled:()=>this.disabled,isMultiple:()=>this.multiple,open:()=>this.openDropdown(),close:()=>this.closeDropdown(),select:e=>this.selectValue(e.dataset.value||""),selectedLabels:()=>this.selectedOptions.map(w)})),this._interaction?.refresh();const i=this.querySelector(".sf-dropdown-hidden-input")||this.querySelector(".sf-dropdown-field > button");this._resetControl!==i&&(this._releaseReset?.(),this._resetControl=i,this._releaseReset=i?(0,l.z)(i,()=>{this._interaction?.beforeClose(),this._selectedValues=[...this._resetValues],this.setAttributeValue("value",y(this._selectedValues)),this._open=!1,this._searchValue="";const e=this.querySelector('.sf-dropdown-field input:not([type="hidden"])');e&&(e.value=this.triggerText),this.requestComponentUpdate("reset")}):null)}onDisconnected(){(0,c.AL)(this._list),this._releaseReset?.(),this._releaseReset=null,this._resetControl=null,this._interaction?.release(),this._interaction=null,this.removeDocumentListeners(),this.removePortalListeners(),super.onDisconnected()}openDropdown(){return this.disabled||this._open||(this._open=!0,this.requestComponentUpdate("open")),this}closeDropdown(){return this._open?(this._interaction?.beforeClose(),this._open=!1,this._searchValue="",this.requestComponentUpdate("close"),this):this}toggleDropdown(){return this._open?this.closeDropdown():this.openDropdown()}handleTriggerClick(e){this.disabled||(e?.preventDefault?.(),this.toggleDropdown())}handleSearchInput(e){this._searchValue=e?.target?.value||"",this.requestComponentUpdate("search")}handleOptionClick(e){if(this.disabled)return;const t=e.target?.closest?.(".sf-list-item");t&&(this.contains(t)||this._list?.contains(t))&&!t.classList.contains("disabled")&&(e.preventDefault(),this.selectValue(t.dataset.value||""))}handleOptionKeydown(e){"Enter"!==e.key&&" "!==e.key||this.handleOptionClick(e)}handleDocumentClick(e){!this._open||this.contains(e.target)||this._list?.contains(e.target)||this.closeDropdown()}selectValue(e=""){if(this.disabled)return this;const t=this.options.find(t=>String(t.value)===String(e));if(!t||t.disabled)return this;const i=!this.multiple&&1===this.selectedValues.length&&this.selectedValues[0]===String(t.value);if(this.multiple){const e=new Set(this.selectedValues);e.has(String(t.value))?e.delete(String(t.value)):e.add(String(t.value)),this._selectedValues=Array.from(e)}else this._selectedValues=[String(t.value)];const s=[...this._selectedValues];return this.setAttributeValue("value",y(s)),i||this.dispatchDropdownChange(t,s),this.multiple||(this._interaction?.beforeClose(),this._open=!1,this._searchValue=""),this.requestComponentUpdate("select"),this}removeSelectedValue(e=""){if(this.disabled)return this;const t=new Set(this.selectedValues);t.delete(String(e)),this._selectedValues=Array.from(t);const i=[...this._selectedValues];return this.setAttributeValue("value",y(i)),this.dispatchDropdownChange(null,i),this.requestComponentUpdate("remove-tag"),this}dispatchDropdownChange(e=null,t=this.selectedValues){const i={value:e?.value||"",label:e?w(e):"",values:t,item:e,root:this,multiple:this.multiple};this.dispatchEvent(new CustomEvent("sf-dropdown:change",{bubbles:!0,composed:!0,detail:i})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:i}))}syncDocumentListeners(){this._open?document.addEventListener("click",this._documentClickHandler):this.removeDocumentListeners()}removeDocumentListeners(){document.removeEventListener("click",this._documentClickHandler)}syncPortalListeners(){if(this._open&&this.portal)return window.addEventListener("resize",this._viewportHandler),void document.addEventListener("scroll",this._viewportHandler,!0);this.removePortalListeners()}removePortalListeners(){window.removeEventListener("resize",this._viewportHandler),document.removeEventListener("scroll",this._viewportHandler,!0)}positionPortalList(){this._list&&this._dropdownRoot&&this.portal&&this._open?(0,c.GD)(this._dropdownRoot,this._list,()=>this.closeDropdown()):(0,c.AL)(this._list)}get value(){return this.hiddenValue}set value(e){if(e&&"object"==typeof e&&!Array.isArray(e))return void this.setValueAttributes(e);const t=Array.isArray(e)?e.map(String):v(null==e?"":String(e));this.setAttributeValue("value",y(t))}}x.define("sf-dropdown"),t()}catch(_){t(_)}})},"5429d6e80991"(e,t,i){i.a(e,async(e,s)=>{try{i.d(t,{g:()=>h});var n=i("ddf1cdb42ecc"),o=i("c22590307c6c"),r=e([n,o]);[n,o]=r.then?(await r)():r;function a(e={}){return"avatar"===e.type?e.avatarTitle||e.text||e.value||"":e.text||e.avatarTitle||e.value||""}function l(e=[]){const t=[];let i=null;for(const s of e){const e=s.group?String(s.group):"";e!==i&&(i=e,e&&t.push((0,o.aU)(e,s.size))),t.push((0,o.lN)(s))}return t}const c=Object.freeze({"1/2":{size:"1/3",spacing:""},1:{size:"1",spacing:"compact"},2:{size:"2",spacing:"compact"}});function d(e){if(e.multiple||1!==e.selectedOptions?.length)return n.nothing;const t=e.selectedOptions[0];return"icon"===t.type&&t.icon?n.html`<i class="sf-icon sf-dropdown-field-visual" aria-hidden="true">${t.icon}</i>`:"color"===t.type&&t.colorClass?n.html`<span class="sf-tag-color-icon sf-dropdown-field-visual ${t.colorClass}" aria-hidden="true"></span>`:"avatar"===t.type&&t.avatarImageUrl?n.html`<span class="sf-avatar sf-avatar--size-1/2 bg-cover sf-dropdown-field-visual" aria-hidden="true" style=${`background-image: url(${t.avatarImageUrl});`}></span>`:n.nothing}function u(e,t){const i=a(t),s=c[e.size]||c[1],o=s.size,r=s.spacing?` spacing-${s.spacing}`:"",l="color"===t.type?"color":"avatar"===t.type?"avatar":"icon";return n.html`
+    <div
+      class="sf-tag transition sf-tag--${l} sf-tag--size-${o} sf-tag--inline${r} flex flex-row flex-nowrap items-center active"
+      data-value=${t.value}
+    >
+      ${"color"===t.type?n.html`<span class="sf-tag-color-icon ${t.colorClass}" aria-hidden="true"></span>`:n.nothing}
+      ${"icon"===t.type?n.html`<i class="sf-icon sf-tag-icon" aria-hidden="true">${t.icon}</i>`:n.nothing}
+      ${"avatar"===t.type?n.html`
+            <span
+              class="sf-avatar sf-avatar--size-${o} bg-cover"
+              aria-hidden="true"
+              style=${t.avatarImageUrl?`background-image: url(${t.avatarImageUrl});`:n.nothing}
+            ></span>
+          `:n.nothing}
+      <span class="sf-tag-container">${i}</span>
+      <button
+        type="button"
+        class="sf-icon-button sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1/3"
+        aria-label=${`Remove ${i}`}
+        ?disabled=${e.disabled}
+        @click=${i=>{i.preventDefault(),i.stopPropagation(),e.component.removeSelectedValue(t.value)}}
+      >
+        <div class="sf-close sf-close--size-1/3 flex">
+          <div class="sf-close-icon"></div>
+        </div>
+      </button>
+    </div>
+  `}const p={"1/2":"var(--sf-ui-1\\/2--control-height)",1:"var(--sf-ui-1--control-height)",2:"var(--sf-ui-2--control-height)"};function h(e){const t=["sf-dropdown",e.rootClass,e.open?"open":"",e.open?"sf-dropdown--open":"",`sf-dropdown--size-${e.size}`,`sf-dropdown--${e.appearance??e.type}`,"tag"===e.mode?"sf-dropdown--tag":"","grid"===e.layout?"sf-dropdown--grid":"","tag"!==e.mode?"sf-dropdown--text":"",e.disabled?"disabled":"","flex","flex-col"].filter(Boolean),i=["sf-dropdown-field",e.disabled?"":"cursor-pointer","items-cross-center","relative","transition","flex"].filter(Boolean),s="1"===e.size||"1/2"===e.size?"1/2":e.size,o=e.size,r=e.open?"keyboard_arrow_up":"keyboard_arrow_down";return n.html`
+    <div
+      class=${t.join(" ")}
+      style=${e.rootStyle||n.nothing}
+      ?disabled=${e.disabled}
+      ?multiple=${e.multiple}
+      ?portal=${e.portal}
+      data-portal=${e.portal?"true":"false"}
+    >
+      ${e.label?n.html`
+            <span class="sf-dropdown-label flex">
+              <span class="sf-dropdown-text">${e.label}</span>
+              ${e.required?n.html`<span class="sf-dropdown-required">*</span>`:n.nothing}
+            </span>
+          `:n.nothing}
+      ${(()=>{if(e.component?.hasSlotContent?.("trigger"))return n.html`
+        <div
+          class="sf-dropdown-trigger flex items-cross-center"
+          @click=${t=>e.component.handleTriggerClick(t)}
+        >
+          ${e.name?n.html`
+                <input
+                  class="sf-dropdown-hidden-input"
+                  type="hidden"
+                  name=${e.name}
+                  value=${e.value||""}
+                  ?disabled=${e.disabled}
+                />
+              `:n.nothing}
+          ${e.component.getSlotContent("trigger")}
+        </div>
+      `;const t=e.name?n.html`
+          <input
+            class="sf-dropdown-hidden-input"
+            type="hidden"
+            name=${e.name}
+            value=${e.value||""}
+            ?disabled=${e.disabled}
+          />
+        `:n.nothing;return"tag"===e.mode?n.html`
+        <div
+          class=${i.join(" ")}
+          @click=${t=>e.component.handleTriggerClick(t)}
+        >
+          ${t}
+          <div class="sf-dropdown-tag-container flex flex-wrap flex-1">
+            ${e.selectedOptions.map(t=>u(e,t))}
+          </div>
+          <button
+            type="button"
+            class="sf-icon-button sf-icon-button--icon sf-icon-button--on-surface sf-icon-button--link sf-icon-button--size-${s}"
+            ?disabled=${e.disabled}
+          >
+            <i class="sf-icon" aria-hidden="true">${r}</i>
+          </button>
+        </div>
+      `:n.html`
+      <label
+        class=${i.join(" ")}
+        @click=${t=>e.component.handleTriggerClick(t)}
+      >
+        ${t}
+        ${d(e)}
+        <input
+          placeholder=${e.placeholder}
+          type="text"
+          class="cursor-pointer"
+          .value=${e.triggerText||""}
+          readonly
+          ?disabled=${e.disabled}
+        />
+        <button
+          type="button"
+          class="sf-icon-button sf-icon-button--icon sf-icon-button--on-surface sf-icon-button--link sf-icon-button--size-${s} absolute"
+          ?disabled=${e.disabled}
+        >
+          <i class="sf-icon" aria-hidden="true">${r}</i>
+        </button>
+      </label>
+    `})()}
+
+      <div
+        class=${"sf-list flex flex-col"+(e.component?.hasSlotContent?.("trigger")?" sf-list--free-width":"")}
+        style=${`--sf-list--cell: ${p[e.size]||p[1]}`}
+        ?hidden=${!e.open}
+      >
+        ${e.search?n.html`
+              <label
+                class="sf-input sf-input--size-${o} sf-input--filled flex flex-col"
+              >
+                <span class="sf-input-field items-cross-center transition flex">
+                  <input
+                    placeholder=${e.searchPlaceholder}
+                    type="text"
+                    .value=${e.searchValue||""}
+                    ?disabled=${e.disabled}
+                    @input=${t=>e.component.handleSearchInput(t)}
+                    @change=${e=>e.stopPropagation()}
+                    @click=${e=>e.stopPropagation()}
+                  />
+                  <i class="sf-icon sf-icon-hint" aria-hidden="true">search</i>
+                </span>
+              </label>
+            `:n.nothing}
+        <div class="sf-list-container-wrap">
+          <div
+            class=${"sf-list-container flex flex-col"+("grid"===e.layout?" sf-list-container--grid":"")}
+            style=${"grid"===e.layout?`--sf-list-container--columns:${e.columns};`:n.nothing}
+            @click=${t=>e.component.handleOptionClick(t)}
+            @keydown=${t=>e.component.handleOptionKeydown(t)}
+          >
+            ${l(e.options)}
+          </div>
+        </div>
+      </div>
+    </div>
+  `}s()}catch(f){s(f)}})},c22590307c6c(e,t,i){i.a(e,async(e,s)=>{try{i.d(t,{aU:()=>d,lN:()=>c});var n=i("ddf1cdb42ecc"),o=i("98e26702f55a"),r=e([n]),a=r.then?(await r)():r;n=a[0];function l(e){const t=!0===e.option,i=e.component?.hasSlotContent?.("text")?e.component.getSlotContent("text"):e.text,s=e.component?.hasSlotContent?.("leading")?e.component.getSlotContent("leading"):n.nothing,o=e.component?.hasSlotContent?.("trailing")?e.component.getSlotContent("trailing"):n.nothing,r=["sf-list-item","flex","items-cross-center",`sf-list-item--${e.kind??e.type}`,`sf-list-item--size-${e.size}`,t?"cursor-pointer":"",e.selected?"selected":"",e.disabled?"disabled":"",e.rootClass].filter(Boolean),a=["sf-list-item-wrap","flex","flex-1"];["icon","checkbox","avatar","color"].includes(e.type)&&a.push("flex","flex-row","flex-nowrap","items-center","gap-2"),"avatar"!==e.type&&"color"!==e.type||(a.splice(a.indexOf("gap-2"),1),a.push("justify-between","gap-2"));return n.html`
+    <div
+      class=${r.join(" ")}
+      style=${e.rootStyle||n.nothing}
+      role=${t?"option":n.nothing}
+      tabindex=${t?"-1":n.nothing}
+      data-value=${t&&e.value||n.nothing}
+      aria-label=${t&&e.ariaLabel||n.nothing}
+      title=${t&&e.ariaLabel||n.nothing}
+      aria-disabled=${t&&e.disabled?"true":n.nothing}
+      aria-selected=${t?e.selected?"true":"false":n.nothing}
+    >
+      <div class=${a.join(" ")}>
+        ${(()=>{if(s!==n.nothing)return s;if("icon"===e.type)return n.html`<i class="sf-icon" aria-hidden="true">${e.icon}</i>`;if("checkbox"===e.type)return n.html`
+        <label
+          class="sf-checkbox sf-checkbox--size-${e.sizeGroup.checkbox} flex"
+          aria-hidden="true"
+        >
+          <span class="sf-checkbox-box flex">
+            <input
+              .checked=${Boolean(e.checked||e.selected)}
+              ?disabled=${e.disabled}
+              tabindex="-1"
+              type="checkbox"
+            />
+            <span class="sf-icon" aria-hidden="true"></span>
+          </span>
+        </label>
+      `;if("avatar"===e.type){const t=["sf-avatar","sf-avatar--size-"+("1/3"===e.sizeGroup.item||"1/2"===e.sizeGroup.item?"1/3":"1"===e.sizeGroup.item?"1/2":"2"===e.sizeGroup.item?"1":"2"),"bg-cover",e.disabled?"disabled":""].filter(Boolean);return n.html`
+        <div
+          class="sf-avatar-label-group sf-avatar-label-group--size-${e.sizeGroup.avatarGroup} flex items-cross-center"
+        >
+          <span
+            class=${t.join(" ")}
+            aria-hidden="true"
+            style=${e.avatarImageUrl?`background-image: url(${e.avatarImageUrl});`:n.nothing}
+          ></span>
+          <div class="sf-avatar-label-group-container flex flex-col">
+            <div class="sf-avatar-label-group-title">
+              ${e.avatarTitle}
+            </div>
+          </div>
+        </div>
+      `}if("color"===e.type){const t=["sf-tag","sf-tag--color",`sf-tag--size-${e.sizeGroup.colorTag}`,"flex","flex-row","flex-nowrap","items-center","flex-1",e.disabled?"disabled":""].filter(Boolean);return n.html`
+        <div class=${t.join(" ")}>
+          <span class="sf-tag-color-icon ${e.colorClass}" aria-hidden="true"></span>
+          <span class="sf-tag-container">${i}</span>
+        </div>
+      `}return n.nothing})()} ${"color"===e.type||"avatar"===e.type?n.nothing:n.html`<div class="sf-list-item-container">${i}</div>`} ${o!==n.nothing?o:"avatar"===e.type||"color"===e.type?n.html`
+        <label
+          class="sf-checkbox sf-checkbox--size-${e.sizeGroup.checkbox} flex"
+          aria-hidden="true"
+        >
+          <span class="sf-checkbox-box flex">
+            <input
+              .checked=${Boolean(e.checked||e.selected)}
+              ?disabled=${e.disabled}
+              tabindex="-1"
+              type="checkbox"
+            />
+            <span class="sf-icon" aria-hidden="true"></span>
+          </span>
+        </label>
+      `:n.nothing}
+      </div>
+    </div>
+  `}function c(e={}){const t=String(e.size||"1");return l({component:{hasSlotContent:()=>!1,getSlotContent:()=>n.nothing},templateName:"default",type:e.type||"text",kind:e.kind||e.type||"text",size:t,sizeGroup:u(t),text:e.text,icon:e.icon,checked:e.checked||e.selected,selected:e.selected,disabled:e.disabled,value:e.value,colorClass:e.colorClass,avatarImageUrl:e.avatarImageUrl,avatarTitle:e.avatarTitle,ariaLabel:e.ariaLabel,option:!0})}function d(e,t="1"){return n.html`
+    <div class="sf-list-heading sf-list-heading--size-${t}" role="presentation">
+      <span class="sf-list-heading-container">${e}</span>
+    </div>
+  `}function u(e){const t=String(e||"1");return"1/3"===t||"1/2"===t?{item:t,checkbox:(0,o.kA)(t),avatarGroup:"1/2",colorTag:"1/2"}:{item:t,checkbox:(0,o.kA)(t),avatarGroup:t,colorTag:"1"}}s()}catch(p){s(p)}})},ddf1cdb42ecc(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("lit"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("lit")),{once:!0}))},"0d662e4d7d63"(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("page-language"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("page-language")),{once:!0}))},"5c1dc214bb5e"(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("position"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("position")),{once:!0}))},fbe0570fcc69(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("smart-base"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("smart-base")),{once:!0}))}};const t={};function i(s){const n=t[s];if(void 0!==n)return n.exports;const o=t[s]={exports:{}};return e[s](o,o.exports,i),o.exports}(()=>{const e="function"==typeof Symbol,t=e?Symbol("webpack queues"):"__webpack_queues__",s=e?Symbol("webpack exports"):"__webpack_exports__",n=e?Symbol("webpack error"):"__webpack_error__",o=e=>{e?.d<1&&(e.d=1,e.forEach(e=>e.r--),e.forEach(e=>e.r--?e.r++:e()))};i.a=(e,i,r)=>{let a;r&&((a=[]).d=-1);const l=new Set,c=e.exports;let d,u,p;const h=new Promise((e,t)=>{p=t,u=e});h[s]=c,h[t]=e=>(a&&e(a),l.forEach(e),h.catch(e=>{})),e.exports=h;i(e=>{let i;d=(e=>e.map(e=>{if(null!==e&&"object"==typeof e){if(e[t])return e;if(e.then){const i=[];i.d=0,e.then(e=>{r[s]=e,o(i)},e=>{r[n]=e,o(i)});const r={};return r[t]=e=>e(i),r}}const i={};return i[t]=e=>{},i[s]=e,i}))(e);const r=()=>d.map(e=>{if(e[n])throw e[n];return e[s]}),c=new Promise(e=>{i=()=>e(r),i.r=0;const s=e=>e!==a&&!l.has(e)&&(l.add(e),e&&!e.d&&(i.r++,e.push(i)));d.map(e=>e[t](s))});return i.r?c:r()},e=>(e?p(h[n]=e):u(c),o(a))),a?.d<0&&(a.d=0)}})(),i.n=e=>{const t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{if(Array.isArray(t))for(var s=0;s<t.length;){var n=t[s++],o=t[s++];i.o(e,n)?0===o&&s++:0===o?Object.defineProperty(e,n,{enumerable:!0,value:t[s++]}):Object.defineProperty(e,n,{enumerable:!0,get:o})}else for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);i("50a1017ded91")})();

package/distr/smart/dropdown/smart.manifest.json

@@ -0,0 +1,374 @@
+{
+  "schema_version": 2,
+  "id": "smart.dropdown",
+  "version": "1.2.0",
+  "title": "Dropdown",
+  "summary": "Accessible single or multiple selection control with searchable options and optional portal projection.",
+  "kind": "smart",
+  "reuse_mode": "whole",
+  "lifecycle": "experimental",
+  "tags": [
+    "dropdown"
+  ],
+  "capabilities": [
+    "render",
+    "theme",
+    "responsive"
+  ],
+  "custom_element": "sf-dropdown",
+  "templates": [
+    "default"
+  ],
+  "exported_parts": [],
+  "composition": {
+    "uses": [
+      "component.dropdown",
+      "smart.list-item",
+      "smart.inputs",
+      "smart.icon-buttons"
+    ],
+    "public_parts": []
+  },
+  "inputs": {
+    "type": "object",
+    "properties": {
+      "appearance": {
+        "type": "string",
+        "default": "outlined",
+        "enum": [
+          "filled",
+          "outlined"
+        ],
+        "description": "How the dropdown looks: a filled field or an outlined one."
+      },
+      "aria-label": {
+        "type": "string",
+        "default": ""
+      },
+      "columns": {
+        "type": "string",
+        "default": "6",
+        "description": "How many options a row holds in the grid layout. Ignored in a list."
+      },
+      "disabled": {
+        "type": "boolean",
+        "default": false
+      },
+      "label": {
+        "type": "string",
+        "default": ""
+      },
+      "layout": {
+        "type": "string",
+        "default": "list",
+        "enum": [
+          "list",
+          "grid"
+        ],
+        "description": "How the options are laid out. A list is one option a row; a grid puts several in a row, which is the only way a hundred glyphs can be looked at -- a column of them is a column nobody scrolls to the end of. In a grid an option shows its picture and keeps its text as the name a search reads and a pointer sees."
+      },
+      "mode": {
+        "type": "string",
+        "default": "select",
+        "enum": [
+          "tag",
+          "select"
+        ]
+      },
+      "multiple": {
+        "type": "boolean",
+        "default": false,
+        "description": "Allow several values while preserving their serialized selection order. Tag mode is multiple by default."
+      },
+      "name": {
+        "type": "string",
+        "default": "",
+        "description": "Native form field name for the selected machine value."
+      },
+      "options": {
+        "type": "array",
+        "description": "Options given as data instead of as sf-list-item children: [{text, value, type?, size?, icon?, selected?, disabled?, colorClass?, avatarImageUrl?, avatarTitle?, ariaLabel?, group?}]. A string or a number is taken as both the label and the value. A parent that renders this dropdown from a template passes its options this way, because capturing child elements means removing them, and the parent can then no longer put a changed list back. Options carrying the same `group`, one after another, are drawn under one heading, so a long list says where each stretch of it comes from instead of repeating that in every row.",
+        "default": []
+      },
+      "placeholder": {
+        "type": "string",
+        "default": ""
+      },
+      "portal": {
+        "type": "boolean",
+        "default": true,
+        "description": "Anchor the popup with the shared Framework positioning (SF.Position): native top layer, flip, shift and viewport-limited height. On by default; portal=\"false\" keeps the in-flow list."
+      },
+      "required": {
+        "type": "boolean",
+        "default": false
+      },
+      "search": {
+        "type": "boolean",
+        "default": true
+      },
+      "search-placeholder": {
+        "type": "string",
+        "default": "",
+        "description": "Empty: the text of the page's language (\"Search\" in English)."
+      },
+      "size": {
+        "type": "string",
+        "default": "1",
+        "enum": [
+          "1/2",
+          "1",
+          "2"
+        ]
+      },
+      "template": {
+        "type": "string",
+        "default": "default"
+      },
+      "type": {
+        "type": "string",
+        "default": "outlined",
+        "description": "Legacy name for appearance, still honoured. See contracts/public-api-axes.json.",
+        "enum": [
+          "filled",
+          "outlined"
+        ]
+      },
+      "value": {
+        "type": "string",
+        "default": "",
+        "description": "Selected machine value, or a comma-separated list of values for multiple selection."
+      }
+    },
+    "additionalProperties": false
+  },
+  "item_contract": {},
+  "contracts": {
+    "change_detail": {
+      "type": "object",
+      "required": [
+        "value",
+        "values",
+        "multiple"
+      ],
+      "properties": {
+        "value": {
+          "type": "string",
+          "description": "The value of the item chosen or cleared; \"\" when none."
+        },
+        "label": {
+          "type": "string",
+          "description": "Its visible text."
+        },
+        "values": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "description": "Every selected value after the change."
+        },
+        "item": {
+          "description": "The chosen sf-list-item, or null."
+        },
+        "root": {
+          "description": "The emitting sf-dropdown."
+        },
+        "multiple": {
+          "type": "boolean",
+          "description": "Whether several values can be selected."
+        }
+      }
+    }
+  },
+  "methods": {
+    "openDropdown": {
+      "summary": "Opens the option list unless the control is disabled or already open. Returns the element.",
+      "arguments": [],
+      "returns": {
+        "type": "object",
+        "description": "The element, for chaining."
+      }
+    },
+    "closeDropdown": {
+      "summary": "Closes the option list and clears the search text. Returns the element.",
+      "arguments": [],
+      "returns": {
+        "type": "object",
+        "description": "The element, for chaining."
+      }
+    },
+    "toggleDropdown": {
+      "summary": "Closes the list when open, opens it otherwise. Returns the element.",
+      "arguments": [],
+      "returns": {
+        "type": "object",
+        "description": "The element, for chaining."
+      }
+    }
+  },
+  "events": {
+    "change": {
+      "summary": "The selection changed; dispatched on the host. The name to bind.",
+      "payload": {
+        "$ref": "#/contracts/change_detail"
+      },
+      "canonical": true
+    },
+    "sf-dropdown:change": {
+      "summary": "Legacy name for change, still emitted with the same detail; bind change.",
+      "payload": {
+        "$ref": "#/contracts/change_detail"
+      },
+      "alias_of": "change"
+    }
+  },
+  "state": {
+    "machines": {},
+    "visual_states": [
+      "default",
+      "open",
+      "selected",
+      "disabled"
+    ]
+  },
+  "persistence": {
+    "mode": "none",
+    "source_of_truth": "component",
+    "network_owner": "none",
+    "revision_field": null
+  },
+  "ownership": {
+    "source": "simai/ui-source",
+    "data": "fixture",
+    "effects": "component",
+    "forbidden_client_responsibilities": [
+      "backend access decisions",
+      "host route invention"
+    ]
+  },
+  "security": {
+    "permissions_owner": "none",
+    "untrusted_inputs": [
+      "props",
+      "children"
+    ],
+    "network_policy": "deny"
+  },
+  "accessibility": {
+    "role": "button with listbox popup",
+    "accessible_name": "required",
+    "keyboard": [
+      "Tab",
+      "ArrowDown",
+      "ArrowUp",
+      "Home",
+      "End",
+      "Enter",
+      "Space",
+      "Escape"
+    ],
+    "focus": "The toggle is the primary Tab stop. Arrow keys open and move through available options; Home and End move within the list; Enter or Space selects; Escape closes and restores the toggle; Tab closes and continues native traversal. The searchbox keeps native text-editing Home and End behavior."
+  },
+  "presentation": {
+    "themes": [
+      "light",
+      "dark"
+    ],
+    "locales": [
+      "ru",
+      "en"
+    ],
+    "responsive": [
+      "desktop",
+      "mobile"
+    ],
+    "skeleton": {
+      "shape": "none",
+      "while_loading": "none"
+    }
+  },
+  "adapter": {
+    "kind": "generic",
+    "protocol": "simai.smart-studio-adapter.v1",
+    "module": null
+  },
+  "artifacts": {
+    "fixtures": [
+      "studio.fixture.json"
+    ],
+    "scenarios": [
+      "studio.scenario.json"
+    ]
+  },
+  "readiness": {
+    "level": "described",
+    "required_checks": [
+      "manifest",
+      "fixture",
+      "runtime-upgrade",
+      "scenario-smoke"
+    ]
+  },
+  "compatibility": {
+    "contract_schema": {
+      "id": "https://simai.io/contracts/smart-component-manifest.v2.schema.json",
+      "version": 2
+    },
+    "runtime_pair": {
+      "ui_revision": "094f3d549aa7921d2d7f8773972c73711dd6a72e",
+      "ui_smart_revision": "856fb5d751fad1c76104c32515f4c1869dd75b6c"
+    },
+    "aliases": [],
+    "deprecations": [],
+    "replacement": null,
+    "migrations": [
+      {
+        "from": "1.0.0",
+        "to": "1.1.0",
+        "changes": [
+          "portal is on by default: the list is positioned by SF.Position (Floating UI) in the native top layer, flips above near the bottom and stays inside the viewport.",
+          "portal=\"false\" keeps the previous in-flow list."
+        ]
+      }
+    ]
+  },
+  "provenance": {
+    "source_repository": "simai/ui-source",
+    "source_revision": "d73527c92056a684b5f34a46ec7315e1ded9be19",
+    "source_artifacts": [
+      {
+        "path": "src/smart/dropdown/index.js",
+        "sha256": "c8a9e75654ce20b4a37f7301fc0fe435444b1340b9539f1e1544e3485f0b86e6"
+      }
+    ],
+    "generated_runtime": [
+      {
+        "repository": "simai/ui-smart",
+        "revision": "856fb5d751fad1c76104c32515f4c1869dd75b6c",
+        "path": "smart/dropdown/js/dropdown.js",
+        "sha256": "3265735b5514c67f932f78cf67022bc9db1affc76703fc9034bc095c3b11c007"
+      }
+    ]
+  },
+  "ai_guidance": {
+    "use_when": "Use sf-dropdown when a form needs one or several values from a concealed option set. Use direct sf-list-item children with stable machine values and visible labels. Use portal only when an ancestor clips the popup.",
+    "do_not": [
+      "Do not copy generated ui-smart code",
+      "Do not move host data or access decisions into the component",
+      "Do not use the visible label as the submitted value when a stable machine identifier exists",
+      "Do not make decorative checkbox, avatar or icon content independently focusable inside an option"
+    ],
+    "required_reads": [
+      "inputs",
+      "methods",
+      "events",
+      "ownership",
+      "provenance"
+    ],
+    "minimal_example": "<sf-dropdown label=\"Статус\" name=\"status\" placeholder=\"Выберите статус\"><sf-list-item value=\"open\" text=\"Открыт\"></sf-list-item><sf-list-item value=\"done\" text=\"Готов\"></sf-list-item></sf-dropdown>",
+    "owner_commands": [
+      "npm run contract:verify",
+      "npm test"
+    ]
+  }
+}