@nebula.js/stardust 4.0.0-alpha.5 → 4.0.0-alpha.7

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.0.0-alpha.5
+* @nebula.js/stardust v4.0.0-alpha.7
 * Copyright (c) 2023 QlikTech International AB
 * Released under the MIT license.
 */
@@ -1563,7 +1563,7 @@
 	var SelectionToolbar_ClickToUnlock = {
 		id: "SelectionToolbar.ClickToUnlock",
 		locale: {
-			"de-DE": "Klicken zum Freigeben",
+			"de-DE": "Zum Entsperren klicken",
 			"en-US": "Click to unlock",
 			"es-ES": "Haga clic para desbloquearla",
 			"fr-FR": "Cliquez pour déverrouiller",
@@ -15420,7 +15420,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "6643" ;
+	const NEBULA_VERSION_HASH = "a704" ;
 	ClassNameGenerator$1.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -15628,7 +15628,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.5" );
+	  element.setAttribute('data-nebulajs-version', "4.0.0-alpha.7" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  const root = client.createRoot(element);
@@ -21702,7 +21702,7 @@
 	  return elemNumbersOrdered.slice(min, max + 1);
 	}
 
-	const getKeyAsToggleSelected = event => !(event.metaKey || event.ctrlKey);
+	const getKeyAsToggleSelected = event => !(event !== null && event !== void 0 && event.metaKey || event !== null && event !== void 0 && event.ctrlKey);
 	function useSelectionsInteractions(_ref) {
 	  let {
 	    selectionState,
@@ -21743,6 +21743,11 @@
 	  const selectManually = function () {
 	    let elementIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
 	    let additive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+	    let event = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+	    const toggle = !selectionState.isSingleSelect && getKeyAsToggleSelected(event === null || event === void 0 ? void 0 : event.nativeEvent);
+	    if (!toggle) {
+	      selectionState.clearItemStates(true);
+	    }
 	    const elemNumbers = [];
 	    selectionState.updateItems(elementIds, additive, elemNumbers);
 	    selectionState.setSelectableValuesUpdating();
@@ -21750,7 +21755,7 @@
 	      selections,
 	      elemNumbers: additive ? elemNumbers : elementIds,
 	      isSingleSelect: selectionState.isSingleSelect,
-	      toggle: !selectionState.isSingleSelect
+	      toggle
 	    });
 	  };
 	  const handleSingleSelectKey = (event, target) => {
@@ -21974,6 +21979,84 @@
 	  isArrow: key => key === KEYS.ARROW_UP || key === KEYS.ARROW_DOWN || key === KEYS.ARROW_LEFT || key === KEYS.ARROW_RIGHT
 	});
 
+	function removeInnnerTabStops(container) {
+	  container === null || container === void 0 ? void 0 : container.querySelectorAll('[tabIndex="0"]').forEach(elm => {
+	    elm.setAttribute('tabIndex', -1);
+	  });
+	}
+	function removeLastFocused(container) {
+	  container === null || container === void 0 ? void 0 : container.querySelectorAll('.last-focused').forEach(elm => {
+	    elm.classList.remove('last-focused');
+	  });
+	}
+	function getVizCell(container) {
+	  return (container === null || container === void 0 ? void 0 : container.closest('.njs-cell')) || (container === null || container === void 0 ? void 0 : container.closest('.qv-gridcell'));
+	}
+
+	// Emulate the keyboard hook, until we support it in the Listbox.
+	function useTempKeyboard(_ref) {
+	  let {
+	    containerRef,
+	    enabled
+	  } = _ref;
+	  const [keyboardActive, setKeyboardActive] = reactExports.useState(false);
+	  const innerTabStops = !enabled || keyboardActive;
+	  const keyboard = {
+	    enabled,
+	    active: keyboardActive,
+	    innerTabStops,
+	    // does keyboard permit inner tab stops
+	    outerTabStops: !innerTabStops,
+	    // does keyboard permit outer tab stops
+	    blur: resetFocus => {
+	      var _containerRef$current;
+	      if (!enabled) {
+	        return;
+	      }
+	      setKeyboardActive(false);
+	      const vizCell = getVizCell(containerRef.current) || ((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.parentElement);
+	      removeInnnerTabStops(containerRef.current);
+	      removeLastFocused(containerRef.current);
+	      if (resetFocus && vizCell) {
+	        // Move focus to the viz's cell.
+	        vizCell.setAttribute('tabIndex', 0);
+	        vizCell.focus();
+	      }
+	    },
+	    focus: () => {
+	      if (!enabled) {
+	        return;
+	      }
+	      setKeyboardActive(true);
+	      const c = containerRef.current;
+	      const searchField = c === null || c === void 0 ? void 0 : c.querySelector('.search input');
+	      const lastSelectedRow = c === null || c === void 0 ? void 0 : c.querySelector('.value.last-focused');
+	      const fieldElement = c === null || c === void 0 ? void 0 : c.querySelector('.value.selector, .value, .ActionsToolbar-item button');
+	      const elementToFocus = searchField || lastSelectedRow || fieldElement;
+	      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.setAttribute('tabIndex', 0);
+	      elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
+	    },
+	    focusSelection: () => {
+	      const confirmButton = document.querySelector('.actions-toolbar-default-actions .actions-toolbar-confirm');
+	      confirmButton === null || confirmButton === void 0 ? void 0 : confirmButton.setAttribute('tabIndex', 0);
+	      confirmButton === null || confirmButton === void 0 ? void 0 : confirmButton.focus();
+	    }
+	  };
+	  return keyboard;
+	}
+
+	const getElementIndex = currentTarget => +currentTarget.getAttribute('data-n');
+	const focusSearch = container => {
+	  const searchField = container === null || container === void 0 ? void 0 : container.querySelector('.search input');
+	  searchField === null || searchField === void 0 ? void 0 : searchField.focus();
+	  return searchField;
+	};
+	const focusRow = container => {
+	  const row = container === null || container === void 0 ? void 0 : container.querySelector('.value.last-focused, .value.selector, .value');
+	  row === null || row === void 0 ? void 0 : row.setAttribute('tabIndex', 0);
+	  row === null || row === void 0 ? void 0 : row.focus();
+	  return row;
+	};
 	function getFieldKeyboardNavigation(_ref) {
 	  let {
 	    select,
@@ -21982,7 +22065,9 @@
 	    confirm,
 	    cancel,
 	    setScrollPosition,
-	    focusListItems
+	    focusListItems,
+	    keyboard,
+	    isModal
 	  } = _ref;
 	  const getElement = function (elm) {
 	    let next = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -21995,49 +22080,86 @@
 	  };
 	  const handleKeyDown = event => {
 	    let elementToFocus;
+	    const {
+	      currentTarget,
+	      nativeEvent
+	    } = event;
 	    const {
 	      keyCode,
 	      shiftKey = false,
 	      ctrlKey = false,
 	      metaKey = false
-	    } = event.nativeEvent;
+	    } = nativeEvent;
 	    switch (keyCode) {
+	      case KEYS.TAB:
+	        {
+	          // Try to focus search field, otherwise confirm button.
+	          const container = currentTarget.closest('.listbox-container');
+	          const inSelection = isModal();
+
+	          // TODO: use a store to keep track of this row.
+	          currentTarget.classList.add('last-focused'); // so that we can go back here when we tab back
+
+	          if (shiftKey) {
+	            if (!focusSearch(container)) {
+	              if (inSelection) {
+	                keyboard.focusSelection();
+	              } else {
+	                keyboard.blur(true);
+	              }
+	            }
+	            break;
+	          }
+
+	          // Without shift key
+	          if (inSelection) {
+	            keyboard.focusSelection();
+	          } else {
+	            currentTarget.blur();
+	            keyboard.blur();
+	          }
+	          break;
+	        }
 	      case KEYS.SHIFT:
 	        // This is to ensure we include the first value when starting a range selection.
 	        setStartedRange(true);
 	        break;
 	      case KEYS.SPACE:
-	        select([+event.currentTarget.getAttribute('data-n')]);
+	        select([getElementIndex(currentTarget)], false, event);
 	        break;
 	      case KEYS.ARROW_DOWN:
 	      case KEYS.ARROW_RIGHT:
-	        elementToFocus = getElement(event.currentTarget, true);
+	        elementToFocus = getElement(currentTarget, true);
 	        if (shiftKey && elementToFocus) {
 	          if (startedRange) {
-	            select([+event.currentTarget.getAttribute('data-n')], true);
+	            select([getElementIndex(currentTarget)], true);
 	            setStartedRange(false);
 	          }
-	          select([+elementToFocus.getAttribute('data-n')], true);
+	          select([getElementIndex(elementToFocus)], true);
 	        }
 	        break;
 	      case KEYS.ARROW_UP:
 	      case KEYS.ARROW_LEFT:
-	        elementToFocus = getElement(event.currentTarget, false);
+	        elementToFocus = getElement(currentTarget, false);
 	        if (shiftKey && elementToFocus) {
 	          if (startedRange) {
-	            select([+event.currentTarget.getAttribute('data-n')], true);
+	            select([getElementIndex(currentTarget)], true);
 	            setStartedRange(false);
 	          }
-	          select([+elementToFocus.getAttribute('data-n')], true);
+	          select([getElementIndex(elementToFocus)], true);
 	        }
 	        break;
 	      case KEYS.ENTER:
 	        confirm();
 	        break;
 	      case KEYS.ESCAPE:
-	        cancel();
-	        return;
-	      // let it propagate to top-level
+	        if (isModal()) {
+	          cancel();
+	        } else {
+	          return; // propagate to other Esc handler
+	        }
+
+	        break;
 	      case KEYS.HOME:
 	        focusListItems.setFirst(true);
 	        if (ctrlKey) {
@@ -22081,39 +22203,41 @@
 	}
 	function getListboxInlineKeyboardNavigation(_ref2) {
 	  let {
-	    setKeyboardActive,
+	    keyboard,
 	    hovering,
 	    setHovering,
 	    updateKeyScroll,
 	    containerRef,
 	    currentScrollIndex,
-	    app,
-	    appSelections,
+	    isModal,
 	    constraints
 	  } = _ref2;
-	  const focusInsideListbox = element => {
-	    const fieldElement = element.querySelector('.search input, .value.selector, .value, .ActionsToolbar-item button');
-	    setKeyboardActive(true);
-	    if (fieldElement) {
-	      fieldElement.focus();
-	    }
-	  };
-	  const changeFocus = event => {
-	    var _event$target;
-	    if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.classList.contains('listbox-container')) {
-	      // Focus currently on a listbox
-	      // Esc on a list box should move the focus to its parent, i.e. a filter pane if any
-	      setKeyboardActive(false);
+	  const blur = event => {
+	    const {
+	      currentTarget,
+	      target
+	    } = event;
+	    const isFocusedOnListbox = target.classList.contains('listbox-container');
+	    const container = currentTarget.closest('.listbox-container');
+	    const vizCell = getVizCell(container);
+	    const isSingleListbox = (vizCell === null || vizCell === void 0 ? void 0 : vizCell.querySelectorAll('.listbox-container').length) === 1;
+	    if (isFocusedOnListbox || isSingleListbox) {
+	      // Move the focus from listbox container to the viz container.
+	      keyboard.blur(true);
 	    } else {
-	      var _event$target2, _event$target3, _event$currentTarget, _event$currentTarget2;
-	      // Focus currently on a row
-	      // Esc on a row should move the focus to its parent, i.e. a listbox
-	      // First unfocus the row
-	      (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.setAttribute('tabIndex', '-1');
-	      (_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.blur();
-	      // Then focus the listbox
-	      (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.setAttribute('tabIndex', '0');
-	      (_event$currentTarget2 = event.currentTarget) === null || _event$currentTarget2 === void 0 ? void 0 : _event$currentTarget2.focus();
+	      // More than one listbox: Move focus from row to listbox container.
+
+	      // 1. Remove last-focused class from row siblings.
+	      removeLastFocused(containerRef.current);
+
+	      // 2. Add last-focused class so we can re-focus it later.
+	      currentTarget.classList.add('last-focused');
+
+	      // 3. Blur row and focus the listbox container.
+	      keyboard.blur();
+	      const c = currentTarget.closest('.listbox-container');
+	      c.setAttribute('tabIndex', 0);
+	      c === null || c === void 0 ? void 0 : c.focus();
 	    }
 	  };
 	  const updateKeyScrollOnHover = newState => {
@@ -22127,65 +22251,84 @@
 	      ctrlKey = false,
 	      shiftKey = false
 	    } = event.nativeEvent;
+	    const prevent = () => {
+	      event.stopPropagation();
+	      event.preventDefault();
+	    };
 	    switch (keyCode) {
-	      // case KEYS.TAB: TODO: Focus confirm button using keyboard.focusSelection when we can access the useKeyboard hook.
-	      case KEYS.ENTER:
-	      case KEYS.SPACE:
-	        if (!event.target.classList.contains('listbox-container')) {
-	          return; // don't mess with keydown handlers within the listbox
-	        }
-
-	        focusInsideListbox(event.currentTarget);
-	        break;
-	      case KEYS.ESCAPE:
-	        changeFocus(event);
-	        break;
-	      case KEYS.ARROW_UP:
-	        updateKeyScrollOnHover({
-	          up: 1
-	        });
-	        break;
-	      case KEYS.ARROW_DOWN:
-	        updateKeyScrollOnHover({
-	          down: 1
-	        });
-	        break;
-	      case KEYS.ARROW_LEFT:
-	      case KEYS.ARROW_RIGHT:
-	        return;
-	      // let it propagate to top-level
 	      case KEYS.PAGE_UP:
 	        updateKeyScrollOnHover({
 	          up: currentScrollIndex.stop - currentScrollIndex.start
 	        });
+	        prevent();
 	        break;
 	      case KEYS.PAGE_DOWN:
 	        updateKeyScrollOnHover({
 	          down: currentScrollIndex.stop - currentScrollIndex.start
 	        });
+	        prevent();
 	        break;
 	      case KEYS.HOME:
 	        updateKeyScrollOnHover({
 	          scrollPosition: ctrlKey && shiftKey ? 'overflowStart' : 'start'
 	        });
+	        prevent();
 	        break;
 	      case KEYS.END:
 	        updateKeyScrollOnHover({
 	          scrollPosition: ctrlKey && shiftKey ? 'overflowEnd' : 'end'
 	        });
+	        prevent();
+	        break;
+	      case KEYS.ARROW_UP:
+	        updateKeyScrollOnHover({
+	          up: 1
+	        });
+	        prevent();
+	        break;
+	      case KEYS.ARROW_DOWN:
+	        updateKeyScrollOnHover({
+	          down: 1
+	        });
+	        prevent();
 	        break;
-	      default:
-	        return;
 	    }
+	    if (!keyboard.enabled) {
+	      // Other keys should not be handled unless keyboard is enabled.
+	      return undefined;
+	    }
+	    const container = event.currentTarget.closest('.listbox-container');
+	    switch (keyCode) {
+	      case KEYS.TAB:
+	        if (shiftKey) {
+	          focusRow(container) || focusSearch(container);
+	        } else {
+	          focusSearch(container) || focusRow(container);
+	        }
+	        prevent();
+	        break;
+	      case KEYS.ENTER:
+	      case KEYS.SPACE:
+	        if (!event.target.classList.contains('listbox-container')) {
+	          return undefined; // don't mess with keydown handlers within the listbox (e.g. row seletion)
+	        }
 
-	    // Note: We should not stop propagation here as it will block the containing app
-	    // from handling keydown events.
-	    event.preventDefault();
+	        keyboard.focus();
+	        prevent();
+	        break;
+	      case KEYS.ESCAPE:
+	        blur(event);
+	        prevent();
+	        break;
+	      case KEYS.ARROW_LEFT:
+	      case KEYS.ARROW_RIGHT:
+	        return undefined;
+	    }
+	    return undefined;
 	  };
 	  const focusOnHoverDisabled = () => {
-	    var _app$isInModalSelecti, _app$isInModalSelecti2;
 	    const selectNotAllowed = (constraints === null || constraints === void 0 ? void 0 : constraints.select) || (constraints === null || constraints === void 0 ? void 0 : constraints.active);
-	    const appInModal = (_app$isInModalSelecti = (_app$isInModalSelecti2 = app.isInModalSelection) === null || _app$isInModalSelecti2 === void 0 ? void 0 : _app$isInModalSelecti2.call(app)) !== null && _app$isInModalSelecti !== void 0 ? _app$isInModalSelecti : appSelections.isInModal();
+	    const appInModal = isModal();
 	    return selectNotAllowed || appInModal;
 	  };
 	  const handleOnMouseEnter = () => {
@@ -22390,15 +22533,10 @@
 	    ["& .".concat(rowColClasses.labelDense)]: {
 	      fontSize: 12
 	    },
-	    // Highlight is added to labelText spans, which are created as siblings to original labelText,
+	    // Highlight is added to labelText spans, which are created as children to original labelText,
 	    // when a search string is matched.
 	    ["& .".concat(rowColClasses.highlighted)]: {
-	      overflow: 'visible',
-	      width: '100%',
-	      '& > span': {
-	        width: '100%',
-	        backgroundColor: '#FFC72A'
-	      }
+	      backgroundColor: '#FFC72A'
 	    },
 	    // Checkbox and label container.
 	    ["& .".concat(rowColClasses.checkboxLabel)]: {
@@ -22418,12 +22556,6 @@
 	        paddingRight: '2px'
 	      })
 	    },
-	    ["& .".concat(rowColClasses.checkboxLabel, " .").concat(rowColClasses.labelText)]: {
-	      width: 'auto'
-	    },
-	    ["& .".concat(rowColClasses.checkboxLabel, " .").concat(rowColClasses.labelText, ".").concat(rowColClasses.highlighted)]: {
-	      width: 'auto'
-	    },
 	    // The icons container holding tick and lock, shown inside fields.
 	    ["& .".concat(rowColClasses.icon)]: {
 	      display: 'flex',
@@ -22658,7 +22790,6 @@
 	  let {
 	    label,
 	    color,
-	    highlighted = false,
 	    dense,
 	    showGray = true,
 	    checkboxes,
@@ -22668,14 +22799,14 @@
 	  return /*#__PURE__*/React.createElement(Typography$1, {
 	    component: "span",
 	    variant: "body2",
-	    className: joinClassNames([rowColClasses.labelText, highlighted && rowColClasses.highlighted, dense && rowColClasses.labelDense, showGray && excludedOrAlternative({
+	    className: joinClassNames([rowColClasses.labelText, dense && rowColClasses.labelDense, showGray && excludedOrAlternative({
 	      cell,
 	      checkboxes
 	    }) && rowColClasses.excludedTextWithCheckbox]),
 	    color: color,
-	    align: valueTextAlign
+	    align: valueTextAlign,
+	    dir: "auto"
 	  }, /*#__PURE__*/React.createElement("span", {
-	    dir: "auto",
 	    style: {
 	      whiteSpace: 'pre'
 	    }
@@ -22686,7 +22817,6 @@
 	  let {
 	    label,
 	    color,
-	    highlighted,
 	    dense,
 	    showGray,
 	    checkboxes,
@@ -22697,7 +22827,6 @@
 	    return /*#__PURE__*/React.createElement(ValueField, {
 	      label: label,
 	      color: color,
-	      highlighted: highlighted,
 	      dense: dense,
 	      showGray: showGray,
 	      checkboxes: checkboxes,
@@ -22720,7 +22849,6 @@
 	    isGridCol,
 	    showGray,
 	    isSingleSelect,
-	    highlighted,
 	    checkboxes,
 	    valueTextAlign
 	  } = _ref;
@@ -22748,7 +22876,6 @@
 	    label: /*#__PURE__*/React.createElement(LabelTag, {
 	      label: label,
 	      color: color,
-	      highlighted: highlighted,
 	      dense: dense,
 	      showGray: showGray,
 	      checkboxes: checkboxes,
@@ -22764,23 +22891,21 @@
 	    labels,
 	    dense,
 	    showGray,
-	    checkboxes,
-	    textDirection
+	    checkboxes
 	  } = _ref;
-	  return /*#__PURE__*/React.createElement("div", {
-	    dir: textDirection
-	  }, labels.map((_ref2, index) => {
+	  const text = labels.map((_ref2, index) => {
 	    let [label, highlighted] = _ref2;
-	    const key = "".concat(index);
-	    return /*#__PURE__*/React.createElement(ValueField, {
-	      label: label,
-	      key: key,
-	      highlighted: highlighted,
-	      dense: dense,
-	      showGray: showGray,
-	      checkboxes: checkboxes
-	    });
-	  }));
+	    return /*#__PURE__*/React.createElement("span", {
+	      id: index,
+	      className: highlighted ? rowColClasses.highlighted : ''
+	    }, label);
+	  });
+	  return /*#__PURE__*/React.createElement(ValueField, {
+	    label: text,
+	    dense: dense,
+	    showGray: showGray,
+	    checkboxes: checkboxes
+	  });
 	}
 	function FieldWithRanges(_ref3) {
 	  let {
@@ -22795,15 +22920,13 @@
 	    cell,
 	    isGridCol,
 	    isSingleSelect,
-	    valueTextAlign,
-	    textDirection
+	    valueTextAlign
 	  } = _ref3;
 	  const LWR = /*#__PURE__*/React.createElement(LabelsWithRanges, {
 	    labels: labels,
 	    dense: dense,
 	    showGray: showGray,
-	    checkboxes: checkboxes,
-	    textDirection: textDirection
+	    checkboxes: checkboxes
 	  });
 	  return checkboxes ? /*#__PURE__*/React.createElement(CheckboxField, {
 	    onChange: onChange,
@@ -22833,7 +22956,6 @@
 	    isGridCol,
 	    showGray,
 	    isSingleSelect,
-	    highlighted,
 	    checkboxes,
 	    valueTextAlign
 	  } = _ref;
@@ -22848,13 +22970,11 @@
 	    isGridCol: isGridCol,
 	    showGray: showGray,
 	    isSingleSelect: isSingleSelect,
-	    highlighted: highlighted,
 	    checkboxes: checkboxes,
 	    valueTextAlign: valueTextAlign
 	  }) : /*#__PURE__*/React.createElement(ValueField, {
 	    label: label,
 	    color: color,
-	    highlighted: false,
 	    dense: dense,
 	    showGray: true,
 	    checkboxes: checkboxes,
@@ -22896,13 +23016,15 @@
 	    dense,
 	    showGray
 	  } = _ref;
+	  const frequencyText = getFrequencyText(cell === null || cell === void 0 ? void 0 : cell.qFrequency);
 	  return /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    style: {
 	      display: 'flex',
 	      alignItems: 'center'
 	    },
-	    className: rowColClasses.frequencyCount
+	    className: rowColClasses.frequencyCount,
+	    "aria-label": frequencyText
 	  }, /*#__PURE__*/React.createElement(Typography$1, {
 	    noWrap: true,
 	    color: "inherit",
@@ -22911,7 +23033,7 @@
 	      cell,
 	      checkboxes
 	    }) && rowColClasses.excludedTextWithCheckbox])
-	  }, getFrequencyText(cell === null || cell === void 0 ? void 0 : cell.qFrequency)));
+	  }, frequencyText));
 	}
 
 	function getGridItemSizes(_ref) {
@@ -22948,7 +23070,7 @@
 	}
 
 	const ItemGrid = styled$1(Grid$1, {
-	  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'checkboxes'].includes(prop)
+	  shouldForwardProp: prop => !['dataLayout', 'layoutOrder', 'itemPadding', 'cellPaddingRight'].includes(prop)
 	})(_ref => {
 	  let {
 	    dataLayout,
@@ -22983,54 +23105,78 @@
 	  return c;
 	}
 
-	// Source: https://en.wikipedia.org/wiki/Bi-directional_text and http://www.unicode.org/Public/6.0.0/ucd/UnicodeData.txt
-	// 3 types of strong direction characters: L (strong left-to-right), R(strong right-to-left, Hebrew) and AL(strong right-to-left, Arabic language)
-	const rangesOfLChars = '[\u0041-\u005A\u0061-\u007A\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u02BB-\u02C1\u02D0-\u02D1\u02E0-\u02E4\u02EE\u0370-\u0373\u0376-\u037D\u0386\u0388-\u03F5\u03F7-\u0482\u048A-\u0589\u0903-\u0939\u093B\u093D-\u0940\u0949-\u094C\u094E-\u0950\u0958-\u0961\u0964-\u097F\u0982-\u09B9\u09BD-\u09C0\u09C7-\u09CC\u09CE-\u09E1\u09E6-\u09F1\u09F4-\u09FA\u0A03-\u0A39\u0A3E-\u0A40\u0A59-\u0A6F\u0A72-\u0A74\u0A83-\u0AB9\u0ABD-\u0AC0\u0AC9-\u0ACC\u0AD0-\u0AE1\u0AE6-\u0AEF\u0B02-\u0B39\u0B3D-\u0B3E\u0B40\u0B47-\u0B4C\u0B57-\u0B61\u0B66-\u0B77\u0B83-\u0BBF\u0BC1-\u0BCC\u0BD0-\u0BF2\u0C01-\u0C3D\u0C41-\u0C44\u0C58-\u0C61\u0C66-\u0C6F\u0C7F-\u0CB9\u0CBD-\u0CCB\u0CD5-\u0CE1\u0CE6-\u0D40\u0D46-\u0D4C\u0D4E-\u0D61\u0D66-\u0DC6\u0DCF-\u0DD1\u0DD8-\u0E30\u0E32-\u0E33\u0E40-\u0E46\u0E4F-\u0EB0\u0EB2-\u0EB3\u0EBD-\u0EC6\u0ED0-\u0F17\u0F1A-\u0F34\u0F36\u0F38\u0F3E-\u0F6C\u0F7F\u0F85\u0F88-\u0F8C\u0FBE-\u0FC5\u0FC7-\u102C\u1031\u1038\u103B-\u103C\u103F-\u1057\u105A-\u105D\u1061-\u1070\u1075-\u1081\u1083-\u1084\u1087-\u108C\u108E-\u109C\u109E-\u135A\u1360-\u138F\u13A0-\u13F4\u1401-\u167F\u1681-\u169A\u16A0-\u1711\u1720-\u1731\u1735-\u1751\u1760-\u1770\u1780-\u17B6\u17BE-\u17C5\u17C7-\u17C8\u17D4-\u17DA\u17DC\u17E0-\u17E9\u1810-\u18A8\u18AA-\u191C\u1923-\u1926\u1929-\u1931\u1933-\u1938\u1946-\u19DA\u1A00-\u1A16\u1A19-\u1A55\u1A57\u1A61\u1A63-\u1A64\u1A6D-\u1A72\u1A80-\u1AAD\u1B04-\u1B33\u1B35\u1B3B\u1B3D-\u1B41\u1B43-\u1B6A\u1B74-\u1B7C\u1B82-\u1BA1\u1BA6-\u1BA7\u1BAA-\u1BE5\u1BE7\u1BEA-\u1BEC\u1BEE\u1BF2-\u1C2B\u1C34-\u1C35\u1C3B-\u1C7F\u1CD3\u1CE1\u1CE9-\u1CEC\u1CEE-\u1DBF\u1E00-\u1FBC\u1FBE\u1FC2-\u1FCC\u1FD0-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FFC\u200E\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E-\u214F\u2160-\u2188\u2336-\u237A\u2395\u249C-\u24E9\u26AC\u2800-\u28FF\u2C00-\u2CE4\u2CEB-\u2CEE\u2D00-\u2D70\u2D80-\u2DDE\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u31BA\u31F0-\u321C\u3220-\u324F\u3260-\u327B\u327F-\u32B0\u32C0-\u32CB\u32D0-\u3376\u337B-\u33DD\u33E0-\u33FE\u3400-\u4DB5\u4E00-\uA48C\uA4D0-\uA60C\uA610-\uA66E\uA680-\uA6EF\uA6F2-\uA6F7\uA722-\uA787\uA789-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA824\uA827\uA830-\uA837\uA840-\uA873\uA880-\uA8C3\uA8CE-\uA8D9\uA8F2-\uA925\uA92E-\uA946\uA952-\uA97C\uA983-\uA9B2\uA9B4-\uA9B5\uA9BA-\uA9BB\uA9BD-\uAA28\uAA2F-\uAA30\uAA33-\uAA34\uAA40-\uAA42\uAA44-\uAA4B\uAA4D-\uAAAF\uAAB1\uAAB5-\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2-\uABE4\uABE6-\uABE7\uABE9-\uABEC\uABF0-\uFB17\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFDC]';
-	const rangesOfRChars = '[\u05BE\u05C0\u05C3\u05C6\u05D0-\u05F4\u07C0-\u07EA\u07F4-\u07F5\u07FA-\u0815\u081A\u0824\u0828\u0830-\u0858\u085E\u200F\uFB1D\uFB1F-\uFB28\uFB2A-\uFB4F]';
-	const rangesOfALChars = '[\u0608\u060B\u060D\u061B-\u064A\u066D-\u066F\u0671-\u06D5\u06E5-\u06E6\u06EE-\u06EF\u06FA-\u070D\u0710\u0712-\u072F\u074D-\u07A5\u07B1\uFB50-\uFD3D\uFD50-\uFDFC\uFE70-\uFEFC]';
-	const rangesOfNChars = '[\u0009-\u000D\u001C-\u0022\u0026-\u002A\u003B-\u0040\u005B-\u0060\u007B-\u007E\u0085\u00A1\u00A6-\u00A9\u00AB-\u00AC\u00AE-\u00AF\u00B4\u00B6-\u00B8\u00BB-\u00BF\u00D7\u00F7\u02B9-\u02BA\u02C2-\u02CF\u02D2-\u02DF\u02E5-\u02ED\u02EF-\u02FF\u0374-\u0375\u037E-\u0385\u0387\u03F6\u058A\u0606-\u0607\u060E-\u060F\u06DE\u06E9\u07F6-\u07F9\u0BF3-\u0BF8\u0BFA\u0C78-\u0C7E\u0F3A-\u0F3D\u1390-\u1399\u1400\u1680\u169B-\u169C\u17F0-\u180A\u180E\u1940-\u1945\u19DE-\u19FF\u1FBD\u1FBF-\u1FC1\u1FCD-\u1FCF\u1FDD-\u1FDF\u1FED-\u1FEF\u1FFD-\u200A\u2010-\u2029\u2035-\u2043\u2045-\u205F\u207C-\u207E\u208C-\u208E\u2100-\u2101\u2103-\u2106\u2108-\u2109\u2114\u2116-\u2118\u211E-\u2123\u2125\u2127\u2129\u213A-\u213B\u2140-\u2144\u214A-\u214D\u2150-\u215F\u2189-\u2211\u2214-\u2335\u237B-\u2394\u2396-\u2487\u24EA-\u26AB\u26AD-\u27FF\u2900-\u2B59\u2CE5-\u2CEA\u2CF9-\u2CFF\u2E00-\u3004\u3008-\u3020\u3030\u3036-\u3037\u303D-\u303F\u309B-\u309C\u30A0\u30FB\u31C0-\u31E3\u321D-\u321E\u3250-\u325F\u327C-\u327E\u32B1-\u32BF\u32CC-\u32CF\u3377-\u337A\u33DE-\u33DF\u33FF\u4DC0-\u4DFF\uA490-\uA4C6\uA60D-\uA60F\uA673\uA67E-\uA67F\uA700-\uA721\uA788\uA828-\uA82B\uA874-\uA877\uFD3E-\uFD3F\uFDFD\uFE10-\uFE19\uFE30-\uFE4F\uFE51\uFE54\uFE56-\uFE5E\uFE60-\uFE61\uFE64-\uFE68\uFE6B\uFF01-\uFF02\uFF06-\uFF0A\uFF1B-\uFF20\uFF3B-\uFF40\uFF5B-\uFF65\uFFE2-\uFFE4\uFFE8-\uFFFD]';
-	// eslint-disable-next-line no-misleading-character-class
-	const rangesOfLRgExp = new RegExp(rangesOfLChars);
-	const rangesOfRRgExp = new RegExp(rangesOfRChars);
-	const rangesOfALRgExp = new RegExp(rangesOfALChars);
-	const rangesOfNRgExp = new RegExp(rangesOfNChars);
-	const
-	// left-to-right marker
-	lrm = String.fromCharCode(8206); // right-to-left marker
-
-	const rlm = String.fromCharCode(8207);
-	function isLtrChar(c) {
-	  return rangesOfLRgExp.test(c);
-	}
-	function isRtlChar(c) {
-	  return rangesOfRRgExp.test(c) || rangesOfALRgExp.test(c);
-	}
-	function isNeutralChar(c) {
-	  return rangesOfNRgExp.test(c);
-	}
-	function detectTextDirection(s) {
-	  const n = s ? s.length : 0;
-	  let i;
-	  let c;
-	  for (i = 0; i < n; i++) {
-	    c = s[i];
-	    if (isLtrChar(c)) {
-	      return 'ltr';
-	    }
-	    if (isRtlChar(c)) {
-	      return 'rtl';
-	    }
+	/* eslint-disable import/prefer-default-export */
+	const LOC_STATES = {
+	  S: 'Object.Listbox.Selected',
+	  A: 'Object.Listbox.Alternative',
+	  O: 'Object.Listbox.Optional',
+	  XS: 'Object.Listbox.SelectedExcluded',
+	  L: 'Object.Listbox.Locked',
+	  X: 'Object.Listbox.Excluded',
+	  XL: 'Object.Listbox.ExcludedLock'
+	};
+	function getValueLabel(_ref) {
+	  let {
+	    translator,
+	    label,
+	    qState,
+	    isSelected,
+	    currentIndex,
+	    maxIndex,
+	    showSearch
+	  } = _ref;
+	  const stateTranslation = LOC_STATES[qState];
+	  const state = translator.get(stateTranslation);
+	  const srStringArr = [];
+	  if (isSelected) {
+	    const navTranslation = showSearch ? 'Listbox.ScreenReader.SearchThenSelectionsMenu.WithAccSelMenu' : 'Listbox.ScreenReader.SelectionMenu.WithAccSelMenu';
+	    const nav = translator.get(navTranslation);
+	    srStringArr.push(nav);
 	  }
-	  return 'ltr';
+	  const valueString = "".concat(label, " ").concat(state);
+	  const indexString = translator.get('CurrentSelections.Of', [currentIndex + 1, maxIndex + 1]); // E.g. 3 of 20
+	  srStringArr.unshift(valueString, indexString);
+	  const srString = srStringArr.join('. ').trim();
+	  return srString;
+	}
+
+	/**
+	 * Announces the selection state.
+	 *
+	 * @ignore
+	 * @param {Layout} object
+	 * @returns {Element} An (invisible) component.
+	 */
+	function ScreenReaderForSelections(_ref2) {
+	  var _layout$qListObject;
+	  let {
+	    layout
+	  } = _ref2;
+	  const {
+	    translator
+	  } = reactExports.useContext(InstanceContext);
+	  const {
+	    qStateCounts: s = {}
+	  } = (layout === null || layout === void 0 ? void 0 : (_layout$qListObject = layout.qListObject) === null || _layout$qListObject === void 0 ? void 0 : _layout$qListObject.qDimensionInfo) || {};
+	  const count = s.qSelected + s.qSelectedExcluded + s.qLocked + s.qLockedExcluded;
+	  let t;
+	  switch (count) {
+	    case 0:
+	      t = 'ScreenReader.ZeroSelected';
+	      break;
+	    case 1:
+	      t = 'ScreenReader.OneSelected';
+	      break;
+	    default:
+	      t = 'ScreenReader.ManySelected';
+	      break;
+	  }
+	  const text = translator.get(t, [count]);
+	  return /*#__PURE__*/React.createElement("div", {
+	    className: "screenReaderOnly",
+	    "aria-live": "assertive"
+	  }, text);
 	}
-	var rtlUtil = {
-	  detectTextDirection,
-	  isLtrChar,
-	  isRtlChar,
-	  isNeutralChar,
-	  lrm,
-	  rlm
-	};
 
 	function RowColumn(_ref) {
 	  var _cell$qText, _cell$qHighlightRange, _cell$qHighlightRange2;
@@ -23068,7 +23214,10 @@
 	    focusListItems,
 	    listCount,
 	    itemPadding,
-	    frequencyWidth
+	    frequencyWidth,
+	    translator,
+	    showSearch,
+	    isModal
 	  } = data;
 	  const {
 	    dense = false,
@@ -23118,8 +23267,10 @@
 	    }
 	  }, [rowRef.current]);
 	  const handleKeyDownCallback = reactExports.useCallback(getFieldKeyboardNavigation(_objectSpread2(_objectSpread2({}, actions), {}, {
-	    focusListItems
-	  })), [actions]);
+	    focusListItems,
+	    keyboard,
+	    isModal
+	  })), [actions, keyboard === null || keyboard === void 0 ? void 0 : keyboard.innerTabStops]);
 	  const cell = reactExports.useMemo(() => getCellFromPages({
 	    pages,
 	    cellIndex
@@ -23157,7 +23308,6 @@
 	  }
 	  const isGridCol = dataLayout === 'grid' && layoutOrder === 'column';
 	  const label = (_cell$qText = cell === null || cell === void 0 ? void 0 : cell.qText) !== null && _cell$qText !== void 0 ? _cell$qText : '';
-	  const textDirection = rtlUtil.detectTextDirection(label);
 	  // Search highlights. Split up labelText span into several and add the highlighted class to matching sub-strings.
 
 	  let labels;
@@ -23185,6 +23335,14 @@
 	  const showTick = !checkboxes && isSelected && !isLocked;
 	  const showIcon = !checkboxes && sizePermitsTickOrLock;
 	  const cellPaddingRight = checkboxes || !sizePermitsTickOrLock;
+	  const ariaLabel = getValueLabel({
+	    translator,
+	    label,
+	    qState: cell.qState,
+	    currentIndex: count.currentIndex,
+	    maxIndex: count.max,
+	    showSearch
+	  });
 	  return /*#__PURE__*/React.createElement(RowColRoot$1, {
 	    className: rowColClasses.barContainer,
 	    flexBasisProp: flexBasisVal,
@@ -23195,6 +23353,11 @@
 	    frequencyWidth: frequencyWidth,
 	    "data-testid": "listbox.item"
 	  }, /*#__PURE__*/React.createElement(ItemGrid, {
+	    role: "row",
+	    "aria-label": ariaLabel,
+	    "aria-selected": isSelected,
+	    "aria-setsize": count.max,
+	    "aria-rowindex": count.currentIndex,
 	    ref: rowRef,
 	    container: true,
 	    dataLayout: dataLayout,
@@ -23212,8 +23375,7 @@
 	    onMouseEnter: onMouseEnter,
 	    onKeyDown: handleKeyDownCallback,
 	    onContextMenu: preventContextMenu,
-	    role: column ? 'column' : 'row',
-	    tabIndex: isFirstElement && (!keyboard.enabled || keyboard.active) ? 0 : -1,
+	    tabIndex: isFirstElement && keyboard.innerTabStops ? 0 : -1,
 	    "data-n": cell === null || cell === void 0 ? void 0 : cell.qElemNumber
 	  }, (cell === null || cell === void 0 ? void 0 : cell.qFrequency) && /*#__PURE__*/React.createElement(Histogram, {
 	    qFrequency: cell === null || cell === void 0 ? void 0 : cell.qFrequency,
@@ -23239,8 +23401,7 @@
 	    cell: cell,
 	    isGridCol: isGridCol,
 	    isSingleSelect: isSingleSelect,
-	    valueTextAlign: valueTextAlign,
-	    textDirection: textDirection
+	    valueTextAlign: valueTextAlign
 	  }) : /*#__PURE__*/React.createElement(Field$1, {
 	    onChange: onChange,
 	    label: label,
@@ -24830,7 +24991,10 @@
 	    setCurrentScrollIndex,
 	    constraints,
 	    frequencyMax,
-	    freqIsAllowed
+	    freqIsAllowed,
+	    translator,
+	    showSearch,
+	    isModal
 	  } = _ref;
 	  const {
 	    layoutOptions = {}
@@ -24884,7 +25048,10 @@
 	    showTick,
 	    dataOffset: local.current.dataOffset,
 	    focusListItems,
-	    direction
+	    direction,
+	    translator,
+	    showSearch,
+	    isModal
 	  });
 	  const List = _ref2 => {
 	    let {
@@ -25326,17 +25493,14 @@
 	  };
 	}
 
-	function ListBoxDisclaimer(_ref) {
+	const StyledText = styled$1(Typography$1, {
+	  shouldForwardProp: p => !['width', 'dense'].includes(p)
+	})(_ref => {
 	  let {
 	    width,
-	    text,
-	    dense,
-	    tooltip
+	    dense
 	  } = _ref;
-	  const {
-	    translator
-	  } = reactExports.useContext(InstanceContext);
-	  const StyledText = styled$1(Typography$1)(() => _objectSpread2({
+	  return _objectSpread2({
 	    minWidth: "".concat(width, "px"),
 	    textAlign: 'center',
 	    fontSize: "".concat(dense ? '12px' : '14px')
@@ -25345,10 +25509,23 @@
 	    overflow: 'hidden',
 	    whiteSpace: 'nowrap',
 	    width
-	  }));
+	  });
+	});
+	function ListBoxDisclaimer(_ref2) {
+	  let {
+	    width,
+	    text,
+	    dense,
+	    tooltip
+	  } = _ref2;
+	  const {
+	    translator
+	  } = reactExports.useContext(InstanceContext);
 	  return /*#__PURE__*/React.createElement(Tooltip$1, {
 	    title: tooltip ? translator.get(text) : ''
 	  }, /*#__PURE__*/React.createElement(StyledText, {
+	    width: width,
+	    dense: dense,
 	    component: "div",
 	    variant: "body1",
 	    py: "12px"
@@ -25570,6 +25747,14 @@
 
 	const _excluded$4 = ["isLoadingData"];
 	const DEFAULT_MIN_BATCH_SIZE = 100;
+	const StyledWrapper = styled$1('div')(() => ({
+	  ["& .screenReaderOnly"]: {
+	    position: 'absolute',
+	    height: 0,
+	    width: 0,
+	    overflow: 'hidden'
+	  }
+	}));
 	function ListBox(_ref) {
 	  var _layout$qListObject$q, _loaderRef$current, _loaderRef$current$_l, _loaderRef$current$_l2;
 	  let {
@@ -25600,8 +25785,13 @@
 	      set: () => {}
 	    },
 	    renderedCallback,
-	    onCtrlF
+	    onCtrlF,
+	    showSearch,
+	    isModal
 	  } = _ref;
+	  const {
+	    translator
+	  } = reactExports.useContext(InstanceContext);
 	  const [initScrollPosIsSet, setInitScrollPosIsSet] = reactExports.useState(false);
 	  const isSingleSelect = !!(layout && layout.qListObject.qDimensionInfo.qIsOneAndOnlyOne);
 	  const {
@@ -25856,7 +26046,10 @@
 	    setCurrentScrollIndex: currentScrollIndex.set,
 	    constraints,
 	    frequencyMax,
-	    freqIsAllowed
+	    freqIsAllowed,
+	    translator,
+	    showSearch,
+	    isModal
 	  });
 	  const {
 	    columnWidth,
@@ -25871,7 +26064,10 @@
 	      itemHeight
 	    });
 	  }
-	  return /*#__PURE__*/React.createElement(React.Fragment, null, !listCount && /*#__PURE__*/React.createElement(ListBoxDisclaimer, {
+	  return /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(ScreenReaderForSelections, {
+	    className: "screenReaderOnly",
+	    layout: layout
+	  }), !listCount && /*#__PURE__*/React.createElement(ListBoxDisclaimer, {
 	    width: width,
 	    text: "Listbox.NoMatchesForYourTerms"
 	  }), /*#__PURE__*/React.createElement(InfiniteLoader, {
@@ -25883,7 +26079,8 @@
 	    }),
 	    threshold: 0,
 	    minimumBatchSize: minimumBatchSize,
-	    ref: loaderRef
+	    ref: loaderRef,
+	    role: "grid"
 	  }, isVertical ? List : Grid), overflowDisclaimer.show && !overflowDisclaimer.dismissed && /*#__PURE__*/React.createElement(ListBoxFooter, {
 	    text: "Listbox.ItemsOverflow",
 	    dismiss: () => setOverflowDisclaimer(state => _objectSpread2(_objectSpread2({}, state), {}, {
@@ -26035,6 +26232,7 @@
 	  if (hidden) return null;
 	  const spacing = Number.parseInt(theme.spacing(0.5), 10);
 	  const handleKeyDown = item.keyboardAction ? e => ['Enter', ' ', 'Spacebar'].includes(e.key) && item.keyboardAction() : null;
+	  const btnId = "actions-toolbar-".concat(item.key);
 	  return /*#__PURE__*/React.createElement(IconButton$1, {
 	    ref: !addAnchor ? ref : null,
 	    title: item.label,
@@ -26042,12 +26240,12 @@
 	    onKeyDown: handleKeyDown,
 	    disabled: disabled,
 	    style: style,
-	    className: ActionElement.className,
+	    className: [ActionElement.className, btnId].join(' '),
 	    size: "large",
 	    disableRipple: true,
 	    "aria-expanded": ariaExpanded,
 	    "aria-controls": "moreMenuList",
-	    "data-testid": "actions-toolbar-".concat(item.key)
+	    "data-testid": btnId
 	  }, hasSvgIconShape && SvgIcon(item.getSvgIconShape()), addAnchor && /*#__PURE__*/React.createElement("div", {
 	    ref: ref,
 	    style: {
@@ -26226,6 +26424,70 @@
 	  }))));
 	});
 
+	const getActionButtonIndex = btn => {
+	  const toolbar = btn.closest('#actions-toolbar');
+	  const nodeList = toolbar === null || toolbar === void 0 ? void 0 : toolbar.querySelectorAll('.njs-cell-action');
+	  return Array.from(nodeList).indexOf(btn);
+	};
+	const focusButton = index => {
+	  const toolbar = document.querySelector('#actions-toolbar');
+	  const nodeList = toolbar === null || toolbar === void 0 ? void 0 : toolbar.querySelectorAll('.njs-cell-action');
+	  if (!nodeList.length) {
+	    return;
+	  }
+	  const ix = Math.min(Math.max(0, index), nodeList.length - 1);
+	  const btn = nodeList[ix];
+	  btn.focus();
+	};
+	function getActionsKeyDownHandler(_ref) {
+	  let {
+	    keyboardNavigation,
+	    focusHandler,
+	    getEnabledButton
+	  } = _ref;
+	  const handleActionsKeyDown = evt => {
+	    const {
+	      target,
+	      nativeEvent
+	    } = evt;
+	    const {
+	      keyCode
+	    } = nativeEvent;
+	    switch (keyCode) {
+	      case KEYS.ARROW_LEFT:
+	      case KEYS.ARROW_DOWN:
+	      case KEYS.ARROW_RIGHT:
+	      case KEYS.ARROW_UP:
+	        {
+	          const isActionButton = target.classList.contains('njs-cell-action');
+	          if (isActionButton) {
+	            const index = getActionButtonIndex(target);
+	            const pressedLeft = [KEYS.ARROW_LEFT, KEYS.ARROW_DOWN].includes(keyCode);
+	            focusButton(pressedLeft ? index - 1 : index + 1);
+	          }
+	          evt.stopPropagation();
+	          evt.preventDefault();
+	          break;
+	        }
+	      case KEYS.SPACE:
+	        evt.preventDefault(); // prevent scrolling in listbox
+	        break;
+	      case KEYS.TAB:
+	        if (keyboardNavigation && focusHandler !== null && focusHandler !== void 0 && focusHandler.refocusContent) {
+	          const isTabbingOut = evt.shiftKey && getEnabledButton(false) === evt.target || !evt.shiftKey && getEnabledButton(true) === evt.target;
+	          if (isTabbingOut) {
+	            evt.preventDefault();
+	            evt.stopPropagation();
+	            // if keyboardNavigation is true, create a callback to handle tabbing from the first/last button in the toolbar that resets focus on the content
+	            focusHandler.refocusContent();
+	          }
+	        }
+	        break;
+	    }
+	  };
+	  return handleActionsKeyDown;
+	}
+
 	const PREFIX$7 = 'ActionsToolbar';
 	const classes$7 = {
 	  item: "".concat(PREFIX$7, "-item"),
@@ -26261,6 +26523,7 @@
 	};
 	const ActionsGroup = React.forwardRef((_ref2, ref) => {
 	  let {
+	    className,
 	    ariaExpanded = false,
 	    actions = [],
 	    first = false,
@@ -26273,7 +26536,8 @@
 	    container: true,
 	    gap: 0,
 	    flexDirection: isRtl ? 'row-reverse' : 'row',
-	    wrap: "nowrap"
+	    wrap: "nowrap",
+	    className: className
 	  }, actions.map((e, ix) => {
 	    let cls = [];
 	    const isFirstItem = first && ix === 0;
@@ -26341,22 +26605,27 @@
 	    keyboardNavigation
 	  } = reactExports.useContext(InstanceContext);
 	  const [showMoreItems, setShowMoreItems] = reactExports.useState(false);
-	  const moreRef = reactExports.useRef();
+	  const popoverAnchorOrigin = {
+	    vertical: 7,
+	    horizontal: ((_popover$anchorEl$cli = (_popover$anchorEl = popover.anchorEl) === null || _popover$anchorEl === void 0 ? void 0 : _popover$anchorEl.clientWidth) !== null && _popover$anchorEl$cli !== void 0 ? _popover$anchorEl$cli : 0) - 7
+	  };
 	  const actionsRef = reactExports.useRef();
+	  const moreRef = reactExports.useRef();
 	  const theme = useTheme$1();
 	  const dividerStyle = reactExports.useMemo(() => ({
 	    margin: theme.spacing(0.5, 0)
 	  }));
-	  const popoverAnchorOrigin = {
-	    vertical: 15,
-	    horizontal: ((_popover$anchorEl$cli = (_popover$anchorEl = popover.anchorEl) === null || _popover$anchorEl === void 0 ? void 0 : _popover$anchorEl.clientWidth) !== null && _popover$anchorEl$cli !== void 0 ? _popover$anchorEl$cli : 0) - 7
-	  };
 	  const getEnabledButton = last => {
 	    const actionsElement = actionsRef.current || actionsRefMock;
 	    if (!actionsElement) return null;
 	    const buttons = actionsElement.querySelectorAll('button:not(.Mui-disabled)');
 	    return buttons[last ? buttons.length - 1 : 0];
 	  };
+	  const handleActionsKeyDown = reactExports.useMemo(() => getActionsKeyDownHandler({
+	    keyboardNavigation,
+	    focusHandler,
+	    getEnabledButton
+	  }), [keyboardNavigation, focusHandler, getEnabledButton]);
 	  reactExports.useEffect(() => () => {
 	    setShowMoreItems(false);
 	  }, [popover.show, show, selections.show]);
@@ -26396,27 +26665,18 @@
 	    enabled: () => moreEnabled,
 	    action: () => setShowMoreItems(!showMoreItems)
 	  };
-	  const tabCallback =
-	  // if keyboardNavigation is true, create a callback to handle tabbing from the first/last button in the toolbar that resets focus on the content
-	  keyboardNavigation && focusHandler && focusHandler.refocusContent ? evt => {
-	    if (evt.key !== 'Tab') return;
-	    const isTabbingOut = evt.shiftKey && getEnabledButton(false) === evt.target || !evt.shiftKey && getEnabledButton(true) === evt.target;
-	    if (isTabbingOut) {
-	      evt.preventDefault();
-	      evt.stopPropagation();
-	      focusHandler.refocusContent();
-	    }
-	  } : null;
 	  const showActions = newActions.length > 0;
 	  const showMore = moreActions.length > 0;
 	  const showDivider = showActions && selections.show || showMore && selections.show;
 	  const isRtl = direction === 'rtl';
 	  const Actions = /*#__PURE__*/React.createElement(Grid$1, {
 	    ref: actionsRef,
-	    onKeyDown: tabCallback,
+	    onKeyDown: handleActionsKeyDown,
 	    container: true,
 	    gap: 0,
 	    wrap: "nowrap",
+	    id: "actions-toolbar",
+	    "data-testid": "actions-toolbar",
 	    sx: {
 	      flexDirection: isRtl ? 'row-reverse' : 'row'
 	    }
@@ -26425,6 +26685,8 @@
 	    first: true,
 	    last: !showMore && !selections.show
 	  }), showMore && /*#__PURE__*/React.createElement(ActionsGroup, {
+	    id: "actions-toolbar-show-more",
+	    "data-testid": "actions-toolbar-show-more",
 	    ref: moreRef,
 	    ariaExpanded: showMoreItems,
 	    actions: [moreItem],
@@ -26438,6 +26700,7 @@
 	  }, /*#__PURE__*/React.createElement(Divider$1, {
 	    orientation: "vertical"
 	  })), selections.show && /*#__PURE__*/React.createElement(ActionsGroup, {
+	    className: "actions-toolbar-default-actions",
 	    actions: defaultSelectionActions,
 	    first: !showActions && !showMore,
 	    last: true,
@@ -26461,6 +26724,8 @@
 	    hideBackdrop: true,
 	    style: popoverStyle,
 	    PaperProps: {
+	      id: 'njs-action-toolbar-popover',
+	      'data-testid': 'njs-action-toolbar-popover',
 	      className: ActionToolbarElement.className,
 	      style: {
 	        pointerEvents: 'auto',
@@ -26588,29 +26853,57 @@
 	    }
 	    return response;
 	  };
+	  function focusRow(container) {
+	    const row = (container === null || container === void 0 ? void 0 : container.querySelector('.last-focused')) || (container === null || container === void 0 ? void 0 : container.querySelector('[role="row"]:first-child'));
+	    row.setAttribute('tabIndex', 0);
+	    row === null || row === void 0 ? void 0 : row.focus();
+	  }
 	  const onKeyDown = async e => {
-	    let response;
+	    const {
+	      currentTarget
+	    } = e;
+	    const container = currentTarget.closest('.listbox-container');
 	    switch (e.key) {
 	      case 'Enter':
-	        response = await performSearch();
+	        performSearch();
 	        break;
 	      case 'Escape':
-	        response = cancel();
-	        e.preventDefault();
-	        e.stopPropagation();
-	        break;
+	        {
+	          focusRow(container);
+	          cancel();
+	          break;
+	        }
+	      case 'Tab':
+	        {
+	          if (e.shiftKey) {
+	            keyboard.focusSelection();
+	          } else {
+	            // Focus the row we last visited or the first one.
+	            focusRow(container);
+
+	            // Clean up.
+	            container === null || container === void 0 ? void 0 : container.querySelectorAll('.last-focused').forEach(elm => {
+	              elm.classList.remove('last-focused');
+	            });
+	          }
+	          break;
+	        }
 	      case 'f':
 	      case 'F':
 	        if (e.ctrlKey || e.metaKey) {
 	          if (hide) {
 	            hide();
 	          }
-	          e.preventDefault();
-	          e.stopPropagation();
+	        } else {
+	          return undefined;
 	        }
 	        break;
+	      default:
+	        return undefined;
 	    }
-	    return response;
+	    e.preventDefault();
+	    e.stopPropagation();
+	    return undefined;
 	  };
 	  if (!visible || searchEnabled === false) {
 	    return null;
@@ -26656,10 +26949,11 @@
 	    onKeyDown: onKeyDown,
 	    autoFocus: autoFocus,
 	    inputProps: {
-	      tabIndex: keyboard && (!keyboard.enabled || keyboard.active) ? 0 : -1,
+	      tabIndex: keyboard.innerTabStops ? 0 : -1,
 	      style: {
 	        textAlign: "".concat(inpuTextAlign)
-	      }
+	      },
+	      'data-testid': 'search-input-field'
 	    }
 	  });
 	}
@@ -26903,6 +27197,12 @@
 	    objectSelections.addListener('activated', activateClickOut);
 	    objectSelections.addListener('deactivated', deactivateClickOut);
 	    return () => {
+	      // confirm selection before removing event handler
+	      // to end the selection when the object is removed
+	      // and remove the (ClickOut) mousedown handler from the document
+	      if (objectSelections.isActive()) {
+	        objectSelections.confirm();
+	      }
 	      objectSelections.removeListener('activated', activateClickOut);
 	      objectSelections.removeListener('deactivated', deactivateClickOut);
 	    };
@@ -28558,6 +28858,23 @@
 	  };
 	}
 
+	const StyledDiv = styled$1('div')(() => ({
+	  display: 'flex',
+	  width: '100%',
+	  height: '100%',
+	  alignItems: 'center',
+	  justifyContent: 'center'
+	}));
+	function ListBoxError(_ref) {
+	  let {
+	    text
+	  } = _ref;
+	  const {
+	    translator
+	  } = reactExports.useContext(InstanceContext);
+	  return /*#__PURE__*/React.createElement(StyledDiv, null, translator.get(text));
+	}
+
 	const PREFIX$4 = 'ListBoxInline';
 	const classes$4 = {
 	  listBoxHeader: "".concat(PREFIX$4, "-listBoxHeader"),
@@ -28609,12 +28926,20 @@
 	    fontWeight: ((_theme$listBox5 = theme.listBox) === null || _theme$listBox5 === void 0 ? void 0 : (_theme$listBox5$title = _theme$listBox5.title) === null || _theme$listBox5$title === void 0 ? void 0 : (_theme$listBox5$title2 = _theme$listBox5$title.main) === null || _theme$listBox5$title2 === void 0 ? void 0 : _theme$listBox5$title2.fontWeight) || 'bold'
 	  };
 	});
-	function ListBoxInline(_ref3) {
+	const isModal = _ref3 => {
+	  var _app$isInModalSelecti, _app$isInModalSelecti2;
+	  let {
+	    app,
+	    appSelections
+	  } = _ref3;
+	  return (_app$isInModalSelecti = (_app$isInModalSelecti2 = app.isInModalSelection) === null || _app$isInModalSelecti2 === void 0 ? void 0 : _app$isInModalSelecti2.call(app)) !== null && _app$isInModalSelecti !== void 0 ? _app$isInModalSelecti : appSelections.isInModal();
+	};
+	function ListBoxInline(_ref4) {
 	  var _layoutOptions$dense;
 	  let {
 	    options,
 	    layout
-	  } = _ref3;
+	  } = _ref4;
 	  const {
 	    app,
 	    direction,
@@ -28632,9 +28957,7 @@
 	    calculatePagesHeight,
 	    showGray = true,
 	    scrollState = undefined,
-	    renderedCallback
-	  } = options;
-	  let {
+	    renderedCallback,
 	    toolbar = true
 	  } = options;
 
@@ -28664,7 +28987,6 @@
 	  const [searchContainer, searchContainerRef] = useRefWithCallback();
 	  const [showToolbar, setShowToolbar] = reactExports.useState(false);
 	  const [showSearch, setShowSearch] = reactExports.useState(false);
-	  const [keyboardActive, setKeyboardActive] = reactExports.useState(false);
 	  const [hovering, setHovering] = reactExports.useState(false);
 	  const [keyScroll, setKeyScroll] = reactExports.useState({
 	    down: 0,
@@ -28679,12 +29001,22 @@
 	  const [appSelections] = useAppSelections(app);
 	  const titleRef = reactExports.useRef(null);
 	  const [selectionState$1] = reactExports.useState(() => selectionState());
+	  const keyboard = useTempKeyboard({
+	    containerRef,
+	    enabled: keyboardNavigation
+	  });
+	  const isModalMode = reactExports.useCallback(() => isModal({
+	    app,
+	    appSelections
+	  }), [app, appSelections]);
+	  const isInvalid = layout === null || layout === void 0 ? void 0 : layout.qListObject.qDimensionInfo.qError;
+	  const errorText = isInvalid && constraints.active ? 'Visualization.Invalid.Dimension' : 'Visualization.Incomplete';
 	  const {
 	    handleKeyDown,
 	    handleOnMouseEnter,
 	    handleOnMouseLeave
 	  } = getListboxInlineKeyboardNavigation({
-	    setKeyboardActive,
+	    keyboard,
 	    hovering,
 	    setHovering,
 	    updateKeyScroll,
@@ -28692,20 +29024,11 @@
 	    currentScrollIndex,
 	    app,
 	    appSelections,
-	    constraints
+	    constraints,
+	    isModal: isModalMode
 	  });
-
-	  // Expose the keyboard flags in the same way as the keyboard hook does.
-	  const keyboard = {
-	    enabled: keyboardNavigation,
-	    // this will be static until we can access the useKeyboard hook
-	    active: keyboardActive
-	  };
-	  if ((layout === null || layout === void 0 ? void 0 : layout.toolbar) !== undefined) {
-	    toolbar = layout.toolbar;
-	  }
-	  const toolbarDetachedOnly = toolbar && (layout === null || layout === void 0 ? void 0 : layout.title) === '';
-	  toolbar = toolbar && (layout === null || layout === void 0 ? void 0 : layout.title) !== '';
+	  const showDetachedToolbarOnly = toolbar && ((layout === null || layout === void 0 ? void 0 : layout.title) === '' || (layout === null || layout === void 0 ? void 0 : layout.showTitle) === false);
+	  const showToolbarWithTitle = toolbar && (layout === null || layout === void 0 ? void 0 : layout.title) !== '' && (layout === null || layout === void 0 ? void 0 : layout.showTitle) !== false;
 	  reactExports.useEffect(() => {
 	    const show = () => {
 	      setShowToolbar(true);
@@ -28729,7 +29052,7 @@
 	        selections.removeListener('deactivated', hide);
 	      }
 	    };
-	  }, [selections, toolbar]);
+	  }, [selections]);
 	  reactExports.useEffect(() => {
 	    if (!searchContainer || !searchContainer.current) {
 	      return;
@@ -28763,7 +29086,7 @@
 	  const searchHeight = dense ? 27 : 40;
 	  const extraheight = dense ? 39 : 49;
 	  const searchAddHeight = searchVisible ? searchHeight : 0;
-	  const minHeight = toolbar ? 49 + searchAddHeight + extraheight : 0;
+	  const minHeight = showToolbarWithTitle ? 49 + searchAddHeight + extraheight : 0;
 	  const headerHeight = 32;
 	  const onShowSearch = () => {
 	    const newValue = !showSearch;
@@ -28835,12 +29158,12 @@
 	      fontSize: '12px'
 	    }
 	  }));
-	  return /*#__PURE__*/React.createElement(React.Fragment, null, toolbarDetachedOnly && /*#__PURE__*/React.createElement(ActionsToolbar, _extends$8({
+	  return /*#__PURE__*/React.createElement(React.Fragment, null, showDetachedToolbarOnly && /*#__PURE__*/React.createElement(ActionsToolbar, _extends$8({
 	    direction: direction
 	  }, getActionToolbarProps(true))), /*#__PURE__*/React.createElement(StyledGrid$3, {
 	    className: "listbox-container",
 	    container: true,
-	    tabIndex: keyboard.enabled && !keyboard.active ? 0 : -1,
+	    tabIndex: keyboard.outerTabStops ? 0 : -1,
 	    direction: "column",
 	    gap: 0,
 	    containerPadding: containerPadding,
@@ -28854,7 +29177,7 @@
 	    onMouseLeave: handleOnMouseLeave,
 	    ref: containerRef,
 	    hasIcon: showIcons
-	  }, toolbar && /*#__PURE__*/React.createElement(Grid$1, {
+	  }, showToolbarWithTitle && /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true,
 	    container: true,
 	    style: {
@@ -28944,11 +29267,13 @@
 	    className: classes$4.listboxWrapper
 	  }, /*#__PURE__*/React.createElement("div", {
 	    className: classes$4.screenReaderOnly
-	  }, translator.get('Listbox.ScreenReaderInstructions')), /*#__PURE__*/React.createElement(AutoSizer, null, _ref4 => {
+	  }, translator.get('Listbox.ScreenReaderInstructions')), isInvalid ? /*#__PURE__*/React.createElement(ListBoxError, {
+	    text: errorText
+	  }) : /*#__PURE__*/React.createElement(AutoSizer, null, _ref5 => {
 	    let {
 	      height,
 	      width
-	    } = _ref4;
+	    } = _ref5;
 	    return /*#__PURE__*/React.createElement(ListBox, {
 	      model: model,
 	      app: app,
@@ -28983,15 +29308,16 @@
 	        set: setCurrentScrollIndex
 	      },
 	      renderedCallback: renderedCallback,
-	      onCtrlF: onCtrlF
+	      onCtrlF: onCtrlF,
+	      isModal: isModalMode
 	    });
 	  })))));
 	}
 	const ListBoxInlineMemoed = React.memo(ListBoxInline);
-	function IsolateUseLayoutWrapper(_ref5) {
+	function IsolateUseLayoutWrapper(_ref6) {
 	  let {
 	    options = {}
-	  } = _ref5;
+	  } = _ref6;
 	  const {
 	    model
 	  } = options;
@@ -29393,7 +29719,7 @@
 	  array.splice(removeIdx, 1);
 	  return removeIdx;
 	}
-	const nxDimension = f => ({
+	const nxDimension$1 = f => ({
 	  qDef: {
 	    qFieldDefs: [f]
 	  }
@@ -29424,7 +29750,7 @@
 	      return hc.qMeasures;
 	    },
 	    addDimension(d) {
-	      const dimension = typeof d === 'string' ? nxDimension(d) : _objectSpread2(_objectSpread2({}, d), {}, {
+	      const dimension = typeof d === 'string' ? nxDimension$1(d) : _objectSpread2(_objectSpread2({}, d), {}, {
 	        qDef: d.qDef || {}
 	      });
 	      dimension.qDef.cId = dimension.qDef.cId || uid();
@@ -29507,6 +29833,69 @@
 	  return handler;
 	}
 
+	const nxDimension = f => ({
+	  qDef: {
+	    qFieldDefs: [f]
+	  }
+	});
+	function loHandler(_ref) {
+	  let {
+	    dc: lo,
+	    def,
+	    properties
+	  } = _ref;
+	  lo.qInitialDataFetch = lo.qInitialDataFetch || [];
+	  const objectProperties = properties;
+	  const handler = {
+	    dimensions() {
+	      if (!lo.qLibraryId && (!lo.qDef || !lo.qDef.qFieldDefs || lo.qDef.qFieldDefs.length === 0)) return [];
+	      return [lo];
+	    },
+	    measures() {
+	      return [];
+	    },
+	    addDimension(d) {
+	      const dimension = typeof d === 'string' ? nxDimension(d) : _objectSpread2(_objectSpread2({}, d), {}, {
+	        qDef: d.qDef || {}
+	      });
+	      dimension.qDef.cId = dimension.qDef.cId || uid();
+	      dimension.qDef.qSortCriterias = lo.qDef.qSortCriterias || [{
+	        qSortByState: 1,
+	        qSortByLoadOrder: 1,
+	        qSortByNumeric: 1,
+	        qSortByAscii: 1
+	      }];
+	      Object.keys(dimension).forEach(k => {
+	        lo[k] = dimension[k];
+	      });
+	      def.dimensions.added(dimension, objectProperties);
+	      return dimension;
+	    },
+	    removeDimension(idx) {
+	      const dimension = lo;
+	      delete lo.qDef;
+	      delete lo.qLibraryId;
+	      def.dimensions.removed(dimension, objectProperties, idx);
+	      return dimension;
+	    },
+	    addMeasure() {},
+	    removeMeasure() {},
+	    maxDimensions() {
+	      return 1;
+	    },
+	    maxMeasures() {
+	      return 0;
+	    },
+	    canAddDimension() {
+	      return handler.dimensions().length === 0;
+	    },
+	    canAddMeasure() {
+	      return false;
+	    }
+	  };
+	  return handler;
+	}
+
 	/**
 	 * @interface LibraryField
 	 * @property {string} qLibraryId
@@ -29551,7 +29940,8 @@
 	    const s = parts[i];
 	    p = s ? p[s] : p;
 	  }
-	  const hc = hcHandler({
+	  const createHandler = propertyPath.match('/qListObjectDef') ? loHandler : hcHandler;
+	  const handler = createHandler({
 	    dc: p,
 	    def: target,
 	    properties
@@ -29559,9 +29949,9 @@
 	  fields.forEach(f => {
 	    const type = fieldType(f);
 	    if (type === 'measure') {
-	      hc.addMeasure(f);
+	      handler.addMeasure(f);
 	    } else {
-	      hc.addDimension(f);
+	      handler.addDimension(f);
 	    }
 	  });
 	}
@@ -30792,7 +31182,8 @@
 	    sn,
 	    anchorEl,
 	    hovering,
-	    focusHandler
+	    focusHandler,
+	    titleStyles = {}
 	  } = _ref2;
 	  const showTitle = layout.showTitles && !!layout.title;
 	  const showSubtitle = layout.showTitles && !!layout.subtitle;
@@ -30850,11 +31241,13 @@
 	  }, showTitle && /*#__PURE__*/React.createElement(Typography$1, {
 	    variant: "h6",
 	    noWrap: true,
-	    className: CellTitle.className
+	    className: CellTitle.className,
+	    style: titleStyles.main
 	  }, layout.title), showSubtitle && /*#__PURE__*/React.createElement(Typography$1, {
 	    variant: "body2",
 	    noWrap: true,
-	    className: CellSubTitle.className
+	    className: CellSubTitle.className,
+	    style: titleStyles.subTitle
 	  }, layout.subtitle))), /*#__PURE__*/React.createElement(Grid$1, {
 	    item: true
 	  }, Toolbar));
@@ -30887,7 +31280,8 @@
 	};
 	function Footer(_ref2) {
 	  let {
-	    layout
+	    layout,
+	    titleStyles = {}
 	  } = _ref2;
 	  return layout && layout.showTitles && layout.footnote ? /*#__PURE__*/React.createElement(StyledGrid, {
 	    container: true
@@ -30897,7 +31291,8 @@
 	  }, /*#__PURE__*/React.createElement(Typography$1, {
 	    noWrap: true,
 	    variant: "body2",
-	    className: CellFooter.className
+	    className: CellFooter.className,
+	    style: titleStyles.footer
 	  }, layout.footnote))) : null;
 	}
 
@@ -31127,7 +31522,7 @@
 	function resolveImageUrl(app, relativeUrl) {
 	  return relativeUrl ? getSenseServerUrl(app) + relativeUrl : undefined;
 	}
-	const resolveBgImage = (bgComp, app) => {
+	function resolveBgImage(bgComp, app) {
 	  const bgImageDef = bgComp === null || bgComp === void 0 ? void 0 : bgComp.bgImage;
 	  if (bgImageDef) {
 	    let url = '';
@@ -31148,8 +31543,8 @@
 	    } : undefined;
 	  }
 	  return undefined;
-	};
-	const resolveBgColor = (bgComp, theme) => {
+	}
+	function resolveBgColor(bgComp, theme, objectType) {
 	  const bgColor = bgComp === null || bgComp === void 0 ? void 0 : bgComp.bgColor;
 	  if (bgColor && theme) {
 	    if (bgColor.useExpression) {
@@ -31157,8 +31552,32 @@
 	    }
 	    return bgColor.color && bgColor.color.color !== 'none' ? theme.getColorPickerColor(bgColor.color, true) : undefined;
 	  }
+	  if (theme && objectType) {
+	    return theme.getStyle("object.".concat(objectType), '', 'backgroundColor');
+	  }
+	  if (theme) {
+	    return theme.getStyle('', '', 'backgroundColor');
+	  }
 	  return undefined;
-	};
+	}
+	function unfurlFontStyle(fontStyle, target) {
+	  if (fontStyle && Array.isArray(fontStyle)) {
+	    return fontStyle;
+	  }
+	  return target === 'main' ? ['bold'] : [];
+	}
+	function resolveTextStyle(textComp, target, theme, objectType) {
+	  var _textComp$title;
+	  const textProps = (textComp === null || textComp === void 0 ? void 0 : (_textComp$title = textComp.title) === null || _textComp$title === void 0 ? void 0 : _textComp$title[target]) || {};
+	  const fontStyle = unfurlFontStyle(textProps.fontStyle, target);
+	  return {
+	    fontFamily: textProps.fontFamily || theme.getStyle("object.".concat(objectType), "title.".concat(target), 'fontFamily'),
+	    color: textProps.color && textProps.color.color !== 'none' ? theme.getColorPickerColor(textProps.color, true) : theme.getStyle("object.".concat(objectType), target, 'color'),
+	    fontWeight: fontStyle.includes('bold') ? 'bold' : 'normal',
+	    fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',
+	    textDecoration: fontStyle.includes('underline') ? 'underline' : 'initial'
+	  };
+	}
 
 	/**
 	 * @interface
@@ -31400,7 +31819,8 @@
 	    app,
 	    selections,
 	    nebbie,
-	    focusHandler
+	    focusHandler,
+	    emitter
 	  } = _ref5;
 	  try {
 	    const snType = await getType({
@@ -31413,7 +31833,8 @@
 	      app,
 	      selections,
 	      nebbie,
-	      focusHandler
+	      focusHandler,
+	      emitter
 	    });
 	    return sn;
 	  } catch (err) {
@@ -31443,7 +31864,8 @@
 	    initialSnPlugins,
 	    initialError,
 	    onMount,
-	    currentId
+	    currentId,
+	    emitter
 	  } = _ref6;
 	  const {
 	    app,
@@ -31482,7 +31904,7 @@
 	  });
 	  const [bgColor, setBgColor] = reactExports.useState(undefined);
 	  const [bgImage, setBgImage] = reactExports.useState(undefined); // {url: "", size: "", pos: ""}
-
+	  const [titleStyles, setTitleStyles] = reactExports.useState(undefined);
 	  const focusHandler = reactExports.useRef({
 	    focusToolbarButton(last) {
 	      // eslint-disable-next-line react/no-this-in-sfc
@@ -31493,9 +31915,16 @@
 	    eventmixin(focusHandler.current);
 	  }, []);
 	  reactExports.useEffect(() => {
-	    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));
+	    if (layout && halo.public.theme) {
+	      const bgComp = layout.components ? layout.components.find(comp => comp.key === 'general') : null;
+	      setTitleStyles({
+	        main: resolveTextStyle(bgComp, 'main', halo.public.theme, layout.visualization),
+	        footer: resolveTextStyle(bgComp, 'footer', halo.public.theme, layout.visualization),
+	        subTitle: resolveTextStyle(bgComp, 'subTitle', halo.public.theme, layout.visualization)
+	      });
+	      setBgColor(resolveBgColor(bgComp, halo.public.theme, layout.visualization));
+	      setBgImage(resolveBgImage(bgComp, halo.app));
+	    }
 	  }, [layout, halo.public.theme, halo.app, themeName]);
 	  focusHandler.current.blurCallback = resetFocus => {
 	    halo.root.toggleFocusOfCells();
@@ -31567,7 +31996,8 @@
 	        app,
 	        selections,
 	        nebbie,
-	        focusHandler: focusHandler.current
+	        focusHandler: focusHandler.current,
+	        emitter
 	      });
 	      if (sn) {
 	        dispatch({
@@ -31709,7 +32139,8 @@
 	    sn: state.sn,
 	    anchorEl: cellNode,
 	    hovering: hovering,
-	    focusHandler: focusHandler.current
+	    focusHandler: focusHandler.current,
+	    titleStyles: titleStyles
 	  }, "\xA0"), /*#__PURE__*/React.createElement(Grid$1, {
 	    tabIndex: keyboardNavigation ? 0 : -1,
 	    onKeyDown: keyboardNavigation ? handleKeyDown : null,
@@ -31720,7 +32151,8 @@
 	    },
 	    ref: contentRef
 	  }, Content), /*#__PURE__*/React.createElement(Footer, {
-	    layout: layout
+	    layout: layout,
+	    titleStyles: titleStyles
 	  })), state.longRunningQuery && /*#__PURE__*/React.createElement(LongRunningQuery, {
 	    canCancel: canCancel,
 	    canRetry: canRetry,
@@ -31736,6 +32168,7 @@
 	    initialSnOptions,
 	    initialSnPlugins,
 	    onMount,
+	    emitter,
 	    initialError
 	  } = _ref;
 	  const {
@@ -31751,7 +32184,8 @@
 	    initialSnOptions: initialSnOptions,
 	    initialSnPlugins: initialSnPlugins,
 	    initialError: initialError,
-	    onMount: onMount
+	    onMount: onMount,
+	    emitter: emitter
 	  }), element, currentId);
 	  const unmount = () => {
 	    root.remove(portal);
@@ -31851,6 +32285,7 @@
 	  });
 	  let initialSnOptions = {};
 	  let initialSnPlugins = [];
+	  const emitter = new nodeEventEmitter();
 	  const setSnOptions = async opts => {
 	    if (mountedReference) {
 	      (async () => {
@@ -31941,6 +32376,24 @@
 	      }
 	      return propertyTree;
 	    },
+	    /**
+	     * Listens to custom events from inside the visualization. See useEmitter
+	     * @experimental
+	     * @param {string} eventName Event name to listen to
+	     * @param {Function} listener Callback function to invoke
+	     */
+	    on(eventName, listener) {
+	      emitter.on(eventName, listener);
+	    },
+	    /**
+	     * Removes a listener
+	     * @experimental
+	     * @param {string} eventName Event name to remove from
+	     * @param {Function} listener Callback function to remove
+	     */
+	    off(eventName, listener) {
+	      emitter.off(eventName, listener);
+	    },
 	    // ===== unexposed experimental API - use at own risk ======
 	    __DO_NOT_USE__: {
 	      mount(element) {
@@ -31955,7 +32408,8 @@
 	          initialSnOptions,
 	          initialSnPlugins,
 	          initialError,
-	          onMount
+	          onMount,
+	          emitter
 	        });
 	        return mounted;
 	      },
@@ -33902,7 +34356,7 @@
 	 * @ignore
 	 * @example
 	 * import { onContextMenu } from '@nebula.js/stardust';
-	 
+
 	 * onContextMenu((menu, event) => {
 	 *  menu.addItem(item, index);
 	 * });
@@ -33956,6 +34410,32 @@
 	  };
 	}
 
+	/**
+	 * Gets an event emitter instance for the visualization.
+	 * @entry
+	 * @experimental
+	 * @returns {Emitter} The emitter instance. Implements https://nodejs.org/api/events.html#class-eventemitter.
+	 * @example
+	 * // In a Nebula visualization
+	 * import { useEmitter } from '@nebula.js/stardust';
+	 * useEffect(()=> {
+	 *   // on some trigger
+	 *   emitter.emit("trigger", params)
+	 * }, [...])
+	 *
+	 * // In a mashup
+	 * const viz = await n.render({
+	 *   element: el,
+	 *   id: 'abcdef'
+	 * });
+	 * viz.on("trigger", ()=> {
+	 *   // do something
+	 * })
+	 */
+	function useEmitter() {
+	  return useInternalContext('emitter');
+	}
+
 	/**
 	 * @experimental
 	 * @interface Keyboard
@@ -34137,6 +34617,7 @@
 	      nebbie: opts.nebbie,
 	      element: undefined,
 	      // set on mount
+	      emitter: opts.emitter,
 	      // ---- singletons ----
 	      deviceType: galaxy.deviceType,
 	      theme: undefined,
@@ -37340,6 +37821,7 @@
 	exports.useEffect = useEffect;
 	exports.useElement = useElement;
 	exports.useEmbed = useEmbed;
+	exports.useEmitter = useEmitter;
 	exports.useGlobal = useGlobal;
 	exports.useImperativeHandle = useImperativeHandle;
 	exports.useKeyboard = useKeyboard;