tgui-core 5.9.0 → 5.11.0

package/dist/common/ui.d.ts

@@ -118,6 +118,6 @@ type StyleMap = StringStyleMap & BooleanStyleMap;
 /** Super light implementation of tailwind-like class names. */
 export declare function computeTwClass(input: string | undefined): StyleMap;
 /** Short list of accepted DOM event handlers */
-export declare const eventHandlers: ["onClick", "onContextMenu", "onDoubleClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseMove", "onMouseOver", "onMouseUp", "onScroll", "onWheel", "onDrag", "onDragEnd", "onDragEnter", "onDragExit", "onDragLeave", "onDragOver", "onDragStart", "onDrop"];
+export declare const eventHandlers: ["onClick", "onAuxClick", "onContextMenu", "onDoubleClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseOver", "onMouseUp", "onScroll", "onWheel", "onDrag", "onDragEnd", "onDragEnter", "onDragExit", "onDragLeave", "onDragOver", "onDragStart", "onDrop"];
 export type EventHandlers<TElement = HTMLDivElement> = Pick<DOMAttributes<TElement>, (typeof eventHandlers)[number]>;
 export {};

package/dist/common/ui.js

@@ -1 +1 @@
-import{CSS_COLORS as t}from"./constants.js";import{classes as o}from"./react.js";let e=t=>"string"==typeof t?t.endsWith("px")?`${Number.parseFloat(t)/12}rem`:t:"number"==typeof t?`${t}rem`:void 0,n=t=>"string"==typeof t?e(t):"number"==typeof t?e(.5*t):void 0;function i(o){return"string"==typeof o&&t.includes(o)}let r=t=>(o,e)=>{("number"==typeof e||"string"==typeof e)&&(o[t]=e)},l=(t,o)=>(e,n)=>{("number"==typeof n||"string"==typeof n)&&(e[t]=o(n))},p=(t,o)=>(e,n)=>{n&&(e[t]=o)},a=(t,o,e)=>(n,i)=>{if("number"==typeof i||"string"==typeof i)for(let r=0;r<e.length;r++)n[t+e[r]]=o(i)},g=t=>(o,e)=>{i(e)||(o[t]=e)},f={align:r("textAlign"),backgroundColor:g("backgroundColor"),bottom:l("bottom",e),color:g("color"),fontFamily:r("fontFamily"),fontSize:l("fontSize",e),fontWeight:r("fontWeight"),g:l("gap",n),gc:l("columnGap",n),gr:l("rowGap",n),height:l("height",e),left:l("left",e),lineHeight:(t,o)=>{"number"==typeof o?t.lineHeight=o:"string"==typeof o&&(t.lineHeight=e(o))},m:a("margin",n,["Top","Bottom","Left","Right"]),maxHeight:l("maxHeight",e),maxWidth:l("maxWidth",e),mb:l("marginBottom",n),minHeight:l("minHeight",e),minWidth:l("minWidth",e),ml:l("marginLeft",n),mr:l("marginRight",n),mt:l("marginTop",n),mx:a("margin",n,["Left","Right"]),my:a("margin",n,["Top","Bottom"]),opacity:r("opacity"),overflow:r("overflow"),overflowX:r("overflowX"),overflowY:r("overflowY"),p:a("padding",n,["Top","Bottom","Left","Right"]),pb:l("paddingBottom",n),pl:l("paddingLeft",n),position:r("position"),pr:l("paddingRight",n),pt:l("paddingTop",n),px:a("padding",n,["Left","Right"]),py:a("padding",n,["Top","Bottom"]),right:l("right",e),textAlign:r("textAlign"),textColor:g("color"),top:l("top",e),verticalAlign:r("verticalAlign"),width:l("width",e)},m={bold:p("fontWeight","bold"),fillPositionedParent:(t,o)=>{o&&(t.position="absolute",t.top=0,t.bottom=0,t.left=0,t.right=0)},inline:p("display","inline-block"),italic:p("fontStyle","italic"),nowrap:p("whiteSpace","nowrap"),preserveWhitespace:p("whiteSpace","pre-wrap")};function s(t){let o={},e={};for(let n in t){if("style"===n)continue;let i=t[n],r=f[n]||m[n];r?r(e,i):o[n]=i}return o.style={...e,...t.style},o}function u(t){let e=t.textColor||t.color,{backgroundColor:n}=t;return o([i(e)&&`color-${e}`,i(n)&&`color-bg-${n}`])}function c(t){let o={};if(!t)return o;for(let e of t.split(" ")){let[t,n]=e.split("-");if(t)if(t in f){if(""===n)continue;let e=Number(n);!Number.isNaN(e)&&Number.isFinite(e)?o[t]=e:o[t]=n}else t in m?o[t]=!0:console.warn(`Unknown prop ${t}`)}return o}let h=["onClick","onContextMenu","onDoubleClick","onKeyDown","onKeyUp","onMouseDown","onMouseLeave","onMouseMove","onMouseOver","onMouseUp","onScroll","onWheel","onDrag","onDragEnd","onDragEnter","onDragExit","onDragLeave","onDragOver","onDragStart","onDrop"];export{m as booleanStyleMap,u as computeBoxClassName,s as computeBoxProps,c as computeTwClass,h as eventHandlers,n as halfUnit,f as stringStyleMap,e as unit};
+import{CSS_COLORS as t}from"./constants.js";import{classes as o}from"./react.js";let e=t=>"string"==typeof t?t.endsWith("px")?`${Number.parseFloat(t)/12}rem`:t:"number"==typeof t?`${t}rem`:void 0,n=t=>"string"==typeof t?e(t):"number"==typeof t?e(.5*t):void 0;function i(o){return"string"==typeof o&&t.includes(o)}let r=t=>(o,e)=>{("number"==typeof e||"string"==typeof e)&&(o[t]=e)},l=(t,o)=>(e,n)=>{("number"==typeof n||"string"==typeof n)&&(e[t]=o(n))},p=(t,o)=>(e,n)=>{n&&(e[t]=o)},a=(t,o,e)=>(n,i)=>{if("number"==typeof i||"string"==typeof i)for(let r=0;r<e.length;r++)n[t+e[r]]=o(i)},g=t=>(o,e)=>{i(e)||(o[t]=e)},f={align:r("textAlign"),backgroundColor:g("backgroundColor"),bottom:l("bottom",e),color:g("color"),fontFamily:r("fontFamily"),fontSize:l("fontSize",e),fontWeight:r("fontWeight"),g:l("gap",n),gc:l("columnGap",n),gr:l("rowGap",n),height:l("height",e),left:l("left",e),lineHeight:(t,o)=>{"number"==typeof o?t.lineHeight=o:"string"==typeof o&&(t.lineHeight=e(o))},m:a("margin",n,["Top","Bottom","Left","Right"]),maxHeight:l("maxHeight",e),maxWidth:l("maxWidth",e),mb:l("marginBottom",n),minHeight:l("minHeight",e),minWidth:l("minWidth",e),ml:l("marginLeft",n),mr:l("marginRight",n),mt:l("marginTop",n),mx:a("margin",n,["Left","Right"]),my:a("margin",n,["Top","Bottom"]),opacity:r("opacity"),overflow:r("overflow"),overflowX:r("overflowX"),overflowY:r("overflowY"),p:a("padding",n,["Top","Bottom","Left","Right"]),pb:l("paddingBottom",n),pl:l("paddingLeft",n),position:r("position"),pr:l("paddingRight",n),pt:l("paddingTop",n),px:a("padding",n,["Left","Right"]),py:a("padding",n,["Top","Bottom"]),right:l("right",e),textAlign:r("textAlign"),textColor:g("color"),top:l("top",e),verticalAlign:r("verticalAlign"),width:l("width",e)},m={bold:p("fontWeight","bold"),fillPositionedParent:(t,o)=>{o&&(t.position="absolute",t.top=0,t.bottom=0,t.left=0,t.right=0)},inline:p("display","inline-block"),italic:p("fontStyle","italic"),nowrap:p("whiteSpace","nowrap"),preserveWhitespace:p("whiteSpace","pre-wrap")};function s(t){let o={},e={};for(let n in t){if("style"===n)continue;let i=t[n],r=f[n]||m[n];r?r(e,i):o[n]=i}return o.style={...e,...t.style},o}function u(t){let e=t.textColor||t.color,{backgroundColor:n}=t;return o([i(e)&&`color-${e}`,i(n)&&`color-bg-${n}`])}function c(t){let o={};if(!t)return o;for(let e of t.split(" ")){let[t,n]=e.split("-");if(t)if(t in f){if(""===n)continue;let e=Number(n);!Number.isNaN(e)&&Number.isFinite(e)?o[t]=e:o[t]=n}else t in m?o[t]=!0:console.warn(`Unknown prop ${t}`)}return o}let h=["onClick","onAuxClick","onContextMenu","onDoubleClick","onKeyDown","onKeyUp","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseOver","onMouseUp","onScroll","onWheel","onDrag","onDragEnd","onDragEnter","onDragExit","onDragLeave","onDragOver","onDragStart","onDrop"];export{m as booleanStyleMap,u as computeBoxClassName,s as computeBoxProps,c as computeTwClass,h as eventHandlers,n as halfUnit,f as stringStyleMap,e as unit};

package/dist/components/DraggableControl.d.ts

@@ -21,6 +21,8 @@ type Props = {
 } & Partial<{
     /** Animates the value if it was changed externally. */
     animated: boolean;
+    /** Disables the control. */
+    disabled: boolean;
     /** The matrix to use for the drag. */
     dragMatrix: [number, number];
     /** onChange also fires when you drag the input. */

package/dist/components/DraggableControl.js

@@ -1 +1 @@
-import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{KEY as n,isEscape as u}from"../common/keys.js";import{clamp as o}from"../common/math.js";import{useEffect as l,useRef as c,useState as i}from"react";import{AnimatedNumber as a}from"./AnimatedNumber.js";function s(e,r){return e.screenX*r[0]+e.screenY*r[1]}function m(m){let{animated:f,children:v,dragMatrix:p=[1,0],tickWhileDragging:d,format:h,maxValue:y=1/0,minValue:g=-1/0,onChange:E,step:b=1,stepPixelSize:N,unclamped:w,unit:T,updateRate:j=400,fontSize:x,height:L,lineHeight:S}=m,[k,z]=i(m.value),[D,I]=i(!1),F=c(!1),M=c(m.value),O=c(0),$=c(0),_=c(null),A=c(null),B=c(null),C=c(null);function H(e){let r=$.current;if(null===r)throw Error("Origin is unset.");let t=s(e,p),n=_.current;if(null===n)throw Error("Final step pixel size has not been computed.");let u=O.current;if(null===u)throw Error("Original value is unset.");let l=o(Math.floor(u/b)*b+Math.trunc((t-r)/n)*b,g,y);M.current=l,z(l)}function K(e){document.body.style["pointer-events"]="auto",B.current&&clearInterval(B.current),$.current=null,_.current=null,O.current=null,document.removeEventListener("mousemove",H),document.removeEventListener("mouseup",K),F.current&&(E?.(e,M.current),F.current=!1)}l(()=>{m.value!==M.current&&(M.current=m.value,z(m.value))},[m.value]);let P=m.value;F.current&&(P=M.current);let U=t(e,{children:[f&&!F.current?r(a,{format:h,value:P}):h?h(P):P,T?` ${T}`:""]}),W=r("input",{className:"NumberInput__input",onBlur:function(e){let r=Number.parseFloat(e.currentTarget.value);(w||(r=o(r,g,y)),Number.isNaN(r))?I(!1):(M.current=r,z(r),E?.(e.nativeEvent,r),D&&I(!1))},onKeyDown:function(e){(e.key===n.Enter||u(e.key))&&I(!1)},ref:A,style:{display:D?void 0:"none",fontSize:x,height:L,lineHeight:S}});return v({displayElement:U,displayValue:P,dragging:F.current,editing:D,handleDragStart:function(e){if(!D){if("number"!=typeof N){let r=e.currentTarget.offsetWidth/((y-g)/b);if(void 0===N)_.current=r;else if("function"==typeof N)_.current=N(r);else throw Error(`Unsupported value for stepPixelSize of type ${typeof N}`)}else _.current=N;document.body.style["pointer-events"]="none",$.current=s(e.nativeEvent,p),O.current=m.value,F.current=!0,document.addEventListener("mouseup",K),C.current=setTimeout(()=>{var r=e.nativeEvent;if(F.current)document.addEventListener("mousemove",H),B.current=setInterval(()=>{F.current&&d&&E?.(r,M.current)},j);else if(I(!0),A.current){let e=A.current;e.value=M.current.toString(),setTimeout(()=>{e.focus(),e.select()},10)}C.current&&clearTimeout(C.current)},100)}},inputElement:W})}export{m as DraggableControl};
+import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{KEY as n,isEscape as u}from"../common/keys.js";import{clamp as o}from"../common/math.js";import{useEffect as l,useRef as c,useState as i}from"react";import{AnimatedNumber as a}from"./AnimatedNumber.js";function s(e,r){return e.screenX*r[0]+e.screenY*r[1]}function m(m){let{animated:f,disabled:v,children:p,dragMatrix:d=[1,0],tickWhileDragging:y,format:h,maxValue:g=1/0,minValue:E=-1/0,onChange:b,step:N=1,stepPixelSize:w,unclamped:T,unit:j,updateRate:x=400,fontSize:L,height:S,lineHeight:k}=m,[z,D]=i(m.value),[I,O]=i(!1),F=c(!1),M=c(m.value),$=c(0),_=c(0),A=c(null),B=c(null),C=c(null),H=c(null);function K(e){let r=_.current;if(null===r)throw Error("Origin is unset.");let t=s(e,d),n=A.current;if(null===n)throw Error("Final step pixel size has not been computed.");let u=$.current;if(null===u)throw Error("Original value is unset.");let l=o(Math.floor(u/N)*N+Math.trunc((t-r)/n)*N,E,g);M.current=l,D(l)}function P(e){document.body.style["pointer-events"]="auto",C.current&&clearInterval(C.current),_.current=null,A.current=null,$.current=null,document.removeEventListener("mousemove",K),document.removeEventListener("mouseup",P),F.current&&(b?.(e,M.current),F.current=!1)}l(()=>{m.value!==M.current&&(M.current=m.value,D(m.value))},[m.value]);let U=m.value;F.current&&(U=M.current);let W=t(e,{children:[f&&!F.current?r(a,{format:h,value:U}):h?h(U):U,j?` ${j}`:""]}),X=r("input",{className:"NumberInput__input",onBlur:function(e){let r=Number.parseFloat(e.currentTarget.value);(T||(r=o(r,E,g)),Number.isNaN(r))?O(!1):(M.current=r,D(r),b?.(e.nativeEvent,r),I&&O(!1))},onKeyDown:function(e){(e.key===n.Enter||u(e.key))&&O(!1)},ref:B,readOnly:v,style:{display:I?void 0:"none",fontSize:L,height:S,lineHeight:k}});return p({displayElement:W,displayValue:U,dragging:F.current,editing:I,handleDragStart:function(e){if(!I&&!v){if("number"!=typeof w){let r=e.currentTarget.offsetWidth/((g-E)/N);if(void 0===w)A.current=r;else if("function"==typeof w)A.current=w(r);else throw Error(`Unsupported value for stepPixelSize of type ${typeof w}`)}else A.current=w;document.body.style["pointer-events"]="none",_.current=s(e.nativeEvent,d),$.current=m.value,F.current=!0,document.addEventListener("mouseup",P),H.current=setTimeout(()=>{var r=e.nativeEvent;if(F.current)document.addEventListener("mousemove",K),C.current=setInterval(()=>{F.current&&y&&b?.(r,M.current)},x);else if(O(!0),B.current){let e=B.current;e.value=M.current.toString(),setTimeout(()=>{e.focus(),e.select()},10)}H.current&&clearTimeout(H.current)},100)}},inputElement:X})}export{m as DraggableControl};

package/dist/components/Dropdown.d.ts

@@ -32,6 +32,10 @@ type Props = {
     iconRotation: number;
     /** Whether or not the icon should spin */
     iconSpin: boolean;
+    /** Whether we want to make the search input styled like a regular dropdown button. */
+    styledInput: boolean;
+    /** Maximum number of items to display before having to scroll */
+    maxItems: number;
     /** Width of the dropdown menu in box units. Default: 15 */
     menuWidth: string | number;
     /** Whether or not the arrow on the right hand side of the dropdown button is visible */
@@ -42,6 +46,8 @@ type Props = {
     fluid: boolean;
     /** Text to show when nothing has been selected. */
     placeholder: string;
+    /** Turns the dropdown button into a search textbox. Incompatible with Tiny */
+    searchInput: boolean;
     /** @deprecated If you want to allow dropdown breaks layout, set width 100% */
     clipSelectedText: boolean;
     /** Called when dropdown button is clicked */

package/dist/components/Dropdown.js

@@ -1 +1 @@
-import{Fragment as o,jsx as n,jsxs as e}from"react/jsx-runtime";import{KEY as t}from"../common/keys.js";import{classes as r}from"../common/react.js";import{unit as l}from"../common/ui.js";import{useRef as i,useState as c}from"react";import{Button as d}from"./Button.js";import{Floating as s}from"./Floating.js";import{Icon as a}from"./Icon.js";function m(o){return"string"==typeof o?o:o.value}function p(p){let{autoScroll:u=!0,buttons:_,className:w,color:f="default",disabled:h,displayText:D,icon:y,iconRotation:v,iconSpin:N,iconOnly:g,menuWidth:b,noChevron:x,onClick:j,onSelected:k,options:C=[],over:B,placeholder:I="Select...",selected:T,fluid:A,width:E=15}=p,[K,O]=c(!1),S=i(null),$=C.findIndex(o=>m(o)===T)||0;function F(o){let n=o;n=o<$?o<2?0:o-2:o>C.length-3?C.length-1:o-2;let e=S.current,t=e?.children[n];e&&t&&(e.scrollTop=t.offsetTop)}function M(o){let n;if(C.length<1||h)return;let e=C.length-1;n=$<0?"next"===o?e:0:"next"===o?$===e?0:$+1:0===$?e:$-1,K&&u&&F(n),k?.(m(C[n]))}let W=B?"top":"bottom";return g&&(W=`${W}-start`),e("div",{className:r(["Dropdown",A&&"Dropdown--fluid"]),children:[n(s,{allowedOutsideClasses:".Dropdown__button",closeAfterInteract:!0,content:n("div",{className:"Dropdown__menu",ref:S,children:0===C.length?n("div",{className:"Dropdown__menu--entry",children:"No options"}):C.map(o=>{let e=m(o);return n("div",{className:r(["Dropdown__menu--entry",T===e&&"selected"]),onClick:()=>{k?.(e)},onKeyDown:o=>{o.key===t.Enter&&k?.(e)},children:"string"==typeof o?o:o.displayText},e)})}),contentAutoWidth:!b,contentClasses:"Dropdown__menu--wrapper",contentStyles:{width:b?l(b):void 0},disabled:h,onMounted:()=>{K&&u&&-1!==$&&F($)},onOpenChange:O,placement:W,children:e("div",{className:r(["Dropdown__control",`Button--color--${f}`,h&&"Button--disabled",g&&"Dropdown__control--icon-only",w]),onClick:o=>{(!h||K)&&j?.(o)},onKeyDown:o=>{o.key!==t.Enter||h||j?.(o)},style:{width:l(E)},children:[y&&n(a,{className:"Dropdown__icon",name:y,rotation:v,spin:N}),!g&&e(o,{children:[n("span",{className:"Dropdown__selected-text",children:D||T&&m(T)||I}),!x&&n(a,{className:r(["Dropdown__icon","Dropdown__icon--arrow",B&&"over",K&&"open"]),name:"chevron-down"})]})]})}),_&&e(o,{children:[n(d,{className:"Dropdown__button",disabled:h,icon:"chevron-left",onClick:()=>{M("previous")}}),n(d,{className:"Dropdown__button",disabled:h,icon:"chevron-right",onClick:()=>{M("next")}})]})]})}export{p as Dropdown};
+import{Fragment as e,jsx as n,jsxs as o}from"react/jsx-runtime";import{KEY as t}from"../common/keys.js";import{classes as r}from"../common/react.js";import{unit as l}from"../common/ui.js";import{useRef as i,useState as d}from"react";import{Button as c}from"./Button.js";import{Floating as s}from"./Floating.js";import{Icon as a}from"./Icon.js";import{Input as u}from"./Input.js";let p=null;function m(e){return"string"==typeof e?e:e.value}function w(w){let{autoScroll:_=!0,buttons:h,className:f,color:y="default",disabled:D,displayText:v,icon:N,iconRotation:g,iconSpin:b,iconOnly:C,styledInput:x,maxItems:j,menuWidth:k,noChevron:S,onClick:B,onSelected:E,options:F=[],over:I,placeholder:M="Select...",searchInput:T,selected:K,fluid:O,width:$=15}=w,[A,L]=d(!1),[P,z]=d(""),U=i(null),V=i(!1),W=i(!1),q=i(null),G=F.findIndex(e=>m(e)===K)||0;function H(e){let n=e;n=e<G?e<2?0:e-2:e>F.length-3?F.length-1:e-2;let o=U.current,t=o?.children[n];o&&t&&(o.scrollTop=t.offsetTop)}function J(e){let n;if(F.length<1||D)return;let o=F.length-1;n=G<0?"next"===e?o:0:"next"===e?G===o?0:G+1:0===G?o:G-1,A&&_&&H(n),E?.(m(F[n]))}let Q=P?F.filter(e=>("string"==typeof e?e:e.displayText||m(e)).toString().toLowerCase().includes(P.toLowerCase())):F,R=I?"top":"bottom";C&&(R=`${R}-start`);let X=j?{"--dropdown-menu-max-height":l(Math.max(Math.min(j,25),3)*function(){if(null!==p)return p;let e=parseFloat(getComputedStyle(document.body).getPropertyValue("--font-size")),n=document.createElement("div");n.className="Dropdown__menu--entry",n.textContent="test",document.body.appendChild(n);let o=parseFloat(getComputedStyle(n).height);return document.body.removeChild(n),p=Number.isNaN(o)||0===o||Number.isNaN(e)||0===e?1.7:o/e}())}:void 0;return o("div",{className:r(["Dropdown",O&&"Dropdown--fluid",T&&x&&`Button--color--${y}`]),children:[n(s,{ref:q,allowedOutsideClasses:".Dropdown__button",closeAfterInteract:!0,content:n("div",{className:"Dropdown__menu",ref:U,style:X,children:0===Q.length?n("div",{className:"Dropdown__menu--entry",children:"No options"}):Q.map(e=>{let o=m(e);return n("div",{className:r(["Dropdown__menu--entry",K===o&&"selected"]),onClick:()=>{V.current=!0,E?.(o),z("")},onKeyDown:e=>{e.key===t.Enter&&(V.current=!0,E?.(o),z(""))},children:"string"==typeof e?e:e.displayText},o)})}),contentAutoWidth:!k,contentClasses:"Dropdown__menu--wrapper",contentStyles:{width:k?l(k):void 0},disabled:D,onMounted:()=>{A&&_&&-1!==G&&H(G)},onOpenChange:L,placement:R,children:T?o("div",{className:"Dropdown__input-wrapper",style:{width:l($)},children:[n(u,{className:r(["Dropdown__input",x&&"Dropdown__input--styled",f]),placeholder:v?.toString()||M,disabled:D,value:P,alwaysUpdate:!0,onKeyDown:e=>{" "===e.key&&e.stopPropagation()},onEnter:()=>{W.current=!0,q.current?.close()},onChange:z,onBlur:function(e){e&&W.current&&!V.current&&Q.length>0&&(V.current=!0,E?.(m(Q[0]))),V.current=!1,W.current=!1,z("")},fluid:!0}),!S&&n("div",{className:"Dropdown__input-chevron",children:n(a,{className:r(["Dropdown__icon","Dropdown__icon--arrow",A&&"open"]),name:"chevron-down"})})]}):o("div",{className:r(["Dropdown__control",`Button--color--${y}`,D&&"Button--disabled",C&&"Dropdown__control--icon-only",f]),onClick:e=>{(!D||A)&&B?.(e)},onKeyDown:e=>{e.key!==t.Enter||D||B?.(e)},style:{width:l($)},children:[N&&n(a,{className:"Dropdown__icon",name:N,rotation:g,spin:b}),!C&&o(e,{children:[n("span",{className:"Dropdown__selected-text",children:v||K&&m(K)||M}),!S&&n(a,{className:r(["Dropdown__icon","Dropdown__icon--arrow",I&&"over",A&&"open"]),name:"chevron-down"})]})]})}),h&&o(e,{children:[n(c,{className:"Dropdown__button",disabled:D,icon:"chevron-left",onClick:()=>{J("previous")}}),n(c,{className:"Dropdown__button",disabled:D,icon:"chevron-right",onClick:()=>{J("next")}})]})]})}new MutationObserver(()=>{p=null}).observe(document.documentElement,{attributes:!0,attributeFilter:["style"]});export{w as Dropdown};

package/dist/components/Floating.d.ts

@@ -1,7 +1,18 @@
 import { type BooleanLike } from '../common/react.ts';
 import { type Placement } from '@floating-ui/react';
 import { type CSSProperties, type ReactNode } from 'react';
-type Props = {
+export type FloatingHandle = {
+    /** Imperatively close the floating element. */
+    close: () => void;
+};
+/**
+ * ## Floating
+ *
+ *  Floating lets you position elements so that they don't go out of the bounds of the window.
+ *
+ * - [Documentation](https://floating-ui.com/docs/react) for more information.
+ */
+export declare const Floating: import("react").ForwardRefExoticComponent<{
     /** Interacting with this element will open the floating element. */
     children: ReactNode;
     /** The content to display like floating. */
@@ -75,13 +86,4 @@ type Props = {
      * Called when mounted
      */
     onMounted: () => void;
-}>;
-/**
- * ## Floating
- *
- *  Floating lets you position elements so that they don't go out of the bounds of the window.
- *
- * - [Documentation](https://floating-ui.com/docs/react) for more information.
- */
-export declare function Floating(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+}> & import("react").RefAttributes<FloatingHandle>>;

package/dist/components/Floating.js

@@ -1 +1 @@
-import{Fragment as e,jsx as t,jsxs as n}from"react/jsx-runtime";import{classes as o}from"../common/react.js";import{FloatingPortal as r,autoUpdate as i,flip as a,offset as l,safePolygon as s,shift as c,size as d,useClick as m,useDismiss as p,useFloating as g,useHover as f,useInteractions as h,useTransitionStatus as u}from"@floating-ui/react";import{cloneElement as C,isValidElement as v,useEffect as w,useState as F}from"react";function b(b){let x,{allowedOutsideClasses:y,animationDuration:O,children:R,closeAfterInteract:j,content:k,contentAutoWidth:z,contentClasses:E,contentOffset:M=6,contentStyles:P,disabled:S,hoverDelay:q,hoverOpen:I,hoverSafePolygon:N,handleOpen:$,onMounted:A,placement:B,preventPortal:D,stopChildPropagation:G,onOpenChange:H}=b,[J,K]=F(!1),{refs:L,floatingStyles:Q,context:T}=g({middleware:[l(M),a({padding:6}),c(),z&&d({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})],onOpenChange(e){K(e),H?.(e)},open:J,placement:B||"bottom",transform:!1,whileElementsMounted:(e,t,n)=>(void 0!==A&&A(),i(e,t,n,{ancestorResize:!1,ancestorScroll:!1,elementResize:!1}))}),{isMounted:U,status:V}=u(T,{duration:O||200}),W=p(T,{ancestorScroll:!0,outsidePress:e=>!y||e.target instanceof Element&&!e.target.closest(y)}),X=m(T,{enabled:!S}),Y=f(T,{enabled:!S,restMs:q||200,handleClose:N?s({requireIntent:!1}):null}),Z=void 0!==$,{getReferenceProps:_,getFloatingProps:ee}=h(Z?[]:[W,I?Y:X]),et=_({ref:L.setReference,...G&&{onClick:e=>e.stopPropagation()}}),en=ee({onClick:()=>{j&&T.onOpenChange(!1)},ref:L.setFloating});w(()=>{Z&&T.onOpenChange($)},[$]),x=v(R)?C(R,et):t("div",{...et,children:R});let eo=t("div",{className:o(["Floating",!O&&"Floating--animated",E]),"data-position":T.placement,"data-transition":V,style:{...Q,...P},...en,children:k});return n(e,{children:[x,U&&!!k&&(D?eo:t(r,{id:"tgui-root",children:eo}))]})}export{b as Floating};
+import{Fragment as e,jsx as t,jsxs as n}from"react/jsx-runtime";import{classes as o}from"../common/react.js";import{FloatingPortal as a,autoUpdate as i,flip as r,offset as l,safePolygon as s,shift as c,size as d,useClick as m,useDismiss as p,useFloating as g,useHover as f,useInteractions as h,useTransitionStatus as u}from"@floating-ui/react";import{cloneElement as C,forwardRef as F,isValidElement as v,useEffect as w,useImperativeHandle as O,useState as b}from"react";let x=F(function(F,x){let y,{allowedOutsideClasses:R,animationDuration:j,children:k,closeAfterInteract:z,content:E,contentAutoWidth:M,contentClasses:P,contentOffset:S=6,contentStyles:q,disabled:I,hoverDelay:N,hoverOpen:$,hoverSafePolygon:_,handleOpen:A,onMounted:B,placement:D,preventPortal:G,stopChildPropagation:H,onOpenChange:J}=F,[K,L]=b(!1),{refs:Q,floatingStyles:T,context:U}=g({middleware:[l(S),r({padding:6}),c(),M&&d({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})],onOpenChange(e){L(e),J?.(e)},open:K,placement:D||"bottom",transform:!1,whileElementsMounted:(e,t,n)=>(void 0!==B&&B(),i(e,t,n,{ancestorResize:!1,ancestorScroll:!1,elementResize:!1}))});O(x,()=>({close:()=>U.onOpenChange(!1)}));let{isMounted:V,status:W}=u(U,{duration:j||200}),X=p(U,{ancestorScroll:!0,outsidePress:e=>!R||e.target instanceof Element&&!e.target.closest(R)}),Y=m(U,{enabled:!I}),Z=f(U,{enabled:!I,restMs:N||200,handleClose:_?s({requireIntent:!1}):null}),ee=void 0!==A,{getReferenceProps:et,getFloatingProps:en}=h(ee?[]:[X,$?Z:Y]),eo=et({ref:Q.setReference,...H&&{onClick:e=>e.stopPropagation()}}),ea=en({onClick:()=>{z&&U.onOpenChange(!1)},ref:Q.setFloating});w(()=>{ee&&U.onOpenChange(A)},[A]),y=v(k)?C(k,eo):t("div",{...eo,children:k});let ei=t("div",{className:o(["Floating",!j&&"Floating--animated",P]),"data-position":U.placement,"data-transition":W,style:{...T,...q},...ea,children:E});return n(e,{children:[y,V&&!!E&&(G?ei:t(a,{id:"tgui-root",children:ei}))]})});export{x as Floating};

package/dist/components/Input.d.ts

@@ -24,6 +24,8 @@ export type BaseInputProps<TElement = HTMLInputElement, TInput = string> = Parti
     fluid: boolean;
     /** Mark this if you want to use a monospace font */
     monospace: boolean;
+    /** Will force an update when value changes even if the input isn't currently highlighted */
+    alwaysUpdate: boolean;
     /** Fires each time focus leaves the input, including if Esc or Enter are pressed */
     onBlur: (value: TInput) => void;
     /**

package/dist/components/Input.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{KEY as t,isEscape as r}from"../common/keys.js";import{classes as n}from"../common/react.js";import{inputDebounce as u}from"../common/timer.js";import{computeBoxClassName as o,computeBoxProps as m}from"../common/ui.js";import{useEffect as c,useRef as l,useState as a}from"react";function p(p){let{autoFocus:i,autoSelect:f,className:s,disabled:d,expensive:g,fluid:v,maxLength:T,monospace:y,onBlur:b,onChange:j,onEnter:I,onEscape:h,onKeyDown:k,placeholder:x,ref:C,selfClear:D,spellcheck:E=!1,value:w,...B}=p,K=l(null),L=C??K,[N,q]=a(w??"");c(()=>{let e;return(i||f)&&(e=setTimeout(()=>{L.current?.focus(),f&&L.current?.select()},1)),()=>clearTimeout(e)},[]),c(()=>{L.current&&document.activeElement!==L.current&&w!==N&&q(w??"")},[w]);let z=m(B),A=n(["Input",d&&"Input--disabled",v&&"Input--fluid",y&&"Input--monospace",o(B),s]);return e("input",{...z,autoComplete:"off",className:A,disabled:d,maxLength:T,onBlur:()=>b?.(N),onChange:function(e){let t=e.currentTarget.value;q(t),g?u("number"==typeof g?g:250)(()=>j?.(t,e)):j?.(t,e)},onKeyDown:function(e){if(k?.(e),e.key===t.Enter){e.preventDefault(),I?.(e.currentTarget.value,e),D&&q(""),e.currentTarget.blur();return}r(e.key)&&(e.preventDefault(),h?.(e.currentTarget.value,e),e.currentTarget.blur())},placeholder:x,ref:L,spellCheck:E,type:"text",value:N})}export{p as Input};
+import{jsx as e}from"react/jsx-runtime";import{KEY as t,isEscape as r}from"../common/keys.js";import{classes as n}from"../common/react.js";import{inputDebounce as u}from"../common/timer.js";import{computeBoxClassName as o,computeBoxProps as m}from"../common/ui.js";import{useEffect as c,useRef as l,useState as a}from"react";function p(p){let{autoFocus:i,autoSelect:f,className:s,disabled:d,expensive:g,fluid:v,maxLength:T,monospace:y,onBlur:b,onChange:j,onEnter:I,onEscape:h,onKeyDown:k,placeholder:x,ref:C,selfClear:D,alwaysUpdate:E,spellcheck:w=!1,value:B,...K}=p,L=l(null),N=C??L,[q,z]=a(B??"");c(()=>{let e;return(i||f)&&(e=setTimeout(()=>{N.current?.focus(),f&&N.current?.select()},1)),()=>clearTimeout(e)},[]),c(()=>{(N.current&&document.activeElement!==N.current&&B!==q||E)&&z(B??"")},[B]);let A=m(K),F=n(["Input",d&&"Input--disabled",v&&"Input--fluid",y&&"Input--monospace",o(K),s]);return e("input",{...A,autoComplete:"off",className:F,disabled:d,maxLength:T,onBlur:()=>b?.(q),onChange:function(e){let t=e.currentTarget.value;z(t),g?u("number"==typeof g?g:250)(()=>j?.(t,e)):j?.(t,e)},onKeyDown:function(e){if(k?.(e),e.key===t.Enter){e.preventDefault(),I?.(e.currentTarget.value,e),D&&z(""),e.currentTarget.blur();return}r(e.key)&&(e.preventDefault(),h?.(e.currentTarget.value,e),e.currentTarget.blur())},placeholder:x,ref:N,spellCheck:w,type:"text",value:q})}export{p as Input};

package/dist/components/Slider.js

@@ -1 +1 @@
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import{clamp01 as i,keyOfMatchingRange as s,scale as l}from"../common/math.js";import{classes as a}from"../common/react.js";import{computeBoxClassName as o,computeBoxProps as t}from"../common/ui.js";import{DraggableControl as m}from"./DraggableControl.js";function d(d){let{animated:c,tickWhileDragging:n,format:_,maxValue:f,minValue:h,onChange:u,step:g,stepPixelSize:p,unit:v,value:B,className:N,fillValue:P,color:S,ranges:j={},children:w,...x}=d,y=void 0!==w;return r(m,{dragMatrix:[1,0],animated:c,tickWhileDragging:n,format:_,maxValue:f,minValue:h,onChange:u,step:g,stepPixelSize:p,unit:v,value:B,children:m=>{let{displayElement:d,displayValue:c,dragging:n,editing:_,handleDragStart:u,inputElement:g}=m,p=null!=P,v=i(l(P??c,h,f)),M=i(l(c,h,f)),$=S||s(P??B,j)||"default";return e("div",{className:a(["Slider",_&&"Slider--editing","ProgressBar",`ProgressBar--color--${$}`,N,o(x)]),...t(x),onMouseDown:u,children:[r("div",{className:a(["ProgressBar__fill",p&&!n&&"ProgressBar__fill--animated"]),style:{opacity:.4,width:`${100*Math.max(v,M)}%`}}),r("div",{className:a(["ProgressBar__fill",!n&&"ProgressBar__fill--animated"]),style:{width:`${100*Math.min(v,M)}%`}}),r("div",{className:"Slider__cursorOffset",style:{width:`${100*M}%`},children:r("div",{className:"Slider__cursor",children:n&&r("div",{className:"Slider__popupValue",children:d})})}),r("div",{className:"ProgressBar__content",children:y?w:d}),g]})}})}export{d as Slider};
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{clamp01 as i,keyOfMatchingRange as l,scale as s}from"../common/math.js";import{classes as a}from"../common/react.js";import{computeBoxClassName as o,computeBoxProps as t}from"../common/ui.js";import{DraggableControl as d}from"./DraggableControl.js";function m(m){let{animated:c,disabled:n,tickWhileDragging:_,format:f,maxValue:h,minValue:u,onChange:g,step:p,stepPixelSize:v,unit:B,value:N,className:P,fillValue:S,color:j,ranges:w={},children:x,...y}=m,M=void 0!==x;return r(d,{dragMatrix:[1,0],animated:c,disabled:n,tickWhileDragging:_,format:f,maxValue:h,minValue:u,onChange:g,step:p,stepPixelSize:v,unit:B,value:N,children:d=>{let{displayElement:m,displayValue:c,dragging:_,editing:f,handleDragStart:g,inputElement:p}=d,v=null!=S,B=i(s(S??c,u,h)),$=i(s(c,u,h)),b=j||l(S??N,w)||"default";return e("div",{className:a(["Slider",n&&"Slider--disabled",f&&"Slider--editing","ProgressBar",`ProgressBar--color--${b}`,P,o(y)]),...t(y),onMouseDown:g,children:[r("div",{className:a(["ProgressBar__fill",v&&!_&&"ProgressBar__fill--animated"]),style:{opacity:.4,width:`${100*Math.max(B,$)}%`}}),r("div",{className:a(["ProgressBar__fill",!_&&"ProgressBar__fill--animated"]),style:{width:`${100*Math.min(B,$)}%`}}),r("div",{className:"Slider__cursorOffset",style:{width:`${100*$}%`},children:r("div",{className:"Slider__cursor",children:_&&r("div",{className:"Slider__popupValue",children:m})})}),r("div",{className:"ProgressBar__content",children:M?x:m}),p]})}})}export{m as Slider};

package/package.json

@@ -71,5 +71,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "5.9.0"
+  "version": "5.11.0"
 }

package/styles/all-atomic.scss

@@ -5,6 +5,7 @@
 @include meta.load-css("./atomic/centered-image.scss");
 @include meta.load-css("./atomic/color.scss");
 @include meta.load-css("./atomic/debug-layout.scss");
+@include meta.load-css("./atomic/helpers.scss");
 @include meta.load-css("./atomic/fit-text.scss");
 @include meta.load-css("./atomic/links.scss");
 @include meta.load-css("./atomic/outline.scss");

package/styles/atomic/helpers.scss

@@ -0,0 +1,19 @@
+.dragging {
+  pointer-events: none;
+}
+
+.moving {
+  cursor: var(--cursor-grab);
+}
+
+.resizing-x {
+  cursor: var(--cursor-e-resize);
+}
+
+.resizing-y {
+  cursor: var(--cursor-n-resize);
+}
+
+.resizing-both {
+  cursor: var(--cursor-se-resize);
+}

package/styles/base.scss

@@ -1,29 +1,112 @@
 /**
- * @deprecated Use css-variables
+ * TGUI
+ * Base variables
+ *
+ * This file contains all values, like spacings, sizes, etc.
+ * You won't find any colors here, just numbers and letters.
+ *
+ * Made with love by Aylong (https://github.com/AyIong)
  */
 
-@use "sass:color";
-@use "sass:math";
+:root {
+  /* Font */
+  --font-size: 12px;
+  --font-family: Verdana, Geneva, sans-serif;
+  --font-family-mono: Consolas, monospace;
 
-$color-fg: hsl(0, 0%, 100%) !default;
-$color-bg: var(--color-base) !default;
-$color-bg-section: var(--color-section) !default;
-$color-bg-grad-spread: var(--base-gradient-spread) !default;
-$color-bg-start: var(--color-base-start) !default;
-$color-bg-end: var(--color-base-end) !default;
+  /* Border thickness */
+  --border-thickness-unit: 0.5em;
+  /* 1px | 0.085em */
+  --border-thickness-tiny: calc(var(--border-thickness-unit) * 0.5 * 0.34);
+  /* 2px | 0.17em */
+  --border-thickness-small: calc(var(--border-thickness-unit) * 0.34);
+  /* 3px | 0.25em */
+  --border-thickness-medium: calc(var(--border-thickness-unit) * 0.5);
+  /* 4px | 0.33em */
+  --border-thickness-large: calc(var(--border-thickness-unit) * 0.66);
+  /* 6px | 0.5em */
+  --border-thickness-larger: var(--border-thickness-unit);
 
-$cursor-default: var(--cursor-default) !default;
-$cursor-hover: var(--cursor-pointer) !default;
-$cursor-disabled: var(--cursor-default) !default;
+  /* Border radius */
+  --border-radius-unit: 1rem;
+  /* 2px | 0.17rem */
+  --border-radius-tiny: calc(var(--border-radius-unit) * 0.25 * 0.68);
+  /* 3px | 0.25rem */
+  --border-radius-small: calc(var(--border-radius-unit) * 0.25);
+  /* 4px | 0.33rem */
+  --border-radius-medium: calc(var(--border-radius-unit) * 0.33);
+  /* 6px | 0.5rem */
+  --border-radius-large: calc(var(--border-radius-unit) * 0.5);
+  /* 10px | 0.75rem */
+  --border-radius-larger: calc(var(--border-radius-unit) * 0.75);
+  /* 12px | 1rem*/
+  --border-radius-huge: var(--border-radius-unit);
+  /* 24px | 2rem*/
+  --border-radius-giant: calc(var(--border-radius-unit) * 2);
+  /* Maximum border radius. Makes perfect circles */
+  --border-radius-circular: 99999px;
 
-$unit: 12px;
-$font-size: 1 * $unit !default;
-$border-radius: 0.16em !default;
+  /* Spacing */
+  --space-unit: 1em;
+  /* 1px | 0.085em */
+  --space-xxs: calc(var(--space-unit) * 0.25 * 0.34);
+  /* 2px | 0.17em */
+  --space-xs: calc(var(--space-unit) * 0.25 * 0.68);
+  /* 3px | 0.25em */
+  --space-s: calc(var(--space-unit) * 0.25);
+  /* 4px | 0.33em */
+  --space-sm: calc(var(--space-unit) * 0.33);
+  /* 6px | 0.5em */
+  --space-m: calc(var(--space-unit) * 0.5);
+  /* 8px | 0.66em */
+  --space-ml: calc(var(--space-unit) * 0.66);
+  /* 10px | 0.75em */
+  --space-l: calc(var(--space-unit) * 0.75);
+  /* 12px | 1em*/
+  --space-xl: var(--space-unit);
+  /* 24px | 2em*/
+  --space-xxl: calc(var(--space-unit) * 2);
 
-@function em($px) {
-  @return 1em * math.div($px, $unit);
-}
+  /* Transition */
+  --transition-time-unit: 1s;
+  /* 0.1s | 100ms */
+  --transition-time-fast: calc(var(--transition-time-unit) * 0.1);
+  /* 0.2s | 200ms */
+  --transition-time-medium: calc(var(--transition-time-unit) * 0.2);
+  /* 0.5s | 500ms */
+  --transition-time-slow: calc(var(--transition-time-unit) * 0.5);
+  /* 1s | 1000ms */
+  --transition-time-slowest: var(--transition-time-unit);
+
+  /* Shadows */
+  --shadow-unit: 1rem;
+  /* 0 0 0.5rem */
+  --shadow-glow-small: 0 0 calc(var(--shadow-unit) * 0.5);
+  /* 0 0 1rem */
+  --shadow-glow-medium: 0 0 var(--shadow-unit);
+  /* 0 0 2rem */
+  --shadow-glow-large: 0 0 calc(var(--shadow-unit) * 2);
+
+  /* Blur */
+  --blur-small: blur(6px);
+  --blur-medium: blur(12px);
+  --blur-large: blur(24px);
+
+  /* Adjustments */
+  /* Color lightness multiplier. + for FG - for BG */
+  --adjust-color: 5;
+  /* Color lightness multiplier when hovered */
+  --adjust-hover: 10;
+  /* Color lightness multiplier when active (clicked) */
+  --adjust-active: 7.5;
 
-@function rem($px) {
-  @return 1rem * math.div($px, $unit);
+  /* Cursors */
+  --cursor-default: default;
+  --cursor-pointer: pointer;
+  --cursor-grab: grab;
+  --cursor-disabled: var(--cursor-default);
+  --cursor-n-resize: n-resize;
+  --cursor-s-resize: s-resize;
+  --cursor-se-resize: se-resize;
+  --cursor-e-resize: e-resize;
 }

package/styles/colors.scss

@@ -1,40 +1,122 @@
 /**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
+ * TGUI
+ * Main Colors
  *
- * @deprecated Use css-variables
+ * This file contains all the main colors that are
+ * used elsewhere and are mixed/modified to
+ * suit the needs of the components/ui's.
+ *
+ * The main goal is to standardize colors.
+ * When adding new independent colors, you should add them here.
+ *
+ * Overwriting these variables will have an extreme impact
+ * on the global appearance of the entire TGUI, as they are used everywhere.
+ * For finer customization of components, use vars-components.scss
  */
 
 @use "sass:color";
 @use "sass:map";
 @use "sass:meta";
 
-// Base colors
-$black: var(--color-black) !default;
-$white: var(--color-white) !default;
-$red: var(--color-red) !default;
-$orange: var(--color-orange) !default;
-$yellow: var(--color-yellow) !default;
-$olive: var(--color-olive) !default;
-$green: var(--color-green) !default;
-$teal: var(--color-teal) !default;
-$blue: var(--color-blue) !default;
-$violet: var(--color-violet) !default;
-$purple: var(--color-purple) !default;
-$pink: var(--color-pink) !default;
-$brown: var(--color-brown) !default;
-$grey: var(--color-grey) !default;
-$light-grey: var(--color-light-grey) !default;
+:root {
+  /* Background colors */
+  --color-base: hsl(0, 0%, 15%);
+  --color-section: hsla(0, 0%, 0%, 0.33);
+  --color-secondary: hsl(
+    from var(--color-base) var(--secondary-hue) var(--secondary-saturation)
+      calc(l + var(--secondary-lightness-adjustment))
+  );
+  --secondary-hue: h;
+  --secondary-saturation: s;
+  --secondary-lightness-adjustment: 7.5;
+  --base-gradient-spread: 2;
+  --color-base-start: hsl(
+    from var(--color-base) h s calc(l + var(--base-gradient-spread))
+  );
+  --color-base-end: hsl(
+    from var(--color-base) h s calc(l - var(--base-gradient-spread))
+  );
+
+  /* Scrollbar */
+  --color-scrollbar-base: var(--color-section);
+  --color-scrollbar-thumb: hsl(from var(--color-base) h s calc(l + 9.25));
+
+  /* Candystripe */
+  --candystripe-odd: hsla(0, 0%, 0%, 0.25);
+  --candystripe-even: transparent;
+
+  /* Base colors */
+  --color-red: hsl(0, 70%, 50%);
+  --color-orange: hsl(25, 90%, 50%);
+  --color-yellow: hsl(50, 97.5%, 50%);
+  --color-olive: hsl(70, 75%, 45%);
+  --color-green: hsl(140, 70%, 40%);
+  --color-teal: hsl(180, 100%, 35%);
+  --color-blue: hsl(210, 65%, 47.5%);
+  --color-violet: hsl(260, 60%, 50%);
+  --color-purple: hsl(290, 60%, 50%);
+  --color-pink: hsl(325, 70%, 50%);
+  --color-brown: hsl(25, 47.5%, 45%);
+
+  /* Additional colors */
+  --color-gold: hsl(40, 90%, 50%);
+
+  /* Grayscale colors */
+  --color-black: hsl(0, 0%, 0%);
+  --color-white: hsl(0, 0%, 100%);
+  --color-grey: hsl(0, 0%, 50%);
+  --color-light-grey: hsl(0, 0%, 66.6%);
+  --color-gray: var(--color-grey);
+  --color-light-gray: var(--color-light-grey);
+
+  /* Action colors */
+  --color-action: hsl(0, 0%, 50%);
+  --color-hover: hsl(from var(--color-action) h s l / 0.25);
+  --color-active: hsl(from var(--color-action) h s l / 0.3);
+  --color-selected: hsl(from var(--color-action) h s l / 0.4);
+
+  /* Semantic colors */
+  --primary-hue: 210;
+  --primary-saturation: 37.5%;
+  --primary-lightness: 45%;
+  --color-primary: hsl(
+    var(--primary-hue),
+    var(--primary-saturation),
+    var(--primary-lightness)
+  );
+  --color-good: hsl(95, 62.5%, 40%);
+  --color-average: hsl(32.5, 90%, 50%);
+  --color-bad: hsl(0, 72.5%, 50%);
+  --color-label: hsl(from var(--color-primary) h 17.5 57.5);
 
-$primary: var(--color-primary) !default;
-$good: var(--color-good) !default;
-$average: var(--color-average) !default;
-$bad: var(--color-bad) !default;
-$label: var(--color-label) !default;
+  /* Text colors */
+  --color-text: var(--color-white);
+  --color-text-translucent: hsl(from var(--color-text) h s l / 0.5);
+  --color-text-translucent-light: hsl(from var(--color-text) h s l / 0.75);
+  --color-text-fixed-white: var(--color-white);
+  --color-text-fixed-black: var(--color-black);
+
+  /* Link colors */
+  --color-hyperlink: hsl(220, 100%, 70%);
+  --color-hyperlink-visited: hsl(260, 100%, 70%);
+  --color-hyperlink-new: hsl(0, 100%, 70%);
+  --color-hyperlink-new-visited: hsl(15, 100%, 70%);
+
+  /* Border */
+  --color-border: hsla(0, 0%, 100%, 0.1);
+  --color-border-dark: hsla(0, 0%, 0%, 0.33);
+  --border-primary-saturation: 100;
+  --border-primary-lightness: 75;
+  --border-primary-alpha: 0.75;
+  --color-border-primary: hsl(
+    from var(--color-primary) h var(--border-primary-saturation)
+      var(--border-primary-lightness) / var(--border-primary-alpha)
+  );
+  --color-border-secondary: hsl(from var(--color-border-primary) h s l / 1);
+}
 
 // Mappings of color names
 $color-map: ();
-
 $_gen_map: (
   /* Base colors */ "red": var(--color-red),
   "orange": var(--color-orange),
@@ -72,18 +154,3 @@ $color-map-keys: map.keys($_gen_map) !default;
     )
   );
 }
-
-/**
- * Background and foreground color lightness ratios
- * @deprecated
- */
-$bg-lightness: -15% !default;
-$fg-lightness: 10% !default;
-
-@function bg($color) {
-  @return hsl(from $color h s calc(l - var(--adjust-color)));
-}
-
-@function fg($color) {
-  @return hsl(from $color h s calc(l + var(--adjust-color)));
-}

package/styles/components/Button.scss

@@ -1,4 +1,3 @@
-@use "../base";
 @use "../colors";
 
 @mixin button-color() {

package/styles/components/Dialog.scss

@@ -1,4 +1,4 @@
-@use "../base";
+@use "../functions" as fn;
 
 .Dialog {
   position: fixed;
@@ -13,7 +13,7 @@
   display: flex;
   flex-direction: column;
   font-family: var(--font-family-mono);
-  font-size: base.em(14px);
+  font-size: fn.em(14px);
   background-color: var(--color-base);
 }
 

package/styles/components/Dropdown.scss

@@ -1,4 +1,5 @@
 @use "../base";
+@use "../functions" as fn;
 @use "./Button" as button;
 
 .Dropdown {
@@ -24,18 +25,33 @@
     width: 100%;
   }
 
+  &__input,
   &__control {
     display: flex;
     overflow: hidden;
     flex: 1;
     font-family: var(--font-family);
-    font-size: base.em(12px);
-    line-height: base.em(16px);
-    height: base.em(22px);
+    font-size: fn.em(12px);
+    line-height: fn.em(16px);
+    height: fn.em(22px);
     border-radius: var(--button-border-radius);
     @include button.button-color();
   }
 
+  &__input-wrapper {
+    position: relative;
+    display: flex;
+    flex: 1;
+  }
+
+  &__input-chevron {
+    position: absolute;
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
   &__selected-text {
     flex: 1;
     display: inline-block;
@@ -53,7 +69,7 @@
     align-content: center;
     text-align: center;
     height: 100%;
-    width: base.em(22px);
+    width: fn.em(22px);
     transition: transform var(--dropdown-transition);
 
     &--arrow {
@@ -73,7 +89,7 @@
     overflow-y: auto;
     scrollbar-width: thin;
     scrollbar-color: var(--color-scrollbar-thumb) transparent;
-    max-height: base.em(200px);
+    max-height: var(--dropdown-menu-max-height);
     padding: var(--space-sm);
 
     &--wrapper {
@@ -91,8 +107,8 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       font-family: var(--font-family);
-      font-size: base.em(12px);
-      line-height: base.em(16px);
+      font-size: fn.em(12px);
+      line-height: var(--dropdown-entry-line-height);
       padding: var(--space-xs) var(--space-m);
       border-radius: var(--dropdown-entry-border-radius);
       transition: background-color var(--dropdown-entry-transition);
@@ -125,3 +141,16 @@
   justify-content: center;
   max-width: 2rem;
 }
+
+.Dropdown__input--styled {
+  --input-background: var(--button-background);
+  --input-border-color: var(--color-border-dark);
+  --input-border-color-focus: var(--color-border-dark);
+  --input-border-disabled: var(--color-border-dark);
+  --input-color: var(--button-color);
+  --input-color-placeholder: var(--button-color);
+
+  &.Input::placeholder {
+    font-style: normal;
+  }
+}

package/styles/components/MenuBar.scss

@@ -1,4 +1,4 @@
-@use "../base";
+@use "../functions" as fn;
 
 .MenuBar {
   display: flex;
@@ -6,8 +6,8 @@
 
 .MenuBar__font {
   font-family: var(--menu-bar-font-family);
-  font-size: base.em(12px);
-  line-height: base.em(17px);
+  font-size: fn.em(12px);
+  line-height: fn.em(17px);
 
   &.MenuBar__disabled {
     color: hsl(from currentColor h s l / 0.2);
@@ -75,7 +75,7 @@
 .MenuBar__MenuBarButton-text {
   text-overflow: clip;
   white-space: nowrap;
-  height: base.em(17px);
+  height: fn.em(17px);
 }
 
 .MenuBar__Separator {

package/styles/components/NoticeBox.scss

@@ -1,4 +1,4 @@
-@use "../base";
+@use "../functions" as fn;
 @use "../colors";
 
 .NoticeBox {
@@ -12,8 +12,8 @@
   );
   background-image: repeating-linear-gradient(
     -45deg,
-    transparent 0 base.em(10px),
-    var(--notice-box-stripes) base.em(10px) base.em(20px)
+    transparent 0 fn.em(10px),
+    var(--notice-box-stripes) fn.em(10px) fn.em(20px)
   );
   color: var(--notice-box-color);
 }

package/styles/components/NumberInput.scss

@@ -1,4 +1,4 @@
-@use "../base";
+@use "../functions" as fn;
 
 .NumberInput {
   cursor: var(--cursor-n-resize);
@@ -6,7 +6,7 @@
   position: relative;
   display: inline-block;
   text-align: right;
-  line-height: base.em(17px);
+  line-height: fn.em(17px);
   padding: 0 var(--space-sm);
   margin-right: var(--space-xs);
   background-color: var(--number-input-background);
@@ -39,7 +39,7 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  width: base.em(3px);
+  width: fn.em(3px);
   box-sizing: border-box;
   border-bottom: var(--border-thickness-tiny) solid
     var(--number-input-border-color-active);
@@ -54,9 +54,9 @@
   border: 0;
   outline: 0;
   width: 100%;
-  font-size: base.em(12px);
-  line-height: base.em(17px);
-  height: base.em(17px);
+  font-size: fn.em(12px);
+  line-height: fn.em(17px);
+  height: fn.em(17px);
   margin: 0;
   padding: 0 var(--space-m);
   font-family: var(--font-family);

package/styles/components/ProgressBar.scss

@@ -1,4 +1,3 @@
-@use "../base";
 @use "../colors";
 
 .ProgressBar {

package/styles/components/Section.scss

@@ -1,4 +1,4 @@
-@use "../base";
+@use "../functions" as fn;
 
 .Section {
   position: relative;
@@ -21,7 +21,7 @@
 }
 
 .Section__titleText {
-  font-size: base.em(14px);
+  font-size: fn.em(14px);
   font-weight: bold;
   color: var(--section-title-color);
 }
@@ -107,12 +107,12 @@
 
 // Level 2 section title
 .Section .Section .Section__titleText {
-  font-size: base.em(13px);
+  font-size: fn.em(13px);
 }
 
 // Level 3 section title
 .Section .Section .Section .Section__titleText {
-  font-size: base.em(12px);
+  font-size: fn.em(12px);
 }
 
 .Section--flex {

package/styles/components/Slider.scss

@@ -1,5 +1,3 @@
-@use "../base";
-
 .Slider {
   cursor: e-resize;
   user-select: none;
@@ -10,6 +8,15 @@
     }
   }
 
+  &--disabled {
+    cursor: default;
+    opacity: var(--slider-disabled-opacity);
+
+    .Slider__cursor:before {
+      display: none;
+    }
+  }
+
   &__cursor {
     position: absolute;
     inset: 0 calc(-1 * var(--space-xxs));

package/styles/components/Tooltip.scss

@@ -1,4 +1,4 @@
-@use "../base";
+@use "../functions" as fn;
 
 .Tooltip {
   backdrop-filter: var(--tooltip-blur);
@@ -6,7 +6,7 @@
   border-radius: var(--tooltip-border-radius);
   box-shadow: 0.1em 0.1em 1.25em -0.1em hsla(0, 0%, 0%, 0.5);
   color: var(--tooltip-color);
-  max-width: base.em(250px);
+  max-width: fn.em(250px);
   padding: var(--space-m) var(--space-l);
   pointer-events: none;
   text-align: left;

package/styles/functions.scss

@@ -12,12 +12,32 @@
   @return math.div($value, $value * 0 + 1);
 }
 
-// Increases perceptual color lightness.
+/* Darken color, to make it more readable if used as a background */
+@function bg($color) {
+  @return hsl(from $color h s calc(l - var(--adjust-color)));
+}
+
+/* Lighten color, to make it more readable if used as a text */
+@function fg($color) {
+  @return hsl(from $color h s calc(l + var(--adjust-color)));
+}
+
+/* Increases perceptual color lightness. */
 @function lighten($color, $amount) {
   @return color.adjust($color, $lightness: $amount * 1%, $space: hsl);
 }
 
-// Decreases perceptual color lightness.
+/* Decreases perceptual color lightness. */
 @function darken($color, $amount) {
   @return color.adjust($color, $lightness: -$amount * 1%, $space: hsl);
 }
+
+/* Converts px to em. Relies on the font-size variable. */
+@function em($px) {
+  @return calc($px / var(--font-size) * 1em);
+}
+
+/* Converts px to rem. Relies on the font-size variable. */
+@function rem($px) {
+  @return calc($px / var(--font-size) * 1rem);
+}

package/styles/main.scss

@@ -1,8 +1,8 @@
 @use "sass:meta";
 
 // CSS Variables
-@use "./vars-colors";
-@use "./vars-values";
+@use "./base";
+@use "./colors";
 @use "./vars-components";
 
 // Core styles

package/styles/vars-components.scss

@@ -18,6 +18,8 @@
  *
  * Made with love by Aylong (https://github.com/AyIong)
  */
+@use "./base";
+@use "./functions" as fn;
 
 :root {
   /* BlockQuote */
@@ -54,6 +56,8 @@
   --divider-border: var(--border-thickness-small) solid var(--divider-color);
 
   /* Dropdown */
+  --dropdown-menu-max-height: #{fn.em(200px)};
+  --dropdown-entry-line-height: #{fn.em(16px)};
   --dropdown-transition: var(--transition-time-medium);
   --dropdown-menu-color: var(--color-text);
   --dropdown-menu-background: hsl(
@@ -165,6 +169,7 @@
   --slider-popup-color: var(--tooltip-color);
   --slider-popup-border-radius: var(--tooltip-border-radius);
   --slider-popup-blur: var(--tooltip-blur);
+  --slider-disabled-opacity: 0.5;
 
   /* Tooltip */
   --tooltip-color: var(--color-text);

package/styles/vars-colors.scss

@@ -1,114 +0,0 @@
-/**
- * TGUI
- * Main Colors
- *
- * This file contains all the main colors that are
- * used elsewhere and are mixed/modified to
- * suit the needs of the components/ui's.
- *
- * The main goal is to standardize colors.
- * When adding new independent colors, you should add them here.
- *
- * Overwriting these variables will have an extreme impact
- * on the global appearance of the entire TGUI, as they are used everywhere.
- * For finer customization of components, use vars-components.scss
- *
- * Made with love by Aylong (https://github.com/AyIong)
- */
-
-:root {
-  /* Background colors */
-  --color-base: hsl(0, 0%, 15%);
-  --color-section: hsla(0, 0%, 0%, 0.33);
-  --color-secondary: hsl(
-    from var(--color-base) var(--secondary-hue) var(--secondary-saturation)
-      calc(l + var(--secondary-lightness-adjustment))
-  );
-  --secondary-hue: h;
-  --secondary-saturation: s;
-  --secondary-lightness-adjustment: 7.5;
-  --base-gradient-spread: 2;
-  --color-base-start: hsl(
-    from var(--color-base) h s calc(l + var(--base-gradient-spread))
-  );
-  --color-base-end: hsl(
-    from var(--color-base) h s calc(l - var(--base-gradient-spread))
-  );
-
-  /* Scrollbar */
-  --color-scrollbar-base: var(--color-section);
-  --color-scrollbar-thumb: hsl(from var(--color-base) h s calc(l + 9.25));
-
-  /* Candystripe */
-  --candystripe-odd: hsla(0, 0%, 0%, 0.25);
-  --candystripe-even: transparent;
-
-  /* Base colors */
-  --color-red: hsl(0, 70%, 50%);
-  --color-orange: hsl(25, 90%, 50%);
-  --color-yellow: hsl(50, 97.5%, 50%);
-  --color-olive: hsl(70, 75%, 45%);
-  --color-green: hsl(140, 70%, 40%);
-  --color-teal: hsl(180, 100%, 35%);
-  --color-blue: hsl(210, 65%, 47.5%);
-  --color-violet: hsl(260, 60%, 50%);
-  --color-purple: hsl(290, 60%, 50%);
-  --color-pink: hsl(325, 70%, 50%);
-  --color-brown: hsl(25, 47.5%, 45%);
-
-  /* Additional colors */
-  --color-gold: hsl(40, 90%, 50%);
-
-  /* Grayscale colors */
-  --color-black: hsl(0, 0%, 0%);
-  --color-white: hsl(0, 0%, 100%);
-  --color-grey: hsl(0, 0%, 50%);
-  --color-light-grey: hsl(0, 0%, 66.6%);
-  --color-gray: var(--color-grey);
-  --color-light-gray: var(--color-light-grey);
-
-  /* Action colors */
-  --color-action: hsl(0, 0%, 50%);
-  --color-hover: hsl(from var(--color-action) h s l / 0.25);
-  --color-active: hsl(from var(--color-action) h s l / 0.3);
-  --color-selected: hsl(from var(--color-action) h s l / 0.4);
-
-  /* Semantic colors */
-  --primary-hue: 210;
-  --primary-saturation: 37.5%;
-  --primary-lightness: 45%;
-  --color-primary: hsl(
-    var(--primary-hue),
-    var(--primary-saturation),
-    var(--primary-lightness)
-  );
-  --color-good: hsl(95, 62.5%, 40%);
-  --color-average: hsl(32.5, 90%, 50%);
-  --color-bad: hsl(0, 72.5%, 50%);
-  --color-label: hsl(from var(--color-primary) h 17.5 57.5);
-
-  /* Text colors */
-  --color-text: var(--color-white);
-  --color-text-translucent: hsl(from var(--color-text) h s l / 0.5);
-  --color-text-translucent-light: hsl(from var(--color-text) h s l / 0.75);
-  --color-text-fixed-white: var(--color-white);
-  --color-text-fixed-black: var(--color-black);
-
-  /* Link colors */
-  --color-hyperlink: hsl(220, 100%, 70%);
-  --color-hyperlink-visited: hsl(260, 100%, 70%);
-  --color-hyperlink-new: hsl(0, 100%, 70%);
-  --color-hyperlink-new-visited: hsl(15, 100%, 70%);
-
-  /* Border */
-  --color-border: hsla(0, 0%, 100%, 0.1);
-  --color-border-dark: hsla(0, 0%, 0%, 0.33);
-  --border-primary-saturation: 100;
-  --border-primary-lightness: 75;
-  --border-primary-alpha: 0.75;
-  --color-border-primary: hsl(
-    from var(--color-primary) h var(--border-primary-saturation)
-      var(--border-primary-lightness) / var(--border-primary-alpha)
-  );
-  --color-border-secondary: hsl(from var(--color-border-primary) h s l / 1);
-}

package/styles/vars-values.scss

@@ -1,110 +0,0 @@
-/**
- * TGUI
- * Values Variables
- *
- * This file contains all values, like spacings, sizes, etc.
- * You won't find any colors here, just numbers and letters.
- *
- * Made with love by Aylong (https://github.com/AyIong)
- */
-:root {
-  /* Font */
-  --font-size: 12px;
-  --font-family: Verdana, Geneva, sans-serif;
-  --font-family-mono: Consolas, monospace;
-
-  /* Border thickness */
-  --border-thickness-unit: 0.5em;
-  /* 1px | 0.085em */
-  --border-thickness-tiny: calc(var(--border-thickness-unit) * 0.5 * 0.34);
-  /* 2px | 0.17em */
-  --border-thickness-small: calc(var(--border-thickness-unit) * 0.34);
-  /* 3px | 0.25em */
-  --border-thickness-medium: calc(var(--border-thickness-unit) * 0.5);
-  /* 4px | 0.33em */
-  --border-thickness-large: calc(var(--border-thickness-unit) * 0.66);
-  /* 6px | 0.5em */
-  --border-thickness-larger: var(--border-thickness-unit);
-
-  /* Border radius */
-  --border-radius-unit: 1rem;
-  /* 2px | 0.17rem */
-  --border-radius-tiny: calc(var(--border-radius-unit) * 0.25 * 0.68);
-  /* 3px | 0.25rem */
-  --border-radius-small: calc(var(--border-radius-unit) * 0.25);
-  /* 4px | 0.33rem */
-  --border-radius-medium: calc(var(--border-radius-unit) * 0.33);
-  /* 6px | 0.5rem */
-  --border-radius-large: calc(var(--border-radius-unit) * 0.5);
-  /* 10px | 0.75rem */
-  --border-radius-larger: calc(var(--border-radius-unit) * 0.75);
-  /* 12px | 1rem*/
-  --border-radius-huge: var(--border-radius-unit);
-  /* 24px | 2rem*/
-  --border-radius-giant: calc(var(--border-radius-unit) * 2);
-  /* Maximum border radius. Makes perfect circles */
-  --border-radius-circular: 99999px;
-
-  /* Spacing */
-  --space-unit: 1em;
-  /* 1px | 0.085em */
-  --space-xxs: calc(var(--space-unit) * 0.25 * 0.34);
-  /* 2px | 0.17em */
-  --space-xs: calc(var(--space-unit) * 0.25 * 0.68);
-  /* 3px | 0.25em */
-  --space-s: calc(var(--space-unit) * 0.25);
-  /* 4px | 0.33em */
-  --space-sm: calc(var(--space-unit) * 0.33);
-  /* 6px | 0.5em */
-  --space-m: calc(var(--space-unit) * 0.5);
-  /* 8px | 0.66em */
-  --space-ml: calc(var(--space-unit) * 0.66);
-  /* 10px | 0.75em */
-  --space-l: calc(var(--space-unit) * 0.75);
-  /* 12px | 1em*/
-  --space-xl: var(--space-unit);
-  /* 24px | 2em*/
-  --space-xxl: calc(var(--space-unit) * 2);
-
-  /* Transition */
-  --transition-time-unit: 1s;
-  /* 0.1s | 100ms */
-  --transition-time-fast: calc(var(--transition-time-unit) * 0.1);
-  /* 0.2s | 200ms */
-  --transition-time-medium: calc(var(--transition-time-unit) * 0.2);
-  /* 0.5s | 500ms */
-  --transition-time-slow: calc(var(--transition-time-unit) * 0.5);
-  /* 1s | 1000ms */
-  --transition-time-slowest: var(--transition-time-unit);
-
-  /* Shadows */
-  --shadow-unit: 1rem;
-  /* 0 0 0.5rem */
-  --shadow-glow-small: 0 0 calc(var(--shadow-unit) * 0.5);
-  /* 0 0 1rem */
-  --shadow-glow-medium: 0 0 var(--shadow-unit);
-  /* 0 0 2rem */
-  --shadow-glow-large: 0 0 calc(var(--shadow-unit) * 2);
-
-  /* Blur */
-  --blur-small: blur(6px);
-  --blur-medium: blur(12px);
-  --blur-large: blur(24px);
-
-  /* Adjustments */
-  /* Color lightness multiplier. + for FG - for BG */
-  --adjust-color: 5;
-  /* Color lightness multiplier wneh hovered */
-  --adjust-hover: 10;
-  /* Color lightness multiplier when active (clicked) */
-  --adjust-active: 7.5;
-
-  /* Cursors */
-  --cursor-default: default;
-  --cursor-pointer: pointer;
-  --cursor-disabled: var(--cursor-default);
-  --cursor-n-resize: n-resize;
-  --cursor-s-resize: s-resize;
-  --cursor-se-resize: se-resize;
-  --cursor-e-resize: e-resize;
-}