@flourish/ui-styles 6.0.1 → 6.0.2

package/RELEASE_NOTES.md

@@ -1,3 +1,6 @@
+# 6.0.2
+* Bump @flourish/pocket-knife to v2.3.1
+
 # 6.0.1
 * Remove repo from package.json
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flourish/ui-styles",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "private": false,
   "description": "Flourish module for styling UI elements",
   "main": "ui-styles.js",
@@ -9,7 +9,7 @@
   "license": "LicenseRef-LICENSE",
   "dependencies": {
     "d3-selection": "^1.4.0",
-    "@flourish/pocket-knife": "^2.1.1"
+    "@flourish/pocket-knife": "^2.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.23.6",

package/ui-styles.js

@@ -629,8 +629,33 @@
 	  each: proto.each
 	};
 
+	// This is an exception because mocha doesn't run in a browser context, so some
+	// browser methods aren't available.
+	const is_browser =
+		typeof window !== "undefined" &&
+		typeof document !== "undefined" &&
+		typeof document.createElement === "function" &&
+		typeof document.body?.appendChild === "function" &&
+		typeof HTMLElement !== "undefined";
+
 	const canvas = document.createElement("canvas");
-	canvas.getContext("2d");
+	const ctx = canvas.getContext("2d");
+
+	const tnums_svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	const tnums_text_element = document.createElementNS(
+		"http://www.w3.org/2000/svg",
+		"text",
+	);
+	tnums_svg.appendChild(tnums_text_element);
+	if (is_browser) {
+		canvas.style.position = "fixed";
+		canvas.style.left = "1000vw";
+		tnums_svg.style.position = "fixed";
+		tnums_svg.style.left = "1000vw";
+		document.body.appendChild(canvas);
+		document.body.appendChild(tnums_svg);
+	}
+	let is_browser_supporting_tnums_in_canvas = null;
 
 	function getTextDirection() {
 		return window.getComputedStyle(document.body).direction || "ltr";
@@ -649,6 +674,71 @@
 		return c ? c.toString() : false;
 	}
 
+	function checkBrowserTnumSupport() {
+		const test_tnum_string = "0123456789.,£";
+		const no_tnum_canvas = document.createElement("canvas");
+		const tnum_canvas = document.createElement("canvas");
+		const no_tnum_ctx = no_tnum_canvas.getContext("2d");
+		const tnum_ctx = tnum_canvas.getContext("2d");
+
+		no_tnum_canvas.setAttribute(
+			"style",
+			"font-feature-settings: normal; font-variant-numeric: normal; position: fixed; left: 1000vw;",
+		);
+		tnum_canvas.setAttribute(
+			"style",
+			'font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; position: fixed; left: 1000vw;',
+		);
+
+		no_tnum_ctx.font = tnum_ctx.font = ctx.font;
+
+		document.body.appendChild(no_tnum_canvas);
+		document.body.appendChild(tnum_canvas);
+
+		const width_no_tnum = no_tnum_ctx.measureText(test_tnum_string).width;
+		const width_tnum = tnum_ctx.measureText(test_tnum_string).width;
+
+		is_browser_supporting_tnums_in_canvas = width_no_tnum !== width_tnum;
+
+		document.body.removeChild(no_tnum_canvas);
+		document.body.removeChild(tnum_canvas);
+
+		return is_browser_supporting_tnums_in_canvas;
+	}
+
+	ctx.measureTextWithTnums = function (text) {
+		if (!is_browser) return ctx.measureText(text);
+		const computed_style = window.getComputedStyle(this.canvas);
+		const is_tnums_style_set =
+			(computed_style.fontFeatureSettings || "").includes("tnum") ||
+			(computed_style.fontVariantNumeric || "").includes("tabular-nums");
+
+		// No tnums set for this text, so measure using canvas
+		if (!is_tnums_style_set) return this.measureText(text);
+
+		// Tnums are set, check if browser supports it
+		if (is_browser_supporting_tnums_in_canvas === null) checkBrowserTnumSupport();
+
+		// Browser supports tnums in canvas, measure text
+		if (is_browser_supporting_tnums_in_canvas) return this.measureText(text);
+
+		// Browser does not support tnums in canvas, measure text using svg instead
+		tnums_text_element.textContent = text;
+		tnums_text_element.setAttribute(
+			"style",
+			`font: ${ctx.font}; font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; position: fixed; left: 1000vw;`,
+		);
+
+		let svg_text_width = tnums_text_element.getBBox().width;
+
+		// measureText in order to return a full TextMetrics object with the svg measured width
+		const measured_text = this.measureText(text);
+		return {
+			...measured_text,
+			width: svg_text_width,
+		};
+	};
+
 	var DEFAULTS$2 = Object.freeze({
 		background: null,
 		font_color: null,

package/ui-styles.min.js

@@ -1 +1 @@
-(function(t,e){typeof exports==="object"&&typeof module!=="undefined"?e(exports):typeof define==="function"&&define.amd?define(["exports"],e):(t=typeof globalThis!=="undefined"?globalThis:t||self,e(t["ui-styles"]={}))})(this,function(t){"use strict";function i(){this.declarations=[];return this}i.prototype.select=function(t){if(!t)return this;var e=new s(t);e.parent=this;this.addDeclaration(e);return e};i.prototype.addDeclaration=function(t){this.declarations.push(t);return this};i.prototype.print=function(){var e="";this.declarations.forEach(function(t){e+=t.selector+" {\n";t.styles.forEach(function(t){e+="\t"+t[0]+": "+t[1]+";\n"});e+="}\n\n"});return e};i.prototype.clear=function(){this.declarations=[];return this};function s(t){this.selector=t;this.styles=[];return this}s.prototype.style=function(t,e){var s=typeof value_=="function"?e():e;if(s!==""&&s!==null&&s!==undefined)this.styles.push([t,s]);return this};s.prototype.select=function(t){return this.parent.select(this.selector+" "+t)};var l=Object.freeze({font_size:1,font_weight:"bold",height:2});function r(t,e,s){this._state=t;for(var r in l){if(this._state[r]===undefined)this._state[r]=l[r]}this._layout=s||{};this._styles=new i;this._selector=e;this._createStylesheet();return this}r.prototype._createStylesheet=function(){this._stylesheet=document.createElement("style");this._stylesheet.className="fl-ui-styles-controls";document.head.appendChild(this._stylesheet)};r.prototype.update=function(){this._styles.clear();this._styles.select(this._selector+".hidden").style("display","none");this._styles.select(this._selector).style("vertical-align","middle").style("position","relative").style("font-size",this._state.font_size+"rem").style("font-weight",this._state.font_weight);this._styles.select(".fl-controls-title").style("font-size",this._state.font_size+"rem").style("font-weight",this._state.font_weight).style("vertical-align","middle");this._styles.select(this._selector+".fl-control .button").style("height",this._state.height+"rem").style("padding","0 0.5em");this._styles.select(this._selector+"-dropdown select").style("height",this._state.height+"rem").style("font-size",this._state.font_size+"rem").style("font-weight",this._state.font_weight).style("padding",0+" "+this._state.height*.1+"rem");this._styles.select(this._selector+"-slider .slider-end-labels").style("font-size",this._state.font_size+"rem").style("font-weight",this._state.font_weight);this._styles.select(this._selector+"-slider").style("height",this._state.height+"rem");this._stylesheet.innerHTML=this._styles.print()};function e(t,e,s){t.prototype=e.prototype=s;s.constructor=t}function o(t,e){var s=Object.create(t.prototype);for(var r in e)s[r]=e[r];return s}function h(){}var n=.7;var a=1/n;var c="\\s*([+-]?\\d+)\\s*",u="\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*",d="\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*",T=/^#([0-9a-f]{3,8})$/,L=new RegExp(`^rgb\\(${c},${c},${c}\\)$`),D=new RegExp(`^rgb\\(${d},${d},${d}\\)$`),A=new RegExp(`^rgba\\(${c},${c},${c},${u}\\)$`),B=new RegExp(`^rgba\\(${d},${d},${d},${u}\\)$`),F=new RegExp(`^hsl\\(${u},${d},${d}\\)$`),G=new RegExp(`^hsla\\(${u},${d},${d},${u}\\)$`);var y={aliceblue:15792383,antiquewhite:16444375,aqua:65535,aquamarine:8388564,azure:15794175,beige:16119260,bisque:16770244,black:0,blanchedalmond:16772045,blue:255,blueviolet:9055202,brown:10824234,burlywood:14596231,cadetblue:6266528,chartreuse:8388352,chocolate:13789470,coral:16744272,cornflowerblue:6591981,cornsilk:16775388,crimson:14423100,cyan:65535,darkblue:139,darkcyan:35723,darkgoldenrod:12092939,darkgray:11119017,darkgreen:25600,darkgrey:11119017,darkkhaki:12433259,darkmagenta:9109643,darkolivegreen:5597999,darkorange:16747520,darkorchid:10040012,darkred:9109504,darksalmon:15308410,darkseagreen:9419919,darkslateblue:4734347,darkslategray:3100495,darkslategrey:3100495,darkturquoise:52945,darkviolet:9699539,deeppink:16716947,deepskyblue:49151,dimgray:6908265,dimgrey:6908265,dodgerblue:2003199,firebrick:11674146,floralwhite:16775920,forestgreen:2263842,fuchsia:16711935,gainsboro:14474460,ghostwhite:16316671,gold:16766720,goldenrod:14329120,gray:8421504,green:32768,greenyellow:11403055,grey:8421504,honeydew:15794160,hotpink:16738740,indianred:13458524,indigo:4915330,ivory:16777200,khaki:15787660,lavender:15132410,lavenderblush:16773365,lawngreen:8190976,lemonchiffon:16775885,lightblue:11393254,lightcoral:15761536,lightcyan:14745599,lightgoldenrodyellow:16448210,lightgray:13882323,lightgreen:9498256,lightgrey:13882323,lightpink:16758465,lightsalmon:16752762,lightseagreen:2142890,lightskyblue:8900346,lightslategray:7833753,lightslategrey:7833753,lightsteelblue:11584734,lightyellow:16777184,lime:65280,limegreen:3329330,linen:16445670,magenta:16711935,maroon:8388608,mediumaquamarine:6737322,mediumblue:205,mediumorchid:12211667,mediumpurple:9662683,mediumseagreen:3978097,mediumslateblue:8087790,mediumspringgreen:64154,mediumturquoise:4772300,mediumvioletred:13047173,midnightblue:1644912,mintcream:16121850,mistyrose:16770273,moccasin:16770229,navajowhite:16768685,navy:128,oldlace:16643558,olive:8421376,olivedrab:7048739,orange:16753920,orangered:16729344,orchid:14315734,palegoldenrod:15657130,palegreen:10025880,paleturquoise:11529966,palevioletred:14381203,papayawhip:16773077,peachpuff:16767673,peru:13468991,pink:16761035,plum:14524637,powderblue:11591910,purple:8388736,rebeccapurple:6697881,red:16711680,rosybrown:12357519,royalblue:4286945,saddlebrown:9127187,salmon:16416882,sandybrown:16032864,seagreen:3050327,seashell:16774638,sienna:10506797,silver:12632256,skyblue:8900331,slateblue:6970061,slategray:7372944,slategrey:7372944,snow:16775930,springgreen:65407,steelblue:4620980,tan:13808780,teal:32896,thistle:14204888,tomato:16737095,turquoise:4251856,violet:15631086,wheat:16113331,white:16777215,whitesmoke:16119285,yellow:16776960,yellowgreen:10145074};e(h,p,{copy(t){return Object.assign(new this.constructor,this,t)},displayable(){return this.rgb().displayable()},hex:_,formatHex:_,formatHex8:I,formatHsl:P,formatRgb:f,toString:f});function _(){return this.rgb().formatHex()}function I(){return this.rgb().formatHex8()}function P(){return U(this).formatHsl()}function f(){return this.rgb().formatRgb()}function p(t){var e,s;t=(t+"").trim().toLowerCase();return(e=T.exec(t))?(s=e[1].length,e=parseInt(e[1],16),s===6?g(e):s===3?new m(e>>8&15|e>>4&240,e>>4&15|e&240,(e&15)<<4|e&15,1):s===8?b(e>>24&255,e>>16&255,e>>8&255,(e&255)/255):s===4?b(e>>12&15|e>>8&240,e>>8&15|e>>4&240,e>>4&15|e&240,((e&15)<<4|e&15)/255):null):(e=L.exec(t))?new m(e[1],e[2],e[3],1):(e=D.exec(t))?new m(e[1]*255/100,e[2]*255/100,e[3]*255/100,1):(e=A.exec(t))?b(e[1],e[2],e[3],e[4]):(e=B.exec(t))?b(e[1]*255/100,e[2]*255/100,e[3]*255/100,e[4]):(e=F.exec(t))?N(e[1],e[2]/100,e[3]/100,1):(e=G.exec(t))?N(e[1],e[2]/100,e[3]/100,e[4]):y.hasOwnProperty(t)?g(y[t]):t==="transparent"?new m(NaN,NaN,NaN,0):null}function g(t){return new m(t>>16&255,t>>8&255,t&255,1)}function b(t,e,s,r){if(r<=0)t=e=s=NaN;return new m(t,e,s,r)}function J(t){if(!(t instanceof h))t=p(t);if(!t)return new m;t=t.rgb();return new m(t.r,t.g,t.b,t.opacity)}function K(t,e,s,r){return arguments.length===1?J(t):new m(t,e,s,r==null?1:r)}function m(t,e,s,r){this.r=+t;this.g=+e;this.b=+s;this.opacity=+r}e(m,K,o(h,{brighter(t){t=t==null?a:Math.pow(a,t);return new m(this.r*t,this.g*t,this.b*t,this.opacity)},darker(t){t=t==null?n:Math.pow(n,t);return new m(this.r*t,this.g*t,this.b*t,this.opacity)},rgb(){return this},clamp(){return new m(x(this.r),x(this.g),x(this.b),k(this.opacity))},displayable(){return-.5<=this.r&&this.r<255.5&&(-.5<=this.g&&this.g<255.5)&&(-.5<=this.b&&this.b<255.5)&&(0<=this.opacity&&this.opacity<=1)},hex:w,formatHex:w,formatHex8:Q,formatRgb:v,toString:v}));function w(){return`#${$(this.r)}${$(this.g)}${$(this.b)}`}function Q(){return`#${$(this.r)}${$(this.g)}${$(this.b)}${$((isNaN(this.opacity)?1:this.opacity)*255)}`}function v(){const t=k(this.opacity);return`${t===1?"rgb(":"rgba("}${x(this.r)}, ${x(this.g)}, ${x(this.b)}${t===1?")":`, ${t})`}`}function k(t){return isNaN(t)?1:Math.max(0,Math.min(1,t))}function x(t){return Math.max(0,Math.min(255,Math.round(t)||0))}function $(t){t=x(t);return(t<16?"0":"")+t.toString(16)}function N(t,e,s,r){if(r<=0)t=e=s=NaN;else if(s<=0||s>=1)t=e=NaN;else if(e<=0)t=NaN;return new z(t,e,s,r)}function U(t){if(t instanceof z)return new z(t.h,t.s,t.l,t.opacity);if(!(t instanceof h))t=p(t);if(!t)return new z;if(t instanceof z)return t;t=t.rgb();var e=t.r/255,s=t.g/255,r=t.b/255,i=Math.min(e,s,r),l=Math.max(e,s,r),o=NaN,n=l-i,a=(l+i)/2;if(n){if(e===l)o=(s-r)/n+(s<r)*6;else if(s===l)o=(r-e)/n+2;else o=(e-s)/n+4;n/=a<.5?l+i:2-l-i;o*=60}else{n=a>0&&a<1?0:o}return new z(o,n,a,t.opacity)}function V(t,e,s,r){return arguments.length===1?U(t):new z(t,e,s,r==null?1:r)}function z(t,e,s,r){this.h=+t;this.s=+e;this.l=+s;this.opacity=+r}e(z,V,o(h,{brighter(t){t=t==null?a:Math.pow(a,t);return new z(this.h,this.s,this.l*t,this.opacity)},darker(t){t=t==null?n:Math.pow(n,t);return new z(this.h,this.s,this.l*t,this.opacity)},rgb(){var t=this.h%360+(this.h<0)*360,e=isNaN(t)||isNaN(this.s)?0:this.s,s=this.l,r=s+(s<.5?s:1-s)*e,i=2*s-r;return new m(M(t>=240?t-240:t+120,i,r),M(t,i,r),M(t<120?t+240:t-120,i,r),this.opacity)},clamp(){return new z(W(this.h),S(this.s),S(this.l),k(this.opacity))},displayable(){return(0<=this.s&&this.s<=1||isNaN(this.s))&&(0<=this.l&&this.l<=1)&&(0<=this.opacity&&this.opacity<=1)},formatHsl(){const t=k(this.opacity);return`${t===1?"hsl(":"hsla("}${W(this.h)}, ${S(this.s)*100}%, ${S(this.l)*100}%${t===1?")":`, ${t})`}`}}));function W(t){t=(t||0)%360;return t<0?t+360:t}function S(t){return Math.max(0,Math.min(1,t||0))}function M(t,e,s){return(t<60?e+(s-e)*t/60:t<180?s:t<240?e+(s-e)*(240-t)/60:e)*255}var E="$";function C(){}C.prototype=X.prototype={constructor:C,has:function(t){return E+t in this},get:function(t){return this[E+t]},set:function(t,e){this[E+t]=e;return this},remove:function(t){var e=E+t;return e in this&&delete this[e]},clear:function(){for(var t in this)if(t[0]===E)delete this[t]},keys:function(){var t=[];for(var e in this)if(e[0]===E)t.push(e.slice(1));return t},values:function(){var t=[];for(var e in this)if(e[0]===E)t.push(this[e]);return t},entries:function(){var t=[];for(var e in this)if(e[0]===E)t.push({key:e.slice(1),value:this[e]});return t},size:function(){var t=0;for(var e in this)if(e[0]===E)++t;return t},empty:function(){for(var t in this)if(t[0]===E)return false;return true},each:function(t){for(var e in this)if(e[0]===E)t(this[e],e.slice(1),this)}};function X(t,e){var s=new C;if(t instanceof C)t.each(function(t,e){s.set(e,t)});else if(Array.isArray(t)){var r=-1,i=t.length,l;if(e==null)while(++r<i)s.set(r,t[r]);else while(++r<i)s.set(e(l=t[r],r,t),l)}else if(t)for(var o in t)s.set(o,t[o]);return s}function Y(){}var H=X.prototype;Y.prototype={constructor:Y,has:H.has,add:function(t){t+="";this[E+t]=t;return this},remove:H.remove,clear:H.clear,values:H.keys,size:H.size,empty:H.empty,each:H.each};const Z=document.createElement("canvas");Z.getContext("2d");function tt(){return window.getComputedStyle(document.body).direction||"ltr"}function et(t,e){if(typeof t!="string")return false;var s=p(t);s.opacity=e!==undefined?e:1;return s}function q(t,e){var s=et(t,e);return s?s.toString():false}var st=Object.freeze({background:null,font_color:null,background_selected:"#333333",font_color_selected:"#ffffff",background_hover:null,font_color_hover:null,border_width:1,border_transparency:.25,border_color:null,border_radius:3});function R(t,e,s){this._state=t;for(var r in st){if(this._state[r]===undefined)this._state[r]=st[r]}this._layout=s||{};this._styles=new i;this._selector=e;this._createStylesheet();return this}R.prototype._createStylesheet=function(){this._stylesheet=document.createElement("style");this._stylesheet.className="fl-ui-styles-button";document.head.appendChild(this._stylesheet)};R.prototype.update=function(){this._styles.clear();var t=this._state.background||(this._layout.background_color_enabled?this._layout.background_color||"#ffffff":"#ffffff");var e=this._state.font_color||this._layout.font_color||"#333333";var s=q(this._state.border_color||e,this._state.border_transparency);var r=tt();this._styles.select(this._selector+".fl-control.hidden").style("display","none");this._styles.select(this._selector+".fl-control .button").style("overflow","hidden").style("white-space","nowrap").style("margin","0 2px 0 0 !important").style("background-color",t).style("color",e).style("border",this._state.border_width+"px solid "+s).style("border-radius",this._state.border_radius+"px");this._styles.select(this._selector+".fl-control .button:hover").style("background-color",this._state.background_hover||t).style("color",this._state.font_color_hover||e);this._styles.select(this._selector+".fl-control .button.selected").style("background-color",this._state.background_selected).style("color",this._state.font_color_selected);this._styles.select(this._selector+".grouped.fl-control .button").style("border-right","none").style("border-radius","0").style("margin","0");var i=r==="rtl";var l=i?":last-child":":first-child";var o=i?":first-child":":last-child";this._styles.select(this._selector+".grouped.fl-control .button"+l).style("border-radius",this._state.border_radius+"px 0 0 "+this._state.border_radius+"px");this._styles.select(this._selector+".grouped.fl-control .button"+o).style("border-radius","0 "+this._state.border_radius+"px "+this._state.border_radius+"px 0").style("border-right",this._state.border_width+"px solid "+s);this._styles.select(this._selector+".grouped.fl-control.fixed-width:not(.hidden)").style("width",this._state.grouped_width+"%");this._stylesheet.innerHTML=this._styles.print()};var rt=Object.freeze({background:null,font_color:null,border_style:"bottom",border_width:1,border_color:null,border_transparency:.25,border_radius:3});function j(t,e,s){this._state=t;for(var r in rt){if(this._state[r]===undefined)this._state[r]=rt[r]}this._layout=s||{};this._styles=new i;this._selector=e;this._createStylesheet();return this}j.prototype._createStylesheet=function(){this._stylesheet=document.createElement("style");this._stylesheet.className="fl-ui-styles-dropdown";document.head.appendChild(this._stylesheet)};j.prototype.update=function(){this._styles.clear();const t=this._state.background||"transparent";const e=this._state.font_color||this._layout.font_color;const s=e||"inherit";let r;if(this._state.border_color){r=q(this._state.border_color,this._state.border_transparency)}else if(e){r=q(e,this._state.border_transparency)}else{r="currentColor"}this._styles.select(this._selector+" .heading").style("margin-bottom","0.4em");this._styles.select(this._selector).style("pointer-events","all");this._styles.select(this._selector+" select").style("display","inline-block").style("cursor","pointer").style("overflow","hidden").style("white-space","nowrap").style("position","relative").style("font-family","inherit").style("background-color",t).style("color",s).style("border",this._state.border_style=="bottom"?this._state.border_width+"px solid transparent":this._state.border_width+"px solid "+r).style("border-bottom",this._state.border_style=="bottom"?this._state.border_width+"px solid "+r:null).style("border-radius",this._state.border_style=="bottom"?null:this._state.border_radius+"px");this._styles.select(this._selector+":after").style("right",this._state.border_style=="bottom"?null:this._state.border_width+5+"px").style("color",s);this._styles.select(this._selector+" .main .current").style("line-height","1em").style("height","100%").style("max-width","88%").style("display","inline-block").style("overflow","hidden").style("vertical-align","top");this._styles.select(this._selector+" .list").style("top","2px").style("min-width","100%").style("padding","2px").style("display","none").style("max-height","200px").style("overflow-y","auto").style("box-shadow","0 1px 4px rgba(0, 0, 0, .1)").style("margin-top","2px").select(".list-item").style("line-height","1em").style("cursor","pointer").style("font-weight","normal").style("color",s);this._styles.select(this._selector+".open .list").style("display","block").style("border",this._state.border_width+"px solid "+r).style("background-color",t).style("z-index","1").style("animation","dropdown-out 200ms");this._styles.select(this._selector+" .list-item:hover").style("opacity","0.6");this._styles.select(this._selector+" .list-item.selected, "+this._selector+" .list-item.selected:hover").style("opacity","1").style("cursor","default");if(this._state.border_style=="bottom"){this._styles.select(this._selector+" .main").style("padding-left",0).style("padding-right","0.1rem")}this._stylesheet.innerHTML=this._styles.print()};function it(t){return t*parseFloat(getComputedStyle(document.documentElement).fontSize)}var lt=Object.freeze({play_color:null,handle_color:null,font_color:null,track_color:null,handle_height:1,track_height:.2,margin:4.5,play_button:true});function O(t,e,s){this._state=t;for(var r in lt){if(this._state[r]===undefined)this._state[r]=lt[r]}this._layout=s||{};this._styles=new i;this._selector=e;this._createStylesheet();return this}O.prototype._createStylesheet=function(){this._stylesheet=document.createElement("style");this._stylesheet.className="fl-ui-styles-slider";document.head.appendChild(this._stylesheet)};O.prototype.update=function(){this._styles.clear();var t=this._state.track_color||"#dddddd";var e=this._state.font_color||this._layout.font_color||"currentColor";var s="currentColor";var r=this._state.handle_color||this._layout.font_color||"currentColor";var i=this._state.play_color||this._layout.font_color||"currentColor";var l=Math.round(it(this._state.handle_height));var o=it(this._state.track_height);this._styles.select(this._selector+" .fl-controls-slider").style("height",l*2+"px");this._styles.select(this._selector+" .slider-play").style("fill",i).style("width",l+"px").style("height",l+"px").style("display",this._state.play_button?null:"none");this._styles.select(this._selector+" .slider-label").style("padding-inline-start","0.3rem").style("box-sizing","content-box").style("color",e);this._styles.select(this._selector+" input[type=range]").style("-webkit-appearance","none").style("color",s).style("background-color","transparent");this._styles.select(this._selector+" input[type=range]::-webkit-slider-runnable-track").style("-webkit-appearance","none").style("background",t).style("border-radius","100px").style("height",o+"px");this._styles.select(this._selector+" input[type=range]::-webkit-slider-thumb").style("-webkit-appearance","none").style("width",l+"px").style("height",l+"px").style("border-radius","100px").style("background",r).style("margin-top",-l/2+o/2+"px");this._styles.select(this._selector+" input[type=range]::-moz-range-track").style("-webkit-appearance","none").style("background",t).style("border-radius","100px").style("height",o+"px");this._styles.select(this._selector+" input[type=range]::-moz-range-thumb").style("-webkit-appearance","none").style("width",l+"px").style("height",l+"px").style("border-radius","100px").style("border","none").style("background",r);this._stylesheet.innerHTML=this._styles.print()};function ot(t,e,s){return new r(t,e,s)}function nt(t,e,s){return new R(t,e,s)}function at(t,e,s){return new j(t,e,s)}function ht(t,e,s){return new O(t,e,s)}t.createButtonStyle=nt;t.createDropdownStyle=at;t.createGeneralControlsStyle=ot;t.createSliderStyle=ht});
+(function(t,e){typeof exports==="object"&&typeof module!=="undefined"?e(exports):typeof define==="function"&&define.amd?define(["exports"],e):(t=typeof globalThis!=="undefined"?globalThis:t||self,e(t["ui-styles"]={}))})(this,function(t){"use strict";function i(){this.declarations=[];return this}i.prototype.select=function(t){if(!t)return this;var e=new s(t);e.parent=this;this.addDeclaration(e);return e};i.prototype.addDeclaration=function(t){this.declarations.push(t);return this};i.prototype.print=function(){var e="";this.declarations.forEach(function(t){e+=t.selector+" {\n";t.styles.forEach(function(t){e+="\t"+t[0]+": "+t[1]+";\n"});e+="}\n\n"});return e};i.prototype.clear=function(){this.declarations=[];return this};function s(t){this.selector=t;this.styles=[];return this}s.prototype.style=function(t,e){var s=typeof value_=="function"?e():e;if(s!==""&&s!==null&&s!==undefined)this.styles.push([t,s]);return this};s.prototype.select=function(t){return this.parent.select(this.selector+" "+t)};var n=Object.freeze({font_size:1,font_weight:"bold",height:2});function r(t,e,s){this._state=t;for(var r in n){if(this._state[r]===undefined)this._state[r]=n[r]}this._layout=s||{};this._styles=new i;this._selector=e;this._createStylesheet();return this}r.prototype._createStylesheet=function(){this._stylesheet=document.createElement("style");this._stylesheet.className="fl-ui-styles-controls";document.head.appendChild(this._stylesheet)};r.prototype.update=function(){this._styles.clear();this._styles.select(this._selector+".hidden").style("display","none");this._styles.select(this._selector).style("vertical-align","middle").style("position","relative").style("font-size",this._state.font_size+"rem").style("font-weight",this._state.font_weight);this._styles.select(".fl-controls-title").style("font-size",this._state.font_size+"rem").style("font-weight",this._state.font_weight).style("vertical-align","middle");this._styles.select(this._selector+".fl-control .button").style("height",this._state.height+"rem").style("padding","0 0.5em");this._styles.select(this._selector+"-dropdown select").style("height",this._state.height+"rem").style("font-size",this._state.font_size+"rem").style("font-weight",this._state.font_weight).style("padding",0+" "+this._state.height*.1+"rem");this._styles.select(this._selector+"-slider .slider-end-labels").style("font-size",this._state.font_size+"rem").style("font-weight",this._state.font_weight);this._styles.select(this._selector+"-slider").style("height",this._state.height+"rem");this._stylesheet.innerHTML=this._styles.print()};function e(t,e,s){t.prototype=e.prototype=s;s.constructor=t}function o(t,e){var s=Object.create(t.prototype);for(var r in e)s[r]=e[r];return s}function h(){}var l=.7;var a=1/l;var c="\\s*([+-]?\\d+)\\s*",u="\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*",d="\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*",O=/^#([0-9a-f]{3,8})$/,L=new RegExp(`^rgb\\(${c},${c},${c}\\)$`),A=new RegExp(`^rgb\\(${d},${d},${d}\\)$`),B=new RegExp(`^rgba\\(${c},${c},${c},${u}\\)$`),D=new RegExp(`^rgba\\(${d},${d},${d},${u}\\)$`),F=new RegExp(`^hsl\\(${u},${d},${d}\\)$`),G=new RegExp(`^hsla\\(${u},${d},${d},${u}\\)$`);var y={aliceblue:15792383,antiquewhite:16444375,aqua:65535,aquamarine:8388564,azure:15794175,beige:16119260,bisque:16770244,black:0,blanchedalmond:16772045,blue:255,blueviolet:9055202,brown:10824234,burlywood:14596231,cadetblue:6266528,chartreuse:8388352,chocolate:13789470,coral:16744272,cornflowerblue:6591981,cornsilk:16775388,crimson:14423100,cyan:65535,darkblue:139,darkcyan:35723,darkgoldenrod:12092939,darkgray:11119017,darkgreen:25600,darkgrey:11119017,darkkhaki:12433259,darkmagenta:9109643,darkolivegreen:5597999,darkorange:16747520,darkorchid:10040012,darkred:9109504,darksalmon:15308410,darkseagreen:9419919,darkslateblue:4734347,darkslategray:3100495,darkslategrey:3100495,darkturquoise:52945,darkviolet:9699539,deeppink:16716947,deepskyblue:49151,dimgray:6908265,dimgrey:6908265,dodgerblue:2003199,firebrick:11674146,floralwhite:16775920,forestgreen:2263842,fuchsia:16711935,gainsboro:14474460,ghostwhite:16316671,gold:16766720,goldenrod:14329120,gray:8421504,green:32768,greenyellow:11403055,grey:8421504,honeydew:15794160,hotpink:16738740,indianred:13458524,indigo:4915330,ivory:16777200,khaki:15787660,lavender:15132410,lavenderblush:16773365,lawngreen:8190976,lemonchiffon:16775885,lightblue:11393254,lightcoral:15761536,lightcyan:14745599,lightgoldenrodyellow:16448210,lightgray:13882323,lightgreen:9498256,lightgrey:13882323,lightpink:16758465,lightsalmon:16752762,lightseagreen:2142890,lightskyblue:8900346,lightslategray:7833753,lightslategrey:7833753,lightsteelblue:11584734,lightyellow:16777184,lime:65280,limegreen:3329330,linen:16445670,magenta:16711935,maroon:8388608,mediumaquamarine:6737322,mediumblue:205,mediumorchid:12211667,mediumpurple:9662683,mediumseagreen:3978097,mediumslateblue:8087790,mediumspringgreen:64154,mediumturquoise:4772300,mediumvioletred:13047173,midnightblue:1644912,mintcream:16121850,mistyrose:16770273,moccasin:16770229,navajowhite:16768685,navy:128,oldlace:16643558,olive:8421376,olivedrab:7048739,orange:16753920,orangered:16729344,orchid:14315734,palegoldenrod:15657130,palegreen:10025880,paleturquoise:11529966,palevioletred:14381203,papayawhip:16773077,peachpuff:16767673,peru:13468991,pink:16761035,plum:14524637,powderblue:11591910,purple:8388736,rebeccapurple:6697881,red:16711680,rosybrown:12357519,royalblue:4286945,saddlebrown:9127187,salmon:16416882,sandybrown:16032864,seagreen:3050327,seashell:16774638,sienna:10506797,silver:12632256,skyblue:8900331,slateblue:6970061,slategray:7372944,slategrey:7372944,snow:16775930,springgreen:65407,steelblue:4620980,tan:13808780,teal:32896,thistle:14204888,tomato:16737095,turquoise:4251856,violet:15631086,wheat:16113331,white:16777215,whitesmoke:16119285,yellow:16776960,yellowgreen:10145074};e(h,p,{copy(t){return Object.assign(new this.constructor,this,t)},displayable(){return this.rgb().displayable()},hex:f,formatHex:f,formatHex8:I,formatHsl:P,formatRgb:V,toString:V});function f(){return this.rgb().formatHex()}function I(){return this.rgb().formatHex8()}function P(){return Z(this).formatHsl()}function V(){return this.rgb().formatRgb()}function p(t){var e,s;t=(t+"").trim().toLowerCase();return(e=O.exec(t))?(s=e[1].length,e=parseInt(e[1],16),s===6?W(e):s===3?new g(e>>8&15|e>>4&240,e>>4&15|e&240,(e&15)<<4|e&15,1):s===8?_(e>>24&255,e>>16&255,e>>8&255,(e&255)/255):s===4?_(e>>12&15|e>>8&240,e>>8&15|e>>4&240,e>>4&15|e&240,((e&15)<<4|e&15)/255):null):(e=L.exec(t))?new g(e[1],e[2],e[3],1):(e=A.exec(t))?new g(e[1]*255/100,e[2]*255/100,e[3]*255/100,1):(e=B.exec(t))?_(e[1],e[2],e[3],e[4]):(e=D.exec(t))?_(e[1]*255/100,e[2]*255/100,e[3]*255/100,e[4]):(e=F.exec(t))?Y(e[1],e[2]/100,e[3]/100,1):(e=G.exec(t))?Y(e[1],e[2]/100,e[3]/100,e[4]):y.hasOwnProperty(t)?W(y[t]):t==="transparent"?new g(NaN,NaN,NaN,0):null}function W(t){return new g(t>>16&255,t>>8&255,t&255,1)}function _(t,e,s,r){if(r<=0)t=e=s=NaN;return new g(t,e,s,r)}function J(t){if(!(t instanceof h))t=p(t);if(!t)return new g;t=t.rgb();return new g(t.r,t.g,t.b,t.opacity)}function K(t,e,s,r){return arguments.length===1?J(t):new g(t,e,s,r==null?1:r)}function g(t,e,s,r){this.r=+t;this.g=+e;this.b=+s;this.opacity=+r}e(g,K,o(h,{brighter(t){t=t==null?a:Math.pow(a,t);return new g(this.r*t,this.g*t,this.b*t,this.opacity)},darker(t){t=t==null?l:Math.pow(l,t);return new g(this.r*t,this.g*t,this.b*t,this.opacity)},rgb(){return this},clamp(){return new g(m(this.r),m(this.g),m(this.b),b(this.opacity))},displayable(){return-.5<=this.r&&this.r<255.5&&(-.5<=this.g&&this.g<255.5)&&(-.5<=this.b&&this.b<255.5)&&(0<=this.opacity&&this.opacity<=1)},hex:Q,formatHex:Q,formatHex8:U,formatRgb:X,toString:X}));function Q(){return`#${w(this.r)}${w(this.g)}${w(this.b)}`}function U(){return`#${w(this.r)}${w(this.g)}${w(this.b)}${w((isNaN(this.opacity)?1:this.opacity)*255)}`}function X(){const t=b(this.opacity);return`${t===1?"rgb(":"rgba("}${m(this.r)}, ${m(this.g)}, ${m(this.b)}${t===1?")":`, ${t})`}`}function b(t){return isNaN(t)?1:Math.max(0,Math.min(1,t))}function m(t){return Math.max(0,Math.min(255,Math.round(t)||0))}function w(t){t=m(t);return(t<16?"0":"")+t.toString(16)}function Y(t,e,s,r){if(r<=0)t=e=s=NaN;else if(s<=0||s>=1)t=e=NaN;else if(e<=0)t=NaN;return new v(t,e,s,r)}function Z(t){if(t instanceof v)return new v(t.h,t.s,t.l,t.opacity);if(!(t instanceof h))t=p(t);if(!t)return new v;if(t instanceof v)return t;t=t.rgb();var e=t.r/255,s=t.g/255,r=t.b/255,i=Math.min(e,s,r),n=Math.max(e,s,r),o=NaN,l=n-i,a=(n+i)/2;if(l){if(e===n)o=(s-r)/l+(s<r)*6;else if(s===n)o=(r-e)/l+2;else o=(e-s)/l+4;l/=a<.5?n+i:2-n-i;o*=60}else{l=a>0&&a<1?0:o}return new v(o,l,a,t.opacity)}function tt(t,e,s,r){return arguments.length===1?Z(t):new v(t,e,s,r==null?1:r)}function v(t,e,s,r){this.h=+t;this.s=+e;this.l=+s;this.opacity=+r}e(v,tt,o(h,{brighter(t){t=t==null?a:Math.pow(a,t);return new v(this.h,this.s,this.l*t,this.opacity)},darker(t){t=t==null?l:Math.pow(l,t);return new v(this.h,this.s,this.l*t,this.opacity)},rgb(){var t=this.h%360+(this.h<0)*360,e=isNaN(t)||isNaN(this.s)?0:this.s,s=this.l,r=s+(s<.5?s:1-s)*e,i=2*s-r;return new g(k(t>=240?t-240:t+120,i,r),k(t,i,r),k(t<120?t+240:t-120,i,r),this.opacity)},clamp(){return new v(et(this.h),x(this.s),x(this.l),b(this.opacity))},displayable(){return(0<=this.s&&this.s<=1||isNaN(this.s))&&(0<=this.l&&this.l<=1)&&(0<=this.opacity&&this.opacity<=1)},formatHsl(){const t=b(this.opacity);return`${t===1?"hsl(":"hsla("}${et(this.h)}, ${x(this.s)*100}%, ${x(this.l)*100}%${t===1?")":`, ${t})`}`}}));function et(t){t=(t||0)%360;return t<0?t+360:t}function x(t){return Math.max(0,Math.min(1,t||0))}function k(t,e,s){return(t<60?e+(s-e)*t/60:t<180?s:t<240?e+(s-e)*(240-t)/60:e)*255}var $="$";function N(){}N.prototype=st.prototype={constructor:N,has:function(t){return $+t in this},get:function(t){return this[$+t]},set:function(t,e){this[$+t]=e;return this},remove:function(t){var e=$+t;return e in this&&delete this[e]},clear:function(){for(var t in this)if(t[0]===$)delete this[t]},keys:function(){var t=[];for(var e in this)if(e[0]===$)t.push(e.slice(1));return t},values:function(){var t=[];for(var e in this)if(e[0]===$)t.push(this[e]);return t},entries:function(){var t=[];for(var e in this)if(e[0]===$)t.push({key:e.slice(1),value:this[e]});return t},size:function(){var t=0;for(var e in this)if(e[0]===$)++t;return t},empty:function(){for(var t in this)if(t[0]===$)return false;return true},each:function(t){for(var e in this)if(e[0]===$)t(this[e],e.slice(1),this)}};function st(t,e){var s=new N;if(t instanceof N)t.each(function(t,e){s.set(e,t)});else if(Array.isArray(t)){var r=-1,i=t.length,n;if(e==null)while(++r<i)s.set(r,t[r]);else while(++r<i)s.set(e(n=t[r],r,t),n)}else if(t)for(var o in t)s.set(o,t[o]);return s}function rt(){}var C=st.prototype;rt.prototype={constructor:rt,has:C.has,add:function(t){t+="";this[$+t]=t;return this},remove:C.remove,clear:C.clear,values:C.keys,size:C.size,empty:C.empty,each:C.each};const it=typeof window!=="undefined"&&typeof document!=="undefined"&&typeof document.createElement==="function"&&typeof document.body?.appendChild==="function"&&typeof HTMLElement!=="undefined";const S=document.createElement("canvas");const z=S.getContext("2d");const E=document.createElementNS("http://www.w3.org/2000/svg","svg");const M=document.createElementNS("http://www.w3.org/2000/svg","text");E.appendChild(M);if(it){S.style.position="fixed";S.style.left="1000vw";E.style.position="fixed";E.style.left="1000vw";document.body.appendChild(S);document.body.appendChild(E)}let T=null;function nt(){return window.getComputedStyle(document.body).direction||"ltr"}function ot(t,e){if(typeof t!="string")return false;var s=p(t);s.opacity=e!==undefined?e:1;return s}function H(t,e){var s=ot(t,e);return s?s.toString():false}function lt(){const t="0123456789.,£";const e=document.createElement("canvas");const s=document.createElement("canvas");const r=e.getContext("2d");const i=s.getContext("2d");e.setAttribute("style","font-feature-settings: normal; font-variant-numeric: normal; position: fixed; left: 1000vw;");s.setAttribute("style",'font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; position: fixed; left: 1000vw;');r.font=i.font=z.font;document.body.appendChild(e);document.body.appendChild(s);const n=r.measureText(t).width;const o=i.measureText(t).width;T=n!==o;document.body.removeChild(e);document.body.removeChild(s);return T}z.measureTextWithTnums=function(t){if(!it)return z.measureText(t);const e=window.getComputedStyle(this.canvas);const s=(e.fontFeatureSettings||"").includes("tnum")||(e.fontVariantNumeric||"").includes("tabular-nums");if(!s)return this.measureText(t);if(T===null)lt();if(T)return this.measureText(t);M.textContent=t;M.setAttribute("style",`font: ${z.font}; font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; position: fixed; left: 1000vw;`);let r=M.getBBox().width;const i=this.measureText(t);return{...i,width:r}};var at=Object.freeze({background:null,font_color:null,background_selected:"#333333",font_color_selected:"#ffffff",background_hover:null,font_color_hover:null,border_width:1,border_transparency:.25,border_color:null,border_radius:3});function q(t,e,s){this._state=t;for(var r in at){if(this._state[r]===undefined)this._state[r]=at[r]}this._layout=s||{};this._styles=new i;this._selector=e;this._createStylesheet();return this}q.prototype._createStylesheet=function(){this._stylesheet=document.createElement("style");this._stylesheet.className="fl-ui-styles-button";document.head.appendChild(this._stylesheet)};q.prototype.update=function(){this._styles.clear();var t=this._state.background||(this._layout.background_color_enabled?this._layout.background_color||"#ffffff":"#ffffff");var e=this._state.font_color||this._layout.font_color||"#333333";var s=H(this._state.border_color||e,this._state.border_transparency);var r=nt();this._styles.select(this._selector+".fl-control.hidden").style("display","none");this._styles.select(this._selector+".fl-control .button").style("overflow","hidden").style("white-space","nowrap").style("margin","0 2px 0 0 !important").style("background-color",t).style("color",e).style("border",this._state.border_width+"px solid "+s).style("border-radius",this._state.border_radius+"px");this._styles.select(this._selector+".fl-control .button:hover").style("background-color",this._state.background_hover||t).style("color",this._state.font_color_hover||e);this._styles.select(this._selector+".fl-control .button.selected").style("background-color",this._state.background_selected).style("color",this._state.font_color_selected);this._styles.select(this._selector+".grouped.fl-control .button").style("border-right","none").style("border-radius","0").style("margin","0");var i=r==="rtl";var n=i?":last-child":":first-child";var o=i?":first-child":":last-child";this._styles.select(this._selector+".grouped.fl-control .button"+n).style("border-radius",this._state.border_radius+"px 0 0 "+this._state.border_radius+"px");this._styles.select(this._selector+".grouped.fl-control .button"+o).style("border-radius","0 "+this._state.border_radius+"px "+this._state.border_radius+"px 0").style("border-right",this._state.border_width+"px solid "+s);this._styles.select(this._selector+".grouped.fl-control.fixed-width:not(.hidden)").style("width",this._state.grouped_width+"%");this._stylesheet.innerHTML=this._styles.print()};var ht=Object.freeze({background:null,font_color:null,border_style:"bottom",border_width:1,border_color:null,border_transparency:.25,border_radius:3});function R(t,e,s){this._state=t;for(var r in ht){if(this._state[r]===undefined)this._state[r]=ht[r]}this._layout=s||{};this._styles=new i;this._selector=e;this._createStylesheet();return this}R.prototype._createStylesheet=function(){this._stylesheet=document.createElement("style");this._stylesheet.className="fl-ui-styles-dropdown";document.head.appendChild(this._stylesheet)};R.prototype.update=function(){this._styles.clear();const t=this._state.background||"transparent";const e=this._state.font_color||this._layout.font_color;const s=e||"inherit";let r;if(this._state.border_color){r=H(this._state.border_color,this._state.border_transparency)}else if(e){r=H(e,this._state.border_transparency)}else{r="currentColor"}this._styles.select(this._selector+" .heading").style("margin-bottom","0.4em");this._styles.select(this._selector).style("pointer-events","all");this._styles.select(this._selector+" select").style("display","inline-block").style("cursor","pointer").style("overflow","hidden").style("white-space","nowrap").style("position","relative").style("font-family","inherit").style("background-color",t).style("color",s).style("border",this._state.border_style=="bottom"?this._state.border_width+"px solid transparent":this._state.border_width+"px solid "+r).style("border-bottom",this._state.border_style=="bottom"?this._state.border_width+"px solid "+r:null).style("border-radius",this._state.border_style=="bottom"?null:this._state.border_radius+"px");this._styles.select(this._selector+":after").style("right",this._state.border_style=="bottom"?null:this._state.border_width+5+"px").style("color",s);this._styles.select(this._selector+" .main .current").style("line-height","1em").style("height","100%").style("max-width","88%").style("display","inline-block").style("overflow","hidden").style("vertical-align","top");this._styles.select(this._selector+" .list").style("top","2px").style("min-width","100%").style("padding","2px").style("display","none").style("max-height","200px").style("overflow-y","auto").style("box-shadow","0 1px 4px rgba(0, 0, 0, .1)").style("margin-top","2px").select(".list-item").style("line-height","1em").style("cursor","pointer").style("font-weight","normal").style("color",s);this._styles.select(this._selector+".open .list").style("display","block").style("border",this._state.border_width+"px solid "+r).style("background-color",t).style("z-index","1").style("animation","dropdown-out 200ms");this._styles.select(this._selector+" .list-item:hover").style("opacity","0.6");this._styles.select(this._selector+" .list-item.selected, "+this._selector+" .list-item.selected:hover").style("opacity","1").style("cursor","default");if(this._state.border_style=="bottom"){this._styles.select(this._selector+" .main").style("padding-left",0).style("padding-right","0.1rem")}this._stylesheet.innerHTML=this._styles.print()};function ct(t){return t*parseFloat(getComputedStyle(document.documentElement).fontSize)}var ut=Object.freeze({play_color:null,handle_color:null,font_color:null,track_color:null,handle_height:1,track_height:.2,margin:4.5,play_button:true});function j(t,e,s){this._state=t;for(var r in ut){if(this._state[r]===undefined)this._state[r]=ut[r]}this._layout=s||{};this._styles=new i;this._selector=e;this._createStylesheet();return this}j.prototype._createStylesheet=function(){this._stylesheet=document.createElement("style");this._stylesheet.className="fl-ui-styles-slider";document.head.appendChild(this._stylesheet)};j.prototype.update=function(){this._styles.clear();var t=this._state.track_color||"#dddddd";var e=this._state.font_color||this._layout.font_color||"currentColor";var s="currentColor";var r=this._state.handle_color||this._layout.font_color||"currentColor";var i=this._state.play_color||this._layout.font_color||"currentColor";var n=Math.round(ct(this._state.handle_height));var o=ct(this._state.track_height);this._styles.select(this._selector+" .fl-controls-slider").style("height",n*2+"px");this._styles.select(this._selector+" .slider-play").style("fill",i).style("width",n+"px").style("height",n+"px").style("display",this._state.play_button?null:"none");this._styles.select(this._selector+" .slider-label").style("padding-inline-start","0.3rem").style("box-sizing","content-box").style("color",e);this._styles.select(this._selector+" input[type=range]").style("-webkit-appearance","none").style("color",s).style("background-color","transparent");this._styles.select(this._selector+" input[type=range]::-webkit-slider-runnable-track").style("-webkit-appearance","none").style("background",t).style("border-radius","100px").style("height",o+"px");this._styles.select(this._selector+" input[type=range]::-webkit-slider-thumb").style("-webkit-appearance","none").style("width",n+"px").style("height",n+"px").style("border-radius","100px").style("background",r).style("margin-top",-n/2+o/2+"px");this._styles.select(this._selector+" input[type=range]::-moz-range-track").style("-webkit-appearance","none").style("background",t).style("border-radius","100px").style("height",o+"px");this._styles.select(this._selector+" input[type=range]::-moz-range-thumb").style("-webkit-appearance","none").style("width",n+"px").style("height",n+"px").style("border-radius","100px").style("border","none").style("background",r);this._stylesheet.innerHTML=this._styles.print()};function dt(t,e,s){return new r(t,e,s)}function yt(t,e,s){return new q(t,e,s)}function ft(t,e,s){return new R(t,e,s)}function pt(t,e,s){return new j(t,e,s)}t.createButtonStyle=yt;t.createDropdownStyle=ft;t.createGeneralControlsStyle=dt;t.createSliderStyle=pt});