@rogieking/figui3 6.35.0 → 6.37.0

package/dist/fig.js

@@ -38,7 +38,7 @@ var hq=(q,Q)=>()=>(q&&(Q=q(q=0)),Q);var vq={};var P0=hq(()=>{/*! Vendored from @
 `)?`
 `:",";this.#$=q.split(Q).map((Z)=>Z.trim()).filter(Boolean)}#G(){if(this.innerHTML="",this.#$.length===0)return;let q=document.createElement("fig-segmented-control");if(q.setAttribute("sizing",this.getAttribute("sizing")||"equal"),z(this,"disabled"))q.setAttribute("disabled","");if(z(this,"full"))q.setAttribute("full","");let Q=this.getAttribute("value");for(let Z of this.#$){let $=document.createElement("fig-segment");if($.setAttribute("value",Z),$.textContent=Z,Q===Z)$.setAttribute("selected","true");q.appendChild($)}if(Q)q.setAttribute("value",Q);q.addEventListener("input",(Z)=>{if(Z.stopPropagation(),this.#j)return;let $=this.#N(Z);if($===null)return;this.#j=!0,this.setAttribute("value",$),this.#j=!1,this.dispatchEvent(new CustomEvent("input",{detail:$,bubbles:!0,composed:!0}))}),q.addEventListener("change",(Z)=>{if(Z.stopPropagation(),this.#j)return;let $=this.#N(Z);if($===null)return;this.dispatchEvent(new CustomEvent("change",{detail:$,bubbles:!0,composed:!0}))}),this.appendChild(q),this.#J=q,this.#Q="segments"}#K(){if(this.innerHTML="",this.#$.length===0)return;let q=document.createElement("fig-dropdown");if(z(this,"disabled"))q.setAttribute("disabled","");let Q=this.getAttribute("value");for(let Z of this.#$){let $=document.createElement("option");if($.value=Z,$.textContent=Z,Q===Z)$.selected=!0;q.appendChild($)}if(Q)q.setAttribute("value",Q);q.addEventListener("input",(Z)=>{if(Z.stopPropagation(),this.#j)return;let $=this.#N(Z);if(!$)return;this.#j=!0,this.setAttribute("value",$),this.#j=!1,this.dispatchEvent(new CustomEvent("input",{detail:$,bubbles:!0,composed:!0}))}),q.addEventListener("change",(Z)=>{if(Z.stopPropagation(),this.#j)return;let $=this.#N(Z);if(!$)return;this.dispatchEvent(new CustomEvent("change",{detail:$,bubbles:!0,composed:!0}))}),this.appendChild(q),this.#J=q,this.#Q="dropdown"}#X(){if(this.#Q==="segments")this.#G(),requestAnimationFrame(()=>{requestAnimationFrame(()=>this.#R())});else this.#K()}#U(){if(!this.#J||this.#j)return;let q=this.getAttribute("value")||"";this.#J.value=q}#L(q){if(!this.#J)return;if(this.hasAttribute(q))this.#J.setAttribute(q,this.getAttribute(q)||"");else this.#J.removeAttribute(q)}#z(){this.#Z?.disconnect(),this.#Z=new ResizeObserver(()=>{this.#R()}),this.#Z.observe(this)}#M(q){let Q=document.createRange();Q.selectNodeContents(q);let Z=Q.getBoundingClientRect().width,J=q.getBoundingClientRect().width,j=getComputedStyle(q),_=parseFloat(j.paddingLeft)||0,W=parseFloat(j.paddingRight)||0,N=J-_-W;return Z>N+0.5}#B(){let q=this.querySelectorAll("fig-segment");for(let Q of q)if(this.#M(Q))return!0;return!1}#R(){if(this.#$.length<=1)return;if(this.#Q==="segments"){let q=this.#J;if(q&&q.scrollWidth>q.clientWidth+1||this.#B())this.#q=this.clientWidth,this.#K()}else if(this.#q>0&&this.clientWidth>=this.#q)this.#G(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{let q=this.#J;if(q&&q.scrollWidth>q.clientWidth+1||this.#B())this.#K()})})}}M("fig-options",p0);function dq(q){let Q=q||"";if(Q.startsWith("["))try{let $=JSON.parse(Q);return Array.isArray($)?$:[]}catch{}let Z=Q.includes(`
 `)?`
-`:",";return Q.split(Z).map(($)=>$.trim()).filter(Boolean)}function sq(q){if(q&&typeof q==="object")return String(q.value??q.label??"");return String(q??"")}function oq(q){if(q&&typeof q==="object")return String(q.label??q.value??"");return String(q??"")}class d0 extends HTMLElement{static get observedAttributes(){return["value","disabled","selected","label"]}get value(){let q=this.getAttribute("value");if(q!==null)return q;return(this.textContent||"").trim()}set value(q){if(q===null||q===void 0)this.removeAttribute("value");else this.setAttribute("value",String(q))}get disabled(){return z(this,"disabled")}set disabled(q){if(q)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return z(this,"selected")}set selected(q){if(q)this.setAttribute("selected","");else this.removeAttribute("selected")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","option");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");this.#Q()}attributeChangedCallback(q,Q,Z){if(Q===Z)return;if(q==="disabled")this.#Q()}#Q(){if(this.disabled)this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else if(this.removeAttribute("aria-disabled"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1")}}M("fig-select-option",d0);class s0 extends HTMLElement{#Q=null;#q=null;#Z=null;#$=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#J(),this.#j(),this.addEventListener("scroll",this.#$,{passive:!0}),this.#Z?.disconnect(),this.#Z=new ResizeObserver(()=>this.syncOverflow()),this.#Z.observe(this),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#$),this.#Z?.disconnect(),this.#Z=null,this.#N()}syncOverflow(){return a(this,this,"y")}scrollToOption(q,Q="auto"){C0(this,q,"y",Q)}#J(){let q=this.querySelector(":scope > fig-chooser");if(!q)return;while(q.firstChild)this.insertBefore(q.firstChild,q);q.remove()}#j(){if(this.#Q&&this.#q&&this.contains(this.#Q)&&this.contains(this.#q))return;this.#N();let q=N0({owner:"select",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>r(this,"y",-1),onEnd:()=>r(this,"y",1)});this.#Q=q.start,this.#q=q.end,this.prepend(this.#Q),this.append(this.#q)}#N(){this.#Q?.remove(),this.#q?.remove(),this.#Q=null,this.#q=null,this.classList.remove("overflow-start","overflow-end")}}M("fig-select-options",s0);class o0 extends HTMLElement{#Q=null;#q=null;#Z=null;#$=null;#J=null;#j=null;#N=!1;#_=-1;#W=!1;#Y=!1;#G=null;#K=!1;#X=null;#U=null;#L=!1;#z=this.#$0.bind(this);#M=this.#J0.bind(this);#B=this.#q0.bind(this);#R=this.#t.bind(this);#H=this.#_0.bind(this);#D=this.#g.bind(this);static get observedAttributes(){return["value","disabled","label","options","position","offset","closedby","open"]}get value(){return this.getAttribute("value")??""}set value(q){if(q===null||q===void 0)this.removeAttribute("value");else this.setAttribute("value",String(q))}get open(){return z(this,"open")}set open(q){if(q)this.setAttribute("open","");else this.removeAttribute("open")}connectedCallback(){if(!this.#N)this.#V();if(this.#A(),this.#C(),this.#c(),this.#p(),this.#i(),this.#o(),this.open)this.#K0()}disconnectedCallback(){this.#v(),document.removeEventListener("keydown",this.#R,!0),this.#j?.disconnect(),this.#j=null}attributeChangedCallback(q,Q,Z){if(Q===Z||!this.#N)return;if(q==="options"){this.#C(),this.#i();return}if(q==="value"||q==="label"){this.#i();return}if(q==="disabled"){this.#c();return}if(q==="open"){if(Z===null||Z==="false")this.#W0();else this.#K0();return}if(q==="position"||q==="offset"||q==="closedby")this.#p()}focus(q){this.#Q?.focus(q)}blur(){this.#Q?.blur()}#T(q){return q?.nodeType===1&&(q.tagName==="FIG-SELECT-OPTION"||q.tagName==="FIG-SEPARATOR"||q.tagName==="FIG-SELECT-OPTIONS")}#A(){for(let q of this.querySelectorAll(":scope > fig-select-options"))if(!q.hasAttribute("slot"))q.setAttribute("slot","panel")}#O(){let Q=(this.#J?.assignedElements({flatten:!0})??[]).find((Z)=>Z.tagName==="FIG-SELECT-OPTIONS");if(Q)return Q;return this.querySelector(":scope > fig-select-options")}#P(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#k(){let q=this.#O();if(q){if(!q.hasAttribute("slot"))q.setAttribute("slot","panel");return q}return q=document.createElement("fig-select-options"),q.setAttribute("slot","panel"),q.setAttribute("data-fig-generated",""),this.appendChild(q),q}#C(){if(this.#P())return;let q=this.hasAttribute("options"),Q=q?this.#k():this.#O();if(!Q)return;this.#L=!0;try{for(let J of Q.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))J.remove();if(!q)return;let Z=dq(this.getAttribute("options")),$=Q.querySelector(":scope > .fig-overflow-end");for(let J of Z){let j=document.createElement("fig-select-option");if(j.setAttribute("data-fig-generated",""),j.setAttribute("value",sq(J)),j.textContent=oq(J),$)Q.insertBefore(j,$);else Q.appendChild(j)}}finally{this.#L=!1}}#V(){this.#N=!0;let q=this.attachShadow({mode:"open"});q.innerHTML=`
+`:",";return Q.split(Z).map(($)=>$.trim()).filter(Boolean)}function sq(q){if(q&&typeof q==="object")return String(q.value??q.label??"");return String(q??"")}function oq(q){if(q&&typeof q==="object")return String(q.label??q.value??"");return String(q??"")}class d0 extends HTMLElement{static get observedAttributes(){return["value","disabled","selected","label"]}get value(){let q=this.getAttribute("value");if(q!==null)return q;return(this.textContent||"").trim()}set value(q){if(q===null||q===void 0)this.removeAttribute("value");else this.setAttribute("value",String(q))}get disabled(){return z(this,"disabled")}set disabled(q){if(q)this.setAttribute("disabled","");else this.removeAttribute("disabled")}get selected(){return z(this,"selected")}set selected(q){if(q)this.setAttribute("selected","");else this.removeAttribute("selected")}connectedCallback(){if(!this.hasAttribute("role"))this.setAttribute("role","option");if(!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1");this.#Q()}attributeChangedCallback(q,Q,Z){if(Q===Z)return;if(q==="disabled")this.#Q()}#Q(){if(this.disabled)this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1");else if(this.removeAttribute("aria-disabled"),!this.hasAttribute("tabindex"))this.setAttribute("tabindex","-1")}}M("fig-select-option",d0);class s0 extends HTMLElement{#Q=null;#q=null;#Z=null;#$=this.syncOverflow.bind(this);connectedCallback(){if(!this.hasAttribute("slot"))this.setAttribute("slot","panel");this.#J(),this.#j(),this.#N(),this.addEventListener("scroll",this.#$,{passive:!0}),this.#Z?.disconnect(),this.#Z=new ResizeObserver(()=>this.syncOverflow()),this.#Z.observe(this),requestAnimationFrame(()=>this.syncOverflow())}disconnectedCallback(){this.removeEventListener("scroll",this.#$),this.#Z?.disconnect(),this.#Z=null,this.#_()}syncOverflow(){return this.#j(),a(this,this,"y")}scrollToOption(q,Q="auto"){C0(this,q,"y",Q)}#J(){let q=this.querySelector(":scope > fig-chooser");if(!q)return;while(q.firstChild)this.insertBefore(q.firstChild,q);q.remove()}#j(){let q=Array.from(this.children).find((Q)=>!Q.hasAttribute("data-fig-select-nav"));if(q?.tagName==="FIG-SEPARATOR")q.setAttribute("borderless","")}#N(){if(this.#Q&&this.#q&&this.contains(this.#Q)&&this.contains(this.#q))return;this.#_();let q=N0({owner:"select",startLabel:"Scroll up",endLabel:"Scroll down",onStart:()=>r(this,"y",-1),onEnd:()=>r(this,"y",1)});this.#Q=q.start,this.#q=q.end,this.prepend(this.#Q),this.append(this.#q)}#_(){this.#Q?.remove(),this.#q?.remove(),this.#Q=null,this.#q=null,this.classList.remove("overflow-start","overflow-end")}}M("fig-select-options",s0);class o0 extends HTMLElement{#Q=null;#q=null;#Z=null;#$=null;#J=null;#j=null;#N=!1;#_=-1;#W=!1;#Y=!1;#G=null;#K=!1;#X=null;#U=null;#L=!1;#z=this.#$0.bind(this);#M=this.#J0.bind(this);#B=this.#q0.bind(this);#R=this.#t.bind(this);#H=this.#_0.bind(this);#D=this.#g.bind(this);static get observedAttributes(){return["value","disabled","label","options","position","offset","closedby","open"]}get value(){return this.getAttribute("value")??""}set value(q){if(q===null||q===void 0)this.removeAttribute("value");else this.setAttribute("value",String(q))}get open(){return z(this,"open")}set open(q){if(q)this.setAttribute("open","");else this.removeAttribute("open")}connectedCallback(){if(!this.#N)this.#V();if(this.#A(),this.#C(),this.#c(),this.#p(),this.#i(),this.#o(),this.open)this.#K0()}disconnectedCallback(){this.#v(),document.removeEventListener("keydown",this.#R,!0),this.#j?.disconnect(),this.#j=null}attributeChangedCallback(q,Q,Z){if(Q===Z||!this.#N)return;if(q==="options"){this.#C(),this.#i();return}if(q==="value"||q==="label"){this.#i();return}if(q==="disabled"){this.#c();return}if(q==="open"){if(Z===null||Z==="false")this.#W0();else this.#K0();return}if(q==="position"||q==="offset"||q==="closedby")this.#p()}focus(q){this.#Q?.focus(q)}blur(){this.#Q?.blur()}#T(q){return q?.nodeType===1&&(q.tagName==="FIG-SELECT-OPTION"||q.tagName==="FIG-SEPARATOR"||q.tagName==="FIG-SELECT-OPTIONS")}#A(){for(let q of this.querySelectorAll(":scope > fig-select-options"))if(!q.hasAttribute("slot"))q.setAttribute("slot","panel")}#O(){let Q=(this.#J?.assignedElements({flatten:!0})??[]).find((Z)=>Z.tagName==="FIG-SELECT-OPTIONS");if(Q)return Q;return this.querySelector(":scope > fig-select-options")}#P(){return Boolean(this.querySelector(":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])"))}#k(){let q=this.#O();if(q){if(!q.hasAttribute("slot"))q.setAttribute("slot","panel");return q}return q=document.createElement("fig-select-options"),q.setAttribute("slot","panel"),q.setAttribute("data-fig-generated",""),this.appendChild(q),q}#C(){if(this.#P())return;let q=this.hasAttribute("options"),Q=q?this.#k():this.#O();if(!Q)return;this.#L=!0;try{for(let J of Q.querySelectorAll(":scope > fig-select-option[data-fig-generated]"))J.remove();if(!q)return;let Z=dq(this.getAttribute("options")),$=Q.querySelector(":scope > .fig-overflow-end");for(let J of Z){let j=document.createElement("fig-select-option");if(j.setAttribute("data-fig-generated",""),j.setAttribute("value",sq(J)),j.textContent=oq(J),$)Q.insertBefore(j,$);else Q.appendChild(j)}}finally{this.#L=!1}}#V(){this.#N=!0;let q=this.attachShadow({mode:"open"});q.innerHTML=`
       <style>
         :host {
           display: inline-flex;

package/fig.js

@@ -352,7 +352,7 @@ function figSupportsPopover() {
 
 /**
  * A custom button element that supports different types and states.
- * @attr {string} variant - Visual style: "primary", "secondary", "destructive", "destructiveSecondary", "destructiveGhost", "ghost", "link", "input", or "overlay"
+ * @attr {string} variant - Visual style: "primary", "secondary", "destructive", "destructiveSecondary", "destructiveGhost", "destructiveLink", "ghost", "link", "input", or "overlay"
  * @attr {string} type - The button type: "button" (default), "toggle", "submit", or "link"
  * @attr {boolean} selected - Whether the button is in a selected state
  * @attr {boolean} disabled - Whether the button is disabled
@@ -5262,6 +5262,7 @@ class FigSelectOptions extends HTMLElement {
   connectedCallback() {
     if (!this.hasAttribute("slot")) this.setAttribute("slot", "panel");
     this.#unwrapLegacyChooser();
+    this.#markFirstSeparatorBorderless();
     this.#ensureNavButtons();
     this.addEventListener("scroll", this.#boundSyncOverflow, { passive: true });
     this.#resizeObserver?.disconnect();
@@ -5278,6 +5279,7 @@ class FigSelectOptions extends HTMLElement {
   }
 
   syncOverflow() {
+    this.#markFirstSeparatorBorderless();
     return figSyncOverflowState(this, this, "y");
   }
 
@@ -5294,6 +5296,15 @@ class FigSelectOptions extends HTMLElement {
     chooser.remove();
   }
 
+  #markFirstSeparatorBorderless() {
+    const firstContent = Array.from(this.children).find(
+      (child) => !child.hasAttribute("data-fig-select-nav"),
+    );
+    if (firstContent?.tagName === "FIG-SEPARATOR") {
+      firstContent.setAttribute("borderless", "");
+    }
+  }
+
   #ensureNavButtons() {
     if (
       this.#navStart &&
@@ -19759,6 +19770,7 @@ figDefineElement("fig-menu-item", FigMenuItem);
 /**
  * Visual divider between content groups.
  * @attr {string} label - Optional group label shown in secondary text under the line.
+ * @attr {boolean} borderless - Hides the separator line when present or "true".
  */
 class FigSeparator extends HTMLElement {
   static get observedAttributes() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "6.35.0",
+  "version": "6.37.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",