@flourish/ui-styles 6.0.1 → 7.0.0

package/ui-styles.js

@@ -57,7 +57,7 @@
 		return this.parent.select(this.selector + " " + selector);
 	};
 
-	var DEFAULTS$3 = Object.freeze({
+	var DEFAULTS$4 = Object.freeze({
 		font_size: 1,
 		font_weight: "bold",
 		height: 2,
@@ -65,8 +65,8 @@
 
 	function GeneralControlsStyle(state_, selector_, layout_) {
 		this._state = state_;
-		for (var key in DEFAULTS$3) {
-			if (this._state[key] === undefined) this._state[key] = DEFAULTS$3[key];
+		for (var key in DEFAULTS$4) {
+			if (this._state[key] === undefined) this._state[key] = DEFAULTS$4[key];
 		}
 
 		this._layout = layout_ || {};
@@ -629,14 +629,39 @@
 	  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";
 	}
 
-	function hexToColor(hex_string, opacity) {
+	function hexToColor$1(hex_string, opacity) {
 		if (typeof hex_string != "string") return false;
 		var c = color(hex_string);
 		c.opacity = opacity !== undefined ? opacity : 1;
@@ -644,12 +669,77 @@
 	}
 
 	function hexToRgba(hex_string, opacity) {
-		var c = hexToColor(hex_string, opacity);
+		var c = hexToColor$1(hex_string, opacity);
 
 		return c ? c.toString() : false;
 	}
 
-	var DEFAULTS$2 = Object.freeze({
+	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$3 = Object.freeze({
 		background: null,
 		font_color: null,
 
@@ -667,8 +757,8 @@
 
 	function ButtonStyle(state_, selector_, layout_) {
 		this._state = state_;
-		for (var key in DEFAULTS$2) {
-			if (this._state[key] === undefined) this._state[key] = DEFAULTS$2[key];
+		for (var key in DEFAULTS$3) {
+			if (this._state[key] === undefined) this._state[key] = DEFAULTS$3[key];
 		}
 
 		this._layout = layout_ || {};
@@ -773,7 +863,7 @@
 		this._stylesheet.innerHTML = this._styles.print();
 	};
 
-	var DEFAULTS$1 = Object.freeze({
+	var DEFAULTS$2 = Object.freeze({
 		background: null,
 		font_color: null,
 
@@ -786,8 +876,8 @@
 
 	function DropdownStyle(state_, selector_, layout_) {
 		this._state = state_;
-		for (var key in DEFAULTS$1) {
-			if (this._state[key] === undefined) this._state[key] = DEFAULTS$1[key];
+		for (var key in DEFAULTS$2) {
+			if (this._state[key] === undefined) this._state[key] = DEFAULTS$2[key];
 		}
 
 		this._layout = layout_ || {};
@@ -933,7 +1023,7 @@
 		return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 	}
 
-	var DEFAULTS = Object.freeze({
+	var DEFAULTS$1 = Object.freeze({
 		play_color: null,
 		handle_color: null,
 		font_color: null,
@@ -948,8 +1038,8 @@
 
 	function SliderStyle(state_, selector_, layout_) {
 		this._state = state_;
-		for (var key in DEFAULTS) {
-			if (this._state[key] === undefined) this._state[key] = DEFAULTS[key];
+		for (var key in DEFAULTS$1) {
+			if (this._state[key] === undefined) this._state[key] = DEFAULTS$1[key];
 		}
 
 		this._layout = layout_ || {};
@@ -1044,6 +1134,1340 @@
 		this._stylesheet.innerHTML = this._styles.print();
 	};
 
+	var xhtml = "http://www.w3.org/1999/xhtml";
+
+	var namespaces = {
+	  svg: "http://www.w3.org/2000/svg",
+	  xhtml: xhtml,
+	  xlink: "http://www.w3.org/1999/xlink",
+	  xml: "http://www.w3.org/XML/1998/namespace",
+	  xmlns: "http://www.w3.org/2000/xmlns/"
+	};
+
+	function namespace(name) {
+	  var prefix = name += "", i = prefix.indexOf(":");
+	  if (i >= 0 && (prefix = name.slice(0, i)) !== "xmlns") name = name.slice(i + 1);
+	  return namespaces.hasOwnProperty(prefix) ? {space: namespaces[prefix], local: name} : name;
+	}
+
+	function creatorInherit(name) {
+	  return function() {
+	    var document = this.ownerDocument,
+	        uri = this.namespaceURI;
+	    return uri === xhtml && document.documentElement.namespaceURI === xhtml
+	        ? document.createElement(name)
+	        : document.createElementNS(uri, name);
+	  };
+	}
+
+	function creatorFixed(fullname) {
+	  return function() {
+	    return this.ownerDocument.createElementNS(fullname.space, fullname.local);
+	  };
+	}
+
+	function creator(name) {
+	  var fullname = namespace(name);
+	  return (fullname.local
+	      ? creatorFixed
+	      : creatorInherit)(fullname);
+	}
+
+	function none() {}
+
+	function selector(selector) {
+	  return selector == null ? none : function() {
+	    return this.querySelector(selector);
+	  };
+	}
+
+	function selection_select(select) {
+	  if (typeof select !== "function") select = selector(select);
+
+	  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+	    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {
+	      if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {
+	        if ("__data__" in node) subnode.__data__ = node.__data__;
+	        subgroup[i] = subnode;
+	      }
+	    }
+	  }
+
+	  return new Selection(subgroups, this._parents);
+	}
+
+	function empty() {
+	  return [];
+	}
+
+	function selectorAll(selector) {
+	  return selector == null ? empty : function() {
+	    return this.querySelectorAll(selector);
+	  };
+	}
+
+	function selection_selectAll(select) {
+	  if (typeof select !== "function") select = selectorAll(select);
+
+	  for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
+	    for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
+	      if (node = group[i]) {
+	        subgroups.push(select.call(node, node.__data__, i, group));
+	        parents.push(node);
+	      }
+	    }
+	  }
+
+	  return new Selection(subgroups, parents);
+	}
+
+	function matcher(selector) {
+	  return function() {
+	    return this.matches(selector);
+	  };
+	}
+
+	function selection_filter(match) {
+	  if (typeof match !== "function") match = matcher(match);
+
+	  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+	    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {
+	      if ((node = group[i]) && match.call(node, node.__data__, i, group)) {
+	        subgroup.push(node);
+	      }
+	    }
+	  }
+
+	  return new Selection(subgroups, this._parents);
+	}
+
+	function sparse(update) {
+	  return new Array(update.length);
+	}
+
+	function selection_enter() {
+	  return new Selection(this._enter || this._groups.map(sparse), this._parents);
+	}
+
+	function EnterNode(parent, datum) {
+	  this.ownerDocument = parent.ownerDocument;
+	  this.namespaceURI = parent.namespaceURI;
+	  this._next = null;
+	  this._parent = parent;
+	  this.__data__ = datum;
+	}
+
+	EnterNode.prototype = {
+	  constructor: EnterNode,
+	  appendChild: function(child) { return this._parent.insertBefore(child, this._next); },
+	  insertBefore: function(child, next) { return this._parent.insertBefore(child, next); },
+	  querySelector: function(selector) { return this._parent.querySelector(selector); },
+	  querySelectorAll: function(selector) { return this._parent.querySelectorAll(selector); }
+	};
+
+	function constant(x) {
+	  return function() {
+	    return x;
+	  };
+	}
+
+	var keyPrefix = "$"; // Protect against keys like “__proto__”.
+
+	function bindIndex(parent, group, enter, update, exit, data) {
+	  var i = 0,
+	      node,
+	      groupLength = group.length,
+	      dataLength = data.length;
+
+	  // Put any non-null nodes that fit into update.
+	  // Put any null nodes into enter.
+	  // Put any remaining data into enter.
+	  for (; i < dataLength; ++i) {
+	    if (node = group[i]) {
+	      node.__data__ = data[i];
+	      update[i] = node;
+	    } else {
+	      enter[i] = new EnterNode(parent, data[i]);
+	    }
+	  }
+
+	  // Put any non-null nodes that don’t fit into exit.
+	  for (; i < groupLength; ++i) {
+	    if (node = group[i]) {
+	      exit[i] = node;
+	    }
+	  }
+	}
+
+	function bindKey(parent, group, enter, update, exit, data, key) {
+	  var i,
+	      node,
+	      nodeByKeyValue = {},
+	      groupLength = group.length,
+	      dataLength = data.length,
+	      keyValues = new Array(groupLength),
+	      keyValue;
+
+	  // Compute the key for each node.
+	  // If multiple nodes have the same key, the duplicates are added to exit.
+	  for (i = 0; i < groupLength; ++i) {
+	    if (node = group[i]) {
+	      keyValues[i] = keyValue = keyPrefix + key.call(node, node.__data__, i, group);
+	      if (keyValue in nodeByKeyValue) {
+	        exit[i] = node;
+	      } else {
+	        nodeByKeyValue[keyValue] = node;
+	      }
+	    }
+	  }
+
+	  // Compute the key for each datum.
+	  // If there a node associated with this key, join and add it to update.
+	  // If there is not (or the key is a duplicate), add it to enter.
+	  for (i = 0; i < dataLength; ++i) {
+	    keyValue = keyPrefix + key.call(parent, data[i], i, data);
+	    if (node = nodeByKeyValue[keyValue]) {
+	      update[i] = node;
+	      node.__data__ = data[i];
+	      nodeByKeyValue[keyValue] = null;
+	    } else {
+	      enter[i] = new EnterNode(parent, data[i]);
+	    }
+	  }
+
+	  // Add any remaining nodes that were not bound to data to exit.
+	  for (i = 0; i < groupLength; ++i) {
+	    if ((node = group[i]) && (nodeByKeyValue[keyValues[i]] === node)) {
+	      exit[i] = node;
+	    }
+	  }
+	}
+
+	function selection_data(value, key) {
+	  if (!value) {
+	    data = new Array(this.size()), j = -1;
+	    this.each(function(d) { data[++j] = d; });
+	    return data;
+	  }
+
+	  var bind = key ? bindKey : bindIndex,
+	      parents = this._parents,
+	      groups = this._groups;
+
+	  if (typeof value !== "function") value = constant(value);
+
+	  for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
+	    var parent = parents[j],
+	        group = groups[j],
+	        groupLength = group.length,
+	        data = value.call(parent, parent && parent.__data__, j, parents),
+	        dataLength = data.length,
+	        enterGroup = enter[j] = new Array(dataLength),
+	        updateGroup = update[j] = new Array(dataLength),
+	        exitGroup = exit[j] = new Array(groupLength);
+
+	    bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
+
+	    // Now connect the enter nodes to their following update node, such that
+	    // appendChild can insert the materialized enter node before this node,
+	    // rather than at the end of the parent node.
+	    for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
+	      if (previous = enterGroup[i0]) {
+	        if (i0 >= i1) i1 = i0 + 1;
+	        while (!(next = updateGroup[i1]) && ++i1 < dataLength);
+	        previous._next = next || null;
+	      }
+	    }
+	  }
+
+	  update = new Selection(update, parents);
+	  update._enter = enter;
+	  update._exit = exit;
+	  return update;
+	}
+
+	function selection_exit() {
+	  return new Selection(this._exit || this._groups.map(sparse), this._parents);
+	}
+
+	function selection_join(onenter, onupdate, onexit) {
+	  var enter = this.enter(), update = this, exit = this.exit();
+	  enter = typeof onenter === "function" ? onenter(enter) : enter.append(onenter + "");
+	  if (onupdate != null) update = onupdate(update);
+	  if (onexit == null) exit.remove(); else onexit(exit);
+	  return enter && update ? enter.merge(update).order() : update;
+	}
+
+	function selection_merge(selection) {
+
+	  for (var groups0 = this._groups, groups1 = selection._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
+	    for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {
+	      if (node = group0[i] || group1[i]) {
+	        merge[i] = node;
+	      }
+	    }
+	  }
+
+	  for (; j < m0; ++j) {
+	    merges[j] = groups0[j];
+	  }
+
+	  return new Selection(merges, this._parents);
+	}
+
+	function selection_order() {
+
+	  for (var groups = this._groups, j = -1, m = groups.length; ++j < m;) {
+	    for (var group = groups[j], i = group.length - 1, next = group[i], node; --i >= 0;) {
+	      if (node = group[i]) {
+	        if (next && node.compareDocumentPosition(next) ^ 4) next.parentNode.insertBefore(node, next);
+	        next = node;
+	      }
+	    }
+	  }
+
+	  return this;
+	}
+
+	function selection_sort(compare) {
+	  if (!compare) compare = ascending;
+
+	  function compareNode(a, b) {
+	    return a && b ? compare(a.__data__, b.__data__) : !a - !b;
+	  }
+
+	  for (var groups = this._groups, m = groups.length, sortgroups = new Array(m), j = 0; j < m; ++j) {
+	    for (var group = groups[j], n = group.length, sortgroup = sortgroups[j] = new Array(n), node, i = 0; i < n; ++i) {
+	      if (node = group[i]) {
+	        sortgroup[i] = node;
+	      }
+	    }
+	    sortgroup.sort(compareNode);
+	  }
+
+	  return new Selection(sortgroups, this._parents).order();
+	}
+
+	function ascending(a, b) {
+	  return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+	}
+
+	function selection_call() {
+	  var callback = arguments[0];
+	  arguments[0] = this;
+	  callback.apply(null, arguments);
+	  return this;
+	}
+
+	function selection_nodes() {
+	  var nodes = new Array(this.size()), i = -1;
+	  this.each(function() { nodes[++i] = this; });
+	  return nodes;
+	}
+
+	function selection_node() {
+
+	  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+	    for (var group = groups[j], i = 0, n = group.length; i < n; ++i) {
+	      var node = group[i];
+	      if (node) return node;
+	    }
+	  }
+
+	  return null;
+	}
+
+	function selection_size() {
+	  var size = 0;
+	  this.each(function() { ++size; });
+	  return size;
+	}
+
+	function selection_empty() {
+	  return !this.node();
+	}
+
+	function selection_each(callback) {
+
+	  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+	    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
+	      if (node = group[i]) callback.call(node, node.__data__, i, group);
+	    }
+	  }
+
+	  return this;
+	}
+
+	function attrRemove(name) {
+	  return function() {
+	    this.removeAttribute(name);
+	  };
+	}
+
+	function attrRemoveNS(fullname) {
+	  return function() {
+	    this.removeAttributeNS(fullname.space, fullname.local);
+	  };
+	}
+
+	function attrConstant(name, value) {
+	  return function() {
+	    this.setAttribute(name, value);
+	  };
+	}
+
+	function attrConstantNS(fullname, value) {
+	  return function() {
+	    this.setAttributeNS(fullname.space, fullname.local, value);
+	  };
+	}
+
+	function attrFunction(name, value) {
+	  return function() {
+	    var v = value.apply(this, arguments);
+	    if (v == null) this.removeAttribute(name);
+	    else this.setAttribute(name, v);
+	  };
+	}
+
+	function attrFunctionNS(fullname, value) {
+	  return function() {
+	    var v = value.apply(this, arguments);
+	    if (v == null) this.removeAttributeNS(fullname.space, fullname.local);
+	    else this.setAttributeNS(fullname.space, fullname.local, v);
+	  };
+	}
+
+	function selection_attr(name, value) {
+	  var fullname = namespace(name);
+
+	  if (arguments.length < 2) {
+	    var node = this.node();
+	    return fullname.local
+	        ? node.getAttributeNS(fullname.space, fullname.local)
+	        : node.getAttribute(fullname);
+	  }
+
+	  return this.each((value == null
+	      ? (fullname.local ? attrRemoveNS : attrRemove) : (typeof value === "function"
+	      ? (fullname.local ? attrFunctionNS : attrFunction)
+	      : (fullname.local ? attrConstantNS : attrConstant)))(fullname, value));
+	}
+
+	function defaultView(node) {
+	  return (node.ownerDocument && node.ownerDocument.defaultView) // node is a Node
+	      || (node.document && node) // node is a Window
+	      || node.defaultView; // node is a Document
+	}
+
+	function styleRemove(name) {
+	  return function() {
+	    this.style.removeProperty(name);
+	  };
+	}
+
+	function styleConstant(name, value, priority) {
+	  return function() {
+	    this.style.setProperty(name, value, priority);
+	  };
+	}
+
+	function styleFunction(name, value, priority) {
+	  return function() {
+	    var v = value.apply(this, arguments);
+	    if (v == null) this.style.removeProperty(name);
+	    else this.style.setProperty(name, v, priority);
+	  };
+	}
+
+	function selection_style(name, value, priority) {
+	  return arguments.length > 1
+	      ? this.each((value == null
+	            ? styleRemove : typeof value === "function"
+	            ? styleFunction
+	            : styleConstant)(name, value, priority == null ? "" : priority))
+	      : styleValue(this.node(), name);
+	}
+
+	function styleValue(node, name) {
+	  return node.style.getPropertyValue(name)
+	      || defaultView(node).getComputedStyle(node, null).getPropertyValue(name);
+	}
+
+	function propertyRemove(name) {
+	  return function() {
+	    delete this[name];
+	  };
+	}
+
+	function propertyConstant(name, value) {
+	  return function() {
+	    this[name] = value;
+	  };
+	}
+
+	function propertyFunction(name, value) {
+	  return function() {
+	    var v = value.apply(this, arguments);
+	    if (v == null) delete this[name];
+	    else this[name] = v;
+	  };
+	}
+
+	function selection_property(name, value) {
+	  return arguments.length > 1
+	      ? this.each((value == null
+	          ? propertyRemove : typeof value === "function"
+	          ? propertyFunction
+	          : propertyConstant)(name, value))
+	      : this.node()[name];
+	}
+
+	function classArray(string) {
+	  return string.trim().split(/^|\s+/);
+	}
+
+	function classList(node) {
+	  return node.classList || new ClassList(node);
+	}
+
+	function ClassList(node) {
+	  this._node = node;
+	  this._names = classArray(node.getAttribute("class") || "");
+	}
+
+	ClassList.prototype = {
+	  add: function(name) {
+	    var i = this._names.indexOf(name);
+	    if (i < 0) {
+	      this._names.push(name);
+	      this._node.setAttribute("class", this._names.join(" "));
+	    }
+	  },
+	  remove: function(name) {
+	    var i = this._names.indexOf(name);
+	    if (i >= 0) {
+	      this._names.splice(i, 1);
+	      this._node.setAttribute("class", this._names.join(" "));
+	    }
+	  },
+	  contains: function(name) {
+	    return this._names.indexOf(name) >= 0;
+	  }
+	};
+
+	function classedAdd(node, names) {
+	  var list = classList(node), i = -1, n = names.length;
+	  while (++i < n) list.add(names[i]);
+	}
+
+	function classedRemove(node, names) {
+	  var list = classList(node), i = -1, n = names.length;
+	  while (++i < n) list.remove(names[i]);
+	}
+
+	function classedTrue(names) {
+	  return function() {
+	    classedAdd(this, names);
+	  };
+	}
+
+	function classedFalse(names) {
+	  return function() {
+	    classedRemove(this, names);
+	  };
+	}
+
+	function classedFunction(names, value) {
+	  return function() {
+	    (value.apply(this, arguments) ? classedAdd : classedRemove)(this, names);
+	  };
+	}
+
+	function selection_classed(name, value) {
+	  var names = classArray(name + "");
+
+	  if (arguments.length < 2) {
+	    var list = classList(this.node()), i = -1, n = names.length;
+	    while (++i < n) if (!list.contains(names[i])) return false;
+	    return true;
+	  }
+
+	  return this.each((typeof value === "function"
+	      ? classedFunction : value
+	      ? classedTrue
+	      : classedFalse)(names, value));
+	}
+
+	function textRemove() {
+	  this.textContent = "";
+	}
+
+	function textConstant(value) {
+	  return function() {
+	    this.textContent = value;
+	  };
+	}
+
+	function textFunction(value) {
+	  return function() {
+	    var v = value.apply(this, arguments);
+	    this.textContent = v == null ? "" : v;
+	  };
+	}
+
+	function selection_text(value) {
+	  return arguments.length
+	      ? this.each(value == null
+	          ? textRemove : (typeof value === "function"
+	          ? textFunction
+	          : textConstant)(value))
+	      : this.node().textContent;
+	}
+
+	function htmlRemove() {
+	  this.innerHTML = "";
+	}
+
+	function htmlConstant(value) {
+	  return function() {
+	    this.innerHTML = value;
+	  };
+	}
+
+	function htmlFunction(value) {
+	  return function() {
+	    var v = value.apply(this, arguments);
+	    this.innerHTML = v == null ? "" : v;
+	  };
+	}
+
+	function selection_html(value) {
+	  return arguments.length
+	      ? this.each(value == null
+	          ? htmlRemove : (typeof value === "function"
+	          ? htmlFunction
+	          : htmlConstant)(value))
+	      : this.node().innerHTML;
+	}
+
+	function raise() {
+	  if (this.nextSibling) this.parentNode.appendChild(this);
+	}
+
+	function selection_raise() {
+	  return this.each(raise);
+	}
+
+	function lower() {
+	  if (this.previousSibling) this.parentNode.insertBefore(this, this.parentNode.firstChild);
+	}
+
+	function selection_lower() {
+	  return this.each(lower);
+	}
+
+	function selection_append(name) {
+	  var create = typeof name === "function" ? name : creator(name);
+	  return this.select(function() {
+	    return this.appendChild(create.apply(this, arguments));
+	  });
+	}
+
+	function constantNull() {
+	  return null;
+	}
+
+	function selection_insert(name, before) {
+	  var create = typeof name === "function" ? name : creator(name),
+	      select = before == null ? constantNull : typeof before === "function" ? before : selector(before);
+	  return this.select(function() {
+	    return this.insertBefore(create.apply(this, arguments), select.apply(this, arguments) || null);
+	  });
+	}
+
+	function remove() {
+	  var parent = this.parentNode;
+	  if (parent) parent.removeChild(this);
+	}
+
+	function selection_remove() {
+	  return this.each(remove);
+	}
+
+	function selection_cloneShallow() {
+	  var clone = this.cloneNode(false), parent = this.parentNode;
+	  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
+	}
+
+	function selection_cloneDeep() {
+	  var clone = this.cloneNode(true), parent = this.parentNode;
+	  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
+	}
+
+	function selection_clone(deep) {
+	  return this.select(deep ? selection_cloneDeep : selection_cloneShallow);
+	}
+
+	function selection_datum(value) {
+	  return arguments.length
+	      ? this.property("__data__", value)
+	      : this.node().__data__;
+	}
+
+	var filterEvents = {};
+
+	if (typeof document !== "undefined") {
+	  var element = document.documentElement;
+	  if (!("onmouseenter" in element)) {
+	    filterEvents = {mouseenter: "mouseover", mouseleave: "mouseout"};
+	  }
+	}
+
+	function filterContextListener(listener, index, group) {
+	  listener = contextListener(listener, index, group);
+	  return function(event) {
+	    var related = event.relatedTarget;
+	    if (!related || (related !== this && !(related.compareDocumentPosition(this) & 8))) {
+	      listener.call(this, event);
+	    }
+	  };
+	}
+
+	function contextListener(listener, index, group) {
+	  return function(event1) {
+	    try {
+	      listener.call(this, this.__data__, index, group);
+	    } finally {
+	    }
+	  };
+	}
+
+	function parseTypenames(typenames) {
+	  return typenames.trim().split(/^|\s+/).map(function(t) {
+	    var name = "", i = t.indexOf(".");
+	    if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
+	    return {type: t, name: name};
+	  });
+	}
+
+	function onRemove(typename) {
+	  return function() {
+	    var on = this.__on;
+	    if (!on) return;
+	    for (var j = 0, i = -1, m = on.length, o; j < m; ++j) {
+	      if (o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name) {
+	        this.removeEventListener(o.type, o.listener, o.capture);
+	      } else {
+	        on[++i] = o;
+	      }
+	    }
+	    if (++i) on.length = i;
+	    else delete this.__on;
+	  };
+	}
+
+	function onAdd(typename, value, capture) {
+	  var wrap = filterEvents.hasOwnProperty(typename.type) ? filterContextListener : contextListener;
+	  return function(d, i, group) {
+	    var on = this.__on, o, listener = wrap(value, i, group);
+	    if (on) for (var j = 0, m = on.length; j < m; ++j) {
+	      if ((o = on[j]).type === typename.type && o.name === typename.name) {
+	        this.removeEventListener(o.type, o.listener, o.capture);
+	        this.addEventListener(o.type, o.listener = listener, o.capture = capture);
+	        o.value = value;
+	        return;
+	      }
+	    }
+	    this.addEventListener(typename.type, listener, capture);
+	    o = {type: typename.type, name: typename.name, value: value, listener: listener, capture: capture};
+	    if (!on) this.__on = [o];
+	    else on.push(o);
+	  };
+	}
+
+	function selection_on(typename, value, capture) {
+	  var typenames = parseTypenames(typename + ""), i, n = typenames.length, t;
+
+	  if (arguments.length < 2) {
+	    var on = this.node().__on;
+	    if (on) for (var j = 0, m = on.length, o; j < m; ++j) {
+	      for (i = 0, o = on[j]; i < n; ++i) {
+	        if ((t = typenames[i]).type === o.type && t.name === o.name) {
+	          return o.value;
+	        }
+	      }
+	    }
+	    return;
+	  }
+
+	  on = value ? onAdd : onRemove;
+	  if (capture == null) capture = false;
+	  for (i = 0; i < n; ++i) this.each(on(typenames[i], value, capture));
+	  return this;
+	}
+
+	function dispatchEvent(node, type, params) {
+	  var window = defaultView(node),
+	      event = window.CustomEvent;
+
+	  if (typeof event === "function") {
+	    event = new event(type, params);
+	  } else {
+	    event = window.document.createEvent("Event");
+	    if (params) event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;
+	    else event.initEvent(type, false, false);
+	  }
+
+	  node.dispatchEvent(event);
+	}
+
+	function dispatchConstant(type, params) {
+	  return function() {
+	    return dispatchEvent(this, type, params);
+	  };
+	}
+
+	function dispatchFunction(type, params) {
+	  return function() {
+	    return dispatchEvent(this, type, params.apply(this, arguments));
+	  };
+	}
+
+	function selection_dispatch(type, params) {
+	  return this.each((typeof params === "function"
+	      ? dispatchFunction
+	      : dispatchConstant)(type, params));
+	}
+
+	var root = [null];
+
+	function Selection(groups, parents) {
+	  this._groups = groups;
+	  this._parents = parents;
+	}
+
+	Selection.prototype = {
+	  constructor: Selection,
+	  select: selection_select,
+	  selectAll: selection_selectAll,
+	  filter: selection_filter,
+	  data: selection_data,
+	  enter: selection_enter,
+	  exit: selection_exit,
+	  join: selection_join,
+	  merge: selection_merge,
+	  order: selection_order,
+	  sort: selection_sort,
+	  call: selection_call,
+	  nodes: selection_nodes,
+	  node: selection_node,
+	  size: selection_size,
+	  empty: selection_empty,
+	  each: selection_each,
+	  attr: selection_attr,
+	  style: selection_style,
+	  property: selection_property,
+	  classed: selection_classed,
+	  text: selection_text,
+	  html: selection_html,
+	  raise: selection_raise,
+	  lower: selection_lower,
+	  append: selection_append,
+	  insert: selection_insert,
+	  remove: selection_remove,
+	  clone: selection_clone,
+	  datum: selection_datum,
+	  on: selection_on,
+	  dispatch: selection_dispatch
+	};
+
+	function select(selector) {
+	  return typeof selector === "string"
+	      ? new Selection([[document.querySelector(selector)]], [document.documentElement])
+	      : new Selection([[selector]], root);
+	}
+
+	///////////////////////////////////////////////////////////////////////////////
+	/** @preserve
+	/////    SAPC APCA - Advanced Perceptual Contrast Algorithm
+	/////           Beta 0.1.9 W3 • contrast function only
+	/////           DIST: W3 • Revision date: July 3, 2022
+	/////    Function to parse color values and determine Lc contrast
+	/////    Copyright © 2019-2022 by Andrew Somers. All Rights Reserved.
+	/////    LICENSE: W3 LICENSE
+	/////    CONTACT: Please use the ISSUES or DISCUSSIONS tab at:
+	/////    https://github.com/Myndex/SAPC-APCA/
+	/////
+	///////////////////////////////////////////////////////////////////////////////
+	/////
+	/////    MINIMAL IMPORTS:
+	/////      import { APCAcontrast, sRGBtoY, displayP3toY,
+	/////               calcAPCA, fontLookupAPCA } from 'apca-w3';
+	/////      import { colorParsley } from 'colorparsley';
+	/////
+	/////    FORWARD CONTRAST USAGE:
+	/////      Lc = APCAcontrast( sRGBtoY( TEXTcolor ) , sRGBtoY( BACKGNDcolor ) );
+	/////    Where the colors are sent as an rgba array [255,255,255,1]
+	/////
+	/////    Retrieving an array of font sizes for the contrast:
+	/////      fontArray = fontLookupAPCA(Lc);
+	/////
+	/////    Live Demonstrator at https://www.myndex.com/APCA/
+	// */
+	///////////////////////////////////////////////////////////////////////////////
+
+	// */ //// END LOCAL TESTING SWITCH
+
+
+	/////  Module Scope Object Containing Constants  /////
+	/////   APCA   0.0.98G - 4g - W3 Compatible Constants
+
+	/////  𝒦 SA98G  ///////////////////////////////////
+	    const SA98G = {
+
+	        mainTRC: 2.4, // 2.4 exponent for emulating actual monitor perception
+
+	            // sRGB coefficients
+	        sRco: 0.2126729, 
+	        sGco: 0.7151522, 
+	        sBco: 0.0721750, 
+
+	              // G-4g constants for use with 2.4 exponent
+	        normBG: 0.56, 
+	        normTXT: 0.57,
+	        revTXT: 0.62,
+	        revBG: 0.65,
+
+	              // G-4g Clamps and Scalers
+	        blkThrs: 0.022,
+	        blkClmp: 1.414, 
+	        scaleBoW: 1.14,
+	        scaleWoB: 1.14,
+	        loBoWoffset: 0.027,
+	        loWoBoffset: 0.027,
+	        deltaYmin: 0.0005,
+	        loClip: 0.1};
+
+
+
+
+	//////////////////////////////////////////////////////////////////////////////
+	//////////  APCA CALCULATION FUNCTIONS \/////////////////////////////////////
+
+	//////////  ƒ  APCAcontrast()  ////////////////////////////////////////////
+	function APCAcontrast (txtY,bgY,places = -1) {
+	                 // send linear Y (luminance) for text and background.
+	                // txtY and bgY must be between 0.0-1.0
+	               // IMPORTANT: Do not swap, polarity is important.
+
+	  const icp = [0.0,1.1];     // input range clamp / input error check
+
+	  if(isNaN(txtY)||isNaN(bgY)||Math.min(txtY,bgY)<icp[0]||
+	                              Math.max(txtY,bgY)>icp[1]){
+	    return 0.0;  // return zero on error
+	    // return 'error'; // optional string return for error
+	  }
+	//////////   SAPC LOCAL VARS   /////////////////////////////////////////
+
+	  let SAPC = 0.0;            // For raw SAPC values
+	  let outputContrast = 0.0; // For weighted final values
+	  let polCat = 'BoW';      // Alternate Polarity Indicator. N normal R reverse
+
+	  // TUTORIAL
+
+	  // Use Y for text and BG, and soft clamp black,
+	  // return 0 for very close luminances, determine
+	  // polarity, and calculate SAPC raw contrast
+	  // Then scale for easy to remember levels.
+
+	  // Note that reverse contrast (white text on black)
+	  // intentionally returns a negative number
+	  // Proper polarity is important!
+
+	//////////   BLACK SOFT CLAMP   ////////////////////////////////////////
+
+	          // Soft clamps Y for either color if it is near black.
+	  txtY = (txtY > SA98G.blkThrs) ? txtY :
+	                         txtY + Math.pow(SA98G.blkThrs - txtY, SA98G.blkClmp);
+	  bgY = (bgY > SA98G.blkThrs) ? bgY :
+	                          bgY + Math.pow(SA98G.blkThrs - bgY, SA98G.blkClmp);
+
+	       ///// Return 0 Early for extremely low ∆Y
+	  if ( Math.abs(bgY - txtY) < SA98G.deltaYmin ) { return 0.0; }
+
+
+	//////////   APCA/SAPC CONTRAST - LOW CLIP (W3 LICENSE)  ///////////////
+
+	  if ( bgY > txtY ) {  // For normal polarity, black text on white (BoW)
+
+	              // Calculate the SAPC contrast value and scale
+	    SAPC = ( Math.pow(bgY, SA98G.normBG) - 
+	             Math.pow(txtY, SA98G.normTXT) ) * SA98G.scaleBoW;
+
+	            // Low Contrast smooth rollout to prevent polarity reversal
+	           // and also a low-clip for very low contrasts
+	    outputContrast = (SAPC < SA98G.loClip) ? 0.0 : SAPC - SA98G.loBoWoffset;
+
+	  } else {  // For reverse polarity, light text on dark (WoB)
+	           // WoB should always return negative value.
+	    polCat = 'WoB';
+
+	    SAPC = ( Math.pow(bgY, SA98G.revBG) - 
+	             Math.pow(txtY, SA98G.revTXT) ) * SA98G.scaleWoB;
+
+	    outputContrast = (SAPC > -0.1) ? 0.0 : SAPC + SA98G.loWoBoffset;
+	  }
+
+	         // return Lc (lightness contrast) as a signed numeric value 
+	        // Round to the nearest whole number as string is optional.
+	       // Rounded can be a signed INT as output will be within ± 127 
+	      // places = -1 returns signed float, 1 or more set that many places
+	     // 0 returns rounded string, uses BoW or WoB instead of minus sign
+
+	  if(places < 0 ){  // Default (-1) number out, all others are strings
+	    return  outputContrast * 100.0;
+	  } else if(places == 0 ){
+	    return  Math.round(Math.abs(outputContrast)*100.0)+'<sub>'+polCat+'</sub>';
+	  } else if(Number.isInteger(places)){
+	    return  (outputContrast * 100.0).toFixed(places);
+	  } else { return 0.0 }
+
+	} // End APCAcontrast()
+
+	/////////\                                      ///////////////////////////\
+	//////////\  END  fontLookupAPCA()  0.1.7 (G)  /////////////////////////////\
+	/////////////////////////////////////////////////////////////////////////////\
+
+
+
+
+	//////////////////////////////////////////////////////////////////////////////
+	//////////  LUMINANCE CONVERTERS  |//////////////////////////////////////////
+
+
+	//////////  ƒ  sRGBtoY()  //////////////////////////////////////////////////
+	function sRGBtoY (rgb = [0,0,0]) { // send sRGB 8bpc (0xFFFFFF) or string
+
+	// NOTE: Currently expects 0-255
+
+	/////   APCA   0.0.98G - 4g - W3 Compatible Constants   ////////////////////
+	/*
+	const mainTRC = 2.4; // 2.4 exponent emulates actual monitor perception
+	    
+	const sRco = 0.2126729, 
+	      sGco = 0.7151522, 
+	      sBco = 0.0721750; // sRGB coefficients
+	      */
+	// Future:
+	// 0.2126478133913640	0.7151791475336150	0.0721730390750208
+	// Derived from:
+	// xW	yW	K	xR	yR	xG	yG	xB	yB
+	// 0.312720	0.329030	6504	0.640	0.330	0.300	0.600	0.150	0.060
+
+	         // linearize r, g, or b then apply coefficients
+	        // and sum then return the resulting luminance
+
+	  function simpleExp (chan) { return Math.pow(chan/255.0, SA98G.mainTRC); }
+	  return SA98G.sRco * simpleExp(rgb[0]) +
+	         SA98G.sGco * simpleExp(rgb[1]) +
+	         SA98G.sBco * simpleExp(rgb[2]);
+	         
+	} // End sRGBtoY()
+
+
+
+
+	//\                                     ////////////////////////////////////////
+	///\                                   ////////////////////////////////////////
+	////\                                 ////////////////////////////////////////
+	/////\  END APCA 0.1.9  G-4g  BLOCK  ////////////////////////////////////////
+	////////////////////////////////////////////////////////////////////////////
+	///////////////////////////////////////////////////////////////////////////
+
+	function hexToColor(hex_string, opacity) {
+		if (typeof hex_string != "string") return false;
+		var c = color(hex_string);
+		c.opacity = 1;
+
+		return c;
+	}
+
+	function getAPCAContrast(text_hex, background_hex) {
+		if (!text_hex || !background_hex) {
+			console.warn("No valid color", text_hex, background_hex);
+			return;
+		}
+		const text_y = sRGBtoY(Object.values(hexToColor(text_hex)));
+		const background_y = sRGBtoY(Object.values(hexToColor(background_hex)));
+		return Math.abs(APCAcontrast(text_y, background_y));
+	}
+
+	function isPaleBackground(background_hex) {
+		if (!background_hex) {
+			console.warn("No valid color", background_hex);
+			return;
+		}
+
+		const black_contrast = getAPCAContrast("#000000", background_hex);
+		const white_contrast = getAPCAContrast("#ffffff", background_hex);
+		return white_contrast < black_contrast ? true : false;
+	}
+
+	const DEFAULTS = Object.freeze({
+		searchbox_input_expanded: false,
+		searchbox_size: 2,
+		searchbox_width: 12,
+		search_bg_color: null,
+		search_bg_opacity: 0.9,
+		searchbox_stroke: 0.1,
+		searchbox_color: null,
+		searchbox_radius: 4,
+	});
+
+	function SearchboxStyle(state_, selector_, layout_) {
+		this._state = state_;
+		for (const key in DEFAULTS) {
+			if (this._state[key] === undefined) this._state[key] = DEFAULTS[key];
+		}
+
+		this._layout = layout_ || {};
+
+		this._styles = new Stylesheet();
+		this._selector = selector_;
+		this._createStylesheet();
+
+		return this;
+	}
+
+	SearchboxStyle.prototype._createStylesheet = function () {
+		this._stylesheet = document.createElement("style");
+		this._stylesheet.className = "fl-ui-styles-searchbox";
+		document.head.appendChild(this._stylesheet);
+	};
+
+	SearchboxStyle.prototype.update = function () {
+		this._styles.clear();
+		const prefers_reduced_motion =
+			window.matchMedia &&
+			window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+		const bg_color = this._state.search_bg_color || this._layout.background_color;
+		const background_color = bg_color
+			? hexToRgba(bg_color, this._state.search_bg_opacity)
+			: "transparent";
+
+		const user_defined_searchbox_color =
+			this._state.searchbox_color || this._layout.font_color;
+		const searchbox_color = user_defined_searchbox_color || "inherit";
+		const searchbox_color_paler = user_defined_searchbox_color
+			? hexToRgba(
+					user_defined_searchbox_color,
+					(this._state.searchbox_stroke + 1) / 2,
+				)
+			: "currentColor";
+		const searchbox_color_palest = user_defined_searchbox_color
+			? hexToRgba(user_defined_searchbox_color, this._state.searchbox_stroke)
+			: "currentColor";
+
+		const TEXT_SIZE = 0.55; // Relative to the search box height
+		const ICON_SIZE = 0.45; // Relative to the search box height
+
+		// Main container
+		this._styles
+			.select(this._selector)
+			.style("display", "inline-block")
+			.style(
+				"width",
+				this._state.searchbox_size + this._state.searchbox_width + "rem",
+			)
+			.style("max-width", "calc(100% - 2px)")
+			.style("box-sizing", "border-box");
+
+		select(this._selector).attr(
+			"data-pale-background",
+			isPaleBackground(background_color),
+		);
+
+		// Input field
+		this._styles
+			.select(this._selector + " input")
+			.style("border", "2px solid " + searchbox_color_palest)
+			.style("border-radius", this._state.searchbox_radius + "px")
+			.style("background-color", background_color)
+			.style("color", searchbox_color)
+			.style("font-family", "inherit")
+			.style("cursor", this._state.searchbox_input_expanded ? "text" : "pointer")
+			.style("position", "relative")
+			.style("opacity", this._state.search_bg_opacity)
+			.style("transition", prefers_reduced_motion ? "none" : "200ms width")
+			.style("display", "block")
+			.style("box-sizing", "border-box")
+			.style("padding", "0 0 0 calc(" + this._state.searchbox_size + "rem - 4px)")
+			.style("font-size", this._state.searchbox_size * TEXT_SIZE + "rem");
+
+		this._styles
+			.select(this._selector + ".expanded input")
+			.style("cursor", "text");
+
+		if (this._state.searchbox_input_expanded) {
+			this._styles
+				.select(this._selector + " input")
+				.style("width", "100%")
+				.style("height", this._state.searchbox_size + "rem");
+		} else {
+			this._styles
+				.select(this._selector + " input")
+				.style("width", this._state.searchbox_size + "rem")
+				.style("height", this._state.searchbox_size + "rem");
+		}
+
+		// Search icon
+		this._styles
+			.select(this._selector + " .search-icon")
+			.style("position", "absolute")
+			.style("pointer-events", "none")
+			.style("width", this._state.searchbox_size * ICON_SIZE + "rem")
+			.style("height", this._state.searchbox_size * ICON_SIZE + "rem")
+			.style(
+				"left",
+				this._state.searchbox_size * Math.pow(1 - ICON_SIZE, 2) + "rem",
+			)
+			.style(
+				"top",
+				this._state.searchbox_size * Math.pow(1 - ICON_SIZE, 2) + "rem",
+			);
+
+		// Search icon SVG
+		this._styles
+			.select(this._selector + " .search-icon svg")
+			.style("width", "100%")
+			.style("height", "100%")
+			.select("path")
+			.style("fill", searchbox_color);
+
+		// Search list (dropdown)
+		const list_bg_color =
+			this._state.search_bg_color || this._layout.background_color;
+		this._styles
+			.select(this._selector + " .search-list")
+			.style("display", "none")
+			.style("opacity", "0")
+			.style("margin-top", "1px")
+			.style("min-width", "100%")
+			.style("max-height", "50vh")
+			.style("overflow", "auto")
+			.style("position", "absolute")
+			.style("box-shadow", "0 1px 3px rgba(0,0,0,0.2)")
+			.style("color", searchbox_color)
+			.style("border-radius", "3px")
+			.style("font-size", this._state.searchbox_size * TEXT_SIZE + "rem")
+			.style("z-index", "1000");
+
+		this._styles
+			.select(this._selector + " .search-list.visible")
+			.style("opacity", 1)
+			.style("visibility", "visible")
+			.style("pointer-events", "auto");
+
+		// Apply data-pale-background to the search-list for accessibility styles
+		select(this._selector + " .search-list").attr(
+			"data-pale-background",
+			isPaleBackground(list_bg_color || background_color),
+		);
+
+		// Search list items
+		this._styles
+			.select(this._selector + " .search-list .search-item")
+			.style("height", this._state.searchbox_size * TEXT_SIZE + 1 + "rem")
+			.style("background-color", list_bg_color || "transparent")
+			.style("opacity", this._state.search_bg_opacity)
+			.style("padding", "0.5rem")
+			.style("cursor", "pointer")
+			.style("position", "relative")
+			.select("p")
+			.style("margin", "0")
+			.style("line-height", "1.2em")
+			.style("display", "block")
+			.style("white-space", "nowrap")
+			.style("font-weight", "normal")
+			.style("overflow", "hidden")
+			.style("text-overflow", "ellipsis")
+			.style("pointer-events", "none");
+
+		// Search list item hover and selected states for pale backgrounds
+		this._styles
+			.select(
+				this._selector +
+					" .search-list[data-pale-background='true'] .search-item:hover",
+			)
+			.style("outline", "2px solid black")
+			.style("outline-offset", "-2px");
+
+		this._styles
+			.select(
+				this._selector +
+					" .search-list[data-pale-background='true'] .search-item.selected",
+			)
+			.style("outline", "2px solid black")
+			.style("outline-offset", "-2px")
+			.style("cursor", "default");
+
+		this._styles
+			.select(
+				this._selector +
+					" .search-list[data-pale-background='true'] .search-item:focus-visible",
+			)
+			.style("outline", "2px solid black")
+			.style("outline-offset", "-2px");
+
+		// Search list item hover and selected states for dark backgrounds
+		this._styles
+			.select(
+				this._selector +
+					" .search-list[data-pale-background='false'] .search-item:hover",
+			)
+			.style("outline", "2px solid white")
+			.style("outline-offset", "-2px");
+
+		this._styles
+			.select(
+				this._selector +
+					" .search-list[data-pale-background='false'] .search-item.selected",
+			)
+			.style("outline", "2px solid white")
+			.style("outline-offset", "-2px")
+			.style("cursor", "default");
+
+		this._styles
+			.select(
+				this._selector +
+					" .search-list[data-pale-background='false'] .search-item:focus-visible",
+			)
+			.style("outline", "2px solid white")
+			.style("outline-offset", "-2px");
+
+		// Active state (when search is focused)
+		this._styles
+			.select(this._selector + ".active .search-list")
+			.style("display", "block");
+
+		// Expanded state
+		this._styles
+			.select(this._selector + ".expanded input")
+			.style("width", "100% !important");
+
+		this._styles
+			.select(this._selector + " input::placeholder")
+			.style("color", searchbox_color_paler);
+
+		this._stylesheet.innerHTML = this._styles.print();
+	};
+
+	/**
+	 * @typedef {import('./searchbox-style/index.js').SearchboxStyleState} SearchboxStyleState
+	 */
+
 	function createGeneralControlsStyle(state, selector, layout) {
 		return new GeneralControlsStyle(state, selector, layout);
 	}
@@ -1060,9 +2484,14 @@
 		return new SliderStyle(state, selector, layout);
 	}
 
+	function createSearchboxStyle(state, selector, layout) {
+		return new SearchboxStyle(state, selector, layout);
+	}
+
 	exports.createButtonStyle = createButtonStyle;
 	exports.createDropdownStyle = createDropdownStyle;
 	exports.createGeneralControlsStyle = createGeneralControlsStyle;
+	exports.createSearchboxStyle = createSearchboxStyle;
 	exports.createSliderStyle = createSliderStyle;
 
 }));