@flourish/controls - npm Package Compare versions

Comparing version 2.3.0 to 2.4.1

cypress/fixtures/ui-styles.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-        typeof define === 'function' && define.amd ? define(['exports'], factory) :
-            (global = global || self, factory(global['uiStyles'] = {}));
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+		typeof define === 'function' && define.amd ? define(['exports'], factory) :
+			(global = global || self, factory(global['uiStyles'] = {}));
 }(this, (function (exports) {
-    'use strict';
+	'use strict';
 
-    function Stylesheet() {
-        this.declarations = [];
-        return this;
-    }
+	function Stylesheet() {
+		this.declarations = [];
+		return this;
+	}
 
-    Stylesheet.prototype.select = function (selector) {
-        if (!selector) return this;
-        var declaration = new Declaration(selector, this);
-        declaration.parent = this;
-        this.addDeclaration(declaration);
+	Stylesheet.prototype.select = function (selector) {
+		if (!selector) return this;
+		var declaration = new Declaration(selector, this);
+		declaration.parent = this;
+		this.addDeclaration(declaration);
 
-        return declaration;
-    };
+		return declaration;
+	};
 
-    Stylesheet.prototype.addDeclaration = function (declaration) {
-        this.declarations.push(declaration);
-        return this;
-    };
+	Stylesheet.prototype.addDeclaration = function (declaration) {
+		this.declarations.push(declaration);
+		return this;
+	};
 
-    Stylesheet.prototype.print = function () {
-        var text = "";
-        this.declarations.forEach(function (declaration) {
-            text += declaration.selector + " {\n";
-            declaration.styles.forEach(function (style) {
-                text += "\t" + style[0] + ": " + style[1] + ";\n";
-            });
-            text += "}\n\n";
-        });
-        return text;
-    };
+	Stylesheet.prototype.print = function () {
+		var text = "";
+		this.declarations.forEach(function (declaration) {
+			text += declaration.selector + " {\n";
+			declaration.styles.forEach(function (style) {
+				text += "\t" + style[0] + ": " + style[1] + ";\n";
+			});
+			text += "}\n\n";
+		});
+		return text;
+	};
 
-    Stylesheet.prototype.clear = function () {
-        this.declarations = [];
-        return this;
-    };
+	Stylesheet.prototype.clear = function () {
+		this.declarations = [];
+		return this;
+	};
 
-    function Declaration(selector) {
-        this.selector = selector;
-        this.styles = [];
-        return this;
-    }
+	function Declaration(selector) {
+		this.selector = selector;
+		this.styles = [];
+		return this;
+	}
 
-    Declaration.prototype.style = function (property, _value) {
-        var value = typeof value_ == "function" ? _value() : _value;
-        if (value !== "" && value !== null && value !== undefined) this.styles.push([property, value]);
-        return this;
-    };
+	Declaration.prototype.style = function (property, _value) {
+		var value = typeof value_ == "function" ? _value() : _value;
+		if (value !== "" && value !== null && value !== undefined) this.styles.push([property, value]);
+		return this;
+	};
 
-    Declaration.prototype.select = function (selector) {
-        return this.parent.select(this.selector + " " + selector);
-    };
+	Declaration.prototype.select = function (selector) {
+		return this.parent.select(this.selector + " " + selector);
+	};
 
-    var DEFAULTS = Object.freeze({
-        font_size: 1,
-        font_weight: "bold",
-        padding: 0.4,
-    });
+	var DEFAULTS = Object.freeze({
+		font_size: 1,
+		font_weight: "bold",
+		padding: 0.4,
+	});
 
-    function GeneralControlsStyle(state_, selector_, layout_) {
-        this._state = state_;
-        for (var key in DEFAULTS) { if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
+	function GeneralControlsStyle(state_, selector_, layout_) {
+		this._state = state_;
+		for (var key in DEFAULTS) { if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
 
-        this._layout = layout_ || {};
+		this._layout = layout_ || {};
 
-        this._styles = new Stylesheet();
-        this._selector = selector_;
-        this._createStylesheet();
+		this._styles = new Stylesheet();
+		this._selector = selector_;
+		this._createStylesheet();
 
-        return this;
-    }
+		return this;
+	}
 
-    GeneralControlsStyle.prototype._createStylesheet = function () {
-        this._stylesheet = document.createElement("style");
-        this._stylesheet.className = "fl-ui-styles-controls";
-        document.head.appendChild(this._stylesheet);
-    };
+	GeneralControlsStyle.prototype._createStylesheet = function () {
+		this._stylesheet = document.createElement("style");
+		this._stylesheet.className = "fl-ui-styles-controls";
+		document.head.appendChild(this._stylesheet);
+	};
 
-    GeneralControlsStyle.prototype.update = function () {
-        this._styles.clear();
+	GeneralControlsStyle.prototype.update = function () {
+		this._styles.clear();
 
-        this._styles.select(this._selector + ".hidden")
-            .style("display", "none");
+		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(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(".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("padding", this._state.padding + "rem " + (this._state.padding * 2) + "rem");
+		this._styles.select(this._selector + ".fl-control .button")
+			.style("padding", this._state.padding + "rem " + (this._state.padding * 2) + "rem");
 
-        this._styles.select(this._selector + " .list-item")
-            .style("padding", Math.max(this._state.padding, 0.5) + "rem");
+		this._styles.select(this._selector + " .list-item")
+			.style("padding", Math.max(this._state.padding, 0.5) + "rem");
 
-        this._styles.select(this._selector + "-dropdown .main")
-            .style("padding", this._state.padding + "rem " + (this._state.padding * 1.5) + "rem");
+		this._styles.select(this._selector + "-dropdown .main")
+			.style("padding", this._state.padding + "rem " + (this._state.padding * 1.5) + "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 .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("padding", this._state.padding + "rem 0");
+		this._styles.select(this._selector + "-slider")
+			.style("padding", this._state.padding + "rem 0");
 
-        // Some additional styling for slider controls
-        // TODO: should move this somewhere else at some point
+		// Some additional styling for slider controls
+		// TODO: should move this somewhere else at some point
 
-        this._stylesheet.innerHTML = this._styles.print();
-    };
+		this._stylesheet.innerHTML = this._styles.print();
+	};
 
-    function define(constructor, factory, prototype) {
-        constructor.prototype = factory.prototype = prototype;
-        prototype.constructor = constructor;
-    }
+	function define(constructor, factory, prototype) {
+		constructor.prototype = factory.prototype = prototype;
+		prototype.constructor = constructor;
+	}
 
-    function extend(parent, definition) {
-        var prototype = Object.create(parent.prototype);
-        for (var key in definition) prototype[key] = definition[key];
-        return prototype;
-    }
+	function extend(parent, definition) {
+		var prototype = Object.create(parent.prototype);
+		for (var key in definition) prototype[key] = definition[key];
+		return prototype;
+	}
 
-    function Color() { }
+	function Color() { }
 
-    var darker = 0.7;
-    var brighter = 1 / darker;
+	var darker = 0.7;
+	var brighter = 1 / darker;
 
-    var reI = "\\s*([+-]?\\d+)\\s*",
-        reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",
-        reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
-        reHex = /^#([0-9a-f]{3,8})$/,
-        reRgbInteger = new RegExp("^rgb\\(" + [reI, reI, reI] + "\\)$"),
-        reRgbPercent = new RegExp("^rgb\\(" + [reP, reP, reP] + "\\)$"),
-        reRgbaInteger = new RegExp("^rgba\\(" + [reI, reI, reI, reN] + "\\)$"),
-        reRgbaPercent = new RegExp("^rgba\\(" + [reP, reP, reP, reN] + "\\)$"),
-        reHslPercent = new RegExp("^hsl\\(" + [reN, reP, reP] + "\\)$"),
-        reHslaPercent = new RegExp("^hsla\\(" + [reN, reP, reP, reN] + "\\)$");
+	var reI = "\\s*([+-]?\\d+)\\s*",
+		reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",
+		reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
+		reHex = /^#([0-9a-f]{3,8})$/,
+		reRgbInteger = new RegExp("^rgb\\(" + [reI, reI, reI] + "\\)$"),
+		reRgbPercent = new RegExp("^rgb\\(" + [reP, reP, reP] + "\\)$"),
+		reRgbaInteger = new RegExp("^rgba\\(" + [reI, reI, reI, reN] + "\\)$"),
+		reRgbaPercent = new RegExp("^rgba\\(" + [reP, reP, reP, reN] + "\\)$"),
+		reHslPercent = new RegExp("^hsl\\(" + [reN, reP, reP] + "\\)$"),
+		reHslaPercent = new RegExp("^hsla\\(" + [reN, reP, reP, reN] + "\\)$");
 
-    var named = {
-        aliceblue: 0xf0f8ff,
-        antiquewhite: 0xfaebd7,
-        aqua: 0x00ffff,
-        aquamarine: 0x7fffd4,
-        azure: 0xf0ffff,
-        beige: 0xf5f5dc,
-        bisque: 0xffe4c4,
-        black: 0x000000,
-        blanchedalmond: 0xffebcd,
-        blue: 0x0000ff,
-        blueviolet: 0x8a2be2,
-        brown: 0xa52a2a,
-        burlywood: 0xdeb887,
-        cadetblue: 0x5f9ea0,
-        chartreuse: 0x7fff00,
-        chocolate: 0xd2691e,
-        coral: 0xff7f50,
-        cornflowerblue: 0x6495ed,
-        cornsilk: 0xfff8dc,
-        crimson: 0xdc143c,
-        cyan: 0x00ffff,
-        darkblue: 0x00008b,
-        darkcyan: 0x008b8b,
-        darkgoldenrod: 0xb8860b,
-        darkgray: 0xa9a9a9,
-        darkgreen: 0x006400,
-        darkgrey: 0xa9a9a9,
-        darkkhaki: 0xbdb76b,
-        darkmagenta: 0x8b008b,
-        darkolivegreen: 0x556b2f,
-        darkorange: 0xff8c00,
-        darkorchid: 0x9932cc,
-        darkred: 0x8b0000,
-        darksalmon: 0xe9967a,
-        darkseagreen: 0x8fbc8f,
-        darkslateblue: 0x483d8b,
-        darkslategray: 0x2f4f4f,
-        darkslategrey: 0x2f4f4f,
-        darkturquoise: 0x00ced1,
-        darkviolet: 0x9400d3,
-        deeppink: 0xff1493,
-        deepskyblue: 0x00bfff,
-        dimgray: 0x696969,
-        dimgrey: 0x696969,
-        dodgerblue: 0x1e90ff,
-        firebrick: 0xb22222,
-        floralwhite: 0xfffaf0,
-        forestgreen: 0x228b22,
-        fuchsia: 0xff00ff,
-        gainsboro: 0xdcdcdc,
-        ghostwhite: 0xf8f8ff,
-        gold: 0xffd700,
-        goldenrod: 0xdaa520,
-        gray: 0x808080,
-        green: 0x008000,
-        greenyellow: 0xadff2f,
-        grey: 0x808080,
-        honeydew: 0xf0fff0,
-        hotpink: 0xff69b4,
-        indianred: 0xcd5c5c,
-        indigo: 0x4b0082,
-        ivory: 0xfffff0,
-        khaki: 0xf0e68c,
-        lavender: 0xe6e6fa,
-        lavenderblush: 0xfff0f5,
-        lawngreen: 0x7cfc00,
-        lemonchiffon: 0xfffacd,
-        lightblue: 0xadd8e6,
-        lightcoral: 0xf08080,
-        lightcyan: 0xe0ffff,
-        lightgoldenrodyellow: 0xfafad2,
-        lightgray: 0xd3d3d3,
-        lightgreen: 0x90ee90,
-        lightgrey: 0xd3d3d3,
-        lightpink: 0xffb6c1,
-        lightsalmon: 0xffa07a,
-        lightseagreen: 0x20b2aa,
-        lightskyblue: 0x87cefa,
-        lightslategray: 0x778899,
-        lightslategrey: 0x778899,
-        lightsteelblue: 0xb0c4de,
-        lightyellow: 0xffffe0,
-        lime: 0x00ff00,
-        limegreen: 0x32cd32,
-        linen: 0xfaf0e6,
-        magenta: 0xff00ff,
-        maroon: 0x800000,
-        mediumaquamarine: 0x66cdaa,
-        mediumblue: 0x0000cd,
-        mediumorchid: 0xba55d3,
-        mediumpurple: 0x9370db,
-        mediumseagreen: 0x3cb371,
-        mediumslateblue: 0x7b68ee,
-        mediumspringgreen: 0x00fa9a,
-        mediumturquoise: 0x48d1cc,
-        mediumvioletred: 0xc71585,
-        midnightblue: 0x191970,
-        mintcream: 0xf5fffa,
-        mistyrose: 0xffe4e1,
-        moccasin: 0xffe4b5,
-        navajowhite: 0xffdead,
-        navy: 0x000080,
-        oldlace: 0xfdf5e6,
-        olive: 0x808000,
-        olivedrab: 0x6b8e23,
-        orange: 0xffa500,
-        orangered: 0xff4500,
-        orchid: 0xda70d6,
-        palegoldenrod: 0xeee8aa,
-        palegreen: 0x98fb98,
-        paleturquoise: 0xafeeee,
-        palevioletred: 0xdb7093,
-        papayawhip: 0xffefd5,
-        peachpuff: 0xffdab9,
-        peru: 0xcd853f,
-        pink: 0xffc0cb,
-        plum: 0xdda0dd,
-        powderblue: 0xb0e0e6,
-        purple: 0x800080,
-        rebeccapurple: 0x663399,
-        red: 0xff0000,
-        rosybrown: 0xbc8f8f,
-        royalblue: 0x4169e1,
-        saddlebrown: 0x8b4513,
-        salmon: 0xfa8072,
-        sandybrown: 0xf4a460,
-        seagreen: 0x2e8b57,
-        seashell: 0xfff5ee,
-        sienna: 0xa0522d,
-        silver: 0xc0c0c0,
-        skyblue: 0x87ceeb,
-        slateblue: 0x6a5acd,
-        slategray: 0x708090,
-        slategrey: 0x708090,
-        snow: 0xfffafa,
-        springgreen: 0x00ff7f,
-        steelblue: 0x4682b4,
-        tan: 0xd2b48c,
-        teal: 0x008080,
-        thistle: 0xd8bfd8,
-        tomato: 0xff6347,
-        turquoise: 0x40e0d0,
-        violet: 0xee82ee,
-        wheat: 0xf5deb3,
-        white: 0xffffff,
-        whitesmoke: 0xf5f5f5,
-        yellow: 0xffff00,
-        yellowgreen: 0x9acd32
-    };
+	var named = {
+		aliceblue: 0xf0f8ff,
+		antiquewhite: 0xfaebd7,
+		aqua: 0x00ffff,
+		aquamarine: 0x7fffd4,
+		azure: 0xf0ffff,
+		beige: 0xf5f5dc,
+		bisque: 0xffe4c4,
+		black: 0x000000,
+		blanchedalmond: 0xffebcd,
+		blue: 0x0000ff,
+		blueviolet: 0x8a2be2,
+		brown: 0xa52a2a,
+		burlywood: 0xdeb887,
+		cadetblue: 0x5f9ea0,
+		chartreuse: 0x7fff00,
+		chocolate: 0xd2691e,
+		coral: 0xff7f50,
+		cornflowerblue: 0x6495ed,
+		cornsilk: 0xfff8dc,
+		crimson: 0xdc143c,
+		cyan: 0x00ffff,
+		darkblue: 0x00008b,
+		darkcyan: 0x008b8b,
+		darkgoldenrod: 0xb8860b,
+		darkgray: 0xa9a9a9,
+		darkgreen: 0x006400,
+		darkgrey: 0xa9a9a9,
+		darkkhaki: 0xbdb76b,
+		darkmagenta: 0x8b008b,
+		darkolivegreen: 0x556b2f,
+		darkorange: 0xff8c00,
+		darkorchid: 0x9932cc,
+		darkred: 0x8b0000,
+		darksalmon: 0xe9967a,
+		darkseagreen: 0x8fbc8f,
+		darkslateblue: 0x483d8b,
+		darkslategray: 0x2f4f4f,
+		darkslategrey: 0x2f4f4f,
+		darkturquoise: 0x00ced1,
+		darkviolet: 0x9400d3,
+		deeppink: 0xff1493,
+		deepskyblue: 0x00bfff,
+		dimgray: 0x696969,
+		dimgrey: 0x696969,
+		dodgerblue: 0x1e90ff,
+		firebrick: 0xb22222,
+		floralwhite: 0xfffaf0,
+		forestgreen: 0x228b22,
+		fuchsia: 0xff00ff,
+		gainsboro: 0xdcdcdc,
+		ghostwhite: 0xf8f8ff,
+		gold: 0xffd700,
+		goldenrod: 0xdaa520,
+		gray: 0x808080,
+		green: 0x008000,
+		greenyellow: 0xadff2f,
+		grey: 0x808080,
+		honeydew: 0xf0fff0,
+		hotpink: 0xff69b4,
+		indianred: 0xcd5c5c,
+		indigo: 0x4b0082,
+		ivory: 0xfffff0,
+		khaki: 0xf0e68c,
+		lavender: 0xe6e6fa,
+		lavenderblush: 0xfff0f5,
+		lawngreen: 0x7cfc00,
+		lemonchiffon: 0xfffacd,
+		lightblue: 0xadd8e6,
+		lightcoral: 0xf08080,
+		lightcyan: 0xe0ffff,
+		lightgoldenrodyellow: 0xfafad2,
+		lightgray: 0xd3d3d3,
+		lightgreen: 0x90ee90,
+		lightgrey: 0xd3d3d3,
+		lightpink: 0xffb6c1,
+		lightsalmon: 0xffa07a,
+		lightseagreen: 0x20b2aa,
+		lightskyblue: 0x87cefa,
+		lightslategray: 0x778899,
+		lightslategrey: 0x778899,
+		lightsteelblue: 0xb0c4de,
+		lightyellow: 0xffffe0,
+		lime: 0x00ff00,
+		limegreen: 0x32cd32,
+		linen: 0xfaf0e6,
+		magenta: 0xff00ff,
+		maroon: 0x800000,
+		mediumaquamarine: 0x66cdaa,
+		mediumblue: 0x0000cd,
+		mediumorchid: 0xba55d3,
+		mediumpurple: 0x9370db,
+		mediumseagreen: 0x3cb371,
+		mediumslateblue: 0x7b68ee,
+		mediumspringgreen: 0x00fa9a,
+		mediumturquoise: 0x48d1cc,
+		mediumvioletred: 0xc71585,
+		midnightblue: 0x191970,
+		mintcream: 0xf5fffa,
+		mistyrose: 0xffe4e1,
+		moccasin: 0xffe4b5,
+		navajowhite: 0xffdead,
+		navy: 0x000080,
+		oldlace: 0xfdf5e6,
+		olive: 0x808000,
+		olivedrab: 0x6b8e23,
+		orange: 0xffa500,
+		orangered: 0xff4500,
+		orchid: 0xda70d6,
+		palegoldenrod: 0xeee8aa,
+		palegreen: 0x98fb98,
+		paleturquoise: 0xafeeee,
+		palevioletred: 0xdb7093,
+		papayawhip: 0xffefd5,
+		peachpuff: 0xffdab9,
+		peru: 0xcd853f,
+		pink: 0xffc0cb,
+		plum: 0xdda0dd,
+		powderblue: 0xb0e0e6,
+		purple: 0x800080,
+		rebeccapurple: 0x663399,
+		red: 0xff0000,
+		rosybrown: 0xbc8f8f,
+		royalblue: 0x4169e1,
+		saddlebrown: 0x8b4513,
+		salmon: 0xfa8072,
+		sandybrown: 0xf4a460,
+		seagreen: 0x2e8b57,
+		seashell: 0xfff5ee,
+		sienna: 0xa0522d,
+		silver: 0xc0c0c0,
+		skyblue: 0x87ceeb,
+		slateblue: 0x6a5acd,
+		slategray: 0x708090,
+		slategrey: 0x708090,
+		snow: 0xfffafa,
+		springgreen: 0x00ff7f,
+		steelblue: 0x4682b4,
+		tan: 0xd2b48c,
+		teal: 0x008080,
+		thistle: 0xd8bfd8,
+		tomato: 0xff6347,
+		turquoise: 0x40e0d0,
+		violet: 0xee82ee,
+		wheat: 0xf5deb3,
+		white: 0xffffff,
+		whitesmoke: 0xf5f5f5,
+		yellow: 0xffff00,
+		yellowgreen: 0x9acd32
+	};
 
-    define(Color, color, {
-        copy: function (channels) {
-            return Object.assign(new this.constructor, this, channels);
-        },
-        displayable: function () {
-            return this.rgb().displayable();
-        },
-        hex: color_formatHex, // Deprecated! Use color.formatHex.
-        formatHex: color_formatHex,
-        formatHsl: color_formatHsl,
-        formatRgb: color_formatRgb,
-        toString: color_formatRgb
-    });
+	define(Color, color, {
+		copy: function (channels) {
+			return Object.assign(new this.constructor, this, channels);
+		},
+		displayable: function () {
+			return this.rgb().displayable();
+		},
+		hex: color_formatHex, // Deprecated! Use color.formatHex.
+		formatHex: color_formatHex,
+		formatHsl: color_formatHsl,
+		formatRgb: color_formatRgb,
+		toString: color_formatRgb
+	});
 
-    function color_formatHex() {
-        return this.rgb().formatHex();
-    }
+	function color_formatHex() {
+		return this.rgb().formatHex();
+	}
 
-    function color_formatHsl() {
-        return hslConvert(this).formatHsl();
-    }
+	function color_formatHsl() {
+		return hslConvert(this).formatHsl();
+	}
 
-    function color_formatRgb() {
-        return this.rgb().formatRgb();
-    }
+	function color_formatRgb() {
+		return this.rgb().formatRgb();
+	}
 
-    function color(format) {
-        var m, l;
-        format = (format + "").trim().toLowerCase();
-        return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000
-            : l === 3 ? new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1) // #f00
-                : l === 8 ? new Rgb(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
-                    : l === 4 ? new Rgb((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
-                        : null) // invalid hex
-            : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
-                : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
-                    : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
-                        : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
-                            : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
-                                : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
-                                    : named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins
-                                        : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0)
-                                            : null;
-    }
+	function color(format) {
+		var m, l;
+		format = (format + "").trim().toLowerCase();
+		return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000
+			: l === 3 ? new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1) // #f00
+				: l === 8 ? new Rgb(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
+					: l === 4 ? new Rgb((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
+						: null) // invalid hex
+			: (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
+				: (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
+					: (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
+						: (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
+							: (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
+								: (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
+									: named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins
+										: format === "transparent" ? new Rgb(NaN, NaN, NaN, 0)
+											: null;
+	}
 
-    function rgbn(n) {
-        return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
-    }
+	function rgbn(n) {
+		return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
+	}
 
-    function rgba(r, g, b, a) {
-        if (a <= 0) r = g = b = NaN;
-        return new Rgb(r, g, b, a);
-    }
+	function rgba(r, g, b, a) {
+		if (a <= 0) r = g = b = NaN;
+		return new Rgb(r, g, b, a);
+	}
 
-    function rgbConvert(o) {
-        if (!(o instanceof Color)) o = color(o);
-        if (!o) return new Rgb;
-        o = o.rgb();
-        return new Rgb(o.r, o.g, o.b, o.opacity);
-    }
+	function rgbConvert(o) {
+		if (!(o instanceof Color)) o = color(o);
+		if (!o) return new Rgb;
+		o = o.rgb();
+		return new Rgb(o.r, o.g, o.b, o.opacity);
+	}
 
-    function rgb(r, g, b, opacity) {
-        return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
-    }
+	function rgb(r, g, b, opacity) {
+		return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
+	}
 
-    function Rgb(r, g, b, opacity) {
-        this.r = +r;
-        this.g = +g;
-        this.b = +b;
-        this.opacity = +opacity;
-    }
+	function Rgb(r, g, b, opacity) {
+		this.r = +r;
+		this.g = +g;
+		this.b = +b;
+		this.opacity = +opacity;
+	}
 
-    define(Rgb, rgb, extend(Color, {
-        brighter: function (k) {
-            k = k == null ? brighter : Math.pow(brighter, k);
-            return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
-        },
-        darker: function (k) {
-            k = k == null ? darker : Math.pow(darker, k);
-            return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
-        },
-        rgb: function () {
-            return this;
-        },
-        displayable: function () {
-            return (-0.5 <= this.r && this.r < 255.5)
-                && (-0.5 <= this.g && this.g < 255.5)
-                && (-0.5 <= this.b && this.b < 255.5)
-                && (0 <= this.opacity && this.opacity <= 1);
-        },
-        hex: rgb_formatHex, // Deprecated! Use color.formatHex.
-        formatHex: rgb_formatHex,
-        formatRgb: rgb_formatRgb,
-        toString: rgb_formatRgb
-    }));
+	define(Rgb, rgb, extend(Color, {
+		brighter: function (k) {
+			k = k == null ? brighter : Math.pow(brighter, k);
+			return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+		},
+		darker: function (k) {
+			k = k == null ? darker : Math.pow(darker, k);
+			return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+		},
+		rgb: function () {
+			return this;
+		},
+		displayable: function () {
+			return (-0.5 <= this.r && this.r < 255.5)
+				&& (-0.5 <= this.g && this.g < 255.5)
+				&& (-0.5 <= this.b && this.b < 255.5)
+				&& (0 <= this.opacity && this.opacity <= 1);
+		},
+		hex: rgb_formatHex, // Deprecated! Use color.formatHex.
+		formatHex: rgb_formatHex,
+		formatRgb: rgb_formatRgb,
+		toString: rgb_formatRgb
+	}));
 
-    function rgb_formatHex() {
-        return "#" + hex(this.r) + hex(this.g) + hex(this.b);
-    }
+	function rgb_formatHex() {
+		return "#" + hex(this.r) + hex(this.g) + hex(this.b);
+	}
 
-    function rgb_formatRgb() {
-        var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
-        return (a === 1 ? "rgb(" : "rgba(")
-            + Math.max(0, Math.min(255, Math.round(this.r) || 0)) + ", "
-            + Math.max(0, Math.min(255, Math.round(this.g) || 0)) + ", "
-            + Math.max(0, Math.min(255, Math.round(this.b) || 0))
-            + (a === 1 ? ")" : ", " + a + ")");
-    }
+	function rgb_formatRgb() {
+		var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
+		return (a === 1 ? "rgb(" : "rgba(")
+			+ Math.max(0, Math.min(255, Math.round(this.r) || 0)) + ", "
+			+ Math.max(0, Math.min(255, Math.round(this.g) || 0)) + ", "
+			+ Math.max(0, Math.min(255, Math.round(this.b) || 0))
+			+ (a === 1 ? ")" : ", " + a + ")");
+	}
 
-    function hex(value) {
-        value = Math.max(0, Math.min(255, Math.round(value) || 0));
-        return (value < 16 ? "0" : "") + value.toString(16);
-    }
+	function hex(value) {
+		value = Math.max(0, Math.min(255, Math.round(value) || 0));
+		return (value < 16 ? "0" : "") + value.toString(16);
+	}
 
-    function hsla(h, s, l, a) {
-        if (a <= 0) h = s = l = NaN;
-        else if (l <= 0 || l >= 1) h = s = NaN;
-        else if (s <= 0) h = NaN;
-        return new Hsl(h, s, l, a);
-    }
+	function hsla(h, s, l, a) {
+		if (a <= 0) h = s = l = NaN;
+		else if (l <= 0 || l >= 1) h = s = NaN;
+		else if (s <= 0) h = NaN;
+		return new Hsl(h, s, l, a);
+	}
 
-    function hslConvert(o) {
-        if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
-        if (!(o instanceof Color)) o = color(o);
-        if (!o) return new Hsl;
-        if (o instanceof Hsl) return o;
-        o = o.rgb();
-        var r = o.r / 255,
-            g = o.g / 255,
-            b = o.b / 255,
-            min = Math.min(r, g, b),
-            max = Math.max(r, g, b),
-            h = NaN,
-            s = max - min,
-            l = (max + min) / 2;
-        if (s) {
-            if (r === max) h = (g - b) / s + (g < b) * 6;
-            else if (g === max) h = (b - r) / s + 2;
-            else h = (r - g) / s + 4;
-            s /= l < 0.5 ? max + min : 2 - max - min;
-            h *= 60;
-        } else {
-            s = l > 0 && l < 1 ? 0 : h;
-        }
-        return new Hsl(h, s, l, o.opacity);
-    }
+	function hslConvert(o) {
+		if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
+		if (!(o instanceof Color)) o = color(o);
+		if (!o) return new Hsl;
+		if (o instanceof Hsl) return o;
+		o = o.rgb();
+		var r = o.r / 255,
+			g = o.g / 255,
+			b = o.b / 255,
+			min = Math.min(r, g, b),
+			max = Math.max(r, g, b),
+			h = NaN,
+			s = max - min,
+			l = (max + min) / 2;
+		if (s) {
+			if (r === max) h = (g - b) / s + (g < b) * 6;
+			else if (g === max) h = (b - r) / s + 2;
+			else h = (r - g) / s + 4;
+			s /= l < 0.5 ? max + min : 2 - max - min;
+			h *= 60;
+		} else {
+			s = l > 0 && l < 1 ? 0 : h;
+		}
+		return new Hsl(h, s, l, o.opacity);
+	}
 
-    function hsl(h, s, l, opacity) {
-        return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
-    }
+	function hsl(h, s, l, opacity) {
+		return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
+	}
 
-    function Hsl(h, s, l, opacity) {
-        this.h = +h;
-        this.s = +s;
-        this.l = +l;
-        this.opacity = +opacity;
-    }
+	function Hsl(h, s, l, opacity) {
+		this.h = +h;
+		this.s = +s;
+		this.l = +l;
+		this.opacity = +opacity;
+	}
 
-    define(Hsl, hsl, extend(Color, {
-        brighter: function (k) {
-            k = k == null ? brighter : Math.pow(brighter, k);
-            return new Hsl(this.h, this.s, this.l * k, this.opacity);
-        },
-        darker: function (k) {
-            k = k == null ? darker : Math.pow(darker, k);
-            return new Hsl(this.h, this.s, this.l * k, this.opacity);
-        },
-        rgb: function () {
-            var h = this.h % 360 + (this.h < 0) * 360,
-                s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
-                l = this.l,
-                m2 = l + (l < 0.5 ? l : 1 - l) * s,
-                m1 = 2 * l - m2;
-            return new Rgb(
-                hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
-                hsl2rgb(h, m1, m2),
-                hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
-                this.opacity
-            );
-        },
-        displayable: function () {
-            return (0 <= this.s && this.s <= 1 || isNaN(this.s))
-                && (0 <= this.l && this.l <= 1)
-                && (0 <= this.opacity && this.opacity <= 1);
-        },
-        formatHsl: function () {
-            var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
-            return (a === 1 ? "hsl(" : "hsla(")
-                + (this.h || 0) + ", "
-                + (this.s || 0) * 100 + "%, "
-                + (this.l || 0) * 100 + "%"
-                + (a === 1 ? ")" : ", " + a + ")");
-        }
-    }));
+	define(Hsl, hsl, extend(Color, {
+		brighter: function (k) {
+			k = k == null ? brighter : Math.pow(brighter, k);
+			return new Hsl(this.h, this.s, this.l * k, this.opacity);
+		},
+		darker: function (k) {
+			k = k == null ? darker : Math.pow(darker, k);
+			return new Hsl(this.h, this.s, this.l * k, this.opacity);
+		},
+		rgb: function () {
+			var h = this.h % 360 + (this.h < 0) * 360,
+				s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
+				l = this.l,
+				m2 = l + (l < 0.5 ? l : 1 - l) * s,
+				m1 = 2 * l - m2;
+			return new Rgb(
+				hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
+				hsl2rgb(h, m1, m2),
+				hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
+				this.opacity
+			);
+		},
+		displayable: function () {
+			return (0 <= this.s && this.s <= 1 || isNaN(this.s))
+				&& (0 <= this.l && this.l <= 1)
+				&& (0 <= this.opacity && this.opacity <= 1);
+		},
+		formatHsl: function () {
+			var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
+			return (a === 1 ? "hsl(" : "hsla(")
+				+ (this.h || 0) + ", "
+				+ (this.s || 0) * 100 + "%, "
+				+ (this.l || 0) * 100 + "%"
+				+ (a === 1 ? ")" : ", " + a + ")");
+		}
+	}));
 
-    /* From FvD 13.37, CSS Color Module Level 3 */
-    function hsl2rgb(h, m1, m2) {
-        return (h < 60 ? m1 + (m2 - m1) * h / 60
-            : h < 180 ? m2
-                : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
-                    : m1) * 255;
-    }
+	/* From FvD 13.37, CSS Color Module Level 3 */
+	function hsl2rgb(h, m1, m2) {
+		return (h < 60 ? m1 + (m2 - m1) * h / 60
+			: h < 180 ? m2
+				: h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
+					: m1) * 255;
+	}
 
-    var deg2rad = Math.PI / 180;
-    var rad2deg = 180 / Math.PI;
+	var deg2rad = Math.PI / 180;
+	var rad2deg = 180 / Math.PI;
 
-    // https://observablehq.com/@mbostock/lab-and-rgb
-    var K = 18,
-        Xn = 0.96422,
-        Yn = 1,
-        Zn = 0.82521,
-        t0 = 4 / 29,
-        t1 = 6 / 29,
-        t2 = 3 * t1 * t1,
-        t3 = t1 * t1 * t1;
+	// https://observablehq.com/@mbostock/lab-and-rgb
+	var K = 18,
+		Xn = 0.96422,
+		Yn = 1,
+		Zn = 0.82521,
+		t0 = 4 / 29,
+		t1 = 6 / 29,
+		t2 = 3 * t1 * t1,
+		t3 = t1 * t1 * t1;
 
-    function labConvert(o) {
-        if (o instanceof Lab) return new Lab(o.l, o.a, o.b, o.opacity);
-        if (o instanceof Hcl) return hcl2lab(o);
-        if (!(o instanceof Rgb)) o = rgbConvert(o);
-        var r = rgb2lrgb(o.r),
-            g = rgb2lrgb(o.g),
-            b = rgb2lrgb(o.b),
-            y = xyz2lab((0.2225045 * r + 0.7168786 * g + 0.0606169 * b) / Yn), x, z;
-        if (r === g && g === b) x = z = y; else {
-            x = xyz2lab((0.4360747 * r + 0.3850649 * g + 0.1430804 * b) / Xn);
-            z = xyz2lab((0.0139322 * r + 0.0971045 * g + 0.7141733 * b) / Zn);
-        }
-        return new Lab(116 * y - 16, 500 * (x - y), 200 * (y - z), o.opacity);
-    }
+	function labConvert(o) {
+		if (o instanceof Lab) return new Lab(o.l, o.a, o.b, o.opacity);
+		if (o instanceof Hcl) return hcl2lab(o);
+		if (!(o instanceof Rgb)) o = rgbConvert(o);
+		var r = rgb2lrgb(o.r),
+			g = rgb2lrgb(o.g),
+			b = rgb2lrgb(o.b),
+			y = xyz2lab((0.2225045 * r + 0.7168786 * g + 0.0606169 * b) / Yn), x, z;
+		if (r === g && g === b) x = z = y; else {
+			x = xyz2lab((0.4360747 * r + 0.3850649 * g + 0.1430804 * b) / Xn);
+			z = xyz2lab((0.0139322 * r + 0.0971045 * g + 0.7141733 * b) / Zn);
+		}
+		return new Lab(116 * y - 16, 500 * (x - y), 200 * (y - z), o.opacity);
+	}
 
-    function lab(l, a, b, opacity) {
-        return arguments.length === 1 ? labConvert(l) : new Lab(l, a, b, opacity == null ? 1 : opacity);
-    }
+	function lab(l, a, b, opacity) {
+		return arguments.length === 1 ? labConvert(l) : new Lab(l, a, b, opacity == null ? 1 : opacity);
+	}
 
-    function Lab(l, a, b, opacity) {
-        this.l = +l;
-        this.a = +a;
-        this.b = +b;
-        this.opacity = +opacity;
-    }
+	function Lab(l, a, b, opacity) {
+		this.l = +l;
+		this.a = +a;
+		this.b = +b;
+		this.opacity = +opacity;
+	}
 
-    define(Lab, lab, extend(Color, {
-        brighter: function (k) {
-            return new Lab(this.l + K * (k == null ? 1 : k), this.a, this.b, this.opacity);
-        },
-        darker: function (k) {
-            return new Lab(this.l - K * (k == null ? 1 : k), this.a, this.b, this.opacity);
-        },
-        rgb: function () {
-            var y = (this.l + 16) / 116,
-                x = isNaN(this.a) ? y : y + this.a / 500,
-                z = isNaN(this.b) ? y : y - this.b / 200;
-            x = Xn * lab2xyz(x);
-            y = Yn * lab2xyz(y);
-            z = Zn * lab2xyz(z);
-            return new Rgb(
-                lrgb2rgb(3.1338561 * x - 1.6168667 * y - 0.4906146 * z),
-                lrgb2rgb(-0.9787684 * x + 1.9161415 * y + 0.0334540 * z),
-                lrgb2rgb(0.0719453 * x - 0.2289914 * y + 1.4052427 * z),
-                this.opacity
-            );
-        }
-    }));
+	define(Lab, lab, extend(Color, {
+		brighter: function (k) {
+			return new Lab(this.l + K * (k == null ? 1 : k), this.a, this.b, this.opacity);
+		},
+		darker: function (k) {
+			return new Lab(this.l - K * (k == null ? 1 : k), this.a, this.b, this.opacity);
+		},
+		rgb: function () {
+			var y = (this.l + 16) / 116,
+				x = isNaN(this.a) ? y : y + this.a / 500,
+				z = isNaN(this.b) ? y : y - this.b / 200;
+			x = Xn * lab2xyz(x);
+			y = Yn * lab2xyz(y);
+			z = Zn * lab2xyz(z);
+			return new Rgb(
+				lrgb2rgb(3.1338561 * x - 1.6168667 * y - 0.4906146 * z),
+				lrgb2rgb(-0.9787684 * x + 1.9161415 * y + 0.0334540 * z),
+				lrgb2rgb(0.0719453 * x - 0.2289914 * y + 1.4052427 * z),
+				this.opacity
+			);
+		}
+	}));
 
-    function xyz2lab(t) {
-        return t > t3 ? Math.pow(t, 1 / 3) : t / t2 + t0;
-    }
+	function xyz2lab(t) {
+		return t > t3 ? Math.pow(t, 1 / 3) : t / t2 + t0;
+	}
 
-    function lab2xyz(t) {
-        return t > t1 ? t * t * t : t2 * (t - t0);
-    }
+	function lab2xyz(t) {
+		return t > t1 ? t * t * t : t2 * (t - t0);
+	}
 
-    function lrgb2rgb(x) {
-        return 255 * (x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055);
-    }
+	function lrgb2rgb(x) {
+		return 255 * (x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055);
+	}
 
-    function rgb2lrgb(x) {
-        return (x /= 255) <= 0.04045 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
-    }
+	function rgb2lrgb(x) {
+		return (x /= 255) <= 0.04045 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
+	}
 
-    function hclConvert(o) {
-        if (o instanceof Hcl) return new Hcl(o.h, o.c, o.l, o.opacity);
-        if (!(o instanceof Lab)) o = labConvert(o);
-        if (o.a === 0 && o.b === 0) return new Hcl(NaN, 0 < o.l && o.l < 100 ? 0 : NaN, o.l, o.opacity);
-        var h = Math.atan2(o.b, o.a) * rad2deg;
-        return new Hcl(h < 0 ? h + 360 : h, Math.sqrt(o.a * o.a + o.b * o.b), o.l, o.opacity);
-    }
+	function hclConvert(o) {
+		if (o instanceof Hcl) return new Hcl(o.h, o.c, o.l, o.opacity);
+		if (!(o instanceof Lab)) o = labConvert(o);
+		if (o.a === 0 && o.b === 0) return new Hcl(NaN, 0 < o.l && o.l < 100 ? 0 : NaN, o.l, o.opacity);
+		var h = Math.atan2(o.b, o.a) * rad2deg;
+		return new Hcl(h < 0 ? h + 360 : h, Math.sqrt(o.a * o.a + o.b * o.b), o.l, o.opacity);
+	}
 
-    function hcl(h, c, l, opacity) {
-        return arguments.length === 1 ? hclConvert(h) : new Hcl(h, c, l, opacity == null ? 1 : opacity);
-    }
+	function hcl(h, c, l, opacity) {
+		return arguments.length === 1 ? hclConvert(h) : new Hcl(h, c, l, opacity == null ? 1 : opacity);
+	}
 
-    function Hcl(h, c, l, opacity) {
-        this.h = +h;
-        this.c = +c;
-        this.l = +l;
-        this.opacity = +opacity;
-    }
+	function Hcl(h, c, l, opacity) {
+		this.h = +h;
+		this.c = +c;
+		this.l = +l;
+		this.opacity = +opacity;
+	}
 
-    function hcl2lab(o) {
-        if (isNaN(o.h)) return new Lab(o.l, 0, 0, o.opacity);
-        var h = o.h * deg2rad;
-        return new Lab(o.l, Math.cos(h) * o.c, Math.sin(h) * o.c, o.opacity);
-    }
+	function hcl2lab(o) {
+		if (isNaN(o.h)) return new Lab(o.l, 0, 0, o.opacity);
+		var h = o.h * deg2rad;
+		return new Lab(o.l, Math.cos(h) * o.c, Math.sin(h) * o.c, o.opacity);
+	}
 
-    define(Hcl, hcl, extend(Color, {
-        brighter: function (k) {
-            return new Hcl(this.h, this.c, this.l + K * (k == null ? 1 : k), this.opacity);
-        },
-        darker: function (k) {
-            return new Hcl(this.h, this.c, this.l - K * (k == null ? 1 : k), this.opacity);
-        },
-        rgb: function () {
-            return hcl2lab(this).rgb();
-        }
-    }));
+	define(Hcl, hcl, extend(Color, {
+		brighter: function (k) {
+			return new Hcl(this.h, this.c, this.l + K * (k == null ? 1 : k), this.opacity);
+		},
+		darker: function (k) {
+			return new Hcl(this.h, this.c, this.l - K * (k == null ? 1 : k), this.opacity);
+		},
+		rgb: function () {
+			return hcl2lab(this).rgb();
+		}
+	}));
 
-    var A = -0.14861,
-        B = +1.78277,
-        C = -0.29227,
-        D = -0.90649,
-        E = +1.97294,
-        ED = E * D,
-        EB = E * B,
-        BC_DA = B * C - D * A;
+	var A = -0.14861,
+		B = +1.78277,
+		C = -0.29227,
+		D = -0.90649,
+		E = +1.97294,
+		ED = E * D,
+		EB = E * B,
+		BC_DA = B * C - D * A;
 
-    function cubehelixConvert(o) {
-        if (o instanceof Cubehelix) return new Cubehelix(o.h, o.s, o.l, o.opacity);
-        if (!(o instanceof Rgb)) o = rgbConvert(o);
-        var r = o.r / 255,
-            g = o.g / 255,
-            b = o.b / 255,
-            l = (BC_DA * b + ED * r - EB * g) / (BC_DA + ED - EB),
-            bl = b - l,
-            k = (E * (g - l) - C * bl) / D,
-            s = Math.sqrt(k * k + bl * bl) / (E * l * (1 - l)), // NaN if l=0 or l=1
-            h = s ? Math.atan2(k, bl) * rad2deg - 120 : NaN;
-        return new Cubehelix(h < 0 ? h + 360 : h, s, l, o.opacity);
-    }
+	function cubehelixConvert(o) {
+		if (o instanceof Cubehelix) return new Cubehelix(o.h, o.s, o.l, o.opacity);
+		if (!(o instanceof Rgb)) o = rgbConvert(o);
+		var r = o.r / 255,
+			g = o.g / 255,
+			b = o.b / 255,
+			l = (BC_DA * b + ED * r - EB * g) / (BC_DA + ED - EB),
+			bl = b - l,
+			k = (E * (g - l) - C * bl) / D,
+			s = Math.sqrt(k * k + bl * bl) / (E * l * (1 - l)), // NaN if l=0 or l=1
+			h = s ? Math.atan2(k, bl) * rad2deg - 120 : NaN;
+		return new Cubehelix(h < 0 ? h + 360 : h, s, l, o.opacity);
+	}
 
-    function cubehelix(h, s, l, opacity) {
-        return arguments.length === 1 ? cubehelixConvert(h) : new Cubehelix(h, s, l, opacity == null ? 1 : opacity);
-    }
+	function cubehelix(h, s, l, opacity) {
+		return arguments.length === 1 ? cubehelixConvert(h) : new Cubehelix(h, s, l, opacity == null ? 1 : opacity);
+	}
 
-    function Cubehelix(h, s, l, opacity) {
-        this.h = +h;
-        this.s = +s;
-        this.l = +l;
-        this.opacity = +opacity;
-    }
+	function Cubehelix(h, s, l, opacity) {
+		this.h = +h;
+		this.s = +s;
+		this.l = +l;
+		this.opacity = +opacity;
+	}
 
-    define(Cubehelix, cubehelix, extend(Color, {
-        brighter: function (k) {
-            k = k == null ? brighter : Math.pow(brighter, k);
-            return new Cubehelix(this.h, this.s, this.l * k, this.opacity);
-        },
-        darker: function (k) {
-            k = k == null ? darker : Math.pow(darker, k);
-            return new Cubehelix(this.h, this.s, this.l * k, this.opacity);
-        },
-        rgb: function () {
-            var h = isNaN(this.h) ? 0 : (this.h + 120) * deg2rad,
-                l = +this.l,
-                a = isNaN(this.s) ? 0 : this.s * l * (1 - l),
-                cosh = Math.cos(h),
-                sinh = Math.sin(h);
-            return new Rgb(
-                255 * (l + a * (A * cosh + B * sinh)),
-                255 * (l + a * (C * cosh + D * sinh)),
-                255 * (l + a * (E * cosh)),
-                this.opacity
-            );
-        }
-    }));
+	define(Cubehelix, cubehelix, extend(Color, {
+		brighter: function (k) {
+			k = k == null ? brighter : Math.pow(brighter, k);
+			return new Cubehelix(this.h, this.s, this.l * k, this.opacity);
+		},
+		darker: function (k) {
+			k = k == null ? darker : Math.pow(darker, k);
+			return new Cubehelix(this.h, this.s, this.l * k, this.opacity);
+		},
+		rgb: function () {
+			var h = isNaN(this.h) ? 0 : (this.h + 120) * deg2rad,
+				l = +this.l,
+				a = isNaN(this.s) ? 0 : this.s * l * (1 - l),
+				cosh = Math.cos(h),
+				sinh = Math.sin(h);
+			return new Rgb(
+				255 * (l + a * (A * cosh + B * sinh)),
+				255 * (l + a * (C * cosh + D * sinh)),
+				255 * (l + a * (E * cosh)),
+				this.opacity
+			);
+		}
+	}));
 
-    var getTextWidth = (function () {
-        var context = document.createElement("canvas").getContext("2d");
-        return function (text, font) {
-            context.font = font || "10px sans-serif";
-            var metrics = context.measureText(text);
-            return metrics.width;
-        };
-    })();
+	var getTextWidth = (function () {
+		var context = document.createElement("canvas").getContext("2d");
+		return function (text, font) {
+			context.font = font || "10px sans-serif";
+			var metrics = context.measureText(text);
+			return metrics.width;
+		};
+	})();
 
-    function hexToColor(hex_string, opacity) {
-        if (typeof hex_string != "string") return false;
-        var c = color(hex_string);
-        c.opacity = opacity !== undefined ? opacity : 1;
-        return c;
-    }
+	function hexToColor(hex_string, opacity) {
+		if (typeof hex_string != "string") return false;
+		var c = color(hex_string);
+		c.opacity = opacity !== undefined ? opacity : 1;
+		return c;
+	}
 
-    function hexToRgba(hex_string, opacity) {
-        var c = hexToColor(hex_string, opacity);
+	function hexToRgba(hex_string, opacity) {
+		var c = hexToColor(hex_string, opacity);
 
-        return c ? c.toString() : false;
-    }
+		return c ? c.toString() : false;
+	}
 
-    var DEFAULTS$1 = Object.freeze({
-        background: null,
-        font_color: null,
+	var DEFAULTS$1 = Object.freeze({
+		background: null,
+		font_color: null,
 
-        background_selected: "#2886b2",
-        font_color_selected: "#ffffff",
+		background_selected: "#2886b2",
+		font_color_selected: "#ffffff",
 
-        background_hover: null,
-        font_color_hover: null,
+		background_hover: null,
+		font_color_hover: null,
 
-        border_width: 1,
-        border_transparency: 0.25,
-        border_color: null,
-        border_radius: 3
-    });
+		border_width: 1,
+		border_transparency: 0.25,
+		border_color: null,
+		border_radius: 3
+	});
 
-    function ButtonStyle(state_, selector_, layout_) {
-        this._state = state_;
-        for (var key in DEFAULTS$1) { if (this._state[key] === undefined) this._state[key] = DEFAULTS$1[key]; }
+	function ButtonStyle(state_, selector_, layout_) {
+		this._state = state_;
+		for (var key in DEFAULTS$1) { if (this._state[key] === undefined) this._state[key] = DEFAULTS$1[key]; }
 
-        this._layout = layout_ || {};
+		this._layout = layout_ || {};
 
-        this._styles = new Stylesheet();
-        this._selector = selector_;
-        this._createStylesheet();
+		this._styles = new Stylesheet();
+		this._selector = selector_;
+		this._createStylesheet();
 
-        return this;
-    }
+		return this;
+	}
 
-    ButtonStyle.prototype._createStylesheet = function () {
-        this._stylesheet = document.createElement("style");
-        this._stylesheet.className = "fl-ui-styles-button";
-        document.head.appendChild(this._stylesheet);
-    };
+	ButtonStyle.prototype._createStylesheet = function () {
+		this._stylesheet = document.createElement("style");
+		this._stylesheet.className = "fl-ui-styles-button";
+		document.head.appendChild(this._stylesheet);
+	};
 
-    ButtonStyle.prototype.update = function () {
-        this._styles.clear();
+	ButtonStyle.prototype.update = function () {
+		this._styles.clear();
 
-        var background_color = this._state.background || this._layout.background_color || "#ffffff";
-        var text_color = this._state.font_color || this._layout.font_color || "#333333";
-        var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
+		var background_color = this._state.background || this._layout.background_color || "#ffffff";
+		var text_color = this._state.font_color || this._layout.font_color || "#333333";
+		var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
 
-        this._styles.select(this._selector + ".fl-control.hidden")
-            .style("display", "none");
+		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("box-sizing", "content-box")
-            .style("margin", "0 2px 0 0 !important")
-            .style("background-color", background_color)
-            .style("color", text_color)
-            .style("border", this._state.border_width + "px solid " + border_color)
-            .style("border-radius", this._state.border_radius + "px");
+		this._styles.select(this._selector + ".fl-control .button")
+			.style("overflow", "hidden")
+			.style("white-space", "nowrap")
+			.style("box-sizing", "content-box")
+			.style("background-color", background_color)
+			.style("color", text_color)
+			.style("border", this._state.border_width + "px solid " + border_color)
+			.style("border-radius", this._state.border_radius + "px");
 
-        this._styles.select(this._selector + ".fl-control .button:hover")
-            .style("background-color", this._state.background_hover || background_color)
-            .style("color", this._state.font_color_hover || text_color);
+		this._styles.select(this._selector + ".fl-control .button:hover")
+			.style("background-color", this._state.background_hover || background_color)
+			.style("color", this._state.font_color_hover || text_color);
 
-        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 + ".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");
+		this._styles.select(this._selector + ".grouped.fl-control .button")
+			.style("border-right", "none")
+			.style("border-radius", "0")
+			.style("margin", "0");
 
-        this._styles.select(this._selector + ".grouped.fl-control .button:first-child")
-            .style("border-radius", this._state.border_radius + "px 0 0 " + this._state.border_radius + "px");
+		this._styles.select(this._selector + ".grouped.fl-control .button:first-child")
+			.style("border-radius", this._state.border_radius + "px 0 0 " + this._state.border_radius + "px");
 
-        this._styles.select(this._selector + ".grouped.fl-control .button:last-child")
-            .style("border-radius", "0 " + this._state.border_radius + "px " + this._state.border_radius + "px 0")
-            .style("border-right", this._state.border_width + "px solid " + border_color);
+		this._styles.select(this._selector + ".grouped.fl-control .button:last-child")
+			.style("border-radius", "0 " + this._state.border_radius + "px " + this._state.border_radius + "px 0")
+			.style("border-right", this._state.border_width + "px solid " + border_color);
 
-        this._styles.select(this._selector + ".grouped.fl-control.fixed-width:not(.hidden)")
-            .style("width", this._state.grouped_width + "%");
+		this._styles.select(this._selector + ".grouped.fl-control.fixed-width:not(.hidden)")
+			.style("width", this._state.grouped_width + "%");
 
-        this._stylesheet.innerHTML = this._styles.print();
-    };
+		this._stylesheet.innerHTML = this._styles.print();
+	};
 
-    var DEFAULTS$2 = Object.freeze({
-        background: null,
-        font_color: null,
+	var DEFAULTS$2 = Object.freeze({
+		background: null,
+		font_color: null,
 
-        border_style: "bottom",
-        border_width: 1,
-        border_color: null,
-        border_transparency: 0.25,
-        border_radius: 3
-    });
+		border_style: "bottom",
+		border_width: 1,
+		border_color: null,
+		border_transparency: 0.25,
+		border_radius: 3
+	});
 
-    function DropdownStyle(state_, selector_, layout_) {
-        this._state = state_;
-        for (var key in DEFAULTS$2) { if (this._state[key] === undefined) this._state[key] = DEFAULTS$2[key]; }
+	function DropdownStyle(state_, selector_, layout_) {
+		this._state = state_;
+		for (var key in DEFAULTS$2) { if (this._state[key] === undefined) this._state[key] = DEFAULTS$2[key]; }
 
-        this._layout = layout_ || {};
+		this._layout = layout_ || {};
 
-        this._styles = new Stylesheet();
-        this._selector = selector_;
-        this._createStylesheet();
+		this._styles = new Stylesheet();
+		this._selector = selector_;
+		this._createStylesheet();
 
-        return this;
-    }
+		return this;
+	}
 
-    DropdownStyle.prototype._createStylesheet = function () {
-        this._stylesheet = document.createElement("style");
-        this._stylesheet.className = "fl-ui-styles-dropdown";
-        document.head.appendChild(this._stylesheet);
-    };
+	DropdownStyle.prototype._createStylesheet = function () {
+		this._stylesheet = document.createElement("style");
+		this._stylesheet.className = "fl-ui-styles-dropdown";
+		document.head.appendChild(this._stylesheet);
+	};
 
-    DropdownStyle.prototype.update = function () {
-        this._styles.clear();
+	DropdownStyle.prototype.update = function () {
+		this._styles.clear();
 
-        var background_color = this._state.background || this._layout.background_color || "#ffffff";
-        var text_color = this._state.font_color || this._layout.font_color || "#333333";
-        var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
+		var background_color = this._state.background || this._layout.background_color || "#ffffff";
+		var text_color = this._state.font_color || this._layout.font_color || "#333333";
+		var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
 
-        this._styles.select(this._selector + " .heading")
-            .style("margin-bottom", "0.4em");
+		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)
+			.style("pointer-events", "all");
 
-        this._styles.select(this._selector + " .main")
-            .style("display", "inline-block")
-            .style("cursor", "pointer")
-            .style("overflow", "hidden")
-            .style("white-space", "nowrap")
-            .style("position", "relative")
-            .style("background-color", background_color)
-            .style("color", text_color)
-            .style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
-            .style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
-            .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
+		this._styles.select(this._selector + " .main")
+			.style("display", "inline-block")
+			.style("cursor", "pointer")
+			.style("overflow", "hidden")
+			.style("white-space", "nowrap")
+			.style("position", "relative")
+			.style("background-color", background_color)
+			.style("color", text_color)
+			.style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
+			.style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
+			.style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
 
-        this._styles.select(this._selector + " .main .symbol")
-            .style("float", "right")
-            .select("div")
-            .style("border-top-color", text_color + " !important");
+		this._styles.select(this._selector + " .main .symbol")
+			.style("float", "right")
+			.select("div")
+			.style("border-top-color", text_color + " !important");
 
-        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 + " .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", text_color);
+		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", text_color);
 
-        this._styles.select(this._selector + ".open .list")
-            .style("display", "block")
-            .style("border", this._state.border_width + "px solid " + border_color)
-            .style("background-color", background_color)
-            .style("z-index", "1")
-            .style("animation", "dropdown-out 200ms");
+		this._styles.select(this._selector + ".open .list")
+			.style("display", "block")
+			.style("border", this._state.border_width + "px solid " + border_color)
+			.style("background-color", background_color)
+			.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: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");
+		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");
-        }
+		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();
-    };
+		this._stylesheet.innerHTML = this._styles.print();
+	};
 
-    function createGeneralControlsStyle(state, selector, layout) {
-        return new GeneralControlsStyle(state, selector, layout);
-    }
+	function createGeneralControlsStyle(state, selector, layout) {
+		return new GeneralControlsStyle(state, selector, layout);
+	}
 
-    function createButtonStyle(state, selector, layout) {
-        return new ButtonStyle(state, selector, layout);
-    }
+	function createButtonStyle(state, selector, layout) {
+		return new ButtonStyle(state, selector, layout);
+	}
 
-    function createDropdownStyle(state, selector, layout) {
-        return new DropdownStyle(state, selector, layout);
-    }
+	function createDropdownStyle(state, selector, layout) {
+		return new DropdownStyle(state, selector, layout);
+	}
 
-    exports.createButtonStyle = createButtonStyle;
-    exports.createDropdownStyle = createDropdownStyle;
-    exports.createGeneralControlsStyle = createGeneralControlsStyle;
+	exports.createButtonStyle = createButtonStyle;
+	exports.createDropdownStyle = createDropdownStyle;
+	exports.createGeneralControlsStyle = createGeneralControlsStyle;
 
-    Object.defineProperty(exports, '__esModule', { value: true });
+	Object.defineProperty(exports, '__esModule', { value: true });
 
 })));

cypress/integration/test.spec.js

@@ -20,3 +20,2 @@ /* eslint-disable no-undef */
 		},
-		controls_4: {},
 
@@ -92,3 +91,3 @@ controls_style: {},
 
-	it.only("Should load controls", () => {
+	it("Should load controls", () => {
 		createControls("#wrapper header", state).then(({control_containers, control_styles}) => {
@@ -105,7 +104,7 @@ updateControls({control_containers, control_styles});
 
-	it.only("Should center align controls next to titles", () => {
+	it("Should center align controls next to titles", () => {
+		var control_selector_lookup = [".fl-control-buttons", ".fl-control-dropdown", ".fl-control-slider"];
 		createControls("#wrapper header", state, ["discrete"]).then(({ control_containers, control_styles }) => {
 			var font_sizes = [0.5, 1, 4];
-			var swatch_sizes = [0.25, 1, 3];
-			var control_selector_lookup = [".fl-control-buttons", ".fl-control-dropdown", ".fl-control-slider"];
+			var swatch_sizes = [0.1, 1, 3];
 
@@ -144,42 +143,39 @@ cy.get(font_sizes).each(font_size => {
 
-// 	it("Should show continuous size and color labels at same top offset", () => {
-// 		createControls("#wrapper header", state, ["discrete"]).then((control_containers) => {
-// 			var font_sizes = [0.5, 1, 4];
-// 			var swatch_sizes = [0.25, 1, 10];
-// 			var circle_sizes = [0.25, 1, 10];
+	it("Dropdown and buttons should align vertically", () => {
+		cy.viewport(1600, 800);
+		var control_selector_lookup = [".fl-control-buttons", ".fl-control-dropdown", ".fl-control-dropdown"];
+		createControls("#wrapper header", state, ["discrete"]).then((control_containers) => {
+			var font_sizes = [0.5, 1, 2, 2.5];
+			var swatch_sizes = [0.1, 1, 2];
+			var previous_offset = null;
 
-// 			cy.get(font_sizes).each(font_size => {
-// 				cy.get(swatch_sizes).each(swatch_size => {
-// 					cy.get(circle_sizes).each(circle_size => {
-// 						cy.wait(1000).then(function () {
-// 							// state.generic.text_size = font_size;
-// 							// state.categorical_color.swatch_height = swatch_size;
-// 							// state.continuous_size.clip_height = circle_size;
-// 							updateControls(control_containers);
+			state.controls_3.control_type = "dropdown";
 
-// 							cy.get("#fl-legend-continuous-color-0 .max.label")
-// 								.then($color_label => {
-// 									var continuous_color_label_height = $color_label.outerHeight();
-// 									var continuous_color_label_offset = $color_label.position().top;
-// 									var continuous_color_label_center = continuous_color_label_offset + continuous_color_label_height * 0.5;
-// 									cy.get("#fl-legend-continuous-size-0 .max.label")
-// 										.then($size_label => {
-// 											var size_label_height = $size_label.outerHeight();
-// 											var size_label_offset = $size_label.position().top;
-// 											var size_label_center = size_label_offset + size_label_height * 0.5;
-// 											cy.get(".fl-legend-label")
-// 												.then($discrete_color_label => {
-// 													var discrete_color_label_height = $discrete_color_label.outerHeight();
-// 													var discrete_color_label_offset = $discrete_color_label.position().top;
-// 													var discrete_color_label_center = discrete_color_label_offset + discrete_color_label_height * 0.5;
-// 													cy.expect(size_label_center == discrete_color_label_center && size_label_center == continuous_color_label_center).eq(true);
-// 												});
-// 										});
-// 								});
-// 						});
-// 					});
-// 				});
-// 			});
-// 		});
-// 	});
+			cy.get(font_sizes).each(font_size => {
+				cy.get(swatch_sizes).each(swatch_size => {
+					cy.wait(10).then(function () {
+						state.controls_style.font_size = font_size;
+						state.controls_style.padding = swatch_size;
+						previous_offset = null;
+						updateControls(control_containers);
+
+						cy.get(".fl-controls-container")
+							.then($controls_containers => {
+								$controls_containers.each((i, $control_container) => {
+									cy.get($control_container).find(control_selector_lookup[i])
+										.then($control => {
+											if (previous_offset === null) {
+												previous_offset = $control.offset().top;
+											}
+											else {
+												cy.expect($control.offset().top).eq(previous_offset);
+											}
+										});
+								});
+							});
+					});
+				});
+			});
+		});
+	});
 });

package.json

 {
   "name": "@flourish/controls",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "Switchable dropdown/buttons/slider control",
@@ -5,0 +5,0 @@ "main": "controls.js",

RELEASE_NOTES.md

@@ -0,1 +1,7 @@
+# 2.4.1
+* Make buttons keyboard accessible and screenreader readable
+
+# 2.4.0
+* Alter styles so that dropdown will work with right to left text direction.
+
 # 2.3.0
@@ -2,0 +8,0 @@ * Add getNode() method

src/controls/buttons.js

@@ -1,4 +0,5 @@
-import { select } from "d3-selection";
+import { select, event as d3_event } from "d3-selection";
 import { remToPx } from "../lib/remToPx";
 
+
 function createButtons(control_obj, state, container) {
@@ -20,3 +21,2 @@ var button_obj = {};
 	button_obj.update = function(sorted_options) {
-		button_container.text("");
 		if (!control_obj.n_options || state.control_type !== "buttons") {
@@ -33,21 +33,38 @@ hideControl();
 
+		var clickHandler = function(d) {
+			var i = d.options_index;
+			if (i === control_obj.index()) return;
+			control_obj.index(i);
+			control_obj.trigger("change");
+		};
+
 		var buttons = button_container.selectAll(".button")
-			.data(sorted_options)
-			.enter()
-			.append("div");
+			.data(sorted_options, function(d) { return d.display; });
 
-		buttons.attr("class", "button")
+		var buttons_enter = buttons.enter()
+			.append("div")
+			.attr("class", "button")
 			.style("cursor", "pointer")
-			.classed("selected", function(d) { return d.options_index === index; })
-			.on("click", function(d) {
-				var i = d.options_index;
-				if (i === control_obj.index()) return;
-				control_obj.index(i);
-				buttons.classed("selected", function(d) { return d.options_index === i; });
-				control_obj.trigger("change");
-			})
-			.append("span")
+			.attr("role", "button")
+			.attr("tabindex", 0)
+			.on("click", function(d) { clickHandler(d); })
+			.on("keyup", function(d) {
+				if (d3_event.code === "Space" || d3_event.code === "Enter") {
+					d3_event.preventDefault();
+					clickHandler(d);
+				}
+			});
+
+		buttons_enter.append("span")
 			.text(function(d) { return d.display; });
 
 		showControl();
+
+		buttons.merge(buttons_enter)
+			.classed("selected", function(d) { return d.options_index === index; })
+			.attr("aria-pressed", function(d) { return d.options_index === index; });
+
+		buttons.exit().remove();
+
+		showControl();
 	};
@@ -54,0 +71,0 @@

src/lib/css.js

@@ -71,2 +71,3 @@ import createStylesheet from "@flourish/js2css";
 		.select(".list-item")
+		.style("text-align", "start")
 		.style("cursor", "pointer")
@@ -79,3 +80,6 @@ .style("padding", "0.5rem");
 	s.select(".fl-control-dropdown .main")
-		.style("position", "relative");
+		.style("position", "relative")
+		.style("text-align", "start")
+		.style("display", "flex")
+		.style("justify-content", "space-between");
 
@@ -82,0 +86,0 @@ s.select(".fl-control-dropdown .symbol")

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

324815

increased by52.89%

Number of package files

28

increased by7.69%

Lines of code

5443

increased by0.44%

No dependency changes