@nebula.js/stardust 3.0.4 → 3.1.0-alpha.0

package/core/esm/dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v3.0.4
+* @nebula.js/stardust v3.1.0-alpha.0
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -1566,6 +1566,24 @@ var Visualization_UnfulfilledCalculationCondition = {
 		"zh-TW": "不符計算條件"
 	}
 };
+var Listbox_ScreenReaderInstructions = {
+	id: "Listbox.ScreenReaderInstructions",
+	locale: {
+		"en-US": "Activating the elements below will cause content on the page to be updated"
+	}
+};
+var Listbox_Search_ScreenReaderInstructions = {
+	id: "Listbox.Search.ScreenReaderInstructions",
+	locale: {
+		"en-US": "The following search field filters results below as you type"
+	}
+};
+var Listbox_ResultFilterLabel = {
+	id: "Listbox.ResultFilterLabel",
+	locale: {
+		"en-US": "Search Results Filter"
+	}
+};
 var all = {
 	Cancel: Cancel$1,
 	CurrentSelections_All: CurrentSelections_All,
@@ -1596,7 +1614,10 @@ var all = {
 	Visualization_Invalid_Dimension: Visualization_Invalid_Dimension,
 	Visualization_Invalid_Measure: Visualization_Invalid_Measure,
 	Visualization_LayoutError: Visualization_LayoutError,
-	Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition
+	Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition,
+	Listbox_ScreenReaderInstructions: Listbox_ScreenReaderInstructions,
+	Listbox_Search_ScreenReaderInstructions: Listbox_Search_ScreenReaderInstructions,
+	Listbox_ResultFilterLabel: Listbox_ResultFilterLabel
 };
 
 function appLocaleFn(language) {
@@ -1906,76 +1927,457 @@ EventEmitter.listenerCount = function(emitter, type) {
   return ret;
 };
 
-var hasOwn = Object.prototype.hasOwnProperty;
-var toStr = Object.prototype.toString;
-var defineProperty = Object.defineProperty;
-var gOPD = Object.getOwnPropertyDescriptor;
-
-var isArray$1 = function isArray(arr) {
-	if (typeof Array.isArray === 'function') {
-		return Array.isArray(arr);
-	}
-
-	return toStr.call(arr) === '[object Array]';
-};
+function define(constructor, factory, prototype) {
+  constructor.prototype = factory.prototype = prototype;
+  prototype.constructor = constructor;
+}
 
-var isPlainObject$1 = function isPlainObject(obj) {
-	if (!obj || toStr.call(obj) !== '[object Object]') {
-		return false;
-	}
+function extend$2(parent, definition) {
+  var prototype = Object.create(parent.prototype);
+  for (var key in definition) prototype[key] = definition[key];
+  return prototype;
+}
 
-	var hasOwnConstructor = hasOwn.call(obj, 'constructor');
-	var hasIsPrototypeOf = obj.constructor && obj.constructor.prototype && hasOwn.call(obj.constructor.prototype, 'isPrototypeOf');
-	// Not own constructor property must be Object
-	if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
-		return false;
-	}
+function Color() {}
 
-	// Own properties are enumerated firstly, so to speed up,
-	// if last one is own, then all properties are own.
-	var key;
-	for (key in obj) { /**/ }
+var darker = 0.7;
+var brighter = 1 / darker;
 
-	return typeof key === 'undefined' || hasOwn.call(obj, key);
-};
+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] + "\\)$");
 
-// If name is '__proto__', and Object.defineProperty is available, define __proto__ as an own property on target
-var setProperty = function setProperty(target, options) {
-	if (defineProperty && options.name === '__proto__') {
-		defineProperty(target, options.name, {
-			enumerable: true,
-			configurable: true,
-			value: options.newValue,
-			writable: true
-		});
-	} else {
-		target[options.name] = options.newValue;
-	}
+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
 };
 
-// Return undefined instead of __proto__ if '__proto__' is not an own property
-var getProperty = function getProperty(obj, name) {
-	if (name === '__proto__') {
-		if (!hasOwn.call(obj, name)) {
-			return void 0;
-		} else if (gOPD) {
-			// In early versions of node, obj['__proto__'] is buggy when obj has
-			// __proto__ as an own property. Object.getOwnPropertyDescriptor() works.
-			return gOPD(obj, name).value;
-		}
-	}
+define(Color, color$3, {
+  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
+});
 
-	return obj[name];
-};
+function color_formatHex() {
+  return this.rgb().formatHex();
+}
 
-var extend$2 = function extend() {
-	var options, name, src, copy, copyIsArray, clone;
-	var target = arguments[0];
-	var i = 1;
-	var length = arguments.length;
-	var deep = false;
+function color_formatHsl() {
+  return hslConvert(this).formatHsl();
+}
 
-	// Handle a deep copy situation
+function color_formatRgb() {
+  return this.rgb().formatRgb();
+}
+
+function color$3(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 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
+      : l === 4 ? rgba((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 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$3(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) {
+  this.r = +r;
+  this.g = +g;
+  this.b = +b;
+  this.opacity = +opacity;
+}
+
+define(Rgb, rgb, extend$2(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_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 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$3(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) {
+  this.h = +h;
+  this.s = +s;
+  this.l = +l;
+  this.opacity = +opacity;
+}
+
+define(Hsl, hsl, extend$2(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;
+}
+
+var hasOwn = Object.prototype.hasOwnProperty;
+var toStr = Object.prototype.toString;
+var defineProperty = Object.defineProperty;
+var gOPD = Object.getOwnPropertyDescriptor;
+
+var isArray$1 = function isArray(arr) {
+	if (typeof Array.isArray === 'function') {
+		return Array.isArray(arr);
+	}
+
+	return toStr.call(arr) === '[object Array]';
+};
+
+var isPlainObject$1 = function isPlainObject(obj) {
+	if (!obj || toStr.call(obj) !== '[object Object]') {
+		return false;
+	}
+
+	var hasOwnConstructor = hasOwn.call(obj, 'constructor');
+	var hasIsPrototypeOf = obj.constructor && obj.constructor.prototype && hasOwn.call(obj.constructor.prototype, 'isPrototypeOf');
+	// Not own constructor property must be Object
+	if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
+		return false;
+	}
+
+	// Own properties are enumerated firstly, so to speed up,
+	// if last one is own, then all properties are own.
+	var key;
+	for (key in obj) { /**/ }
+
+	return typeof key === 'undefined' || hasOwn.call(obj, key);
+};
+
+// If name is '__proto__', and Object.defineProperty is available, define __proto__ as an own property on target
+var setProperty = function setProperty(target, options) {
+	if (defineProperty && options.name === '__proto__') {
+		defineProperty(target, options.name, {
+			enumerable: true,
+			configurable: true,
+			value: options.newValue,
+			writable: true
+		});
+	} else {
+		target[options.name] = options.newValue;
+	}
+};
+
+// Return undefined instead of __proto__ if '__proto__' is not an own property
+var getProperty = function getProperty(obj, name) {
+	if (name === '__proto__') {
+		if (!hasOwn.call(obj, name)) {
+			return void 0;
+		} else if (gOPD) {
+			// In early versions of node, obj['__proto__'] is buggy when obj has
+			// __proto__ as an own property. Object.getOwnPropertyDescriptor() works.
+			return gOPD(obj, name).value;
+		}
+	}
+
+	return obj[name];
+};
+
+var extend$1 = function extend() {
+	var options, name, src, copy, copyIsArray, clone;
+	var target = arguments[0];
+	var i = 1;
+	var length = arguments.length;
+	var deep = false;
+
+	// Handle a deep copy situation
 	if (typeof target === 'boolean') {
 		deep = target;
 		target = arguments[1] || {};
@@ -2239,11 +2641,11 @@ var _variables$1 = {
 	"@H6": "10px"
 };
 var type$1 = "light";
-var color$3 = "@B35";
+var color$2 = "@B35";
 var lightRawJSON = {
 	_variables: _variables$1,
 	type: type$1,
-	color: color$3
+	color: color$2
 };
 
 var _variables = {
@@ -2264,18 +2666,18 @@ var _variables = {
 	"@H6": "10px"
 };
 var type = "dark";
-var color$2 = "@B98";
+var color$1 = "@B98";
 var darkRawJSON = {
 	_variables: _variables,
 	type: type,
-	color: color$2
+	color: color$1
 };
 
 function setTheme(t, resolve) {
   const colorRawJSON = t.type === 'dark' ? darkRawJSON : lightRawJSON;
-  const root = extend$2(true, {}, baseRawJSON, colorRawJSON); // avoid merging known array objects as it could cause issues if they are of different types (pyramid vs class) or length
+  const root = extend$1(true, {}, baseRawJSON, colorRawJSON); // avoid merging known array objects as it could cause issues if they are of different types (pyramid vs class) or length
 
-  const rawThemeJSON = extend$2(true, {}, root, {
+  const rawThemeJSON = extend$1(true, {}, root, {
     scales: null,
     palettes: {
       data: null,
@@ -2361,430 +2763,49 @@ function theme$1(resolvedTheme) {
           translation: s.translation,
           type: 'row',
           colors: s.colors
-        });
-      });
-      return pals;
-    },
-
-    dataColors() {
-      /** @interface Theme~DataColorSpecials */
-      return (
-        /** @lends Theme~DataColorSpecials */
-        {
-          /** @type {string} */
-          primary: resolvedTheme.dataColors.primaryColor,
-
-          /** @type {string} */
-          nil: resolvedTheme.dataColors.nullColor,
-
-          /** @type {string} */
-          others: resolvedTheme.dataColors.othersColor
-        }
-      );
-    },
-
-    uiColor(c) {
-      if (c.index < 0 || typeof c.index === 'undefined') {
-        return c.color;
-      }
-
-      if (typeof uiPalette === 'undefined') {
-        uiPalette = this.uiPalettes()[0] || false;
-      }
-
-      if (!uiPalette) {
-        return c.color;
-      }
-
-      if (typeof uiPalette.colors[c.index] === 'undefined') {
-        return c.color;
-      }
-
-      return uiPalette.colors[c.index];
-    }
-
-  };
-}
-
-function define(constructor, factory, prototype) {
-  constructor.prototype = factory.prototype = prototype;
-  prototype.constructor = constructor;
-}
-
-function extend$1(parent, definition) {
-  var prototype = Object.create(parent.prototype);
-  for (var key in definition) prototype[key] = definition[key];
-  return prototype;
-}
-
-function Color() {}
-
-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 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$1, {
-  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_formatHsl() {
-  return hslConvert(this).formatHsl();
-}
-
-function color_formatRgb() {
-  return this.rgb().formatRgb();
-}
-
-function color$1(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 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
-      : l === 4 ? rgba((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 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$1(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) {
-  this.r = +r;
-  this.g = +g;
-  this.b = +b;
-  this.opacity = +opacity;
-}
-
-define(Rgb, rgb, extend$1(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
-}));
+        });
+      });
+      return pals;
+    },
 
-function rgb_formatHex() {
-  return "#" + hex(this.r) + hex(this.g) + hex(this.b);
-}
+    dataColors() {
+      /** @interface Theme~DataColorSpecials */
+      return (
+        /** @lends Theme~DataColorSpecials */
+        {
+          /** @type {string} */
+          primary: resolvedTheme.dataColors.primaryColor,
 
-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 + ")");
-}
+          /** @type {string} */
+          nil: resolvedTheme.dataColors.nullColor,
 
-function hex(value) {
-  value = Math.max(0, Math.min(255, Math.round(value) || 0));
-  return (value < 16 ? "0" : "") + value.toString(16);
-}
+          /** @type {string} */
+          others: resolvedTheme.dataColors.othersColor
+        }
+      );
+    },
 
-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);
-}
+    uiColor(c) {
+      if (c.index < 0 || typeof c.index === 'undefined') {
+        return c.color;
+      }
 
-function hslConvert(o) {
-  if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
-  if (!(o instanceof Color)) o = color$1(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);
-}
+      if (typeof uiPalette === 'undefined') {
+        uiPalette = this.uiPalettes()[0] || false;
+      }
 
-function hsl(h, s, l, opacity) {
-  return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
-}
+      if (!uiPalette) {
+        return c.color;
+      }
 
-function Hsl(h, s, l, opacity) {
-  this.h = +h;
-  this.s = +s;
-  this.l = +l;
-  this.opacity = +opacity;
-}
+      if (typeof uiPalette.colors[c.index] === 'undefined') {
+        return c.color;
+      }
 
-define(Hsl, hsl, extend$1(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 + ")");
-  }
-}));
+      return uiPalette.colors[c.index];
+    }
 
-/* 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;
+  };
 }
 
 /**
@@ -2825,7 +2846,7 @@ class ColorScale {
     this.startLevel = 0;
     this.max = 1;
     this.min = 0;
-    this.nanColor = color$1(nanColor);
+    this.nanColor = color$3(nanColor);
   }
   /**
    * Adds a part to this color scale. The input colors span one part of the gradient, colors between them are interpolated. Input two equal colors for a solid scale part.
@@ -2845,7 +2866,7 @@ class ColorScale {
       this.colorParts[level] = [];
     }
 
-    this.colorParts[level].push([color$1(color1), color$1(color2)]);
+    this.colorParts[level].push([color$3(color1), color$3(color2)]);
   }
   /**
    * Gets the color which represents the input value
@@ -2951,7 +2972,7 @@ function generateLevel(scale, current, size) {
         }
     }
 
-    level.push(color$1(c).formatHex());
+    level.push(color$3(c).formatHex());
   }
 
   return level;
@@ -3141,7 +3162,7 @@ function resolveVariables(objTree, variables) {
 
 styleResolver.resolveRawTheme = raw => {
   // TODO - validate format
-  const c = extend$2(true, {}, raw);
+  const c = extend$1(true, {}, raw);
   resolveVariables(c, c._variables); // eslint-disable-line
   // generate class-pyramid
 
@@ -3153,7 +3174,7 @@ styleResolver.resolveRawTheme = raw => {
 };
 
 function luminance(colStr) {
-  const c = color$1(colStr).rgb();
+  const c = color$3(colStr).rgb();
   const {
     r,
     g,
@@ -3294,6 +3315,23 @@ function theme() {
       }
 
       return styleResolverInstanceCache[basePath].getStyle(path, attribute);
+    },
+
+    /**
+     * Validates a color string using d3-color.
+     * See https://www.npmjs.com/package/d3-color
+     * @param {string} specifier
+     * @returns {string|undefined} The resolved color or undefined
+     * @ignore
+     *
+     * @example
+     * theme.validateColor("red"); // returns "rgba(255,0,0,1)"
+     * theme.validateColor("#00ff00"); // returns "rgba(0,255,0,1)"
+     * theme.validateColor("FOO"); // returns undefined
+     */
+    validateColor() {
+      const c = color$3(...arguments);
+      return c ? c.toString() : undefined;
     }
 
   };
@@ -7473,7 +7511,7 @@ function create$3(definition) {
   return cache[key];
 }
 
-const NEBULA_VERSION_HASH = "85ad" ;
+const NEBULA_VERSION_HASH = "1c8e" ;
 ClassNameGenerator$1.configure(componentName => {
 
   return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
@@ -8046,7 +8084,7 @@ function boot(_ref2) {
   const appRef = React__default.createRef();
   const element = document.createElement('div');
   element.style.display = 'none';
-  element.setAttribute('data-nebulajs-version', "3.0.4" );
+  element.setAttribute('data-nebulajs-version', "3.1.0-alpha.0" );
   element.setAttribute('data-app-id', app.id);
   document.body.appendChild(element);
   ReactDOM.render( /*#__PURE__*/React__default.createElement(NebulaApp, {
@@ -9809,7 +9847,7 @@ function getListboxInlineKeyboardNavigation(_ref2) {
   } = _ref2;
 
   const focusInsideListbox = element => {
-    const fieldElement = element.querySelector('.search input, .value.selector, .value');
+    const fieldElement = element.querySelector('.search input, .value.selector, .value, .ActionsToolbar-* button');
     setKeyboardActive(true);
 
     if (fieldElement) {
@@ -9966,11 +10004,11 @@ const Root$1 = styled$1('div')(_ref2 => {
       width: '100%',
       height: '100%',
       // The checkbox's span
-      '& > span:nth-child(1)': {
+      '& > span:nth-of-type(1)': {
         paddingRight: '8px'
       },
       // The checkbox's label container.
-      '& > span:nth-child(2)': _objectSpread2(_objectSpread2({}, ellipsis), {}, {
+      '& > span:nth-of-type(2)': _objectSpread2(_objectSpread2({}, ellipsis), {}, {
         display: 'flex',
         alignItems: 'center',
         paddingLeft: 0
@@ -10363,7 +10401,6 @@ function ListBox(_ref2) {
     keyboard = {},
     showGray = true,
     scrollState,
-    sortByState,
     selectDisabled = () => false,
     setCount
   } = _ref2;
@@ -10454,9 +10491,9 @@ function ListBox(_ref2) {
     local.current.validPages = false;
 
     if (loaderRef.current) {
-      loaderRef.current.resetloadMoreItemsCache(true); // Skip scrollToItem if we are in selections, or if we dont sort by state.
+      loaderRef.current.resetloadMoreItemsCache(true); // Skip scrollToItem if we are in selections.
 
-      if (layout && layout.qSelectionInfo.qInSelections || sortByState === 0) {
+      if (layout && layout.qSelectionInfo.qInSelections) {
         return;
       }
 
@@ -10707,6 +10744,7 @@ const ActionElement = {
 };
 const Item = React__default.forwardRef((_ref, ref) => {
   let {
+    ariaExpanded = false,
     item,
     addAnchor = false
   } = _ref;
@@ -10727,7 +10765,9 @@ const Item = React__default.forwardRef((_ref, ref) => {
     disabled: disabled,
     style: style,
     className: ActionElement.className,
-    size: "large"
+    size: "large",
+    "aria-expanded": ariaExpanded,
+    "aria-controls": "moreMenuList"
   }, hasSvgIconShape && SvgIcon(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     style: {
@@ -10844,7 +10884,8 @@ function MoreItem(_ref2) {
   return !hidden ? /*#__PURE__*/React__default.createElement(MenuItem, {
     title: item.label,
     onClick: handleClick,
-    disabled: disabled
+    disabled: disabled,
+    tabindex: "0"
   }, hasSvgIconShape && /*#__PURE__*/React__default.createElement(ListItemIcon, {
     className: classes$8.icon
   }, SvgIcon(item.getSvgIconShape())), /*#__PURE__*/React__default.createElement(Typography, {
@@ -10890,7 +10931,9 @@ const More$1 = React__default.forwardRef((_ref3, ref) => {
         maxWidth: '250px'
       }, popoverPaperStyle)
     }
-  }), /*#__PURE__*/React__default.createElement(MenuList, null, actions.map((item, ix) =>
+  }), /*#__PURE__*/React__default.createElement(MenuList, {
+    id: "moreMenuList"
+  }, actions.map((item, ix) =>
   /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
   React__default.createElement(MoreItem, {
@@ -10934,6 +10977,7 @@ const ActionToolbarElement = {
 };
 const ActionsGroup = React__default.forwardRef((_ref2, ref) => {
   let {
+    ariaExpanded = false,
     actions = [],
     first = false,
     last = false,
@@ -10966,6 +11010,7 @@ const ActionsGroup = React__default.forwardRef((_ref2, ref) => {
       key: e.key,
       className: cls.join(' ').trim()
     }, /*#__PURE__*/React__default.createElement(Item, {
+      ariaExpanded: ariaExpanded,
       key: e.key,
       item: e,
       ref: ix === 0 ? ref : null,
@@ -11104,6 +11149,7 @@ function ActionsToolbar(_ref3) {
     last: !showMore && !selections.show
   }), showMore && /*#__PURE__*/React__default.createElement(ActionsGroup, {
     ref: moreRef,
+    ariaExpanded: showMoreItems,
     actions: [moreItem],
     first: !showActions,
     last: !selections.show,
@@ -12929,146 +12975,59 @@ function useConfirmUnfocus(ref, selections, shouldConfirmOnBlur) {
 
 const PREFIX$4 = 'ListBoxInline';
 const classes$4 = {
-  listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader")
+  listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader"),
+  screenReaderOnly: "".concat(PREFIX$4, "-screenReaderOnly")
 };
 const StyledGrid$3 = styled$1(Grid)(() => ({
   ["& .".concat(classes$4.listBoxHeader)]: {
     alignSelf: 'center',
-    display: 'inline-flex'
-  }
-}));
-function ListBoxInline(_ref) {
-  let {
-    app,
-    fieldIdentifier,
-    stateName = '$',
-    options = {},
-    fieldDef
-  } = _ref;
-  const {
-    title,
-    direction,
-    listLayout,
-    search = true,
-    focusSearch = false,
-    toolbar = true,
-    rangeSelect = true,
-    checkboxes = false,
-    properties = {},
-    sessionModel = undefined,
-    selectionsApi = undefined,
-    update = undefined,
-    fetchStart = undefined,
-    dense = false,
-    selectDisabled = () => false,
-    postProcessPages = undefined,
-    calculatePagesHeight,
-    showGray = true,
-    scrollState = undefined,
-    setCount = undefined,
-    shouldConfirmOnBlur = undefined
-  } = options;
-  let {
-    frequencyMode,
-    histogram = false
-  } = options;
-
-  if (fieldDef && fieldDef.failedToFetchFieldDef) {
-    histogram = false;
-    frequencyMode = 'N';
-  }
-
-  switch (true) {
-    case ['none', 'N', 'NX_FREQUENCY_NONE'].includes(frequencyMode):
-      frequencyMode = 'N';
-      break;
-
-    case ['value', 'V', 'NX_FREQUENCY_VALUE', 'default'].includes(frequencyMode):
-      frequencyMode = 'V';
-      break;
-
-    case ['percent', 'P', 'NX_FREQUENCY_PERCENT'].includes(frequencyMode):
-      frequencyMode = 'P';
-      break;
-
-    case ['relative', 'R', 'NX_FREQUENCY_RELATIVE'].includes(frequencyMode):
-      frequencyMode = 'R';
-      break;
-
-    default:
-      frequencyMode = 'N';
-      break;
-  }
-
-  const getListdefFrequencyMode = () => histogram && frequencyMode === 'N' ? 'V' : frequencyMode; // Hook that will trigger update when used in useEffects.
-  // Modified from: https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
-
-
-  const useRefWithCallback = () => {
-    const [ref, setInternalRef] = useState$1({});
-    const setRef = useCallback(node => {
-      setInternalRef({
-        current: node
-      });
-    }, [setInternalRef]);
-    return [ref, setRef];
-  };
-
-  const listdef = {
-    qInfo: {
-      qType: 'njsListbox'
-    },
-    qListObjectDef: {
-      qStateName: stateName,
-      qShowAlternatives: true,
-      qFrequencyMode: getListdefFrequencyMode(),
-      qInitialDataFetch: [{
-        qTop: 0,
-        qLeft: 0,
-        qWidth: 0,
-        qHeight: 0
-      }],
-      qDef: {
-        qSortCriterias: [{
-          qSortByState: 1,
-          qSortByAscii: 1,
-          qSortByNumeric: 1,
-          qSortByLoadOrder: 1
-        }]
-      }
-    },
-    title
-  };
-  extend$2(true, listdef, properties); // Something something lib dimension
-
-  let fieldName;
-
-  if (fieldIdentifier.qLibraryId) {
-    listdef.qListObjectDef.qLibraryId = fieldIdentifier.qLibraryId;
-    fieldName = fieldIdentifier.qLibraryId;
-  } else {
-    listdef.qListObjectDef.qDef.qFieldDefs = [fieldIdentifier];
-    fieldName = fieldIdentifier;
-  }
-
-  if (frequencyMode !== 'N' || histogram) {
-    const field = fieldIdentifier.qLibraryId ? fieldDef : fieldName;
-    listdef.frequencyMax = {
-      qValueExpression: "Max(AGGR(Count([".concat(field, "]), [").concat(field, "]))")
-    };
-  }
-
-  let [model] = useSessionModel(listdef, sessionModel ? null : app, fieldName, stateName);
-
-  if (sessionModel) {
-    model = sessionModel;
+    display: 'inline-flex'
+  },
+  ["& .".concat(classes$4.screenReaderOnly)]: {
+    position: 'absolute',
+    height: 0,
+    width: 0,
+    overflow: 'hidden'
   }
+}));
+function ListBoxInline(_ref) {
+  let {
+    options = {}
+  } = _ref;
+  const {
+    direction,
+    frequencyMode,
+    histogram = false,
+    listLayout,
+    search = true,
+    focusSearch = false,
+    toolbar = true,
+    rangeSelect = true,
+    checkboxes = false,
+    model,
+    selections,
+    update = undefined,
+    fetchStart = undefined,
+    dense = false,
+    selectDisabled = () => false,
+    postProcessPages = undefined,
+    calculatePagesHeight,
+    showGray = true,
+    scrollState = undefined,
+    setCount = undefined,
+    shouldConfirmOnBlur = undefined
+  } = options; // Hook that will trigger update when used in useEffects.
+  // Modified from: https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
 
-  let selections = useObjectSelections(selectionsApi ? {} : app, model)[0];
-
-  if (selectionsApi) {
-    selections = selectionsApi;
-  }
+  const useRefWithCallback = () => {
+    const [ref, setInternalRef] = useState$1({});
+    const setRef = useCallback(node => {
+      setInternalRef({
+        current: node
+      });
+    }, [setInternalRef]);
+    return [ref, setRef];
+  };
 
   const theme = useTheme$1();
   const lock = useCallback(() => {
@@ -13119,7 +13078,7 @@ function ListBoxInline(_ref) {
     }
 
     return () => {
-      if (selections) {
+      if (selections && selections.removeListener) {
         selections.removeListener('deactivated', show);
         selections.removeListener('activated', hide);
       }
@@ -13181,7 +13140,8 @@ function ListBoxInline(_ref) {
     gap: 0,
     style: {
       height: '100%',
-      minHeight: "".concat(minHeight, "px")
+      minHeight: "".concat(minHeight, "px"),
+      flexFlow: 'column nowrap'
     },
     onKeyDown: handleKeyDown,
     ref: listBoxRef
@@ -13231,9 +13191,21 @@ function ListBoxInline(_ref) {
       onCancel: () => {}
     }
   }))), /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    container: true,
+    direction: "column",
+    style: {
+      height: '100%',
+      minHeight: "".concat(minHeight, "px")
+    },
+    role: "region",
+    "aria-label": translator.get('Listbox.ResultFilterLabel')
+  }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     ref: searchContainerRef
-  }, /*#__PURE__*/React__default.createElement(ListBoxSearch, {
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classes$4.screenReaderOnly
+  }, translator.get('Listbox.Search.ScreenReaderInstructions')), /*#__PURE__*/React__default.createElement(ListBoxSearch, {
     selections: selections,
     model: model,
     dense: dense,
@@ -13245,7 +13217,9 @@ function ListBoxInline(_ref) {
     xs: true
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: moreAlignTo
-  }), /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref2 => {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: classes$4.screenReaderOnly
+  }, translator.get('Listbox.ScreenReaderInstructions')), /*#__PURE__*/React__default.createElement(AutoSizer, null, _ref2 => {
     let {
       height,
       width
@@ -13270,32 +13244,63 @@ function ListBoxInline(_ref) {
       keyboard: keyboard,
       showGray: showGray,
       scrollState: scrollState,
-      sortByState: listdef.qListObjectDef.qDef.qSortCriterias[0].qSortByState,
       setCount: setCount
     });
-  })));
+  }))));
+}
+
+function useExistingModel(_ref) {
+  let {
+    app,
+    qId,
+    options = {}
+  } = _ref;
+  const [model, setModel] = useState$1();
+  const [modelStore] = useModelStore();
+  const {
+    sessionModel
+  } = options;
+  useEffect$1(() => {
+    async function fetchObject() {
+      const modelFromStore = modelStore.get(qId);
+
+      if (modelFromStore) {
+        setModel(modelFromStore);
+      } else {
+        const m = await app.getObject(qId);
+        modelStore.set(m.id, m);
+        setModel(m);
+      }
+    }
+
+    if (sessionModel) {
+      setModel(sessionModel);
+    } else {
+      fetchObject();
+    }
+  }, []);
+  return model;
 }
 
-function ListBoxFetchMasterItem(_ref) {
+function useOnTheFlyModel(_ref) {
   let {
     app,
     fieldIdentifier,
-    stateName = '$',
+    stateName,
     options = {}
   } = _ref;
   const [fieldDef, setFieldDef] = useState$1('');
-  const [isFetchingData, setIsFetchingData] = useState$1(false);
+  const [isFetching, setIsFetching] = useState$1(true);
+  const [model, setModel] = useState$1();
   useEffect$1(() => {
-    async function fetchData() {
-      setIsFetchingData(true);
-
+    async function fetchMasterItem() {
       try {
         const dim = await app.getDimension(fieldIdentifier.qLibraryId);
         const dimLayout = await dim.getLayout();
         setFieldDef(dimLayout.qDim.qFieldDefs ? dimLayout.qDim.qFieldDefs[0] : '');
-        setIsFetchingData(false);
+        setIsFetching(false);
       } catch (e) {
-        setIsFetchingData(false);
+        setIsFetching(false);
         setFieldDef({
           failedToFetchFieldDef: true
         });
@@ -13303,36 +13308,193 @@ function ListBoxFetchMasterItem(_ref) {
       }
     }
 
-    fetchData();
+    const isFrequencyMaxNeeded = options.histogram || options.frequencyMode !== 'N';
+    const shouldFetchMasterItem = fieldIdentifier.qLibraryId && isFrequencyMaxNeeded;
+
+    if (shouldFetchMasterItem) {
+      fetchMasterItem();
+    } else {
+      setIsFetching(false);
+    }
   }, []);
+  const {
+    title,
+    properties = {}
+  } = options;
+  let {
+    frequencyMode,
+    histogram = false
+  } = options;
 
-  if (isFetchingData) {
-    return null;
+  if (fieldDef && fieldDef.failedToFetchFieldDef) {
+    histogram = false;
+    frequencyMode = 'N';
   }
 
-  return /*#__PURE__*/React__default.createElement(ListBoxInline, {
-    app: app,
-    fieldIdentifier: fieldIdentifier,
-    stateName: stateName,
-    options: options,
-    fieldDef: fieldDef
-  });
+  switch (true) {
+    case ['none', 'N', 'NX_FREQUENCY_NONE'].includes(frequencyMode):
+      frequencyMode = 'N';
+      break;
+
+    case ['value', 'V', 'NX_FREQUENCY_VALUE', 'default'].includes(frequencyMode):
+      frequencyMode = 'V';
+      break;
+
+    case ['percent', 'P', 'NX_FREQUENCY_PERCENT'].includes(frequencyMode):
+      frequencyMode = 'P';
+      break;
+
+    case ['relative', 'R', 'NX_FREQUENCY_RELATIVE'].includes(frequencyMode):
+      frequencyMode = 'R';
+      break;
+
+    default:
+      frequencyMode = 'N';
+      break;
+  }
+
+  const getListdefFrequencyMode = () => histogram && frequencyMode === 'N' ? 'V' : frequencyMode;
+
+  const listdef = {
+    qInfo: {
+      qType: 'njsListbox'
+    },
+    qListObjectDef: {
+      qStateName: stateName,
+      qShowAlternatives: true,
+      qFrequencyMode: getListdefFrequencyMode(),
+      qInitialDataFetch: [{
+        qTop: 0,
+        qLeft: 0,
+        qWidth: 0,
+        qHeight: 0
+      }],
+      qDef: {
+        qSortCriterias: [{
+          qSortByState: 1,
+          qSortByAscii: 1,
+          qSortByNumeric: 1,
+          qSortByLoadOrder: 1
+        }]
+      }
+    },
+    title
+  };
+  extend$1(true, listdef, properties); // Something something lib dimension
+
+  let fieldName;
+
+  if (fieldIdentifier.qLibraryId) {
+    listdef.qListObjectDef.qLibraryId = fieldIdentifier.qLibraryId;
+    fieldName = fieldIdentifier.qLibraryId;
+  } else {
+    listdef.qListObjectDef.qDef.qFieldDefs = [fieldIdentifier];
+    fieldName = fieldIdentifier;
+  }
+
+  if (frequencyMode !== 'N' || histogram) {
+    const field = fieldIdentifier.qLibraryId ? fieldDef : fieldName;
+    listdef.frequencyMax = {
+      qValueExpression: "Max(AGGR(Count([".concat(field, "]), [").concat(field, "]))")
+    };
+  }
+
+  const [sessionModel] = useSessionModel(listdef, isFetching ? null : app, fieldName, stateName);
+  useEffect$1(() => {
+    if (!sessionModel) {
+      return;
+    }
+
+    setModel(sessionModel);
+  }, [sessionModel]);
+  return model;
+}
+
+const OBJECT_SOURCE = {
+  ON_THE_FLY: 'ON_THE_FLY',
+  EXISTING: 'EXISTING'
+};
+const SELECTIONS_API = {
+  INTERNAL: 'INTERNAL',
+  EXTERNAL: 'EXTERNAL'
+};
+
+function identify(_ref) {
+  let {
+    qId,
+    options
+  } = _ref;
+  const variant = {}; // Existing or on the fly
+
+  variant.objectSource = qId || options.sessionModel ? OBJECT_SOURCE.EXISTING : OBJECT_SOURCE.ON_THE_FLY; // Use internal or external selectionsApi
+
+  variant.selectionsApi = options.selectionsApi ? SELECTIONS_API.EXTERNAL : SELECTIONS_API.INTERNAL;
+  return variant;
 }
-function ListBoxPortal(_ref2) {
+
+function ListBoxWrapper(_ref2) {
   let {
     app,
     fieldIdentifier,
+    qId,
     stateName,
-    element,
     options
   } = _ref2;
-  const isFrequencyMaxNeeded = options.histogram || options.frequencyMode !== 'N';
-  const TheComponent = fieldIdentifier.qLibraryId && isFrequencyMaxNeeded ? ListBoxFetchMasterItem : ListBoxInline;
-  return ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(TheComponent, {
+  const {
+    objectSource,
+    selectionsApi
+  } = identify({
+    qId,
+    options
+  });
+  const [changeCount, setChangeCount] = useState$1(0);
+  useEffect$1(() => {
+    if (changeCount) {
+      throw new Error('Source or selection Api can not change after a listbox has been mounted');
+    }
+
+    setChangeCount(changeCount + 1);
+  }, [objectSource, selectionsApi]);
+  const model = objectSource === OBJECT_SOURCE.EXISTING ? useExistingModel({
+    app,
+    qId,
+    options
+  }) : useOnTheFlyModel({
+    app,
+    fieldIdentifier,
+    stateName,
+    options
+  });
+  const selections = selectionsApi === SELECTIONS_API.EXTERNAL ? options.selectionsApi : useObjectSelections(app, model)[0];
+
+  if (!selections || !model) {
+    return null;
+  }
+
+  const opts = _objectSpread2(_objectSpread2({}, options), {}, {
+    selections,
+    model
+  });
+
+  return /*#__PURE__*/React__default.createElement(ListBoxInline, {
+    options: opts
+  });
+}
+
+function ListBoxPortal(_ref3) {
+  let {
+    element,
+    app,
+    fieldIdentifier,
+    qId,
+    stateName = '$',
+    options = {}
+  } = _ref3;
+  return ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(ListBoxWrapper, {
     app: app,
     fieldIdentifier: fieldIdentifier,
+    qId: qId,
     stateName: stateName,
-    element: element,
     options: options
   }), element);
 }
@@ -13434,12 +13596,15 @@ function hcHandler(_ref) {
         hc.qLayoutExclude.qHyperCubeDef.qMeasures = hc.qLayoutExclude.qHyperCubeDef.qMeasures || [];
         hc.qLayoutExclude.qHyperCubeDef.qDimensions.push(dimension);
       }
+
+      return dimension;
     },
 
     removeDimension(idx) {
       const dimension = hc.qDimensions.splice(idx, 1)[0];
       removeIndex(hc.qInterColumnSortOrder, idx);
       def.dimensions.removed(dimension, objectProperties, idx);
+      return dimension;
     },
 
     addMeasure(m) {
@@ -13829,7 +13994,7 @@ function getOthersLabel() {
 }
 
 function createDefaultDimension(dimensionDef, dimensionProperties) {
-  const def = extend$2(true, {}, dimensionProperties, dimensionDef);
+  const def = extend$1(true, {}, dimensionProperties, dimensionDef);
 
   if (!utils.getValue(def, 'qOtherTotalSpec.qOtherCounted')) {
     utils.setValue(def, 'qOtherTotalSpec.qOtherCounted', {
@@ -13851,7 +14016,7 @@ function createDefaultDimension(dimensionDef, dimensionProperties) {
 }
 
 function createDefaultMeasure(measureDef, measureProperties) {
-  return extend$2(true, {}, measureProperties, measureDef);
+  return extend$1(true, {}, measureProperties, measureDef);
 }
 
 function resolveValue$1(data, input, defaultValue) {
@@ -13947,7 +14112,7 @@ function createNewProperties(_ref2) {
   Object.keys(exportFormat.properties).forEach(key => {
     if (key === 'qLayoutExclude') {
       if (exportFormat.properties[key].quarantine) {
-        newProperties.qLayoutExclude.quarantine = extend$2(true, {}, exportFormat.properties[key].quarantine);
+        newProperties.qLayoutExclude.quarantine = extend$1(true, {}, exportFormat.properties[key].quarantine);
       }
     } else if (key === 'qHyperCubeDef' && hypercubePath) {
       utils.setValue(newProperties, "".concat(hypercubePath, ".qHyperCubeDef"), exportFormat.properties.qHyperCubeDef);
@@ -13958,7 +14123,7 @@ function createNewProperties(_ref2) {
       newProperties.qLayoutExclude.disabled[key] = exportFormat.properties[key];
     }
   });
-  newProperties = extend$2(true, {}, initialProperties, newProperties);
+  newProperties = extend$1(true, {}, initialProperties, newProperties);
 
   if (newProperties.components === null) {
     newProperties.components = [];
@@ -15182,6 +15347,115 @@ function Supernova(_ref) {
   }));
 }
 
+const imageSizingToCssProperty = {
+  originalSize: 'auto auto',
+  alwaysFit: 'contain',
+  fitWidth: '100% auto',
+  fitHeight: 'auto 100%',
+  stretchFit: '100% 100%',
+  alwaysFill: 'cover'
+};
+const positionToCss = {
+  'top-left': 'top left',
+  'top-center': 'top center',
+  'top-right': 'top right',
+  'center-left': 'center left',
+  'center-center': 'center center',
+  'center-right': 'center right',
+  'bottom-left': 'bottom left',
+  'bottom-center': 'bottom center',
+  'bottom-right': 'bottom right'
+}; // TODO: this needs some proper verification
+
+function getSenseServerUrl(app) {
+  var _app$session;
+
+  let config;
+  let wsUrl;
+  let protocol;
+  let isSecure;
+
+  if (app !== null && app !== void 0 && (_app$session = app.session) !== null && _app$session !== void 0 && _app$session.config) {
+    config = app.session.config;
+    wsUrl = new URL(config.url);
+    isSecure = wsUrl.protocol === 'wss:';
+    protocol = isSecure ? 'https://' : 'http://';
+    return protocol + wsUrl.host;
+  }
+
+  return undefined;
+}
+
+function getBackgroundPosition(bgComp) {
+  var _bgComp$bgImage;
+
+  let bkgImagePosition = 'center center';
+
+  if (bgComp !== null && bgComp !== void 0 && (_bgComp$bgImage = bgComp.bgImage) !== null && _bgComp$bgImage !== void 0 && _bgComp$bgImage.position) {
+    bkgImagePosition = positionToCss[bgComp.bgImage.position];
+  }
+
+  return bkgImagePosition;
+}
+
+function getBackgroundSize(bgComp) {
+  var _bgComp$bgImage2;
+
+  let bkgImageSize = imageSizingToCssProperty.originalSize;
+
+  if (bgComp !== null && bgComp !== void 0 && (_bgComp$bgImage2 = bgComp.bgImage) !== null && _bgComp$bgImage2 !== void 0 && _bgComp$bgImage2.sizing) {
+    bkgImageSize = imageSizingToCssProperty[bgComp.bgImage.sizing];
+  }
+
+  return bkgImageSize;
+}
+
+function resolveImageUrl(app, relativeUrl) {
+  return relativeUrl ? getSenseServerUrl(app) + relativeUrl : undefined;
+}
+
+const resolveBgImage = (bgComp, app) => {
+  const bgImageDef = bgComp === null || bgComp === void 0 ? void 0 : bgComp.bgImage;
+
+  if (bgImageDef) {
+    let url = '';
+
+    if (bgImageDef.mode === 'media') {
+      var _bgImageDef$mediaUrl, _bgImageDef$mediaUrl$;
+
+      url = bgImageDef !== null && bgImageDef !== void 0 && (_bgImageDef$mediaUrl = bgImageDef.mediaUrl) !== null && _bgImageDef$mediaUrl !== void 0 && (_bgImageDef$mediaUrl$ = _bgImageDef$mediaUrl.qStaticContentUrl) !== null && _bgImageDef$mediaUrl$ !== void 0 && _bgImageDef$mediaUrl$.qUrl ? decodeURIComponent(bgImageDef.mediaUrl.qStaticContentUrl.qUrl) : undefined;
+      url = resolveImageUrl(app, url);
+    }
+
+    if (bgImageDef.mode === 'expression') {
+      url = bgImageDef.expressionUrl ? decodeURIComponent(bgImageDef.expressionUrl) : undefined;
+    }
+
+    const pos = getBackgroundPosition(bgComp);
+    const size = getBackgroundSize(bgComp);
+    return url ? {
+      url,
+      pos,
+      size
+    } : undefined;
+  }
+
+  return undefined;
+};
+const resolveBgColor = (bgComp, theme) => {
+  const bgColor = bgComp === null || bgComp === void 0 ? void 0 : bgComp.bgColor;
+
+  if (bgColor && theme) {
+    if (bgColor.useColorExpression) {
+      return theme.validateColor(bgColor.colorExpression);
+    }
+
+    return bgColor.color && bgColor.color.color !== 'none' ? theme.getColorPickerColor(bgColor.color) : undefined;
+  }
+
+  return undefined;
+};
+
 /**
  * @interface
  * @extends HTMLElement
@@ -15522,6 +15796,9 @@ const Cell = forwardRef((_ref6, ref) => {
     enter: null,
     leave: null
   });
+  const [bgColor, setBgColor] = useState$1(undefined);
+  const [bgImage, setBgImage] = useState$1(undefined); // {url: "", size: "", pos: ""}
+
   const focusHandler = useRef({
     focusToolbarButton(last) {
       // eslint-disable-next-line react/no-this-in-sfc
@@ -15532,6 +15809,11 @@ const Cell = forwardRef((_ref6, ref) => {
   useEffect$1(() => {
     eventmixin(focusHandler.current);
   }, []);
+  useEffect$1(() => {
+    const bgComp = layout !== null && layout !== void 0 && layout.components ? layout.components.find(comp => comp.key === 'general') : null;
+    setBgColor(resolveBgColor(bgComp, halo.public.theme));
+    setBgImage(resolveBgImage(bgComp, halo.app));
+  }, [layout, halo.public.theme, halo.app]);
 
   focusHandler.current.blurCallback = resetFocus => {
     halo.root.toggleFocusOfCells();
@@ -15746,7 +16028,12 @@ const Cell = forwardRef((_ref6, ref) => {
       position: 'relative',
       width: '100%',
       height: '100%',
-      overflow: 'hidden'
+      overflow: 'hidden',
+      backgroundColor: bgColor,
+      backgroundImage: bgImage && bgImage.url ? "url(".concat(bgImage.url, ")") : undefined,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: bgImage && bgImage.size,
+      backgroundPosition: bgImage && bgImage.pos
     },
     elevation: 0,
     square: true,
@@ -16243,7 +16530,7 @@ function flagsFn () {
 }
 
 /* eslint no-param-reassign: 0, no-restricted-globals: 0 */
-const extend = extend$2.bind(null, true);
+const extend = extend$1.bind(null, true);
 const JSONPatch = {};
 const {
   isArray
@@ -20725,7 +21012,7 @@ function nuked() {
 
       /**
        * Gets the listbox instance of the specified field
-       * @param {string|LibraryField} fieldIdentifier Fieldname as a string or a Library dimension
+       * @param {string|LibraryField|QInfo} fieldIdentifier Fieldname as a string, a Library dimension or an object id
        * @returns {Promise<FieldInstance>}
        * @since 1.1.0
        * @example
@@ -20733,10 +21020,13 @@ function nuked() {
        * fieldInstance.mount(element, { title: "Hello Field"});
        */
       field: async fieldIdentifier => {
+        let qId;
         const fieldName = typeof fieldIdentifier === 'string' ? fieldIdentifier : fieldIdentifier.qLibraryId;
 
-        if (!fieldName) {
-          throw new Error("Field identifier must be provided");
+        if (fieldIdentifier.qId) {
+          qId = fieldIdentifier.qId;
+        } else if (!fieldName) {
+          throw new Error("Field identifier or object id must be provided");
         }
         /**
          * @typedef { 'ltr' | 'rtl' } Direction
@@ -20789,17 +21079,18 @@ function nuked() {
             let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
             if (!element) {
-              throw new Error("Element for ".concat(fieldName, " not provided"));
+              throw new Error("Element for ".concat(fieldName || qId, " not provided"));
             }
 
             if (this._instance) {
-              throw new Error("Field ".concat(fieldName, " already mounted"));
+              throw new Error("Field or object ".concat(fieldName || qId, " already mounted"));
             }
 
             this._instance = ListBoxPortal({
               element,
               app,
               fieldIdentifier,
+              qId,
               options: getOptions(options),
               stateName: options.stateName || '$'
             });
@@ -20894,6 +21185,11 @@ function nuked() {
  * @property {function(): Promise<ThemeJSON>} load A function that should return a Promise that resolves to a raw JSON theme.
  */
 
+/**
+ * @interface QInfo
+ * @property {string} qId Generic object id
+ */
+
 
 var index$1 = nuked(DEFAULT_CONFIG);
 
@@ -20902,7 +21198,7 @@ var enigmaMocker = {exports: {}};
 var enigmaMocker_dev = {exports: {}};
 
 /*
-* @nebula.js/enigma-mocker v3.0.3
+* @nebula.js/enigma-mocker v3.0.4
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */