WebSVN – Moodle – Diff – /lib/editor/tiny/js/tinymce/themes/silver/theme.js

 /**
- * TinyMCE version 6.8.3 (2024-02-08)
+ * TinyMCE version 7.7.1 (2025-03-05)
  */
 (function () {
     const sort = (xs, comparator) => {
       const copy = nativeSlice.call(xs, 0);
       copy.sort(comparator);
       return copy;
     };
-    const get$h = (xs, i) => i >= 0 && i < xs.length ? Optional.some(xs[i]) : Optional.none();
+    const get$i = (xs, i) => i >= 0 && i < xs.length ? Optional.some(xs[i]) : Optional.none();
-    const head = xs => get$h(xs, 0);
+    const head = xs => get$i(xs, 0);
-    const last$1 = xs => get$h(xs, xs.length - 1);
+    const last$1 = xs => get$i(xs, xs.length - 1);
     const from = isFunction(Array.from) ? Array.from : x => nativeSlice.call(x);
     const findMap = (arr, f) => {
       for (let i = 0; i < arr.length; i++) {
         const r = f(arr[i], i);
         if (r.isSome()) {
       return Optional.none();
     };
     const values = obj => {
       return mapToArray(obj, identity);
     };
-    const get$g = (obj, key) => {
+    const get$h = (obj, key) => {
       return has$2(obj, key) ? Optional.from(obj[key]) : Optional.none();
     };
     const has$2 = (obj, key) => hasOwnProperty.call(obj, key);
     const hasNonNullableKey = (obj, key) => has$2(obj, key) && obj[key] !== undefined && obj[key] !== null;
     };
     const blank = r => s => s.replace(r, '');
     const trim$1 = blank(/^\s+|\s+$/g);
     const isNotEmpty = s => s.length > 0;
     const isEmpty = s => !isNotEmpty(s);
+    const toFloat = value => {
+      const num = parseFloat(value);
+      return isNaN(num) ? Optional.none() : Optional.some(num);
+    };
-    const isSupported$1 = dom => dom.style !== undefined && isFunction(dom.style.getPropertyValue);
+    const isSupported = dom => dom.style !== undefined && isFunction(dom.style.getPropertyValue);
     const fromHtml$2 = (html, scope) => {
       const doc = scope || document;
       const cs = children(element);
       return cs.length > 0 && offset < cs.length ? spot(cs[offset], 0) : spot(element, offset);
     };
-    const isShadowRoot = dos => isDocumentFragment(dos) && isNonNullable(dos.dom.host);
-    const supported = isFunction(Element.prototype.attachShadow) && isFunction(Node.prototype.getRootNode);
-    const isSupported = constant$1(supported);
+    const isShadowRoot = dos => isDocumentFragment(dos) && isNonNullable(dos.dom.host);
-    const getRootNode = supported ? e => SugarElement.fromDom(e.dom.getRootNode()) : documentOrOwner;
+    const getRootNode = e => SugarElement.fromDom(e.dom.getRootNode());
     const getContentContainer = dos => isShadowRoot(dos) ? dos : SugarElement.fromDom(documentOrOwner(dos).dom.body);
     const isInShadowRoot = e => getShadowRoot(e).isSome();
     const getShadowRoot = e => {
       const r = getRootNode(e);
       return isShadowRoot(r) ? Optional.some(r) : Optional.none();
     };
     const getShadowHost = e => SugarElement.fromDom(e.dom.host);
     const getOriginalEventTarget = event => {
-      if (isSupported() && isNonNullable(event.target)) {
+      if (isNonNullable(event.target)) {
         const el = SugarElement.fromDom(event.target);
         if (isElement$1(el) && isOpenShadowHost(el)) {
           if (event.composed && event.composedPath) {
             const composedPath = event.composedPath();
       const dom = element.dom;
       each(attrs, (v, k) => {
         rawSet(dom, k, v);
       });
     };
-    const get$f = (element, key) => {
+    const get$g = (element, key) => {
       const v = element.dom.getAttribute(key);
       return v === null ? undefined : v;
     };
-    const getOpt = (element, key) => Optional.from(get$f(element, key));
+    const getOpt = (element, key) => Optional.from(get$g(element, key));
     const has$1 = (element, key) => {
       const dom = element.dom;
       return dom && dom.hasAttribute ? dom.hasAttribute(key) : false;
     };
-    const remove$7 = (element, key) => {
+    const remove$8 = (element, key) => {
       element.dom.removeAttribute(key);
     };
     const clone$2 = element => foldl(element.dom.attributes, (acc, attr) => {
       acc[attr.name] = attr.value;
       return acc;
     const internalSet = (dom, property, value) => {
       if (!isString(value)) {
         console.error('Invalid call to CSS.set. Property ', property, ':: Value ', value, ':: Element ', dom);
         throw new Error('CSS value must be a string: ' + value);
+      }
-      if (isSupported$1(dom)) {
+      if (isSupported(dom)) {
         dom.style.setProperty(property, value);
+      }
     };
     const internalRemove = (dom, property) => {
-      if (isSupported$1(dom)) {
+      if (isSupported(dom)) {
         dom.style.removeProperty(property);
+      }
     };
     const set$8 = (element, property, value) => {
       const dom = element.dom;
         }, value => {
           internalSet(dom, k, value);
         });
       });
     };
-    const get$e = (element, property) => {
+    const get$f = (element, property) => {
       const dom = element.dom;
       const styles = window.getComputedStyle(dom);
       const r = styles.getPropertyValue(property);
       return r === '' && !inBody(element) ? getUnsafeProperty(dom, property) : r;
     };
-    const getUnsafeProperty = (dom, property) => isSupported$1(dom) ? dom.style.getPropertyValue(property) : '';
+    const getUnsafeProperty = (dom, property) => isSupported(dom) ? dom.style.getPropertyValue(property) : '';
     const getRaw = (element, property) => {
       const dom = element.dom;
       const raw = getUnsafeProperty(dom, property);
       return Optional.from(raw).filter(r => r.length > 0);
     };
     const getAllRaw = element => {
       const css = {};
       const dom = element.dom;
-      if (isSupported$1(dom)) {
+      if (isSupported(dom)) {
         for (let i = 0; i < dom.style.length; i++) {
           const ruleName = dom.style.item(i);
           css[ruleName] = dom.style[ruleName];
+        }
+      }
       const element = SugarElement.fromTag(tag);
       set$8(element, property, value);
       const style = getRaw(element, property);
       return style.isSome();
     };
-    const remove$6 = (element, property) => {
+    const remove$7 = (element, property) => {
       const dom = element.dom;
       internalRemove(dom, property);
       if (is$1(getOpt(element, 'style').map(trim$1), '')) {
-        remove$7(element, 'style');
+        remove$8(element, 'style');
+      }
     };
     const reflow = e => e.dom.offsetWidth;
     const Dimension = (name, getOffset) => {
       const set = (element, h) => {
         if (!isNumber(h) && !h.match(/^[0-9]+$/)) {
           throw new Error(name + '.set accepts only positive integer values. Value was ' + h);
+        }
         const dom = element.dom;
-        if (isSupported$1(dom)) {
+        if (isSupported(dom)) {
           dom.style[name] = h + 'px';
+        }
       };
       const get = element => {
         const r = getOffset(element);
         if (r <= 0 || r === null) {
-          const css = get$e(element, name);
+          const css = get$f(element, name);
           return parseFloat(css) || 0;
+        }
         return r;
       };
       const getOuter = get;
       const aggregate = (element, properties) => foldl(properties, (acc, property) => {
-        const val = get$e(element, property);
+        const val = get$f(element, property);
         const value = val === undefined ? 0 : parseInt(val, 10);
         return isNaN(value) ? acc : acc + value;
       }, 0);
       const max = (element, value, properties) => {
     const api$2 = Dimension('height', element => {
       const dom = element.dom;
       return inBody(element) ? dom.getBoundingClientRect().height : dom.offsetHeight;
     });
-    const get$d = element => api$2.get(element);
+    const get$e = element => api$2.get(element);
     const getOuter$2 = element => api$2.getOuter(element);
     const setMax$1 = (element, value) => {
       const inclusions = [
         'margin-top',
       return boxPosition(dom);
     };
     const api$1 = Dimension('width', element => element.dom.offsetWidth);
     const set$7 = (element, h) => api$1.set(element, h);
-    const get$c = element => api$1.get(element);
+    const get$d = element => api$1.get(element);
     const getOuter$1 = element => api$1.getOuter(element);
     const setMax = (element, value) => {
       const inclusions = [
         'margin-left',
       const group = i => {
         return Number(agent.replace(r, '$' + i));
       };
       return nu$d(group(1), group(2));
     };
-    const detect$5 = (versionRegexes, agent) => {
+    const detect$4 = (versionRegexes, agent) => {
       const cleanedAgent = String(agent).toLowerCase();
       if (versionRegexes.length === 0) {
         return unknown$3();
+      }
       return find$3(versionRegexes, cleanedAgent);
         minor
       };
     };
     const Version = {
       nu: nu$d,
-      detect: detect$5,
+      detect: detect$4,
       unknown: unknown$3
     };
     const detectBrowser$1 = (browsers, userAgentData) => {
           version: Version.nu(parseInt(uaBrand.version, 10), 0)
         }));
       });
     };
-    const detect$4 = (candidates, userAgent) => {
+    const detect$3 = (candidates, userAgent) => {
       const agent = String(userAgent).toLowerCase();
       return find$5(candidates, candidate => {
         return candidate.search(agent);
       });
     };
     const detectBrowser = (browsers, userAgent) => {
-      return detect$4(browsers, userAgent).map(browser => {
+      return detect$3(browsers, userAgent).map(browser => {
         const version = Version.detect(browser.versionRegexes, userAgent);
         return {
           current: browser.name,
           version
         };
       });
     };
     const detectOs = (oses, userAgent) => {
-      return detect$4(oses, userAgent).map(os => {
+      return detect$3(oses, userAgent).map(os => {
         const version = Version.detect(os.versionRegexes, userAgent);
         return {
           current: os.name,
           version
       solaris: constant$1(solaris),
       freebsd: constant$1(freebsd),
       chromeos: constant$1(chromeos)
     };
-    const detect$3 = (userAgent, userAgentDataOpt, mediaMatch) => {
+    const detect$2 = (userAgent, userAgentDataOpt, mediaMatch) => {
       const browsers = PlatformInfo.browsers();
       const oses = PlatformInfo.oses();
       const browser = userAgentDataOpt.bind(userAgentData => detectBrowser$1(browsers, userAgentData)).orThunk(() => detectBrowser(browsers, userAgent)).fold(Browser.unknown, Browser.nu);
       const os = detectOs(oses, userAgent).fold(OperatingSystem.unknown, OperatingSystem.nu);
         browser,
         os,
         deviceType
       };
     };
-    const PlatformDetection = { detect: detect$3 };
+    const PlatformDetection = { detect: detect$2 };
     const mediaMatch = query => window.matchMedia(query).matches;
-    let platform = cached(() => PlatformDetection.detect(navigator.userAgent, Optional.from(navigator.userAgentData), mediaMatch));
+    let platform = cached(() => PlatformDetection.detect(window.navigator.userAgent, Optional.from(window.navigator.userAgentData), mediaMatch));
-    const detect$2 = () => platform();
+    const detect$1 = () => platform();
     const mkEvent = (target, x, y, stop, prevent, kill, raw) => ({
       target,
     };
     const empty = element => {
       element.dom.textContent = '';
       each$1(children(element), rogue => {
-        remove$5(rogue);
+        remove$6(rogue);
       });
     };
-    const remove$5 = element => {
+    const remove$6 = element => {
       const dom = element.dom;
       if (dom.parentNode !== null) {
         dom.parentNode.removeChild(dom);
+      }
     };
-    const get$b = _DOC => {
+    const get$c = _DOC => {
       const doc = _DOC !== undefined ? _DOC.dom : document;
       const x = doc.body.scrollLeft || doc.documentElement.scrollLeft;
       const y = doc.body.scrollTop || doc.documentElement.scrollTop;
       if (win) {
         win.scrollTo(x, y);
+      }
     };
-    const get$a = _win => {
+    const get$b = _win => {
       const win = _win === undefined ? window : _win;
-      if (detect$2().browser.isFirefox()) {
+      if (detect$1().browser.isFirefox()) {
         return Optional.none();
       } else {
         return Optional.from(win.visualViewport);
+      }
       bottom: y + height
     });
     const getBounds$3 = _win => {
       const win = _win === undefined ? window : _win;
       const doc = win.document;
-      const scroll = get$b(SugarElement.fromDom(doc));
+      const scroll = get$c(SugarElement.fromDom(doc));
-      return get$a(win).fold(() => {
+      return get$b(win).fold(() => {
         const html = win.document.documentElement;
         const width = html.clientWidth;
         const height = html.clientHeight;
         return bounds$1(scroll.left, scroll.top, width, height);
       }, visualViewport => bounds$1(Math.max(visualViewport.pageLeft, scroll.left), Math.max(visualViewport.pageTop, scroll.top), visualViewport.width, visualViewport.height));
         owner: owner$3
     });
     const find$2 = element => {
       const doc = getDocument();
-      const scroll = get$b(doc);
+      const scroll = get$c(doc);
       const path = pathTo(element, Navigation);
       return path.fold(curry(absolute$3, element), frames => {
         const offset = viewport$1(element);
         const r = foldr(frames, (b, a) => {
     const constrainByMany = (original, constraints) => {
       return foldl(constraints, (acc, c) => constrain(acc, c), original);
     };
     const win = () => getBounds$3(window);
+    const Cell = initial => {
+      let value = initial;
+      const get = () => {
+        return value;
+      };
+      const set = v => {
+        value = v;
+      };
+      return {
+        get,
+        set
+      };
+    };
+    const singleton$1 = doRevoke => {
+      const subject = Cell(Optional.none());
+      const revoke = () => subject.get().each(doRevoke);
+      const clear = () => {
+        revoke();
+        subject.set(Optional.none());
+      };
+      const isSet = () => subject.get().isSome();
+      const get = () => subject.get();
+      const set = s => {
+        revoke();
+        subject.set(Optional.some(s));
+      };
+      return {
+        clear,
+        isSet,
+        get,
+        set
+      };
+    };
+    const destroyable = () => singleton$1(s => s.destroy());
+    const unbindable = () => singleton$1(s => s.unbind());
+    const value$4 = () => {
+      const subject = singleton$1(noop);
+      const on = f => subject.get().each(f);
+      return {
+        ...subject,
+        on
+      };
+    };
     var global$a = tinymce.util.Tools.resolve('tinymce.ThemeManager');
-    const value$4 = value => {
+    const value$3 = value => {
       const applyHelper = fn => fn(value);
       const constHelper = constant$1(value);
       const outputHelper = () => output;
         each: noop,
         toOptional: Optional.none
       };
       return output;
     };
-    const fromOption = (optional, err) => optional.fold(() => error$1(err), value$4);
+    const fromOption = (optional, err) => optional.fold(() => error$1(err), value$3);
     const Result = {
-      value: value$4,
+      value: value$3,
       error: error$1,
       fromOption
     };
     const missingKey = (path, key) => nu$a(path, () => 'Choice schema did not contain choice key: "' + key + '"');
     const missingBranch = (path, branches, branch) => nu$a(path, () => 'The chosen schema: "' + branch + '" did not exist in branches: ' + formatObj(branches));
     const unsupportedFields = (path, unsupported) => nu$a(path, () => 'There are unsupported fields: [' + unsupported.join(', ') + '] specified');
     const custom = (path, err) => nu$a(path, constant$1(err));
-    const value$3 = validator => {
+    const value$2 = validator => {
       const extract = (path, val) => {
         return SimpleResult.bindError(validator(val), err => custom(path, err));
       };
       const toString = constant$1('val');
       return {
         extract,
         toString
       };
     };
-    const anyValue$1 = value$3(SimpleResult.svalue);
+    const anyValue$1 = value$2(SimpleResult.svalue);
-    const requiredAccess = (path, obj, key, bundle) => get$g(obj, key).fold(() => missingRequired(path, key, obj), bundle);
+    const requiredAccess = (path, obj, key, bundle) => get$h(obj, key).fold(() => missingRequired(path, key, obj), bundle);
     const fallbackAccess = (obj, key, fallback, bundle) => {
-      const v = get$g(obj, key).getOrThunk(() => fallback(obj));
+      const v = get$h(obj, key).getOrThunk(() => fallback(obj));
       return bundle(v);
     };
-    const optionAccess = (obj, key, bundle) => bundle(get$g(obj, key));
+    const optionAccess = (obj, key, bundle) => bundle(get$h(obj, key));
     const optionDefaultedAccess = (obj, key, fallback, bundle) => {
-      const opt = get$g(obj, key).map(val => val === true ? fallback(obj) : val);
+      const opt = get$h(obj, key).map(val => val === true ? fallback(obj) : val);
       return bundle(opt);
     };
     const extractField = (field, path, obj, key, prop) => {
         extract,
         toString
       };
     };
     const setOf$1 = (validator, prop) => {
-      const validateKeys = (path, keys) => arrOf(value$3(validator)).extract(path, keys);
+      const validateKeys = (path, keys) => arrOf(value$2(validator)).extract(path, keys);
       const extract = (path, o) => {
         const keys$1 = keys(o);
         const validatedKeys = validateKeys(path, keys$1);
         return SimpleResult.bind(validatedKeys, validKeys => {
           const schema = map$2(validKeys, vk => {
       };
     };
     const arrOfObj = compose(arrOf, objOf);
     const anyValue = constant$1(anyValue$1);
-    const typedValue = (validator, expectedType) => value$3(a => {
+    const typedValue = (validator, expectedType) => value$2(a => {
       const actualType = typeof a;
       return validator(a) ? SimpleResult.svalue(a) : SimpleResult.serror(`Expected type: ${ expectedType } but got: ${ actualType }`);
     });
     const number = typedValue(isNumber, 'number');
         return Object.keys(val).every(prop => isPostMessageable(val[prop]));
       default:
         return false;
+      }
     };
-    const postMessageable = value$3(a => {
+    const postMessageable = value$2(a => {
       if (isPostMessageable(a)) {
         return SimpleResult.svalue(a);
       } else {
         return SimpleResult.serror('Expected value to be acceptable for sending via postMessage');
+      }
     });
     const chooseFrom = (path, input, branches, ch) => {
-      const fields = get$g(branches, ch);
+      const fields = get$h(branches, ch);
       return fields.fold(() => missingBranch(path, branches, ch), vp => vp.extract(path.concat(['branch: ' + ch]), input));
     };
     const choose$2 = (key, branches) => {
       const extract = (path, input) => {
-        const choice = get$g(input, key);
+        const choice = get$h(input, key);
         return choice.fold(() => missingKey(path, key), chosen => chooseFrom(path, input, branches, chosen));
       };
       const toString = () => 'chooseOn(' + key + '). Possible values: ' + keys(branches);
       return {
         extract,
         toString
       };
     };
     const arrOfVal = () => arrOf(anyValue$1);
-    const valueOf = validator => value$3(v => validator(v).fold(SimpleResult.serror, SimpleResult.svalue));
+    const valueOf = validator => value$2(v => validator(v).fold(SimpleResult.serror, SimpleResult.svalue));
     const setOf = (validator, prop) => setOf$1(v => SimpleResult.fromResult(validator(v)), prop);
     const extractValue = (label, prop, obj) => {
       const res = prop.extract([label], obj);
     const required$1 = key => field$1(key, key, required$2(), anyValue());
     const requiredOf = (key, schema) => field$1(key, key, required$2(), schema);
     const requiredNumber = key => requiredOf(key, number);
     const requiredString = key => requiredOf(key, string);
     const requiredStringEnum = (key, values) => field$1(key, key, required$2(), validateEnum(values));
-    const requiredBoolean = key => requiredOf(key, boolean);
     const requiredFunction = key => requiredOf(key, functionProcessor);
-    const forbid = (key, message) => field$1(key, key, asOption(), value$3(_v => SimpleResult.serror('The field: ' + key + ' is forbidden. ' + message)));
+    const forbid = (key, message) => field$1(key, key, asOption(), value$2(_v => SimpleResult.serror('The field: ' + key + ' is forbidden. ' + message)));
     const requiredObjOf = (key, objSchema) => field$1(key, key, required$2(), objOf(objSchema));
     const requiredArrayOfObj = (key, objFields) => field$1(key, key, required$2(), arrOfObj(objFields));
     const requiredArrayOf = (key, schema) => field$1(key, key, required$2(), arrOf(schema));
     const option$3 = key => field$1(key, key, asOption(), anyValue());
     const optionOf = (key, schema) => field$1(key, key, asOption(), schema);
     const defaultedFunction = (key, fallback) => defaultedOf(key, fallback, functionProcessor);
     const defaultedPostMsg = (key, fallback) => defaultedOf(key, fallback, postMessageable);
     const defaultedArrayOf = (key, fallback, schema) => defaultedOf(key, fallback, arrOf(schema));
     const defaultedObjOf = (key, fallback, objSchema) => defaultedOf(key, fallback, objOf(objSchema));
-    const Cell = initial => {
-      let value = initial;
-      const get = () => {
-        return value;
-      };
-      const set = v => {
-        value = v;
-      };
-      return {
-        get,
-        set
-      };
-    };
     const generate$7 = cases => {
       if (!isArray(cases)) {
         throw new Error('cases must be an array');
+      }
     const runOnAttached = runOnSourceName(attachedToDom());
     const runOnDetached = runOnSourceName(detachedFromDom());
     const runOnInit = runOnSourceName(systemInit());
     const runOnExecute$1 = runOnName(execute$5());
+    const markAsBehaviourApi = (f, apiName, apiFunction) => {
+      const delegate = apiFunction.toString();
+      const endIndex = delegate.indexOf(')') + 1;
+      const openBracketIndex = delegate.indexOf('(');
+      const parameters = delegate.substring(openBracketIndex + 1, endIndex - 1).split(/,\s*/);
+      f.toFunctionAnnotation = () => ({
+        name: apiName,
+        parameters: cleanParameters(parameters.slice(0, 1).concat(parameters.slice(3)))
+      });
+      return f;
+    };
+    const cleanParameters = parameters => map$2(parameters, p => endsWith(p, '/*') ? p.substring(0, p.length - '/*'.length) : p);
+    const markAsExtraApi = (f, extraName) => {
+      const delegate = f.toString();
+      const endIndex = delegate.indexOf(')') + 1;
+      const openBracketIndex = delegate.indexOf('(');
+      const parameters = delegate.substring(openBracketIndex + 1, endIndex - 1).split(/,\s*/);
+      f.toFunctionAnnotation = () => ({
+        name: extraName,
+        parameters: cleanParameters(parameters)
+      });
+      return f;
+    };
+    const markAsSketchApi = (f, apiFunction) => {
+      const delegate = apiFunction.toString();
+      const endIndex = delegate.indexOf(')') + 1;
+      const openBracketIndex = delegate.indexOf('(');
+      const parameters = delegate.substring(openBracketIndex + 1, endIndex - 1).split(/,\s*/);
+      f.toFunctionAnnotation = () => ({
+        name: 'OVERRIDE',
+        parameters: cleanParameters(parameters.slice(1))
+      });
+      return f;
+    };
+    const nu$8 = s => ({
+      classes: isUndefined(s.classes) ? [] : s.classes,
+      attributes: isUndefined(s.attributes) ? {} : s.attributes,
+      styles: isUndefined(s.styles) ? {} : s.styles
+    });
+    const merge = (defnA, mod) => ({
+      ...defnA,
+      attributes: {
+        ...defnA.attributes,
+        ...mod.attributes
+      },
+      styles: {
+        ...defnA.styles,
+        ...mod.styles
+      },
+      classes: defnA.classes.concat(mod.classes)
+    });
+    const executeEvent = (bConfig, bState, executor) => runOnExecute$1(component => {
+      executor(component, bConfig, bState);
+    });
+    const loadEvent = (bConfig, bState, f) => runOnInit((component, _simulatedEvent) => {
+      f(component, bConfig, bState);
+    });
+    const create$5 = (schema, name, active, apis, extra, state) => {
+      const configSchema = objOfOnly(schema);
+      const schemaSchema = optionObjOf(name, [optionObjOfOnly('config', schema)]);
+      return doCreate(configSchema, schemaSchema, name, active, apis, extra, state);
+    };
+    const createModes$1 = (modes, name, active, apis, extra, state) => {
+      const configSchema = modes;
+      const schemaSchema = optionObjOf(name, [optionOf('config', modes)]);
+      return doCreate(configSchema, schemaSchema, name, active, apis, extra, state);
+    };
+    const wrapApi = (bName, apiFunction, apiName) => {
+      const f = (component, ...rest) => {
+        const args = [component].concat(rest);
+        return component.config({ name: constant$1(bName) }).fold(() => {
+          throw new Error('We could not find any behaviour configuration for: ' + bName + '. Using API: ' + apiName);
+        }, info => {
+          const rest = Array.prototype.slice.call(args, 1);
+          return apiFunction.apply(undefined, [
+            component,
+            info.config,
+            info.state
+          ].concat(rest));
+        });
+      };
+      return markAsBehaviourApi(f, apiName, apiFunction);
+    };
+    const revokeBehaviour = name => ({
+      key: name,
+      value: undefined
+    });
+    const doCreate = (configSchema, schemaSchema, name, active, apis, extra, state) => {
+      const getConfig = info => hasNonNullableKey(info, name) ? info[name]() : Optional.none();
+      const wrappedApis = map$1(apis, (apiF, apiName) => wrapApi(name, apiF, apiName));
+      const wrappedExtra = map$1(extra, (extraF, extraName) => markAsExtraApi(extraF, extraName));
+      const me = {
+        ...wrappedExtra,
+        ...wrappedApis,
+        revoke: curry(revokeBehaviour, name),
+        config: spec => {
+          const prepared = asRawOrDie$1(name + '-config', configSchema, spec);
+          return {
+            key: name,
+            value: {
+              config: prepared,
+              me,
+              configAsRaw: cached(() => asRawOrDie$1(name + '-config', configSchema, spec)),
+              initialConfig: spec,
+              state
+            }
+          };
+        },
+        schema: constant$1(schemaSchema),
+        exhibit: (info, base) => {
+          return lift2(getConfig(info), get$h(active, 'exhibit'), (behaviourInfo, exhibitor) => {
+            return exhibitor(base, behaviourInfo.config, behaviourInfo.state);
+          }).getOrThunk(() => nu$8({}));
+        },
+        name: constant$1(name),
+        handlers: info => {
+          return getConfig(info).map(behaviourInfo => {
+            const getEvents = get$h(active, 'events').getOr(() => ({}));
+            return getEvents(behaviourInfo.config, behaviourInfo.state);
+          }).getOr({});
+        }
+      };
+      return me;
+    };
+    const NoState = { init: () => nu$7({ readState: constant$1('No State required') }) };
+    const nu$7 = spec => spec;
+    const derive$1 = capabilities => wrapAll(capabilities);
+    const simpleSchema = objOfOnly([
+      required$1('fields'),
+      required$1('name'),
+      defaulted('active', {}),
+      defaulted('apis', {}),
+      defaulted('state', NoState),
+      defaulted('extra', {})
+    ]);
+    const create$4 = data => {
+      const value = asRawOrDie$1('Creating behaviour: ' + data.name, simpleSchema, data);
+      return create$5(value.fields, value.name, value.active, value.apis, value.extra, value.state);
+    };
+    const modeSchema = objOfOnly([
+      required$1('branchKey'),
+      required$1('branches'),
+      required$1('name'),
+      defaulted('active', {}),
+      defaulted('apis', {}),
+      defaulted('state', NoState),
+      defaulted('extra', {})
+    ]);
+    const createModes = data => {
+      const value = asRawOrDie$1('Creating behaviour: ' + data.name, modeSchema, data);
+      return createModes$1(choose$1(value.branchKey, value.branches), value.name, value.active, value.apis, value.extra, value.state);
+    };
+    const revoke = constant$1(undefined);
+    const read$1 = (element, attr) => {
+      const value = get$g(element, attr);
+      return value === undefined || value === '' ? [] : value.split(' ');
+    };
+    const add$4 = (element, attr, id) => {
+      const old = read$1(element, attr);
+      const nu = old.concat([id]);
+      set$9(element, attr, nu.join(' '));
+      return true;
+    };
+    const remove$5 = (element, attr, id) => {
+      const nu = filter$2(read$1(element, attr), v => v !== id);
+      if (nu.length > 0) {
+        set$9(element, attr, nu.join(' '));
+      } else {
+        remove$8(element, attr);
+      }
+      return false;
+    };
+    const supports = element => element.dom.classList !== undefined;
+    const get$a = element => read$1(element, 'class');
+    const add$3 = (element, clazz) => add$4(element, 'class', clazz);
+    const remove$4 = (element, clazz) => remove$5(element, 'class', clazz);
+    const toggle$5 = (element, clazz) => {
+      if (contains$2(get$a(element), clazz)) {
+        return remove$4(element, clazz);
+      } else {
+        return add$3(element, clazz);
+      }
+    };
+    const add$2 = (element, clazz) => {
+      if (supports(element)) {
+        element.dom.classList.add(clazz);
+      } else {
+        add$3(element, clazz);
+      }
+    };
+    const cleanClass = element => {
+      const classList = supports(element) ? element.dom.classList : get$a(element);
+      if (classList.length === 0) {
+        remove$8(element, 'class');
+      }
+    };
+    const remove$3 = (element, clazz) => {
+      if (supports(element)) {
+        const classList = element.dom.classList;
+        classList.remove(clazz);
+      } else {
+        remove$4(element, clazz);
+      }
+      cleanClass(element);
+    };
+    const toggle$4 = (element, clazz) => {
+      const result = supports(element) ? element.dom.classList.toggle(clazz) : toggle$5(element, clazz);
+      cleanClass(element);
+      return result;
+    };
+    const has = (element, clazz) => supports(element) && element.dom.classList.contains(clazz);
+    const add$1 = (element, classes) => {
+      each$1(classes, x => {
+        add$2(element, x);
+      });
+    };
+    const remove$2 = (element, classes) => {
+      each$1(classes, x => {
+        remove$3(element, x);
+      });
+    };
+    const toggle$3 = (element, classes) => {
+      each$1(classes, x => {
+        toggle$4(element, x);
+      });
+    };
+    const hasAll = (element, classes) => forall(classes, clazz => has(element, clazz));
+    const getNative = element => {
+      const classList = element.dom.classList;
+      const r = new Array(classList.length);
+      for (let i = 0; i < classList.length; i++) {
+        const item = classList.item(i);
+        if (item !== null) {
+          r[i] = item;
+        }
+      }
+      return r;
+    };
+    const get$9 = element => supports(element) ? getNative(element) : get$a(element);
+    const NuPositionCss = (position, left, top, right, bottom) => {
+      const toPx = num => num + 'px';
+      return {
+        position,
+        left: left.map(toPx),
+        top: top.map(toPx),
+        right: right.map(toPx),
+        bottom: bottom.map(toPx)
+      };
+    };
+    const toOptions = position => ({
+      ...position,
+      position: Optional.some(position.position)
+    });
+    const applyPositionCss = (element, position) => {
+      setOptions(element, toOptions(position));
+    };
+    const getOffsetParent = element => {
+      const isFixed = is$1(getRaw(element, 'position'), 'fixed');
+      const offsetParent$1 = isFixed ? Optional.none() : offsetParent(element);
+      return offsetParent$1.orThunk(() => {
+        const marker = SugarElement.fromTag('span');
+        return parent(element).bind(parent => {
+          append$2(parent, marker);
+          const offsetParent$1 = offsetParent(marker);
+          remove$6(marker);
+          return offsetParent$1;
+        });
+      });
+    };
+    const getOrigin = element => getOffsetParent(element).map(absolute$3).getOrThunk(() => SugarPosition(0, 0));
+    const appear = (component, contextualInfo) => {
+      const elem = component.element;
+      add$2(elem, contextualInfo.transitionClass);
+      remove$3(elem, contextualInfo.fadeOutClass);
+      add$2(elem, contextualInfo.fadeInClass);
+      contextualInfo.onShow(component);
+    };
+    const disappear = (component, contextualInfo) => {
+      const elem = component.element;
+      add$2(elem, contextualInfo.transitionClass);
+      remove$3(elem, contextualInfo.fadeInClass);
+      add$2(elem, contextualInfo.fadeOutClass);
+      contextualInfo.onHide(component);
+    };
+    const isPartiallyVisible = (box, bounds) => box.y < bounds.bottom && box.bottom > bounds.y;
+    const isTopCompletelyVisible = (box, bounds) => box.y >= bounds.y;
+    const isBottomCompletelyVisible = (box, bounds) => box.bottom <= bounds.bottom;
+    const forceTopPosition = (winBox, leftX, viewport) => ({
+      location: 'top',
+      leftX,
+      topY: viewport.bounds.y - winBox.y
+    });
+    const forceBottomPosition = (winBox, leftX, viewport) => ({
+      location: 'bottom',
+      leftX,
+      bottomY: winBox.bottom - viewport.bounds.bottom
+    });
+    const getDockedLeftPosition = bounds => {
+      return bounds.box.x - bounds.win.x;
+    };
+    const tryDockingPosition = (modes, bounds, viewport) => {
+      const winBox = bounds.win;
+      const box = bounds.box;
+      const leftX = getDockedLeftPosition(bounds);
+      return findMap(modes, mode => {
+        switch (mode) {
+        case 'bottom':
+          return !isBottomCompletelyVisible(box, viewport.bounds) ? Optional.some(forceBottomPosition(winBox, leftX, viewport)) : Optional.none();
+        case 'top':
+          return !isTopCompletelyVisible(box, viewport.bounds) ? Optional.some(forceTopPosition(winBox, leftX, viewport)) : Optional.none();
+        default:
+          return Optional.none();
+        }
+      }).getOr({ location: 'no-dock' });
+    };
+    const isVisibleForModes = (modes, box, viewport) => forall(modes, mode => {
+      switch (mode) {
+      case 'bottom':
+        return isBottomCompletelyVisible(box, viewport.bounds);
+      case 'top':
+        return isTopCompletelyVisible(box, viewport.bounds);
+      }
+    });
+    const getXYForRestoring = (pos, viewport) => {
+      const priorY = viewport.optScrollEnv.fold(constant$1(pos.bounds.y), scrollEnv => scrollEnv.scrollElmTop + (pos.bounds.y - scrollEnv.currentScrollTop));
+      return SugarPosition(pos.bounds.x, priorY);
+    };
+    const getXYForSaving = (box, viewport) => {
+      const priorY = viewport.optScrollEnv.fold(constant$1(box.y), scrollEnv => box.y + scrollEnv.currentScrollTop - scrollEnv.scrollElmTop);
+      return SugarPosition(box.x, priorY);
+    };
+    const getPrior = (elem, viewport, state) => state.getInitialPos().map(pos => {
+      const xy = getXYForRestoring(pos, viewport);
+      return {
+        box: bounds(xy.left, xy.top, get$d(elem), get$e(elem)),
+        location: pos.location
+      };
+    });
+    const storePrior = (elem, box, viewport, state, decision) => {
+      const xy = getXYForSaving(box, viewport);
+      const bounds$1 = bounds(xy.left, xy.top, box.width, box.height);
+      state.setInitialPos({
+        style: getAllRaw(elem),
+        position: get$f(elem, 'position') || 'static',
+        bounds: bounds$1,
+        location: decision.location
+      });
+    };
+    const storePriorIfNone = (elem, box, viewport, state, decision) => {
+      state.getInitialPos().fold(() => storePrior(elem, box, viewport, state, decision), () => noop);
+    };
+    const revertToOriginal = (elem, box, state) => state.getInitialPos().bind(position => {
+      var _a;
+      state.clearInitialPos();
+      switch (position.position) {
+      case 'static':
+        return Optional.some({ morph: 'static' });
+      case 'absolute':
+        const offsetParent = getOffsetParent(elem).getOr(body());
+        const offsetBox = box$1(offsetParent);
+        const scrollDelta = (_a = offsetParent.dom.scrollTop) !== null && _a !== void 0 ? _a : 0;
+        return Optional.some({
+          morph: 'absolute',
+          positionCss: NuPositionCss('absolute', get$h(position.style, 'left').map(_left => box.x - offsetBox.x), get$h(position.style, 'top').map(_top => box.y - offsetBox.y + scrollDelta), get$h(position.style, 'right').map(_right => offsetBox.right - box.right), get$h(position.style, 'bottom').map(_bottom => offsetBox.bottom - box.bottom))
+        });
+      default:
+        return Optional.none();
+      }
+    });
+    const tryMorphToOriginal = (elem, viewport, state) => getPrior(elem, viewport, state).filter(({box}) => isVisibleForModes(state.getModes(), box, viewport)).bind(({box}) => revertToOriginal(elem, box, state));
+    const tryDecisionToFixedMorph = decision => {
+      switch (decision.location) {
+      case 'top': {
+          return Optional.some({
+            morph: 'fixed',
+            positionCss: NuPositionCss('fixed', Optional.some(decision.leftX), Optional.some(decision.topY), Optional.none(), Optional.none())
+          });
+        }
+      case 'bottom': {
+          return Optional.some({
+            morph: 'fixed',
+            positionCss: NuPositionCss('fixed', Optional.some(decision.leftX), Optional.none(), Optional.none(), Optional.some(decision.bottomY))
+          });
+        }
+      default:
+        return Optional.none();
+      }
+    };
+    const tryMorphToFixed = (elem, viewport, state) => {
+      const box = box$1(elem);
+      const winBox = win();
+      const decision = tryDockingPosition(state.getModes(), {
+        win: winBox,
+        box
+      }, viewport);
+      if (decision.location === 'top' || decision.location === 'bottom') {
+        storePrior(elem, box, viewport, state, decision);
+        return tryDecisionToFixedMorph(decision);
+      } else {
+        return Optional.none();
+      }
+    };
+    const tryMorphToOriginalOrUpdateFixed = (elem, viewport, state) => {
+      return tryMorphToOriginal(elem, viewport, state).orThunk(() => {
+        return viewport.optScrollEnv.bind(_ => getPrior(elem, viewport, state)).bind(({box, location}) => {
+          const winBox = win();
+          const leftX = getDockedLeftPosition({
+            win: winBox,
+            box
+          });
+          const decision = location === 'top' ? forceTopPosition(winBox, leftX, viewport) : forceBottomPosition(winBox, leftX, viewport);
+          return tryDecisionToFixedMorph(decision);
+        });
+      });
+    };
+    const tryMorph = (component, viewport, state) => {
+      const elem = component.element;
+      const isDocked = is$1(getRaw(elem, 'position'), 'fixed');
+      return isDocked ? tryMorphToOriginalOrUpdateFixed(elem, viewport, state) : tryMorphToFixed(elem, viewport, state);
+    };
+    const calculateMorphToOriginal = (component, viewport, state) => {
+      const elem = component.element;
+      return getPrior(elem, viewport, state).bind(({box}) => revertToOriginal(elem, box, state));
+    };
+    const forceDockWith = (elem, viewport, state, getDecision) => {
+      const box = box$1(elem);
+      const winBox = win();
+      const leftX = getDockedLeftPosition({
+        win: winBox,
+        box
+      });
+      const decision = getDecision(winBox, leftX, viewport);
+      if (decision.location === 'bottom' || decision.location === 'top') {
+        storePriorIfNone(elem, box, viewport, state, decision);
+        return tryDecisionToFixedMorph(decision);
+      } else {
+        return Optional.none();
+      }
+    };
+    const morphToStatic = (component, config, state) => {
+      state.setDocked(false);
+      each$1([
+        'left',
+        'right',
+        'top',
+        'bottom',
+        'position'
+      ], prop => remove$7(component.element, prop));
+      config.onUndocked(component);
+    };
+    const morphToCoord = (component, config, state, position) => {
+      const isDocked = position.position === 'fixed';
+      state.setDocked(isDocked);
+      applyPositionCss(component.element, position);
+      const method = isDocked ? config.onDocked : config.onUndocked;
+      method(component);
+    };
+    const updateVisibility = (component, config, state, viewport, morphToDocked = false) => {
+      config.contextual.each(contextInfo => {
+        contextInfo.lazyContext(component).each(box => {
+          const isVisible = isPartiallyVisible(box, viewport.bounds);
+          if (isVisible !== state.isVisible()) {
+            state.setVisible(isVisible);
+            if (morphToDocked && !isVisible) {
+              add$1(component.element, [contextInfo.fadeOutClass]);
+              contextInfo.onHide(component);
+            } else {
+              const method = isVisible ? appear : disappear;
+              method(component, contextInfo);
+            }
+          }
+        });
+      });
+    };
+    const applyFixedMorph = (component, config, state, viewport, morph) => {
+      updateVisibility(component, config, state, viewport, true);
+      morphToCoord(component, config, state, morph.positionCss);
+    };
+    const applyMorph = (component, config, state, viewport, morph) => {
+      switch (morph.morph) {
+      case 'static': {
+          return morphToStatic(component, config, state);
+        }
+      case 'absolute': {
+          return morphToCoord(component, config, state, morph.positionCss);
+        }
+      case 'fixed': {
+          return applyFixedMorph(component, config, state, viewport, morph);
+        }
+      }
+    };
+    const refreshInternal = (component, config, state) => {
+      const viewport = config.lazyViewport(component);
+      updateVisibility(component, config, state, viewport);
+      tryMorph(component, viewport, state).each(morph => {
+        applyMorph(component, config, state, viewport, morph);
+      });
+    };
+    const resetInternal = (component, config, state) => {
+      const elem = component.element;
+      state.setDocked(false);
+      const viewport = config.lazyViewport(component);
+      calculateMorphToOriginal(component, viewport, state).each(staticOrAbsoluteMorph => {
+        switch (staticOrAbsoluteMorph.morph) {
+        case 'static': {
+            morphToStatic(component, config, state);
+            break;
+          }
+        case 'absolute': {
+            morphToCoord(component, config, state, staticOrAbsoluteMorph.positionCss);
+            break;
+          }
+        }
+      });
+      state.setVisible(true);
+      config.contextual.each(contextInfo => {
+        remove$2(elem, [
+          contextInfo.fadeInClass,
+          contextInfo.fadeOutClass,
+          contextInfo.transitionClass
+        ]);
+        contextInfo.onShow(component);
+      });
+      refresh$4(component, config, state);
+    };
+    const refresh$4 = (component, config, state) => {
+      if (component.getSystem().isConnected()) {
+        refreshInternal(component, config, state);
+      }
+    };
+    const reset$2 = (component, config, state) => {
+      if (state.isDocked()) {
+        resetInternal(component, config, state);
+      }
+    };
+    const forceDockWithDecision = getDecision => (component, config, state) => {
+      const viewport = config.lazyViewport(component);
+      const optMorph = forceDockWith(component.element, viewport, state, getDecision);
+      optMorph.each(morph => {
+        applyFixedMorph(component, config, state, viewport, morph);
+      });
+    };
+    const forceDockToTop = forceDockWithDecision(forceTopPosition);
+    const forceDockToBottom = forceDockWithDecision(forceBottomPosition);
+    const isDocked$2 = (component, config, state) => state.isDocked();
+    const setModes = (component, config, state, modes) => state.setModes(modes);
+    const getModes = (component, config, state) => state.getModes();
+    var DockingApis = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        refresh: refresh$4,
+        reset: reset$2,
+        isDocked: isDocked$2,
+        getModes: getModes,
+        setModes: setModes,
+        forceDockToTop: forceDockToTop,
+        forceDockToBottom: forceDockToBottom
+    });
+    const events$i = (dockInfo, dockState) => derive$2([
+      runOnSource(transitionend(), (component, simulatedEvent) => {
+        dockInfo.contextual.each(contextInfo => {
+          if (has(component.element, contextInfo.transitionClass)) {
+            remove$2(component.element, [
+              contextInfo.transitionClass,
+              contextInfo.fadeInClass
+            ]);
+            const notify = dockState.isVisible() ? contextInfo.onShown : contextInfo.onHidden;
+            notify(component);
+          }
+          simulatedEvent.stop();
+        });
+      }),
+      run$1(windowScroll(), (component, _) => {
+        refresh$4(component, dockInfo, dockState);
+      }),
+      run$1(externalElementScroll(), (component, _) => {
+        refresh$4(component, dockInfo, dockState);
+      }),
+      run$1(windowResize(), (component, _) => {
+        reset$2(component, dockInfo, dockState);
+      })
+    ]);
+    var ActiveDocking = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        events: events$i
+    });
     const fromHtml$1 = (html, scope) => {
       const doc = scope || document;
       const div = doc.createElement('div');
       div.innerHTML = html;
       return children(SugarElement.fromDom(div));
     };
-    const get$9 = element => element.dom.innerHTML;
+    const get$8 = element => element.dom.innerHTML;
     const set$6 = (element, content) => {
       const owner = owner$4(element);
       const docDom = owner.dom;
     };
     const getOuter = element => {
       const container = SugarElement.fromTag('div');
       const clone = SugarElement.fromDom(element.dom.cloneNode(true));
       append$2(container, clone);
-      return get$9(container);
+      return get$8(container);
     };
     const clone$1 = (original, isDeep) => SugarElement.fromDom(original.dom.cloneNode(isDeep));
     const shallow = original => clone$1(original, false);
+      }
     };
+    const element = elem => getHtml(elem);
+    const unknown = 'unknown';
+    var EventConfiguration;
+    (function (EventConfiguration) {
+      EventConfiguration[EventConfiguration['STOP'] = 0] = 'STOP';
+      EventConfiguration[EventConfiguration['NORMAL'] = 1] = 'NORMAL';
+      EventConfiguration[EventConfiguration['LOGGING'] = 2] = 'LOGGING';
+    }(EventConfiguration || (EventConfiguration = {})));
+    const eventConfig = Cell({});
+    const makeEventLogger = (eventName, initialTarget) => {
+      const sequence = [];
+      const startTime = new Date().getTime();
+      return {
+        logEventCut: (_name, target, purpose) => {
+          sequence.push({
+            outcome: 'cut',
+            target,
+            purpose
+          });
+        },
+        logEventStopped: (_name, target, purpose) => {
+          sequence.push({
+            outcome: 'stopped',
+            target,
+            purpose
+          });
+        },
+        logNoParent: (_name, target, purpose) => {
+          sequence.push({
+            outcome: 'no-parent',
+            target,
+            purpose
+          });
+        },
+        logEventNoHandlers: (_name, target) => {
+          sequence.push({
+            outcome: 'no-handlers-left',
+            target
+          });
+        },
+        logEventResponse: (_name, target, purpose) => {
+          sequence.push({
+            outcome: 'response',
+            purpose,
+            target
+          });
+        },
+        write: () => {
+          const finishTime = new Date().getTime();
+          if (contains$2([
+              'mousemove',
+              'mouseover',
+              'mouseout',
+              systemInit()
+            ], eventName)) {
+            return;
+          }
+          console.log(eventName, {
+            event: eventName,
+            time: finishTime - startTime,
+            target: initialTarget.dom,
+            sequence: map$2(sequence, s => {
+              if (!contains$2([
+                  'cut',
+                  'stopped',
+                  'response'
+                ], s.outcome)) {
+                return s.outcome;
+              } else {
+                return '{' + s.purpose + '} ' + s.outcome + ' at (' + element(s.target) + ')';
+              }
+            })
+          });
+        }
+      };
+    };
+    const processEvent = (eventName, initialTarget, f) => {
+      const status = get$h(eventConfig.get(), eventName).orThunk(() => {
+        const patterns = keys(eventConfig.get());
+        return findMap(patterns, p => eventName.indexOf(p) > -1 ? Optional.some(eventConfig.get()[p]) : Optional.none());
+      }).getOr(EventConfiguration.NORMAL);
+      switch (status) {
+      case EventConfiguration.NORMAL:
+        return f(noLogger());
+      case EventConfiguration.LOGGING: {
+          const logger = makeEventLogger(eventName, initialTarget);
+          const output = f(logger);
+          logger.write();
+          return output;
+        }
+      case EventConfiguration.STOP:
+        return true;
+      }
+    };
+    const path = [
+      'alloy/data/Fields',
+      'alloy/debugging/Debugging'
+    ];
+    const getTrace = () => {
+      const err = new Error();
+      if (err.stack !== undefined) {
+        const lines = err.stack.split('\n');
+        return find$5(lines, line => line.indexOf('alloy') > 0 && !exists(path, p => line.indexOf(p) > -1)).getOr(unknown);
+      } else {
+        return unknown;
+      }
+    };
+    const ignoreEvent = {
+      logEventCut: noop,
+      logEventStopped: noop,
+      logNoParent: noop,
+      logEventNoHandlers: noop,
+      logEventResponse: noop,
+      write: noop
+    };
+    const monitorEvent = (eventName, initialTarget, f) => processEvent(eventName, initialTarget, f);
+    const noLogger = constant$1(ignoreEvent);
+    const menuFields = constant$1([
+      required$1('menu'),
+      required$1('selectedMenu')
+    ]);
+    const itemFields = constant$1([
+      required$1('item'),
+      required$1('selectedItem')
+    ]);
+    constant$1(objOf(itemFields().concat(menuFields())));
+    const itemSchema$3 = constant$1(objOf(itemFields()));
+    const _initSize = requiredObjOf('initSize', [
+      required$1('numColumns'),
+      required$1('numRows')
+    ]);
+    const itemMarkers = () => requiredOf('markers', itemSchema$3());
+    const tieredMenuMarkers = () => requiredObjOf('markers', [required$1('backgroundMenu')].concat(menuFields()).concat(itemFields()));
+    const markers$1 = required => requiredObjOf('markers', map$2(required, required$1));
+    const onPresenceHandler = (label, fieldName, presence) => {
+      getTrace();
+      return field$1(fieldName, fieldName, presence, valueOf(f => Result.value((...args) => {
+        return f.apply(undefined, args);
+      })));
+    };
+    const onHandler = fieldName => onPresenceHandler('onHandler', fieldName, defaulted$1(noop));
+    const onKeyboardHandler = fieldName => onPresenceHandler('onKeyboardHandler', fieldName, defaulted$1(Optional.none));
+    const onStrictHandler = fieldName => onPresenceHandler('onHandler', fieldName, required$2());
+    const onStrictKeyboardHandler = fieldName => onPresenceHandler('onKeyboardHandler', fieldName, required$2());
+    const output$1 = (name, value) => customField(name, constant$1(value));
+    const snapshot = name => customField(name, identity);
+    const initSize = constant$1(_initSize);
+    var DockingSchema = [
+      optionObjOf('contextual', [
+        requiredString('fadeInClass'),
+        requiredString('fadeOutClass'),
+        requiredString('transitionClass'),
+        requiredFunction('lazyContext'),
+        onHandler('onShow'),
+        onHandler('onShown'),
+        onHandler('onHide'),
+        onHandler('onHidden')
+      ]),
+      defaultedFunction('lazyViewport', () => ({
+        bounds: win(),
+        optScrollEnv: Optional.none()
+      })),
+      defaultedArrayOf('modes', [
+        'top',
+        'bottom'
+      ], string),
+      onHandler('onDocked'),
+      onHandler('onUndocked')
+    ];
+    const init$g = spec => {
+      const docked = Cell(false);
+      const visible = Cell(true);
+      const initialBounds = value$4();
+      const modes = Cell(spec.modes);
+      const readState = () => `docked:  ${ docked.get() }, visible: ${ visible.get() }, modes: ${ modes.get().join(',') }`;
+      return nu$7({
+        isDocked: docked.get,
+        setDocked: docked.set,
+        getInitialPos: initialBounds.get,
+        setInitialPos: initialBounds.set,
+        clearInitialPos: initialBounds.clear,
+        isVisible: visible.get,
+        setVisible: visible.set,
+        getModes: modes.get,
+        setModes: modes.set,
+        readState
+      });
+    };
+    var DockingState = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        init: init$g
+    });
+    const Docking = create$4({
+      fields: DockingSchema,
+      name: 'docking',
+      active: ActiveDocking,
+      apis: DockingApis,
+      state: DockingState
-    const element = elem => getHtml(elem);
+    });
     const isRecursive = (component, originator, target) => eq(originator, component.element) && !eq(originator, target);
-    const events$i = derive$2([can(focus$4(), (component, simulatedEvent) => {
+    const events$h = derive$2([can(focus$4(), (component, simulatedEvent) => {
         const event = simulatedEvent.event;
         const originator = event.originator;
         const target = event.target;
+        }
       })]);
     var DefaultEvents = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        events: events$i
+        events: events$h
+    });
+    const cycleBy = (value, delta, min, max) => {
+      const r = value + delta;
+      if (r > max) {
+        return min;
+      } else if (r < min) {
+        return max;
+      } else {
+        return r;
+      }
+    };
+    const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
-    });
+    const random = () => window.crypto.getRandomValues(new Uint32Array(1))[0] / 4294967295;
     let unique = 0;
     const generate$6 = prefix => {
       const date = new Date();
       const time = date.getTime();
-      const random = Math.floor(Math.random() * 1000000000);
+      const random$1 = Math.floor(random() * 1000000000);
       unique++;
-      return prefix + '_' + random + unique + String(time);
+      return prefix + '_' + random$1 + unique + String(time);
     };
       Object.defineProperty(elem.dom, idAttr, {
         value: uid,
         writable: true
       });
     };
-    const read$1 = elem => {
+    const read = elem => {
       const id = isElement$1(elem) ? elem.dom[idAttr] : null;
       return Optional.from(id);
     };
     const generate$5 = prefix => generate$6(prefix);
         getByUid: fail('getByUid'),
         getByDom: fail('getByDom'),
         isConnected: never
       };
     };
-    const singleton$1 = NoContextApi();
+    const singleton = NoContextApi();
-    const markAsBehaviourApi = (f, apiName, apiFunction) => {
-      const delegate = apiFunction.toString();
-      const endIndex = delegate.indexOf(')') + 1;
-      const openBracketIndex = delegate.indexOf('(');
-      const parameters = delegate.substring(openBracketIndex + 1, endIndex - 1).split(/,\s*/);
-      f.toFunctionAnnotation = () => ({
-        name: apiName,
-        parameters: cleanParameters(parameters.slice(0, 1).concat(parameters.slice(3)))
-      });
-      return f;
-    };
-    const cleanParameters = parameters => map$2(parameters, p => endsWith(p, '/*') ? p.substring(0, p.length - '/*'.length) : p);
-    const markAsExtraApi = (f, extraName) => {
-      const delegate = f.toString();
-      const endIndex = delegate.indexOf(')') + 1;
-      const openBracketIndex = delegate.indexOf('(');
-      const parameters = delegate.substring(openBracketIndex + 1, endIndex - 1).split(/,\s*/);
-      f.toFunctionAnnotation = () => ({
-        name: extraName,
-        parameters: cleanParameters(parameters)
-      });
-      return f;
-    };
-    const markAsSketchApi = (f, apiFunction) => {
-      const delegate = apiFunction.toString();
-      const endIndex = delegate.indexOf(')') + 1;
-      const openBracketIndex = delegate.indexOf('(');
-      const parameters = delegate.substring(openBracketIndex + 1, endIndex - 1).split(/,\s*/);
-      f.toFunctionAnnotation = () => ({
-        name: 'OVERRIDE',
-        parameters: cleanParameters(parameters.slice(1))
-      });
-      return f;
-    };
     const premadeTag = generate$6('alloy-premade');
     const premade$1 = comp => {
       Object.defineProperty(comp.element.dom, premadeTag, {
         value: comp.uid,
         writable: true
       });
       return wrap$1(premadeTag, comp);
     };
     const isPremade = element => has$2(element.dom, premadeTag);
-    const getPremade = spec => get$g(spec, premadeTag);
+    const getPremade = spec => get$h(spec, premadeTag);
-    const makeApi = f => markAsSketchApi((component, ...rest) => f(component.getApis(), component, ...rest), f);
-    const NoState = { init: () => nu$8({ readState: constant$1('No State required') }) };
-    const nu$8 = spec => spec;
+    const makeApi = f => markAsSketchApi((component, ...rest) => f(component.getApis(), component, ...rest), f);
     const generateFrom$1 = (spec, all) => {
       const schema = map$2(all, a => optionObjOf(a.name(), [
         required$1('config'),
     const byInnerKey = (data, tuple) => {
       const r = {};
       each(data, (detail, key) => {
         each(detail, (value, indexKey) => {
-          const chain = get$g(r, indexKey).getOr([]);
+          const chain = get$h(r, indexKey).getOr([]);
           r[indexKey] = chain.concat([tuple(key, value)]);
         });
       });
       return r;
-    };
-    const nu$7 = s => ({
-      classes: isUndefined(s.classes) ? [] : s.classes,
-      attributes: isUndefined(s.attributes) ? {} : s.attributes,
-      styles: isUndefined(s.styles) ? {} : s.styles
-    });
-    const merge = (defnA, mod) => ({
-      ...defnA,
-      attributes: {
-        ...defnA.attributes,
-        ...mod.attributes
-      },
-      styles: {
-        ...defnA.styles,
-        ...mod.styles
-      },
-      classes: defnA.classes.concat(mod.classes)
-    });
+    };
     const combine$2 = (info, baseMod, behaviours, base) => {
       const modsByBehaviour = { ...baseMod };
       each$1(behaviours, behaviour => {
         ...b
       }), {});
       const combinedClasses = foldr(byAspect.classes, (b, a) => a.modification.concat(b), []);
       const combinedAttributes = combineObjects(byAspect.attributes);
       const combinedStyles = combineObjects(byAspect.styles);
-      return nu$7({
+      return nu$8({
         classes: combinedClasses,
         attributes: combinedAttributes,
         styles: combinedStyles
       });
     };
         ],
         [systemInit()]: [
           baseBehaviour,
           'disabling',
           'toggling',
-          'representing'
+          'representing',
+          'tooltipping'
         ],
         [input()]: [
           baseBehaviour,
           'representing',
           'streaming',
         ],
         [detachedFromDom()]: [
           baseBehaviour,
           'representing',
           'item-events',
+          'toolbar-button-events',
           'tooltipping'
         ],
         [mousedown()]: [
           'focusing',
           baseBehaviour,
     const toDefinition = detail => ({
       ...detail.dom,
       uid: detail.uid,
       domChildren: map$2(detail.components, comp => comp.element)
     });
-    const toModification = detail => detail.domModification.fold(() => nu$7({}), nu$7);
+    const toModification = detail => detail.domModification.fold(() => nu$8({}), nu$8);
     const toEvents = info => info.events;
-    const read = (element, attr) => {
-      const value = get$f(element, attr);
-      return value === undefined || value === '' ? [] : value.split(' ');
-    };
-    const add$4 = (element, attr, id) => {
-      const old = read(element, attr);
-      const nu = old.concat([id]);
-      set$9(element, attr, nu.join(' '));
-      return true;
-    };
-    const remove$4 = (element, attr, id) => {
-      const nu = filter$2(read(element, attr), v => v !== id);
-      if (nu.length > 0) {
-        set$9(element, attr, nu.join(' '));
-      } else {
-        remove$7(element, attr);
-      }
-      return false;
-    };
-    const supports = element => element.dom.classList !== undefined;
-    const get$8 = element => read(element, 'class');
-    const add$3 = (element, clazz) => add$4(element, 'class', clazz);
-    const remove$3 = (element, clazz) => remove$4(element, 'class', clazz);
-    const toggle$5 = (element, clazz) => {
-      if (contains$2(get$8(element), clazz)) {
-        return remove$3(element, clazz);
-      } else {
-        return add$3(element, clazz);
-      }
-    };
-    const add$2 = (element, clazz) => {
-      if (supports(element)) {
-        element.dom.classList.add(clazz);
-      } else {
-        add$3(element, clazz);
-      }
-    };
-    const cleanClass = element => {
-      const classList = supports(element) ? element.dom.classList : get$8(element);
-      if (classList.length === 0) {
-        remove$7(element, 'class');
-      }
-    };
-    const remove$2 = (element, clazz) => {
-      if (supports(element)) {
-        const classList = element.dom.classList;
-        classList.remove(clazz);
-      } else {
-        remove$3(element, clazz);
-      }
-      cleanClass(element);
-    };
-    const toggle$4 = (element, clazz) => {
-      const result = supports(element) ? element.dom.classList.toggle(clazz) : toggle$5(element, clazz);
-      cleanClass(element);
-      return result;
-    };
-    const has = (element, clazz) => supports(element) && element.dom.classList.contains(clazz);
-    const add$1 = (element, classes) => {
-      each$1(classes, x => {
-        add$2(element, x);
-      });
-    };
-    const remove$1 = (element, classes) => {
-      each$1(classes, x => {
-        remove$2(element, x);
-      });
-    };
-    const toggle$3 = (element, classes) => {
-      each$1(classes, x => {
-        toggle$4(element, x);
-      });
-    };
-    const hasAll = (element, classes) => forall(classes, clazz => has(element, clazz));
-    const getNative = element => {
-      const classList = element.dom.classList;
-      const r = new Array(classList.length);
-      for (let i = 0; i < classList.length; i++) {
-        const item = classList.item(i);
-        if (item !== null) {
-          r[i] = item;
-        }
-      }
-      return r;
-    };
-    const get$7 = element => supports(element) ? getNative(element) : get$8(element);
-    const get$6 = element => element.dom.value;
+    const get$7 = element => element.dom.value;
     const set$5 = (element, value) => {
       if (value === undefined) {
         throw new Error('Value.set was undefined');
+      }
     };
     const ensureInDom = (parent, child, obsoleted) => {
       obsoleted.fold(() => append$2(parent, child), obs => {
         if (!eq(obs, child)) {
           before$1(obs, child);
-          remove$5(obs);
+          remove$6(obs);
+        }
       });
     };
     const patchChildrenWith = (parent, nu, f) => {
       const builtChildren = map$2(nu, f);
       const currentChildren = children(parent);
-      each$1(currentChildren.slice(builtChildren.length), remove$5);
+      each$1(currentChildren.slice(builtChildren.length), remove$6);
       return builtChildren;
     };
     const patchSpecChild = (parent, index, spec, build) => {
       const oldObsoleted = child$2(parent, index);
       const childComp = build(spec, oldObsoleted);
       const {
         toSet: attrsToSet,
         toRemove: attrsToRemove
       } = diffKeyValueSet(definition.attributes, existingAttributes);
       const updateAttrs = () => {
-        each$1(attrsToRemove, a => remove$7(obsoleted, a));
+        each$1(attrsToRemove, a => remove$8(obsoleted, a));
         setAll$1(obsoleted, attrsToSet);
       };
       const existingStyles = getAllRaw(obsoleted);
       const {
         toSet: stylesToSet,
         toRemove: stylesToRemove
       } = diffKeyValueSet(definition.styles, existingStyles);
       const updateStyles = () => {
-        each$1(stylesToRemove, s => remove$6(obsoleted, s));
+        each$1(stylesToRemove, s => remove$7(obsoleted, s));
         setAll(obsoleted, stylesToSet);
       };
-      const existingClasses = get$7(obsoleted);
+      const existingClasses = get$9(obsoleted);
       const classesToRemove = difference(existingClasses, definition.classes);
       const classesToAdd = difference(definition.classes, existingClasses);
       const updateClasses = () => {
         add$1(obsoleted, classesToAdd);
-        remove$1(obsoleted, classesToRemove);
+        remove$2(obsoleted, classesToRemove);
       };
       const updateHtml = html => {
         set$6(obsoleted, html);
       };
       const updateChildren = () => {
         patchDomChildren(obsoleted, children);
       };
       const updateValue = () => {
         const valueElement = obsoleted;
         const value = definition.value.getOrUndefined();
-        if (value !== get$6(valueElement)) {
+        if (value !== get$7(valueElement)) {
           set$5(valueElement, value !== null && value !== void 0 ? value : '');
+        }
       };
       updateAttrs();
       updateClasses();
     };
     const attemptPatch = (definition, obsoleted) => {
       try {
         const e = reconcileToDom(definition, obsoleted);
         return Optional.some(e);
-      } catch (err) {
+      } catch (_a) {
         return Optional.none();
+      }
     };
     const hasMixedChildren = definition => definition.innerHtml.isSome() && definition.domChildren.length > 0;
     const renderToDom = (definition, optObsoleted) => {
       writeOnly(elem, definition.uid);
       return elem;
     };
     const getBehaviours$2 = spec => {
-      const behaviours = get$g(spec, 'behaviours').getOr({});
+      const behaviours = get$h(spec, 'behaviours').getOr({});
       return bind$3(keys(behaviours), name => {
         const behaviour = behaviours[name];
         return isNonNullable(behaviour) ? [behaviour.me] : [];
       });
       const baseEvents = { 'alloy.base.behaviour': toEvents(info) };
       return combine$1(bData, info.eventOrder, bList, baseEvents).getOrDie();
     };
     const build$2 = (spec, obsoleted) => {
       const getMe = () => me;
-      const systemApi = Cell(singleton$1);
+      const systemApi = Cell(singleton);
       const info = getOrDie(toInfo(spec));
       const bBlob = generate$4(spec);
       const bList = getBehaviours$3(bBlob);
       const bData = getData$2(bBlob);
       const modDefinition = getDomDefinition(info, bList, bData);
       };
       return me;
     };
     const buildSubcomponents = (spec, obsoleted) => {
-      const components = get$g(spec, 'components').getOr([]);
+      const components = get$h(spec, 'components').getOr([]);
       return obsoleted.fold(() => map$2(components, build$1), obs => map$2(components, (c, i) => {
         return buildOrPatch(c, child$2(obs, i));
       }));
     };
     };
     const closest$3 = (scope, predicate, isRoot) => {
       const is = (s, test) => test(s);
       return ClosestOrAncestor(is, ancestor$1, scope, predicate, isRoot);
     };
+    const sibling$1 = (scope, predicate) => {
+      const element = scope.dom;
+      if (!element.parentNode) {
+        return Optional.none();
+      }
+      return child$1(SugarElement.fromDom(element.parentNode), x => !eq(scope, x) && predicate(x));
+    };
     const child$1 = (scope, predicate) => {
       const pred = node => predicate(SugarElement.fromDom(node));
       const result = find$5(scope.dom.childNodes, pred);
       return result.map(SugarElement.fromDom);
     };
       return descend(scope.dom);
     };
+    const closest$2 = (scope, predicate, isRoot) => closest$3(scope, predicate, isRoot).isSome();
     const closest$2 = (scope, predicate, isRoot) => closest$3(scope, predicate, isRoot).isSome();
+    const first$1 = selector => one(selector);
     const ancestor = (scope, selector, isRoot) => ancestor$1(scope, e => is(e, selector), isRoot);
-    const ancestor = (scope, selector, isRoot) => ancestor$1(scope, e => is(e, selector), isRoot);
+    const sibling = (scope, selector) => sibling$1(scope, e => is(e, selector));
     const child = (scope, selector) => child$1(scope, e => is(e, selector));
     const descendant = (scope, selector) => one(selector, scope);
     const closest$1 = (scope, selector, isRoot) => {
     const find$1 = queryElem => {
       const dependent = closest$3(queryElem, elem => {
         if (!isElement$1(elem)) {
           return false;
+        }
-        const id = get$f(elem, 'id');
+        const id = get$g(elem, 'id');
         return id !== undefined && id.indexOf(attribute) > -1;
       });
       return dependent.bind(dep => {
-        const id = get$f(dep, 'id');
+        const id = get$g(dep, 'id');
         const dos = getRootNode(dep);
         return descendant(dos, `[${ attribute }="${ id }"]`);
       });
     };
     const manager = () => {
       const ariaId = generate$6(attribute);
       const link = elem => {
         set$9(elem, attribute, ariaId);
       };
       const unlink = elem => {
-        remove$7(elem, attribute);
+        remove$8(elem, attribute);
       };
       return {
         id: ariaId,
         link,
         unlink
     };
     const isAriaPartOf = (component, queryElem) => find$1(queryElem).exists(owner => isPartOf$1(component, owner));
-    const isPartOf$1 = (component, queryElem) => closest$2(queryElem, el => eq(el, component.element), never) || isAriaPartOf(component, queryElem);
-    const unknown = 'unknown';
-    var EventConfiguration;
-    (function (EventConfiguration) {
-      EventConfiguration[EventConfiguration['STOP'] = 0] = 'STOP';
-      EventConfiguration[EventConfiguration['NORMAL'] = 1] = 'NORMAL';
-      EventConfiguration[EventConfiguration['LOGGING'] = 2] = 'LOGGING';
-    }(EventConfiguration || (EventConfiguration = {})));
-    const eventConfig = Cell({});
-    const makeEventLogger = (eventName, initialTarget) => {
-      const sequence = [];
-      const startTime = new Date().getTime();
-      return {
-        logEventCut: (_name, target, purpose) => {
-          sequence.push({
-            outcome: 'cut',
-            target,
-            purpose
-          });
-        },
-        logEventStopped: (_name, target, purpose) => {
-          sequence.push({
-            outcome: 'stopped',
-            target,
-            purpose
-          });
-        },
-        logNoParent: (_name, target, purpose) => {
-          sequence.push({
-            outcome: 'no-parent',
-            target,
-            purpose
-          });
-        },
-        logEventNoHandlers: (_name, target) => {
-          sequence.push({
-            outcome: 'no-handlers-left',
-            target
-          });
-        },
-        logEventResponse: (_name, target, purpose) => {
-          sequence.push({
-            outcome: 'response',
-            purpose,
-            target
-          });
-        },
-        write: () => {
-          const finishTime = new Date().getTime();
-          if (contains$2([
-              'mousemove',
-              'mouseover',
-              'mouseout',
-              systemInit()
-            ], eventName)) {
-            return;
-          }
-          console.log(eventName, {
-            event: eventName,
-            time: finishTime - startTime,
-            target: initialTarget.dom,
-            sequence: map$2(sequence, s => {
-              if (!contains$2([
-                  'cut',
-                  'stopped',
-                  'response'
-                ], s.outcome)) {
-                return s.outcome;
-              } else {
-                return '{' + s.purpose + '} ' + s.outcome + ' at (' + element(s.target) + ')';
-              }
-            })
-          });
-        }
-      };
-    };
-    const processEvent = (eventName, initialTarget, f) => {
-      const status = get$g(eventConfig.get(), eventName).orThunk(() => {
-        const patterns = keys(eventConfig.get());
-        return findMap(patterns, p => eventName.indexOf(p) > -1 ? Optional.some(eventConfig.get()[p]) : Optional.none());
-      }).getOr(EventConfiguration.NORMAL);
-      switch (status) {
-      case EventConfiguration.NORMAL:
-        return f(noLogger());
-      case EventConfiguration.LOGGING: {
-          const logger = makeEventLogger(eventName, initialTarget);
-          const output = f(logger);
-          logger.write();
-          return output;
-        }
-      case EventConfiguration.STOP:
-        return true;
-      }
-    };
-    const path = [
-      'alloy/data/Fields',
-      'alloy/debugging/Debugging'
-    ];
-    const getTrace = () => {
-      const err = new Error();
-      if (err.stack !== undefined) {
-        const lines = err.stack.split('\n');
-        return find$5(lines, line => line.indexOf('alloy') > 0 && !exists(path, p => line.indexOf(p) > -1)).getOr(unknown);
-      } else {
-        return unknown;
-      }
-    };
-    const ignoreEvent = {
-      logEventCut: noop,
-      logEventStopped: noop,
-      logNoParent: noop,
-      logEventNoHandlers: noop,
-      logEventResponse: noop,
-      write: noop
-    };
-    const monitorEvent = (eventName, initialTarget, f) => processEvent(eventName, initialTarget, f);
-    const noLogger = constant$1(ignoreEvent);
-    const menuFields = constant$1([
-      required$1('menu'),
-      required$1('selectedMenu')
-    ]);
-    const itemFields = constant$1([
-      required$1('item'),
-      required$1('selectedItem')
-    ]);
-    constant$1(objOf(itemFields().concat(menuFields())));
-    const itemSchema$3 = constant$1(objOf(itemFields()));
-    const _initSize = requiredObjOf('initSize', [
-      required$1('numColumns'),
-      required$1('numRows')
-    ]);
-    const itemMarkers = () => requiredOf('markers', itemSchema$3());
-    const tieredMenuMarkers = () => requiredObjOf('markers', [required$1('backgroundMenu')].concat(menuFields()).concat(itemFields()));
-    const markers$1 = required => requiredObjOf('markers', map$2(required, required$1));
-    const onPresenceHandler = (label, fieldName, presence) => {
-      getTrace();
-      return field$1(fieldName, fieldName, presence, valueOf(f => Result.value((...args) => {
-        return f.apply(undefined, args);
-      })));
-    };
-    const onHandler = fieldName => onPresenceHandler('onHandler', fieldName, defaulted$1(noop));
-    const onKeyboardHandler = fieldName => onPresenceHandler('onKeyboardHandler', fieldName, defaulted$1(Optional.none));
-    const onStrictHandler = fieldName => onPresenceHandler('onHandler', fieldName, required$2());
-    const onStrictKeyboardHandler = fieldName => onPresenceHandler('onKeyboardHandler', fieldName, required$2());
-    const output$1 = (name, value) => customField(name, constant$1(value));
-    const snapshot = name => customField(name, identity);
-    const initSize = constant$1(_initSize);
+    const isPartOf$1 = (component, queryElem) => closest$2(queryElem, el => eq(el, component.element), never) || isAriaPartOf(component, queryElem);
     const nu$6 = (x, y, bubble, direction, placement, boundsRestriction, labelPrefix, alwaysFit = false) => ({
       x,
       y,
     const south$3 = adt$a.south;
     const north$3 = adt$a.north;
     const east$3 = adt$a.east;
     const west$3 = adt$a.west;
-    const cycleBy = (value, delta, min, max) => {
-      const r = value + delta;
-      if (r > max) {
-        return min;
-      } else if (r < min) {
-        return max;
-      } else {
-        return r;
-      }
-    };
-    const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
     const getRestriction = (anchor, restriction) => {
       switch (restriction) {
       case 1:
         return anchor.x;
     const boundsRestriction = (anchor, restrictions) => mapToObject([
       'left',
       'right',
       'top',
       'bottom'
-    ], dir => get$g(restrictions, dir).map(restriction => getRestriction(anchor, restriction)));
+    ], dir => get$h(restrictions, dir).map(restriction => getRestriction(anchor, restriction)));
     const adjustBounds = (bounds$1, restriction, bubbleOffset) => {
       const applyRestriction = (dir, current) => restriction[dir].map(pos => {
         const isVerticalAxis = dir === 'top' || dir === 'bottom';
         const offset = isVerticalAxis ? bubbleOffset.top : bubbleOffset.left;
         const comparator = dir === 'left' || dir === 'top' ? Math.max : Math.min;
       south$2,
       north$2
     ];
     const chooseChannels = (channels, message) => message.universal ? channels : filter$2(channels, ch => contains$2(message.channels, ch));
-    const events$h = receiveConfig => derive$2([run$1(receive(), (component, message) => {
+    const events$g = receiveConfig => derive$2([run$1(receive(), (component, message) => {
         const channelMap = receiveConfig.channels;
         const channels = keys(channelMap);
         const receivingData = message;
         const targetChannels = chooseChannels(channels, receivingData);
         });
       })]);
     var ActiveReceiving = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        events: events$h
+        events: events$g
     });
     var ReceivingSchema = [requiredOf('channels', setOf(Result.value, objOfOnly([
         onStrictHandler('onReceive'),
-        defaulted('schema', anyValue())
-      ])))];
-    const executeEvent = (bConfig, bState, executor) => runOnExecute$1(component => {
-      executor(component, bConfig, bState);
-    });
-    const loadEvent = (bConfig, bState, f) => runOnInit((component, _simulatedEvent) => {
-      f(component, bConfig, bState);
-    });
-    const create$5 = (schema, name, active, apis, extra, state) => {
-      const configSchema = objOfOnly(schema);
-      const schemaSchema = optionObjOf(name, [optionObjOfOnly('config', schema)]);
-      return doCreate(configSchema, schemaSchema, name, active, apis, extra, state);
-    };
-    const createModes$1 = (modes, name, active, apis, extra, state) => {
-      const configSchema = modes;
-      const schemaSchema = optionObjOf(name, [optionOf('config', modes)]);
-      return doCreate(configSchema, schemaSchema, name, active, apis, extra, state);
-    };
-    const wrapApi = (bName, apiFunction, apiName) => {
-      const f = (component, ...rest) => {
-        const args = [component].concat(rest);
-        return component.config({ name: constant$1(bName) }).fold(() => {
-          throw new Error('We could not find any behaviour configuration for: ' + bName + '. Using API: ' + apiName);
-        }, info => {
-          const rest = Array.prototype.slice.call(args, 1);
-          return apiFunction.apply(undefined, [
-            component,
-            info.config,
-            info.state
-          ].concat(rest));
-        });
-      };
-      return markAsBehaviourApi(f, apiName, apiFunction);
-    };
-    const revokeBehaviour = name => ({
-      key: name,
-      value: undefined
-    });
-    const doCreate = (configSchema, schemaSchema, name, active, apis, extra, state) => {
-      const getConfig = info => hasNonNullableKey(info, name) ? info[name]() : Optional.none();
-      const wrappedApis = map$1(apis, (apiF, apiName) => wrapApi(name, apiF, apiName));
-      const wrappedExtra = map$1(extra, (extraF, extraName) => markAsExtraApi(extraF, extraName));
-      const me = {
-        ...wrappedExtra,
-        ...wrappedApis,
-        revoke: curry(revokeBehaviour, name),
-        config: spec => {
-          const prepared = asRawOrDie$1(name + '-config', configSchema, spec);
-          return {
-            key: name,
-            value: {
-              config: prepared,
-              me,
-              configAsRaw: cached(() => asRawOrDie$1(name + '-config', configSchema, spec)),
-              initialConfig: spec,
-              state
-            }
-          };
-        },
-        schema: constant$1(schemaSchema),
-        exhibit: (info, base) => {
-          return lift2(getConfig(info), get$g(active, 'exhibit'), (behaviourInfo, exhibitor) => {
-            return exhibitor(base, behaviourInfo.config, behaviourInfo.state);
-          }).getOrThunk(() => nu$7({}));
-        },
-        name: constant$1(name),
-        handlers: info => {
-          return getConfig(info).map(behaviourInfo => {
-            const getEvents = get$g(active, 'events').getOr(() => ({}));
-            return getEvents(behaviourInfo.config, behaviourInfo.state);
-          }).getOr({});
-        }
-      };
-      return me;
-    };
-    const derive$1 = capabilities => wrapAll(capabilities);
-    const simpleSchema = objOfOnly([
-      required$1('fields'),
-      required$1('name'),
-      defaulted('active', {}),
-      defaulted('apis', {}),
-      defaulted('state', NoState),
-      defaulted('extra', {})
-    ]);
-    const create$4 = data => {
-      const value = asRawOrDie$1('Creating behaviour: ' + data.name, simpleSchema, data);
-      return create$5(value.fields, value.name, value.active, value.apis, value.extra, value.state);
-    };
-    const modeSchema = objOfOnly([
-      required$1('branchKey'),
-      required$1('branches'),
-      required$1('name'),
-      defaulted('active', {}),
-      defaulted('apis', {}),
-      defaulted('state', NoState),
-      defaulted('extra', {})
-    ]);
-    const createModes = data => {
-      const value = asRawOrDie$1('Creating behaviour: ' + data.name, modeSchema, data);
-      return createModes$1(choose$1(value.branchKey, value.branches), value.name, value.active, value.apis, value.extra, value.state);
-    };
+        defaulted('schema', anyValue())
-    const revoke = constant$1(undefined);
+      ])))];
     const Receiving = create$4({
       fields: ReceivingSchema,
       name: 'receiving',
       active: ActiveReceiving
     });
-    const exhibit$6 = (base, posConfig) => nu$7({
+    const exhibit$6 = (base, posConfig) => nu$8({
         }, noop);
       });
       return result;
     };
-    const NuPositionCss = (position, left, top, right, bottom) => {
-      const toPx = num => num + 'px';
-      return {
-        position,
-        left: left.map(toPx),
-        top: top.map(toPx),
-        right: right.map(toPx),
-        bottom: bottom.map(toPx)
-      };
-    };
-    const toOptions = position => ({
-      ...position,
-      position: Optional.some(position.position)
-    });
-    const applyPositionCss = (element, position) => {
-      setOptions(element, toOptions(position));
-    };
     const adt$9 = Adt.generate([
       { none: [] },
+      {
         relative: [
       return positionWithDirection('fixed', decision, x, y, width, height);
     });
     const toBox = (origin, element) => {
       const rel = curry(find$2, element);
       const position = origin.fold(rel, rel, () => {
-        const scroll = get$b();
+        const scroll = get$c();
         return find$2(element).translate(-scroll.left, -scroll.top);
       });
       const width = getOuter$1(element);
       const height = getOuter$2(element);
       return bounds(position.left, position.top, width, height);
       return bounds(pos.left, pos.top, bounds$1.width, bounds$1.height);
     }));
     const translate$2 = (origin, x, y) => {
       const pos = SugarPosition(x, y);
       const removeScroll = () => {
-        const outerScroll = get$b();
+        const outerScroll = get$c();
         return pos.translate(-outerScroll.left, -outerScroll.top);
       };
       return origin.fold(constant$1(pos), constant$1(pos), removeScroll);
     };
     const cata$1 = (subject, onNone, onRelative, onFixed) => subject.fold(onNone, onRelative, onFixed);
     const placementAttribute = 'data-alloy-placement';
     const setPlacement$1 = (element, placement) => {
       set$9(element, placementAttribute, placement);
     };
     const getPlacement = element => getOpt(element, placementAttribute);
-    const reset$2 = element => remove$7(element, placementAttribute);
+    const reset$1 = element => remove$8(element, placementAttribute);
     const adt$8 = Adt.generate([
       { fit: ['reposition'] },
+      {
         testY: anchorBox.y
       }, -1, -1, false));
       return abc.fold(identity, identity);
     };
-    const singleton = doRevoke => {
-      const subject = Cell(Optional.none());
-      const revoke = () => subject.get().each(doRevoke);
-      const clear = () => {
-        revoke();
-        subject.set(Optional.none());
-      };
-      const isSet = () => subject.get().isSome();
-      const get = () => subject.get();
-      const set = s => {
-        revoke();
-        subject.set(Optional.some(s));
-      };
-      return {
-        clear,
-        isSet,
-        get,
-        set
-      };
-    };
-    const destroyable = () => singleton(s => s.destroy());
-    const unbindable = () => singleton(s => s.unbind());
-    const value$2 = () => {
-      const subject = singleton(noop);
-      const on = f => subject.get().each(f);
-      return {
-        ...subject,
-        on
-      };
-    };
     const filter = always;
     const bind = (element, event, handler) => bind$2(element, event, filter, handler);
     const capture = (element, event, handler) => capture$1(element, event, filter, handler);
         return !equals(newValue, val);
       }).isSome();
     };
     const getTransitionDuration = element => {
       const get = name => {
-        const style = get$e(element, name);
+        const style = get$f(element, name);
         const times = style.split(/\s*,\s*/);
         return filter$2(times, isNotEmpty);
       };
       const parse = value => {
         if (isString(value) && /^[\d.]+/.test(value)) {
           transitionEnd.clear();
           transitionCancel.clear();
           const type = e === null || e === void 0 ? void 0 : e.raw.type;
           if (isNullable(type) || type === transitionend()) {
             clearTimeout(timer);
-            remove$7(element, timerAttr);
+            remove$8(element, timerAttr);
-            remove$1(element, transition.classes);
+            remove$2(element, transition.classes);
+          }
+        }
       };
       const transitionStart = bind(element, transitionstart(), e => {
         if (isSourceTransition(e)) {
     };
     const startTransitioning = (element, transition) => {
       add$1(element, transition.classes);
       getOpt(element, timerAttr).each(timerId => {
         clearTimeout(parseInt(timerId, 10));
-        remove$7(element, timerAttr);
+        remove$8(element, timerAttr);
       });
       setupTransitionListeners(element, transition);
     };
     const applyTransitionCss = (element, origin, position, transition, decision, lastPlacement) => {
       const shouldTransition = shouldApplyTransitionCss(transition, decision, lastPlacement);
             startTransitioning(element, transition);
+          }
           reflow(element);
+        }
       } else {
-        remove$1(element, transition.classes);
+        remove$2(element, transition.classes);
+      }
     };
     const elementSize = p => ({
       width: getOuter$1(p),
       height: getOuter$2(p)
     });
     const layout = (anchorBox, element, bubbles, options) => {
-      remove$6(element, 'max-height');
+      remove$7(element, 'max-height');
-      remove$6(element, 'max-width');
+      remove$7(element, 'max-width');
       const elementBox = elementSize(element);
       return attempts(element, options.preference, anchorBox, elementBox, bubbles, options.bounds);
     };
     const setClasses = (element, decision) => {
       const classInfo = decision.classes;
-      remove$1(element, classInfo.off);
+      remove$2(element, classInfo.off);
       add$1(element, classInfo.on);
     };
     const setHeight = (element, decision, options) => {
       const maxHeightFunction = options.maxHeightFunction;
       'inset'
     ];
     const nu$5 = (xOffset, yOffset, classes, insetModifier = 1) => {
       const insetXOffset = xOffset * insetModifier;
       const insetYOffset = yOffset * insetModifier;
-      const getClasses = prop => get$g(classes, prop).getOr([]);
+      const getClasses = prop => get$h(classes, prop).getOr([]);
       const make = (xDelta, yDelta, alignmentsOn) => {
         const alignmentsOff = difference(allAlignments, alignmentsOn);
         return {
           offset: SugarPosition(xDelta, yDelta),
           classesOn: bind$3(alignmentsOn, getClasses),
     const fallback = () => nu$5(0, 0, {});
     const nu$4 = identity;
     const onDirection = (isLtr, isRtl) => element => getDirection(element) === 'rtl' ? isRtl : isLtr;
-    const getDirection = element => get$e(element, 'direction') === 'rtl' ? 'rtl' : 'ltr';
+    const getDirection = element => get$f(element, 'direction') === 'rtl' ? 'rtl' : 'ltr';
     var AttributeValue;
     (function (AttributeValue) {
       AttributeValue['TopToBottom'] = 'toptobottom';
       AttributeValue['BottomToTop'] = 'bottomtotop';
     }(AttributeValue || (AttributeValue = {})));
     const Attribute = 'data-alloy-vertical-dir';
-    const isBottomToTopDir = el => closest$2(el, current => isElement$1(current) && get$f(current, 'data-alloy-vertical-dir') === AttributeValue.BottomToTop);
+    const isBottomToTopDir = el => closest$2(el, current => isElement$1(current) && get$g(current, 'data-alloy-vertical-dir') === AttributeValue.BottomToTop);
     const schema$y = () => optionObjOf('layouts', [
       required$1('onLtr'),
       required$1('onRtl'),
       option$3('onBottomLtr'),
       option$3('onBottomRtl')
     ]);
-    const get$5 = (elem, info, defaultLtr, defaultRtl, defaultBottomLtr, defaultBottomRtl, dirElement) => {
+    const get$6 = (elem, info, defaultLtr, defaultRtl, defaultBottomLtr, defaultBottomRtl, dirElement) => {
       const isBottomToTop = dirElement.map(isBottomToTopDir).getOr(false);
     };
     const placement$4 = (component, anchorInfo, origin) => {
       const hotspot = anchorInfo.hotspot;
       const anchorBox = toBox(origin, hotspot.element);
-      const layouts = get$5(component.element, anchorInfo, belowOrAbove(), belowOrAboveRtl(), aboveOrBelow(), aboveOrBelowRtl(), Optional.some(anchorInfo.hotspot.element));
+      const layouts = get$6(component.element, anchorInfo, belowOrAbove(), belowOrAboveRtl(), aboveOrBelow(), aboveOrBelowRtl(), Optional.some(anchorInfo.hotspot.element));
       return Optional.some(nu$4({
         anchorBox,
         bubble: anchorInfo.bubble.getOr(fallback()),
         overrides: anchorInfo.overrides,
     ];
     const placement$3 = (component, anchorInfo, origin) => {
       const pos = translate$2(origin, anchorInfo.x, anchorInfo.y);
       const anchorBox = bounds(pos.left, pos.top, anchorInfo.width, anchorInfo.height);
-      const layouts = get$5(component.element, anchorInfo, all$1(), allRtl$1(), all$1(), allRtl$1(), Optional.none());
+      const layouts = get$6(component.element, anchorInfo, all$1(), allRtl$1(), all$1(), allRtl$1(), Optional.none());
       return Optional.some(nu$4({
         anchorBox,
         bubble: anchorInfo.bubble,
         overrides: anchorInfo.overrides,
       };
       return Optional.from(win.frameElement).map(SugarElement.fromDom).filter(hasSameOwner).map(absolute$3);
     };
     const getRootPoint = (component, origin, anchorInfo) => {
       const doc = owner$4(component.element);
-      const outerScroll = get$b(doc);
+      const outerScroll = get$c(doc);
       const offset = getOffset(component, origin, anchorInfo).getOr(outerScroll);
       return absolute$1(offset, outerScroll.left, outerScroll.top);
     };
       ];
       const topLeft = cata$1(origin, () => sumAsAbsolute(points), () => sumAsAbsolute(points), () => sumAsFixed(points));
       const anchorBox = rect(topLeft.left, topLeft.top, box.width, box.height);
       const layoutsLtr = anchorInfo.showAbove ? aboveOrBelow() : belowOrAbove();
       const layoutsRtl = anchorInfo.showAbove ? aboveOrBelowRtl() : belowOrAboveRtl();
-      const layouts = get$5(elem, anchorInfo, layoutsLtr, layoutsRtl, layoutsLtr, layoutsRtl, Optional.none());
+      const layouts = get$6(elem, anchorInfo, layoutsLtr, layoutsRtl, layoutsLtr, layoutsRtl, Optional.none());
       return nu$4({
         anchorBox,
         bubble: anchorInfo.bubble.getOr(fallback()),
         overrides: anchorInfo.overrides,
         layouts
         set
       };
     };
     const api = NodeValue(isText, 'text');
-    const get$4 = element => api.get(element);
+    const get$5 = element => api.get(element);
     const point = (element, offset) => ({
       element,
         return point(element, offset);
       } else if (offset < children$1.length) {
         return point(children$1[offset], 0);
       } else {
         const last = children$1[children$1.length - 1];
-        const len = isText(last) ? get$4(last).length : children(last).length;
+        const len = isText(last) ? get$5(last).length : children(last).length;
         return point(last, len);
+      }
     };
         if (isSimRange(sel)) {
           const optRect = getBounds$1(win, SimSelection.exactFromRange(sel)).orThunk(() => {
             const zeroWidth$1 = SugarElement.fromText(zeroWidth);
             before$1(sel.start, zeroWidth$1);
             const rect = getFirstRect(win, SimSelection.exact(zeroWidth$1, 0, zeroWidth$1, 1));
-            remove$5(zeroWidth$1);
+            remove$6(zeroWidth$1);
             return rect;
           });
           return optRect.bind(rawRect => {
             return getBox(rawRect.left, rawRect.top, rawRect.width, rawRect.height);
           });
       northeast$1
     ];
     const placement = (component, submenuInfo, origin) => {
       const anchorBox = toBox(origin, submenuInfo.item.element);
-      const layouts = get$5(component.element, submenuInfo, all(), allRtl(), all(), allRtl(), Optional.none());
+      const layouts = get$6(component.element, submenuInfo, all(), allRtl(), all(), allRtl(), Optional.none());
       return Optional.some(nu$4({
         anchorBox,
         bubble: fallback(),
         overrides: submenuInfo.overrides,
           const optBounds = optWithinBounds.orThunk(() => posConfig.getBounds.map(apply$1));
           const newState = place(origin, anchoring, optBounds, placee, placeeState, placeeDetail.transition);
           posState.set(placee.uid, newState);
         });
         oldVisibility.fold(() => {
-          remove$6(element, 'visibility');
+          remove$7(element, 'visibility');
         }, vis => {
           set$8(element, 'visibility', vis);
         });
         if (getRaw(element, 'left').isNone() && getRaw(element, 'top').isNone() && getRaw(element, 'right').isNone() && getRaw(element, 'bottom').isNone() && is$1(getRaw(element, 'position'), 'fixed')) {
-          remove$6(element, 'position');
+          remove$7(element, 'position');
+        }
       }, element);
     };
     const getMode = (component, pConfig, _pState) => pConfig.useFixed() ? 'fixed' : 'absolute';
-    const reset$1 = (component, pConfig, posState, placee) => {
+    const reset = (component, pConfig, posState, placee) => {
       const element = placee.element;
       each$1([
         'position',
         'left',
         'right',
         'top',
         'bottom'
-      ], prop => remove$6(element, prop));
+      ], prop => remove$7(element, prop));
-      reset$2(element);
+      reset$1(element);
       posState.clear(placee.uid);
     };
     var PositionApis = /*#__PURE__*/Object.freeze({
         __proto__: null,
         position: position$1,
         positionWithinBounds: positionWithinBounds,
         getMode: getMode,
-        reset: reset$1
+        reset: reset
     });
-    const init$g = () => {
+    const init$f = () => {
       let state = {};
       const set = (id, data) => {
         state[id] = data;
       };
-      const get = id => get$g(state, id);
+      const get = id => get$h(state, id);
       const clear = id => {
         if (isNonNullable(id)) {
           delete state[id];
         } else {
           state = {};
         }
       };
-      return nu$8({
+      return nu$7({
         readState: () => state,
         clear,
         set,
         get
       });
     };
     var PositioningState = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        init: init$g
+        init: init$f
     });
     };
     const attach$1 = (parent, child) => {
       append$2(parent.element, child.element);
     };
     const detachChildren$1 = component => {
-      each$1(component.components(), childComp => remove$5(childComp.element));
+      each$1(component.components(), childComp => remove$6(childComp.element));
       empty(component.element);
       component.syncComponents();
     };
     const replaceChildren = (component, newSpecs, buildNewChildren) => {
       const subs = component.components();
+      }
       parent.syncComponents();
     };
     const doDetach = component => {
       fireDetaching(component);
-      remove$5(component.element);
+      remove$6(component.element);
       component.getSystem().removeFromWorld(component);
     };
     const detach = component => {
       const parent$1 = parent(component.element).bind(p => component.getSystem().getByDom(p).toOptional());
       doDetach(component);
     const detachSystem = guiSystem => {
       const children$1 = children(guiSystem.element);
       each$1(children$1, child => {
         guiSystem.getByDom(child).each(fireDetaching);
       });
-      remove$5(guiSystem.element);
+      remove$6(guiSystem.element);
     };
     const rebuild = (sandbox, sConfig, sState, data) => {
       sState.get().each(_data => {
     const isOpen$1 = (_sandbox, _sConfig, sState) => sState.isOpen();
     const isPartOf = (sandbox, sConfig, sState, queryElem) => isOpen$1(sandbox, sConfig, sState) && sState.get().exists(data => sConfig.isPartOf(sandbox, data, queryElem));
     const getState$2 = (_sandbox, _sConfig, sState) => sState.get();
     const store = (sandbox, cssKey, attr, newValue) => {
       getRaw(sandbox.element, cssKey).fold(() => {
-        remove$7(sandbox.element, attr);
+        remove$8(sandbox.element, attr);
       }, v => {
         set$9(sandbox.element, attr, v);
       });
       set$8(sandbox.element, cssKey, newValue);
     };
     const restore = (sandbox, cssKey, attr) => {
-      getOpt(sandbox.element, attr).fold(() => remove$6(sandbox.element, cssKey), oldValue => set$8(sandbox.element, cssKey, oldValue));
+      getOpt(sandbox.element, attr).fold(() => remove$7(sandbox.element, cssKey), oldValue => set$8(sandbox.element, cssKey, oldValue));
     };
     const cloak = (sandbox, sConfig, _sState) => {
       const sink = sConfig.getAttachPoint(sandbox);
       set$8(sandbox.element, 'position', Positioning.getMode(sink));
       store(sandbox, 'visibility', sConfig.cloakVisibilityAttr, 'hidden');
       'right',
       'bottom'
     ], pos => getRaw(element, pos).isSome());
     const decloak = (sandbox, sConfig, _sState) => {
       if (!hasPosition(sandbox.element)) {
-        remove$6(sandbox.element, 'position');
+        remove$7(sandbox.element, 'position');
+      }
       restore(sandbox, 'visibility', sConfig.cloakVisibilityAttr);
     };
         isPartOf: isPartOf,
         getState: getState$2,
         setContent: setContent
     });
-    const events$g = (sandboxConfig, sandboxState) => derive$2([run$1(sandboxClose(), (sandbox, _simulatedEvent) => {
+    const events$f = (sandboxConfig, sandboxState) => derive$2([run$1(sandboxClose(), (sandbox, _simulatedEvent) => {
         close$1(sandbox, sandboxConfig, sandboxState);
       })]);
     var ActiveSandbox = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        events: events$g
+        events: events$f
     });
     var SandboxSchema = [
       onHandler('onOpen'),
       onHandler('onClose'),
       required$1('isPartOf'),
       required$1('getAttachPoint'),
       defaulted('cloakVisibilityAttr', 'data-precloak-visibility')
     ];
-    const init$f = () => {
+    const init$e = () => {
-      const contents = value$2();
+      const contents = value$4();
       const readState = constant$1('not-implemented');
-      return nu$8({
+      return nu$7({
         readState,
         isOpen: contents.isSet,
         clear: contents.clear,
         set: contents.set,
         get: contents.get
       });
     };
     var SandboxState = /*#__PURE__*/Object.freeze({
         __proto__: null,
         setValue: setValue$3,
         getValue: getValue$3,
         getState: getState$1
     });
-    const events$f = (repConfig, repState) => {
+    const events$e = (repConfig, repState) => {
       const es = repConfig.resetOnDom ? [
         runOnAttached((comp, _se) => {
           onLoad$5(comp, repConfig, repState);
         }),
       return derive$2(es);
     };
     var ActiveRepresenting = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        events: events$f
+        events: events$e
     });
     const memory$1 = () => {
       });
       const isNotSet = () => data.get() === null;
       const clear = () => {
         data.set(null);
       };
-      return nu$8({
+      return nu$7({
         set: data.set,
         get: data.get,
         isNotSet,
         clear,
         readState
       });
     };
     const manual = () => {
       const readState = noop;
-      return nu$8({ readState });
+      return nu$7({ readState });
     };
     const dataset = () => {
       const dataByValue = Cell({});
       const dataByText = Cell({});
       const readState = () => ({
       });
       const clear = () => {
         dataByValue.set({});
         dataByText.set({});
       };
-      const lookup = itemString => get$g(dataByValue.get(), itemString).orThunk(() => get$g(dataByText.get(), itemString));
+      const lookup = itemString => get$h(dataByValue.get(), itemString).orThunk(() => get$h(dataByText.get(), itemString));
       const update = items => {
         const currentDataByValue = dataByValue.get();
         const currentDataByText = dataByText.get();
         const newDataByValue = {};
         const newDataByText = {};
         each$1(items, item => {
           newDataByValue[item.value] = item;
-          get$g(item, 'meta').each(meta => {
+          get$h(item, 'meta').each(meta => {
-            get$g(meta, 'text').each(text => {
+            get$h(meta, 'text').each(text => {
               newDataByText[text] = item;
             });
           });
         });
         dataByValue.set({
         dataByText.set({
           ...currentDataByText,
           ...newDataByText
         });
       };
-      return nu$8({
+      return nu$7({
         readState,
         lookup,
         update,
         clear
       });
     };
-    const init$e = spec => spec.store.manager.state(spec);
+    const init$d = spec => spec.store.manager.state(spec);
     var RepresentState = /*#__PURE__*/Object.freeze({
         __proto__: null,
         memory: memory$1,
         dataset: dataset,
         manual: manual,
-        init: init$e
+        init: init$d
     });
     const setValue$2 = (component, repConfig, repState, data) => {
       },
       state: RepresentState
     });
     const field = (name, forbidden) => defaultedObjOf(name, {}, map$2(forbidden, f => forbid(f.name(), 'Cannot configure ' + f.name() + ' for ' + name)).concat([customField('dump', identity)]));
-    const get$3 = data => data.dump;
+    const get$4 = data => data.dump;
     const augment = (data, original) => ({
       ...derive$1(original),
       ...data.dump
     });
     const SketchBehaviours = {
       field,
       augment,
-      get: get$3
+      get: get$4
     };
     const _placeholder = 'placeholder';
     const isSubstituted = spec => has$2(spec, 'uiType');
     const subPlaceholder = (owner, detail, compSpec, placeholders) => {
       if (owner.exists(o => o !== compSpec.owner)) {
         return adt$3.single(true, constant$1(compSpec));
+      }
-      return get$g(placeholders, compSpec.name).fold(() => {
+      return get$h(placeholders, compSpec.name).fold(() => {
         throw new Error('Unknown placeholder component: ' + compSpec.name + '\nKnown: [' + keys(placeholders) + ']\nNamespace: ' + owner.getOr('none') + '\nSpec: ' + JSON.stringify(compSpec, null, 2));
       }, newSpec => newSpec.replace());
     };
     const scan = (owner, detail, compSpec, placeholders) => {
       if (isSubstituted(compSpec) && compSpec.uiType === _placeholder) {
     };
     const substitute = (owner, detail, compSpec, placeholders) => {
       const base = scan(owner, detail, compSpec, placeholders);
       return base.fold((req, valueThunk) => {
         const value = isSubstituted(compSpec) ? valueThunk(detail, compSpec.config, compSpec.validated) : valueThunk(detail);
-        const childSpecs = get$g(value, 'components').getOr([]);
+        const childSpecs = get$h(value, 'components').getOr([]);
         const substituted = bind$3(childSpecs, c => substitute(owner, detail, c, placeholders));
         return [{
             ...value,
             components: substituted
           }];
         ...apis,
         ...extraApis
       };
     };
-    const inside = target => isTag('input')(target) && get$f(target, 'type') !== 'radio' || isTag('textarea')(target);
+    const inside = target => isTag('input')(target) && get$g(target, 'type') !== 'radio' || isTag('textarea')(target);
     const getCurrent = (component, composeConfig, _composeState) => composeConfig.find(component);
     const nativeIsDisabled = component => has$1(component.element, 'disabled');
     const nativeDisable = component => {
       set$9(component.element, 'disabled', 'disabled');
     };
     const nativeEnable = component => {
-      remove$7(component.element, 'disabled');
+      remove$8(component.element, 'disabled');
     };
-    const ariaIsDisabled = component => get$f(component.element, 'aria-disabled') === 'true';
+    const ariaIsDisabled = component => get$g(component.element, 'aria-disabled') === 'true';
     const ariaDisable = component => {
       set$9(component.element, 'aria-disabled', 'true');
     };
     const ariaEnable = component => {
       set$9(component.element, 'aria-disabled', 'false');
       f(component);
       disableConfig.onDisabled(component);
     };
     const enable = (component, disableConfig, _disableState) => {
       disableConfig.disableClass.each(disableClass => {
-        remove$2(component.element, disableClass);
+        remove$3(component.element, disableClass);
       });
       const f = hasNative(component, disableConfig) ? nativeEnable : ariaEnable;
       f(component);
       disableConfig.onEnabled(component);
     };
-    const isDisabled = (component, disableConfig) => hasNative(component, disableConfig) ? nativeIsDisabled(component) : ariaIsDisabled(component);
+    const isDisabled$1 = (component, disableConfig) => hasNative(component, disableConfig) ? nativeIsDisabled(component) : ariaIsDisabled(component);
     const set$4 = (component, disableConfig, disableState, disabled) => {
       const f = disabled ? disable : enable;
       f(component, disableConfig);
     };
     var DisableApis = /*#__PURE__*/Object.freeze({
         __proto__: null,
         enable: enable,
         disable: disable,
-        isDisabled: isDisabled,
+        isDisabled: isDisabled$1,
         onLoad: onLoad$1,
         set: set$4
     });
-    const exhibit$5 = (base, disableConfig) => nu$7({ classes: disableConfig.disabled() ? disableConfig.disableClass.toArray() : [] });
+    const exhibit$5 = (base, disableConfig) => nu$8({ classes: disableConfig.disabled() ? disableConfig.disableClass.toArray() : [] });
-    const events$e = (disableConfig, disableState) => derive$2([
+    const events$d = (disableConfig, disableState) => derive$2([
-      abort(execute$5(), (component, _simulatedEvent) => isDisabled(component, disableConfig)),
+      abort(execute$5(), (component, _simulatedEvent) => isDisabled$1(component, disableConfig)),
       loadEvent(disableConfig, disableState, onLoad$1)
     ]);
     var ActiveDisable = /*#__PURE__*/Object.freeze({
         __proto__: null,
         exhibit: exhibit$5,
-        events: events$e
+        events: events$d
     });
     const dehighlightAllExcept = (component, hConfig, hState, skip) => {
       const highlighted = descendants(component.element, '.' + hConfig.highlightClass);
       each$1(highlighted, h => {
         const shouldSkip = exists(skip, skipComp => eq(skipComp.element, h));
         if (!shouldSkip) {
-          remove$2(h, hConfig.highlightClass);
+          remove$3(h, hConfig.highlightClass);
           component.getSystem().getByDom(h).each(target => {
             hConfig.onDehighlight(component, target);
             emit(target, dehighlight$1());
           });
+        }
       });
     };
     const dehighlightAll = (component, hConfig, hState) => dehighlightAllExcept(component, hConfig, hState, []);
     const dehighlight = (component, hConfig, hState, target) => {
       if (isHighlighted(component, hConfig, hState, target)) {
-        remove$2(target.element, hConfig.highlightClass);
+        remove$3(target.element, hConfig.highlightClass);
         hConfig.onDehighlight(component, target);
         emit(target, dehighlight$1());
+      }
     };
     const highlight = (component, hConfig, hState, target) => {
         defaulted('useTabstopAt', always),
         option$3('visibilitySelector')
       ].concat([cyclicField]);
       const isVisible = (tabbingConfig, element) => {
         const target = tabbingConfig.visibilitySelector.bind(sel => closest$1(element, sel)).getOr(element);
-        return get$d(target) > 0;
+        return get$e(target) > 0;
       };
       const findInitial = (component, tabbingConfig) => {
         const tabstops = descendants(component.element, tabbingConfig.selector);
         const visibles = filter$2(tabstops, elem => isVisible(tabbingConfig, elem));
         return Optional.from(visibles[tabbingConfig.firstTabstop]);
       const goFromTabstop = (component, tabstops, stopIndex, tabbingConfig, cycle) => cycle(tabstops, stopIndex, elem => isTabstop(tabbingConfig, elem)).fold(() => tabbingConfig.cyclic ? Optional.some(true) : Optional.none(), target => {
         tabbingConfig.focusManager.set(component, target);
         return Optional.some(true);
       });
       const go = (component, _simulatedEvent, tabbingConfig, cycle) => {
-        const tabstops = descendants(component.element, tabbingConfig.selector);
+        const tabstops = filter$2(descendants(component.element, tabbingConfig.selector), element => isVisible(tabbingConfig, element));
         return findCurrent(component, tabbingConfig).bind(tabstop => {
           const optStopIndex = findIndex$1(tabstops, curry(eq, tabstop));
           return optStopIndex.bind(stopIndex => goFromTabstop(component, tabstops, stopIndex, tabbingConfig, cycle));
         });
       };
     };
     const getKeyupRules$5 = (component, _simulatedEvent, executeConfig, _executeState) => executeConfig.useSpace && !inside(component.element) ? [rule(inSet(SPACE), stopEventForFirefox)] : [];
     var ExecutionType = typical(schema$v, NoState.init, getKeydownRules$5, getKeyupRules$5, () => Optional.none());
     const flatgrid$1 = () => {
-      const dimensions = value$2();
+      const dimensions = value$4();
       const setGridSize = (numRows, numColumns) => {
         dimensions.set({
           numRows,
           numColumns
         });
       };
       const getNumRows = () => dimensions.get().map(d => d.numRows);
       const getNumColumns = () => dimensions.get().map(d => d.numColumns);
-      return nu$8({
+      return nu$7({
         readState: () => dimensions.get().map(d => ({
           numRows: String(d.numRows),
           numColumns: String(d.numColumns)
         })).getOr({
         setGridSize,
         getNumRows,
         getNumColumns
       });
     };
-    const init$d = spec => spec.state(spec);
+    const init$c = spec => spec.state(spec);
     var KeyingState = /*#__PURE__*/Object.freeze({
         __proto__: null,
         flatgrid: flatgrid$1,
-        init: init$d
+        init: init$c
     });
     const useH = movement => (component, simulatedEvent, config, state) => {
       defaulted('execute', defaultExecute),
       onKeyboardHandler('onEscape'),
       defaulted('captureTab', false),
       initSize()
     ];
-    const focusIn$3 = (component, gridConfig, _gridState) => {
+    const focusIn$4 = (component, gridConfig, _gridState) => {
       descendant(component.element, gridConfig.selector).each(first => {
         gridConfig.focusManager.set(component, first);
       });
     };
     const findCurrent$1 = (component, gridConfig) => gridConfig.focusManager.get(component).bind(elem => closest$1(elem, gridConfig.selector));
     ]);
     const getKeyupRules$4 = constant$1([
       rule(inSet(ESCAPE), doEscape$1),
       rule(inSet(SPACE), stopEventForFirefox)
     ]);
-    var FlatgridType = typical(schema$u, flatgrid$1, getKeydownRules$4, getKeyupRules$4, () => Optional.some(focusIn$3));
+    var FlatgridType = typical(schema$u, flatgrid$1, getKeydownRules$4, getKeyupRules$4, () => Optional.some(focusIn$4));
     const f = (container, selector, current, delta, getNewIndex) => {
-      const isDisabledButton = candidate => name$3(candidate) === 'button' && get$f(candidate, 'disabled') === 'disabled';
+      const isDisabledButton = candidate => name$3(candidate) === 'button' && get$g(candidate, 'disabled') === 'disabled';
       const tryNewIndex = (initial, index, candidates) => getNewIndex(initial, index, delta, 0, candidates.length - 1, candidates[index], newIndex => isDisabledButton(candidates[newIndex]) ? tryNewIndex(initial, newIndex, candidates) : Optional.from(candidates[newIndex]));
       return locateVisible(container, current, selector).bind(identified => {
         const index = identified.index;
         const candidates = identified.candidates;
       defaulted('allowHorizontal', true),
       defaulted('cycles', true)
     ];
     const findCurrent = (component, flowConfig) => flowConfig.focusManager.get(component).bind(elem => closest$1(elem, flowConfig.selector));
     const execute$2 = (component, simulatedEvent, flowConfig) => findCurrent(component, flowConfig).bind(focused => flowConfig.execute(component, simulatedEvent, focused));
-    const focusIn$2 = (component, flowConfig, _state) => {
+    const focusIn$3 = (component, flowConfig, _state) => {
       flowConfig.getInitial(component).orThunk(() => descendant(component.element, flowConfig.selector)).each(first => {
         flowConfig.focusManager.set(component, first);
       });
     };
     const moveLeft$2 = (element, focused, info) => (info.cycles ? horizontal : horizontalWithoutCycles)(element, info.selector, focused, -1);
     };
     const getKeyupRules$3 = constant$1([
       rule(inSet(SPACE), stopEventForFirefox),
       rule(inSet(ESCAPE), doEscape)
     ]);
-    var FlowType = typical(schema$t, NoState.init, getKeydownRules$3, getKeyupRules$3, () => Optional.some(focusIn$2));
+    var FlowType = typical(schema$t, NoState.init, getKeydownRules$3, getKeyupRules$3, () => Optional.some(focusIn$3));
     const toCell = (matrix, rowIndex, columnIndex) => Optional.from(matrix[rowIndex]).bind(row => Optional.from(row[columnIndex]).map(cell => ({
       rowIndex,
       columnIndex,
       ]),
       defaulted('cycles', true),
       defaulted('previousSelector', Optional.none),
       defaulted('execute', defaultExecute)
     ];
-    const focusIn$1 = (component, matrixConfig, _state) => {
+    const focusIn$2 = (component, matrixConfig, _state) => {
       const focused = matrixConfig.previousSelector(component).orThunk(() => {
         const selectors = matrixConfig.selectors;
         return descendant(component.element, selectors.cell);
       });
       focused.each(cell => {
       rule(inSet(UP), north$1(moveNorth)),
       rule(inSet(DOWN), south$1(moveSouth)),
       rule(inSet(SPACE.concat(ENTER)), execute$1)
     ]);
     const getKeyupRules$2 = constant$1([rule(inSet(SPACE), stopEventForFirefox)]);
-    var MatrixType = typical(schema$s, NoState.init, getKeydownRules$2, getKeyupRules$2, () => Optional.some(focusIn$1));
+    var MatrixType = typical(schema$s, NoState.init, getKeydownRules$2, getKeyupRules$2, () => Optional.some(focusIn$2));
     const schema$r = [
       required$1('selector'),
       defaulted('execute', defaultExecute),
       defaulted('moveOnTab', false)
     ];
     const execute = (component, simulatedEvent, menuConfig) => menuConfig.focusManager.get(component).bind(focused => menuConfig.execute(component, simulatedEvent, focused));
-    const focusIn = (component, menuConfig, _state) => {
+    const focusIn$1 = (component, menuConfig, _state) => {
       descendant(component.element, menuConfig.selector).each(first => {
         menuConfig.focusManager.set(component, first);
       });
     };
       ]), fireTab),
       rule(inSet(ENTER), execute),
       rule(inSet(SPACE), execute)
     ]);
     const getKeyupRules$1 = constant$1([rule(inSet(SPACE), stopEventForFirefox)]);
-    var MenuType = typical(schema$r, NoState.init, getKeydownRules$1, getKeyupRules$1, () => Optional.some(focusIn));
+    var MenuType = typical(schema$r, NoState.init, getKeydownRules$1, getKeyupRules$1, () => Optional.some(focusIn$1));
     const schema$q = [
       onKeyboardHandler('onSpace'),
       onKeyboardHandler('onEnter'),
       insert(component, append$2, appendee);
     };
     const prepend = (component, replaceConfig, replaceState, prependee) => {
       insert(component, prepend$1, prependee);
     };
-    const remove = (component, replaceConfig, replaceState, removee) => {
+    const remove$1 = (component, replaceConfig, replaceState, removee) => {
       const children = contents(component);
       const foundChild = find$5(children, child => eq(removee.element, child.element));
       foundChild.each(detach);
     };
     const contents = (component, _replaceConfig) => component.components();
     var ReplaceApis = /*#__PURE__*/Object.freeze({
         __proto__: null,
         append: append,
         prepend: prepend,
-        remove: remove,
+        remove: remove$1,
         replaceAt: replaceAt,
         replaceBy: replaceBy,
         set: set$3,
         contents: contents
       fields: [defaultedBoolean('reuseDom', true)],
       name: 'replacing',
       apis: ReplaceApis
     });
-    const events$d = (name, eventHandlers) => {
+    const events$c = (name, eventHandlers) => {
       const events = derive$2(eventHandlers);
       return create$4({
         fields: [required$1('enabled')],
         name,
         active: { events: constant$1(events) }
       });
     };
     const config = (name, eventHandlers) => {
-      const me = events$d(name, eventHandlers);
+      const me = events$c(name, eventHandlers);
       return {
         key: name,
         value: {
           config: {},
         isFocused: isFocused
     });
     const exhibit$4 = (base, focusConfig) => {
       const mod = focusConfig.ignore ? {} : { attributes: { tabindex: '-1' } };
-      return nu$7(mod);
+      return nu$8(mod);
     };
-    const events$c = focusConfig => derive$2([run$1(focus$4(), (component, simulatedEvent) => {
+    const events$b = focusConfig => derive$2([run$1(focus$4(), (component, simulatedEvent) => {
         focus$2(component, focusConfig);
         simulatedEvent.stop();
       })].concat(focusConfig.stopMousedown ? [run$1(mousedown(), (_, simulatedEvent) => {
         simulatedEvent.event.prevent();
       })] : []));
     var ActiveFocus = /*#__PURE__*/Object.freeze({
         __proto__: null,
         exhibit: exhibit$4,
-        events: events$c
+        events: events$b
     });
     const updateClass = (component, toggleConfig, toggleState) => {
       toggleConfig.toggleClass.each(toggleClass => {
         if (toggleState.get()) {
           add$2(component.element, toggleClass);
         } else {
-          remove$2(component.element, toggleClass);
+          remove$3(component.element, toggleClass);
+        }
       });
     };
     const set$2 = (component, toggleConfig, toggleState, state) => {
       const initialState = toggleState.get();
         on: on,
         off: off,
         set: set$2
     });
-    const exhibit$3 = () => nu$7({});
+    const exhibit$3 = () => nu$8({});
-    const events$b = (toggleConfig, toggleState) => {
+    const events$a = (toggleConfig, toggleState) => {
       const execute = executeEvent(toggleConfig, toggleState, toggle$2);
       const load = loadEvent(toggleConfig, toggleState, onLoad);
       return derive$2(flatten([
         toggleConfig.toggleOnExecute ? [execute] : [],
     };
     var ActiveToggle = /*#__PURE__*/Object.freeze({
         __proto__: null,
         exhibit: exhibit$3,
-        events: events$b
+        events: events$a
     });
     const updatePressed = (component, ariaInfo, status) => {
         run$1(tap(), onClick),
         cutter(touchstart()),
         cutter(mousedown())
       ];
     };
-    const events$a = optAction => {
+    const events$9 = optAction => {
       const executeHandler = action => runOnExecute$1((component, simulatedEvent) => {
         action(component);
         simulatedEvent.stop();
       });
       return derive$2(flatten([
     };
     const hover = constant$1(hoverEvent);
     const focus$1 = constant$1(focusEvent);
     const toggled = constant$1(toggledEvent);
-    const getItemRole = detail => detail.toggling.map(toggling => toggling.exclusive ? 'menuitemradio' : 'menuitemcheckbox').getOr('menuitem');
+    const getItemRole = detail => detail.role.fold(() => detail.toggling.map(toggling => toggling.exclusive ? 'menuitemradio' : 'menuitemcheckbox').getOr('menuitem'), identity);
-    const getTogglingSpec = tConfig => ({
+    const getTogglingSpec = (tConfig, isOption) => ({
-      aria: { mode: 'checked' },
+      aria: { mode: isOption ? 'selected' : 'checked' },
       ...filter$1(tConfig, (_value, name) => name !== 'exclusive'),
       onToggled: (component, state) => {
         if (isFunction(tConfig.onToggled)) {
           tConfig.onToggled(component, state);
           'aria-haspopup': detail.hasSubmenu,
           ...detail.hasSubmenu ? { 'aria-expanded': false } : {}
+        }
       },
       behaviours: SketchBehaviours.augment(detail.itemBehaviours, [
-        detail.toggling.fold(Toggling.revoke, tConfig => Toggling.config(getTogglingSpec(tConfig))),
+        detail.toggling.fold(Toggling.revoke, tConfig => Toggling.config(getTogglingSpec(tConfig, detail.role.exists(role => role === 'option')))),
         Focusing.config({
           ignore: detail.ignoreFocus,
           stopMousedown: detail.ignoreFocus,
           onFocus: component => {
             onFocus$1(component);
       required$1('data'),
       required$1('components'),
       required$1('dom'),
       defaulted('hasSubmenu', false),
       option$3('toggling'),
+      option$3('role'),
       SketchBehaviours.field('itemBehaviours', [
         Toggling,
         Focusing,
         Keying,
         Representing
             domModification: { classes: [detail.markers.item] }
           };
+        }
       })]);
     const schema$m = constant$1([
+      optionString('role'),
       required$1('value'),
       required$1('items'),
       required$1('dom'),
       required$1('components'),
       defaulted('eventOrder', {}),
       })),
       itemMarkers(),
       defaulted('fakeFocus', false),
       defaulted('focusManager', dom$2()),
       onHandler('onHighlight'),
-      onHandler('onDehighlight')
+      onHandler('onDehighlight'),
+      defaulted('showMenuRole', true)
     ]);
     const focus = constant$1('alloy.menu-focus');
           const item = simulatedEvent.event.item;
           Highlighting.highlight(menu, item);
         }),
         run$1(toggled(), (menu, simulatedEvent) => {
           const {item, state} = simulatedEvent.event;
-          if (state && get$f(item.element, 'role') === 'menuitemradio') {
+          if (state && get$g(item.element, 'role') === 'menuitemradio') {
             deselectOtherRadioItems(menu, item);
+          }
         })
       ]),
       components,
       eventOrder: detail.eventOrder,
-      domModification: { attributes: { role: 'menu' } }
+      ...detail.showMenuRole ? { domModification: { attributes: { role: detail.role.getOr('menu') } } } : {}
     });
     const Menu = composite({
       name: 'Menu',
     const transpose$1 = obj => tupleMap(obj, (v, k) => ({
       k: v,
       v: k
     }));
-    const trace = (items, byItem, byMenu, finish) => get$g(byMenu, finish).bind(triggerItem => get$g(items, triggerItem).bind(triggerMenu => {
+    const trace = (items, byItem, byMenu, finish) => get$h(byMenu, finish).bind(triggerItem => get$h(items, triggerItem).bind(triggerMenu => {
       const rest = trace(items, byItem, byMenu, triggerMenu);
       return Optional.some([triggerMenu].concat(rest));
     })).getOr([]);
     const generate$2 = (menus, expansions) => {
         });
       });
       const byItem = expansions;
       const byMenu = transpose$1(expansions);
       const menuPaths = map$1(byMenu, (_triggerItem, submenu) => [submenu].concat(trace(items, byItem, byMenu, submenu)));
-      return map$1(items, menu => get$g(menuPaths, menu).getOr([menu]));
+      return map$1(items, menu => get$h(menuPaths, menu).getOr([menu]));
     };
-    const init$c = () => {
+    const init$b = () => {
       const expansions = Cell({});
       const menus = Cell({});
       const paths = Cell({});
-      const primary = value$2();
+      const primary = value$4();
       const directory = Cell({});
       const clear = () => {
         expansions.set({});
         menus.set({});
         triggeringItem: triggeredItem,
         triggeringPath: path
       }))));
       const getTriggeringPath = (itemValue, getItemByValue) => {
         const extraPath = filter$2(lookupItem(itemValue).toArray(), menuValue => getPreparedMenu(menuValue).isSome());
-        return get$g(paths.get(), itemValue).bind(path => {
+        return get$h(paths.get(), itemValue).bind(path => {
           const revPath = reverse(extraPath.concat(path));
           const triggers = bind$3(revPath, (menuValue, menuIndex) => getTriggerData(menuValue, getItemByValue, revPath.slice(0, menuIndex + 1)).fold(() => is$1(primary.get(), menuValue) ? [] : [Optional.none()], data => [Optional.some(data)]));
           return sequence(triggers);
         });
       };
-      const expand = itemValue => get$g(expansions.get(), itemValue).map(menu => {
+      const expand = itemValue => get$h(expansions.get(), itemValue).map(menu => {
-        const current = get$g(paths.get(), itemValue).getOr([]);
+        const current = get$h(paths.get(), itemValue).getOr([]);
         return [menu].concat(current);
       });
-      const collapse = itemValue => get$g(paths.get(), itemValue).bind(path => path.length > 1 ? Optional.some(path.slice(1)) : Optional.none());
+      const collapse = itemValue => get$h(paths.get(), itemValue).bind(path => path.length > 1 ? Optional.some(path.slice(1)) : Optional.none());
-      const refresh = itemValue => get$g(paths.get(), itemValue);
+      const refresh = itemValue => get$h(paths.get(), itemValue);
       const getPreparedMenu = menuValue => lookupMenu(menuValue).bind(extractPreparedMenu);
-      const lookupMenu = menuValue => get$g(menus.get(), menuValue);
+      const lookupMenu = menuValue => get$h(menus.get(), menuValue);
-      const lookupItem = itemValue => get$g(expansions.get(), itemValue);
+      const lookupItem = itemValue => get$h(expansions.get(), itemValue);
       const otherMenus = path => {
         const menuValues = directory.get();
         return difference(keys(menuValues), path);
       };
       const getPrimary = () => primary.get().bind(getPreparedMenu);
         getTriggeringPath
       };
     };
     const extractPreparedMenu = prep => prep.type === 'prepared' ? Optional.some(prep.menu) : Optional.none();
     const LayeredState = {
-      init: init$c,
+      init: init$b,
       extractPreparedMenu
     };
     const onMenuItemHighlightedEvent = generate$6('tiered-menu-item-highlight');
       HighlightOnOpen[HighlightOnOpen['HighlightJustMenu'] = 1] = 'HighlightJustMenu';
       HighlightOnOpen[HighlightOnOpen['HighlightNone'] = 2] = 'HighlightNone';
     }(HighlightOnOpen || (HighlightOnOpen = {})));
     const make$6 = (detail, _rawUiSpec) => {
-      const submenuParentItems = value$2();
+      const submenuParentItems = value$4();
       const buildMenus = (container, primaryName, menus) => map$1(menus, (spec, name) => {
         const makeSketch = () => Menu.sketch({
           ...spec,
           value: name,
       };
       const getMenus = (state, menuValues) => cat(map$2(menuValues, mv => state.lookupMenu(mv).bind(prep => prep.type === 'prepared' ? Optional.some(prep.menu) : Optional.none())));
       const closeOthers = (container, state, path) => {
         const others = getMenus(state, state.otherMenus(path));
         each$1(others, o => {
-          remove$1(o.element, [detail.markers.backgroundMenu]);
+          remove$2(o.element, [detail.markers.backgroundMenu]);
           if (!detail.stayInDom) {
             Replacing.remove(container, o);
+          }
         });
       };
       const getSubmenuParents = container => submenuParentItems.get().getOrThunk(() => {
         const r = {};
         const items = descendants(container.element, `.${ detail.markers.item }`);
-        const parentItems = filter$2(items, i => get$f(i, 'aria-haspopup') === 'true');
+        const parentItems = filter$2(items, i => get$g(i, 'aria-haspopup') === 'true');
         each$1(parentItems, i => {
           container.getSystem().getByDom(i).each(itemComp => {
             const key = getItemValue(itemComp);
             r[key] = itemComp;
           });
             add$2(r.element, detail.markers.backgroundMenu);
           });
           if (!inBody(activeMenu.element)) {
             Replacing.append(container, premade(activeMenu));
+          }
-          remove$1(activeMenu.element, [detail.markers.backgroundMenu]);
+          remove$2(activeMenu.element, [detail.markers.backgroundMenu]);
           setActiveMenuAndItem(container, activeMenu);
           closeOthers(container, state, path);
           return Optional.some(activeMenu);
+        }
       }));
       const highlightPrimary = container => {
         layeredState.getPrimary().each(primary => {
           setActiveMenuAndItem(container, primary);
         });
       };
-      const extractMenuFromContainer = container => Optional.from(container.components()[0]).filter(comp => get$f(comp.element, 'role') === 'menu');
+      const extractMenuFromContainer = container => Optional.from(container.components()[0]).filter(comp => get$g(comp.element, 'role') === 'menu');
       const repositionMenus = container => {
         const maybeActivePrimary = layeredState.getPrimary().bind(primary => getActiveItem(container).bind(currentItem => {
           const itemValue = getItemValue(currentItem);
           const allMenus = values(layeredState.getMenus());
           const preparedMenus = cat(map$2(allMenus, LayeredState.extractPreparedMenu));
+      }
     });
+    var global$9 = tinymce.util.Tools.resolve('tinymce.util.Delay');
+    var global$8 = tinymce.util.Tools.resolve('tinymce.dom.DOMUtils');
+    var global$7 = tinymce.util.Tools.resolve('tinymce.EditorManager');
+    var global$6 = tinymce.util.Tools.resolve('tinymce.Env');
+    var ToolbarMode$1;
+    (function (ToolbarMode) {
+      ToolbarMode['default'] = 'wrap';
+      ToolbarMode['floating'] = 'floating';
+      ToolbarMode['sliding'] = 'sliding';
+      ToolbarMode['scrolling'] = 'scrolling';
+    }(ToolbarMode$1 || (ToolbarMode$1 = {})));
+    var ToolbarLocation$1;
+    (function (ToolbarLocation) {
+      ToolbarLocation['auto'] = 'auto';
+      ToolbarLocation['top'] = 'top';
+      ToolbarLocation['bottom'] = 'bottom';
+    }(ToolbarLocation$1 || (ToolbarLocation$1 = {})));
+    const option$2 = name => editor => editor.options.get(name);
+    const wrapOptional = fn => editor => Optional.from(fn(editor));
+    const register$f = editor => {
+      const isPhone = global$6.deviceType.isPhone();
+      const isMobile = global$6.deviceType.isTablet() || isPhone;
+      const registerOption = editor.options.register;
+      const stringOrFalseProcessor = value => isString(value) || value === false;
+      const stringOrNumberProcessor = value => isString(value) || isNumber(value);
+      registerOption('skin', {
+        processor: value => isString(value) || value === false,
+        default: 'oxide'
+      });
+      registerOption('skin_url', { processor: 'string' });
+      registerOption('height', {
+        processor: stringOrNumberProcessor,
+        default: Math.max(editor.getElement().offsetHeight, 400)
+      });
+      registerOption('width', {
+        processor: stringOrNumberProcessor,
+        default: global$8.DOM.getStyle(editor.getElement(), 'width')
+      });
+      registerOption('min_height', {
+        processor: 'number',
+        default: 100
+      });
+      registerOption('min_width', { processor: 'number' });
+      registerOption('max_height', { processor: 'number' });
+      registerOption('max_width', { processor: 'number' });
+      registerOption('style_formats', { processor: 'object[]' });
+      registerOption('style_formats_merge', {
+        processor: 'boolean',
+        default: false
+      });
+      registerOption('style_formats_autohide', {
+        processor: 'boolean',
+        default: false
+      });
+      registerOption('line_height_formats', {
+        processor: 'string',
+        default: '1 1.1 1.2 1.3 1.4 1.5 2'
+      });
+      registerOption('font_family_formats', {
+        processor: 'string',
+        default: 'Andale Mono=andale mono,monospace;' + 'Arial=arial,helvetica,sans-serif;' + 'Arial Black=arial black,sans-serif;' + 'Book Antiqua=book antiqua,palatino,serif;' + 'Comic Sans MS=comic sans ms,sans-serif;' + 'Courier New=courier new,courier,monospace;' + 'Georgia=georgia,palatino,serif;' + 'Helvetica=helvetica,arial,sans-serif;' + 'Impact=impact,sans-serif;' + 'Symbol=symbol;' + 'Tahoma=tahoma,arial,helvetica,sans-serif;' + 'Terminal=terminal,monaco,monospace;' + 'Times New Roman=times new roman,times,serif;' + 'Trebuchet MS=trebuchet ms,geneva,sans-serif;' + 'Verdana=verdana,geneva,sans-serif;' + 'Webdings=webdings;' + 'Wingdings=wingdings,zapf dingbats'
+      });
+      registerOption('font_size_formats', {
+        processor: 'string',
+        default: '8pt 10pt 12pt 14pt 18pt 24pt 36pt'
+      });
+      registerOption('font_size_input_default_unit', {
+        processor: 'string',
+        default: 'pt'
+      });
+      registerOption('block_formats', {
+        processor: 'string',
+        default: 'Paragraph=p;' + 'Heading 1=h1;' + 'Heading 2=h2;' + 'Heading 3=h3;' + 'Heading 4=h4;' + 'Heading 5=h5;' + 'Heading 6=h6;' + 'Preformatted=pre'
+      });
+      registerOption('content_langs', { processor: 'object[]' });
+      registerOption('removed_menuitems', {
+        processor: 'string',
+        default: ''
+      });
+      registerOption('menubar', {
+        processor: value => isString(value) || isBoolean(value),
+        default: !isPhone
+      });
+      registerOption('menu', {
+        processor: 'object',
+        default: {}
+      });
+      registerOption('toolbar', {
+        processor: value => {
+          if (isBoolean(value) || isString(value) || isArray(value)) {
+            return {
+              value,
+              valid: true
+            };
+          } else {
+            return {
+              valid: false,
+              message: 'Must be a boolean, string or array.'
+            };
+          }
+        },
+        default: true
+      });
+      range$2(9, num => {
+        registerOption('toolbar' + (num + 1), { processor: 'string' });
+      });
+      registerOption('toolbar_mode', {
+        processor: 'string',
+        default: isMobile ? 'scrolling' : 'floating'
+      });
+      registerOption('toolbar_groups', {
+        processor: 'object',
+        default: {}
+      });
+      registerOption('toolbar_location', {
+        processor: 'string',
+        default: ToolbarLocation$1.auto
+      });
+      registerOption('toolbar_persist', {
+        processor: 'boolean',
+        default: false
+      });
+      registerOption('toolbar_sticky', {
+        processor: 'boolean',
+        default: editor.inline
+      });
+      registerOption('toolbar_sticky_offset', {
+        processor: 'number',
+        default: 0
+      });
+      registerOption('fixed_toolbar_container', {
+        processor: 'string',
+        default: ''
+      });
+      registerOption('fixed_toolbar_container_target', { processor: 'object' });
+      registerOption('ui_mode', {
+        processor: 'string',
+        default: 'combined'
+      });
+      registerOption('file_picker_callback', { processor: 'function' });
+      registerOption('file_picker_validator_handler', { processor: 'function' });
+      registerOption('file_picker_types', { processor: 'string' });
+      registerOption('typeahead_urls', {
+        processor: 'boolean',
+        default: true
+      });
+      registerOption('anchor_top', {
+        processor: stringOrFalseProcessor,
+        default: '#top'
+      });
+      registerOption('anchor_bottom', {
+        processor: stringOrFalseProcessor,
+        default: '#bottom'
+      });
+      registerOption('draggable_modal', {
+        processor: 'boolean',
+        default: false
+      });
+      registerOption('statusbar', {
+        processor: 'boolean',
+        default: true
+      });
+      registerOption('elementpath', {
+        processor: 'boolean',
+        default: true
+      });
+      registerOption('branding', {
+        processor: 'boolean',
+        default: true
+      });
+      registerOption('promotion', {
+        processor: 'boolean',
+        default: true
+      });
+      registerOption('resize', {
+        processor: value => value === 'both' || isBoolean(value),
+        default: !global$6.deviceType.isTouch()
+      });
+      registerOption('sidebar_show', { processor: 'string' });
+      registerOption('help_accessibility', {
+        processor: 'boolean',
+        default: editor.hasPlugin('help')
+      });
+      registerOption('default_font_stack', {
+        processor: 'string[]',
+        default: []
+      });
+    };
+    const isReadOnly = option$2('readonly');
+    const isDisabled = option$2('disabled');
+    const getHeightOption = option$2('height');
+    const getWidthOption = option$2('width');
+    const getMinWidthOption = wrapOptional(option$2('min_width'));
+    const getMinHeightOption = wrapOptional(option$2('min_height'));
+    const getMaxWidthOption = wrapOptional(option$2('max_width'));
+    const getMaxHeightOption = wrapOptional(option$2('max_height'));
+    const getUserStyleFormats = wrapOptional(option$2('style_formats'));
+    const shouldMergeStyleFormats = option$2('style_formats_merge');
+    const shouldAutoHideStyleFormats = option$2('style_formats_autohide');
+    const getContentLanguages = option$2('content_langs');
+    const getRemovedMenuItems = option$2('removed_menuitems');
+    const getToolbarMode = option$2('toolbar_mode');
+    const getToolbarGroups = option$2('toolbar_groups');
+    const getToolbarLocation = option$2('toolbar_location');
+    const fixedContainerSelector = option$2('fixed_toolbar_container');
+    const fixedToolbarContainerTarget = option$2('fixed_toolbar_container_target');
+    const isToolbarPersist = option$2('toolbar_persist');
+    const getStickyToolbarOffset = option$2('toolbar_sticky_offset');
+    const getMenubar = option$2('menubar');
+    const getToolbar = option$2('toolbar');
+    const getFilePickerCallback = option$2('file_picker_callback');
+    const getFilePickerValidatorHandler = option$2('file_picker_validator_handler');
+    const getFontSizeInputDefaultUnit = option$2('font_size_input_default_unit');
+    const getFilePickerTypes = option$2('file_picker_types');
+    const useTypeaheadUrls = option$2('typeahead_urls');
+    const getAnchorTop = option$2('anchor_top');
+    const getAnchorBottom = option$2('anchor_bottom');
+    const isDraggableModal$1 = option$2('draggable_modal');
+    const useStatusBar = option$2('statusbar');
+    const useElementPath = option$2('elementpath');
+    const useBranding = option$2('branding');
+    const getResize = option$2('resize');
+    const getPasteAsText = option$2('paste_as_text');
+    const getSidebarShow = option$2('sidebar_show');
+    const promotionEnabled = option$2('promotion');
+    const useHelpAccessibility = option$2('help_accessibility');
+    const getDefaultFontStack = option$2('default_font_stack');
+    const getSkin = option$2('skin');
+    const isSkinDisabled = editor => editor.options.get('skin') === false;
+    const isMenubarEnabled = editor => editor.options.get('menubar') !== false;
+    const getSkinUrl = editor => {
+      const skinUrl = editor.options.get('skin_url');
+      if (isSkinDisabled(editor)) {
+        return skinUrl;
+      } else {
+        if (skinUrl) {
+          return editor.documentBaseURI.toAbsolute(skinUrl);
+        } else {
+          const skin = editor.options.get('skin');
+          return global$7.baseURL + '/skins/ui/' + skin;
+        }
+      }
+    };
+    const getSkinUrlOption = editor => Optional.from(editor.options.get('skin_url'));
+    const getLineHeightFormats = editor => editor.options.get('line_height_formats').split(' ');
+    const isToolbarEnabled = editor => {
+      const toolbar = getToolbar(editor);
+      const isToolbarString = isString(toolbar);
+      const isToolbarObjectArray = isArray(toolbar) && toolbar.length > 0;
+      return !isMultipleToolbars(editor) && (isToolbarObjectArray || isToolbarString || toolbar === true);
+    };
+    const getMultipleToolbarsOption = editor => {
+      const toolbars = range$2(9, num => editor.options.get('toolbar' + (num + 1)));
+      const toolbarArray = filter$2(toolbars, isString);
+      return someIf(toolbarArray.length > 0, toolbarArray);
+    };
+    const isMultipleToolbars = editor => getMultipleToolbarsOption(editor).fold(() => {
+      const toolbar = getToolbar(editor);
+      return isArrayOf(toolbar, isString) && toolbar.length > 0;
+    }, always);
+    const isToolbarLocationBottom = editor => getToolbarLocation(editor) === ToolbarLocation$1.bottom;
+    const fixedContainerTarget = editor => {
+      var _a;
+      if (!editor.inline) {
+        return Optional.none();
+      }
+      const selector = (_a = fixedContainerSelector(editor)) !== null && _a !== void 0 ? _a : '';
+      if (selector.length > 0) {
+        return descendant(body(), selector);
+      }
+      const element = fixedToolbarContainerTarget(editor);
+      if (isNonNullable(element)) {
+        return Optional.some(SugarElement.fromDom(element));
+      }
+      return Optional.none();
+    };
+    const useFixedContainer = editor => editor.inline && fixedContainerTarget(editor).isSome();
+    const getUiContainer = editor => {
+      const fixedContainer = fixedContainerTarget(editor);
+      return fixedContainer.getOrThunk(() => getContentContainer(getRootNode(SugarElement.fromDom(editor.getElement()))));
+    };
+    const isDistractionFree = editor => editor.inline && !isMenubarEnabled(editor) && !isToolbarEnabled(editor) && !isMultipleToolbars(editor);
+    const isStickyToolbar = editor => {
+      const isStickyToolbar = editor.options.get('toolbar_sticky');
+      return (isStickyToolbar || editor.inline) && !useFixedContainer(editor) && !isDistractionFree(editor);
+    };
+    const isSplitUiMode = editor => !useFixedContainer(editor) && editor.options.get('ui_mode') === 'split';
+    const getMenus = editor => {
+      const menu = editor.options.get('menu');
+      return map$1(menu, menu => ({
+        ...menu,
+        items: menu.items
+      }));
+    };
+    var Options = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        get ToolbarMode () { return ToolbarMode$1; },
+        get ToolbarLocation () { return ToolbarLocation$1; },
+        register: register$f,
+        getSkinUrl: getSkinUrl,
+        getSkinUrlOption: getSkinUrlOption,
+        isReadOnly: isReadOnly,
+        isDisabled: isDisabled,
+        getSkin: getSkin,
+        isSkinDisabled: isSkinDisabled,
+        getHeightOption: getHeightOption,
+        getWidthOption: getWidthOption,
+        getMinWidthOption: getMinWidthOption,
+        getMinHeightOption: getMinHeightOption,
+        getMaxWidthOption: getMaxWidthOption,
+        getMaxHeightOption: getMaxHeightOption,
+        getUserStyleFormats: getUserStyleFormats,
+        shouldMergeStyleFormats: shouldMergeStyleFormats,
+        shouldAutoHideStyleFormats: shouldAutoHideStyleFormats,
+        getLineHeightFormats: getLineHeightFormats,
+        getContentLanguages: getContentLanguages,
+        getRemovedMenuItems: getRemovedMenuItems,
+        isMenubarEnabled: isMenubarEnabled,
+        isMultipleToolbars: isMultipleToolbars,
+        isToolbarEnabled: isToolbarEnabled,
+        isToolbarPersist: isToolbarPersist,
+        getMultipleToolbarsOption: getMultipleToolbarsOption,
+        getUiContainer: getUiContainer,
+        useFixedContainer: useFixedContainer,
+        isSplitUiMode: isSplitUiMode,
+        getToolbarMode: getToolbarMode,
+        isDraggableModal: isDraggableModal$1,
+        isDistractionFree: isDistractionFree,
+        isStickyToolbar: isStickyToolbar,
+        getStickyToolbarOffset: getStickyToolbarOffset,
+        getToolbarLocation: getToolbarLocation,
+        isToolbarLocationBottom: isToolbarLocationBottom,
+        getToolbarGroups: getToolbarGroups,
+        getMenus: getMenus,
+        getMenubar: getMenubar,
+        getToolbar: getToolbar,
+        getFilePickerCallback: getFilePickerCallback,
+        getFilePickerTypes: getFilePickerTypes,
+        useTypeaheadUrls: useTypeaheadUrls,
+        getAnchorTop: getAnchorTop,
+        getAnchorBottom: getAnchorBottom,
+        getFilePickerValidatorHandler: getFilePickerValidatorHandler,
+        getFontSizeInputDefaultUnit: getFontSizeInputDefaultUnit,
+        useStatusBar: useStatusBar,
+        useElementPath: useElementPath,
+        promotionEnabled: promotionEnabled,
+        useBranding: useBranding,
+        getResize: getResize,
+        getPasteAsText: getPasteAsText,
+        getSidebarShow: getSidebarShow,
+        useHelpAccessibility: useHelpAccessibility,
+        getDefaultFontStack: getDefaultFontStack
+    });
+    const nonScrollingOverflows = [
+      'visible',
+      'hidden',
+      'clip'
+    ];
+    const isScrollingOverflowValue = value => trim$1(value).length > 0 && !contains$2(nonScrollingOverflows, value);
+    const isScroller = elem => {
+      if (isHTMLElement(elem)) {
+        const overflowX = get$f(elem, 'overflow-x');
+        const overflowY = get$f(elem, 'overflow-y');
+        return isScrollingOverflowValue(overflowX) || isScrollingOverflowValue(overflowY);
+      } else {
+        return false;
+      }
+    };
+    const isFullscreen = editor => editor.plugins.fullscreen && editor.plugins.fullscreen.isFullscreen();
+    const detect = (editor, popupSinkElem) => {
+      const ancestorsScrollers = ancestors(popupSinkElem, isScroller);
+      const scrollers = ancestorsScrollers.length === 0 ? getShadowRoot(popupSinkElem).map(getShadowHost).map(x => ancestors(x, isScroller)).getOr([]) : ancestorsScrollers;
+      return head(scrollers).map(element => ({
+        element,
+        others: scrollers.slice(1),
+        isFullscreen: () => isFullscreen(editor)
+      }));
+    };
+    const detectWhenSplitUiMode = (editor, popupSinkElem) => isSplitUiMode(editor) ? detect(editor, popupSinkElem) : Optional.none();
+    const getBoundsFrom = sc => {
+      const scrollableBoxes = [
+        ...map$2(sc.others, box$1),
+        win()
+      ];
+      return sc.isFullscreen() ? win() : constrainByMany(box$1(sc.element), scrollableBoxes);
-    var global$9 = tinymce.util.Tools.resolve('tinymce.util.Delay');
+    };
     const factory$n = detail => {
-      const events = events$a(detail.action);
+      const events = events$9(detail.action);
       const tag = detail.dom.tag;
-      const lookupAttr = attr => get$g(detail.dom, 'attributes').bind(attrs => get$g(attrs, attr));
+      const lookupAttr = attr => get$h(detail.dom, 'attributes').bind(attrs => get$h(attrs, attr));
       const getModAttributes = () => {
         if (tag === 'button') {
           const type = lookupAttr('type').getOr('button');
     const fromHtml = html => {
       const elem = SugarElement.fromHtml(html);
       const children$1 = children(elem);
       const attrs = getAttrs(elem);
       const classes = getClasses(elem);
-      const contents = children$1.length === 0 ? {} : { innerHtml: get$9(elem) };
+      const contents = children$1.length === 0 ? {} : { innerHtml: get$8(elem) };
       return {
         tag: name$3(elem),
         classes,
         attributes: attrs,
         ...contents
         getOpt,
         asSpec
       };
     };
+    const exhibit$2 = (base, tabConfig) => nu$8({
+      attributes: wrapAll([{
+          key: tabConfig.tabAttr,
+          value: 'true'
+        }])
+    });
+    var ActiveTabstopping = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        exhibit: exhibit$2
+    });
+    var TabstopSchema = [defaulted('tabAttr', 'data-alloy-tabstop')];
+    const Tabstopping = create$4({
+      fields: TabstopSchema,
+      name: 'tabstopping',
+      active: ActiveTabstopping
+    });
+    const ExclusivityChannel = generate$6('tooltip.exclusive');
+    const ShowTooltipEvent = generate$6('tooltip.show');
+    const HideTooltipEvent = generate$6('tooltip.hide');
+    const ImmediateHideTooltipEvent = generate$6('tooltip.immediateHide');
+    const ImmediateShowTooltipEvent = generate$6('tooltip.immediateShow');
+    const hideAllExclusive = (component, _tConfig, _tState) => {
+      component.getSystem().broadcastOn([ExclusivityChannel], {});
+    };
+    const setComponents = (_component, _tConfig, tState, specs) => {
+      tState.getTooltip().each(tooltip => {
+        if (tooltip.getSystem().isConnected()) {
+          Replacing.set(tooltip, specs);
+        }
+      });
+    };
+    const isEnabled = (_component, _tConfig, tState) => tState.isEnabled();
+    const setEnabled = (_component, _tConfig, tState, enabled) => tState.setEnabled(enabled);
+    const immediateOpenClose = (component, _tConfig, _tState, open) => emit(component, open ? ImmediateShowTooltipEvent : ImmediateHideTooltipEvent);
+    var TooltippingApis = /*#__PURE__*/Object.freeze({
+        __proto__: null,
-    const {entries, setPrototypeOf, isFrozen, getPrototypeOf, getOwnPropertyDescriptor} = Object;
+        hideAllExclusive: hideAllExclusive,
+        immediateOpenClose: immediateOpenClose,
+        isEnabled: isEnabled,
+        setComponents: setComponents,
+        setEnabled: setEnabled
+    });
-    let {freeze, seal, create: create$1} = Object;
+    const events$8 = (tooltipConfig, state) => {
+      const hide = comp => {
+        state.getTooltip().each(p => {
-    let {apply, construct} = typeof Reflect !== 'undefined' && Reflect;
+          if (p.getSystem().isConnected()) {
-    if (!apply) {
+            detach(p);
+            tooltipConfig.onHide(comp, p);
+            state.clearTooltip();
+          }
-      apply = function apply(fun, thisValue, args) {
+        });
-        return fun.apply(thisValue, args);
+        state.clearTimer();
+      };
+      const show = comp => {
+        if (!state.isShowing() && state.isEnabled()) {
+          hideAllExclusive(comp);
+          const sink = tooltipConfig.lazySink(comp).getOrDie();
+          const popup = comp.getSystem().build({
+            dom: tooltipConfig.tooltipDom,
+            components: tooltipConfig.tooltipComponents,
+            events: derive$2(tooltipConfig.mode === 'normal' ? [
+              run$1(mouseover(), _ => {
+                emit(comp, ShowTooltipEvent);
+              }),
+              run$1(mouseout(), _ => {
+                emit(comp, HideTooltipEvent);
+              })
+            ] : []),
+            behaviours: derive$1([Replacing.config({})])
+          });
+          state.setTooltip(popup);
+          attach(sink, popup);
+          tooltipConfig.onShow(comp, popup);
+          Positioning.position(sink, popup, { anchor: tooltipConfig.anchor(comp) });
+        }
+      };
+      const reposition = comp => {
+        state.getTooltip().each(tooltip => {
+          const sink = tooltipConfig.lazySink(comp).getOrDie();
+          Positioning.position(sink, tooltip, { anchor: tooltipConfig.anchor(comp) });
+        });
+      };
+      const getEvents = () => {
+        switch (tooltipConfig.mode) {
+        case 'normal':
+          return [
+            run$1(focusin(), comp => {
+              emit(comp, ImmediateShowTooltipEvent);
+            }),
+            run$1(postBlur(), comp => {
+              emit(comp, ImmediateHideTooltipEvent);
+            }),
+            run$1(mouseover(), comp => {
+              emit(comp, ShowTooltipEvent);
+            }),
+            run$1(mouseout(), comp => {
+              emit(comp, HideTooltipEvent);
+            })
+          ];
+        case 'follow-highlight':
+          return [
+            run$1(highlight$1(), (comp, _se) => {
+              emit(comp, ShowTooltipEvent);
+            }),
+            run$1(dehighlight$1(), comp => {
+              emit(comp, HideTooltipEvent);
+            })
+          ];
+        case 'children-normal':
+          return [
+            run$1(focusin(), (comp, se) => {
+              search(comp.element).each(_ => {
+                if (is(se.event.target, '[data-mce-tooltip]')) {
+                  state.getTooltip().fold(() => {
+                    emit(comp, ImmediateShowTooltipEvent);
+                  }, tooltip => {
+                    if (state.isShowing()) {
+                      tooltipConfig.onShow(comp, tooltip);
+                      reposition(comp);
+                    }
+                  });
+                }
+              });
+            }),
+            run$1(postBlur(), comp => {
+              search(comp.element).fold(() => {
+                emit(comp, ImmediateHideTooltipEvent);
+              }, noop);
+            }),
+            run$1(mouseover(), comp => {
+              descendant(comp.element, '[data-mce-tooltip]:hover').each(_ => {
+                state.getTooltip().fold(() => {
+                  emit(comp, ShowTooltipEvent);
+                }, tooltip => {
+                  if (state.isShowing()) {
+                    tooltipConfig.onShow(comp, tooltip);
+                    reposition(comp);
+                  }
+                });
+              });
+            }),
+            run$1(mouseout(), comp => {
+              descendant(comp.element, '[data-mce-tooltip]:hover').fold(() => {
+                emit(comp, HideTooltipEvent);
+              }, noop);
+            })
+          ];
+        default:
+          return [
+            run$1(focusin(), (comp, se) => {
+              search(comp.element).each(_ => {
+                if (is(se.event.target, '[data-mce-tooltip]')) {
+                  state.getTooltip().fold(() => {
+                    emit(comp, ImmediateShowTooltipEvent);
+                  }, tooltip => {
+                    if (state.isShowing()) {
+                      tooltipConfig.onShow(comp, tooltip);
+                      reposition(comp);
+                    }
+                  });
+                }
+              });
+            }),
+            run$1(postBlur(), comp => {
+              search(comp.element).fold(() => {
+                emit(comp, ImmediateHideTooltipEvent);
+              }, noop);
+            })
+          ];
+        }
+      };
+      return derive$2(flatten([
+        [
+          runOnInit(component => {
+            tooltipConfig.onSetup(component);
+          }),
+          run$1(ShowTooltipEvent, comp => {
+            state.resetTimer(() => {
+              show(comp);
+            }, tooltipConfig.delayForShow());
+          }),
+          run$1(HideTooltipEvent, comp => {
+            state.resetTimer(() => {
+              hide(comp);
+            }, tooltipConfig.delayForHide());
+          }),
+          run$1(ImmediateShowTooltipEvent, comp => {
+            state.resetTimer(() => {
+              show(comp);
+            }, 0);
+          }),
+          run$1(ImmediateHideTooltipEvent, comp => {
+            state.resetTimer(() => {
+              hide(comp);
+            }, 0);
+          }),
+          run$1(receive(), (comp, message) => {
+            const receivingData = message;
+            if (!receivingData.universal) {
+              if (contains$2(receivingData.channels, ExclusivityChannel)) {
+                hide(comp);
+              }
+            }
+          }),
+          runOnDetached(comp => {
+            hide(comp);
+          })
+        ],
+        getEvents()
-      };
+      ]));
+    };
+    var ActiveTooltipping = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        events: events$8
+    });
+    var TooltippingSchema = [
+      required$1('lazySink'),
+      required$1('tooltipDom'),
+      defaulted('exclusive', true),
+      defaulted('tooltipComponents', []),
+      defaultedFunction('delayForShow', constant$1(300)),
+      defaultedFunction('delayForHide', constant$1(100)),
+      defaultedFunction('onSetup', noop),
+      defaultedStringEnum('mode', 'normal', [
+        'normal',
+        'follow-highlight',
+        'children-keyboard-focus',
+        'children-normal'
+      ]),
+      defaulted('anchor', comp => ({
+        type: 'hotspot',
+        hotspot: comp,
+        layouts: {
+          onLtr: constant$1([
+            south$2,
+            north$2,
+            southeast$2,
+            northeast$2,
+            southwest$2,
+            northwest$2
+          ]),
+          onRtl: constant$1([
+            south$2,
+            north$2,
+            southeast$2,
+            northeast$2,
+            southwest$2,
+            northwest$2
+          ])
+        },
+        bubble: nu$5(0, -2, {})
+      })),
+      onHandler('onHide'),
+      onHandler('onShow')
+    ];
+    const init$a = () => {
+      const enabled = Cell(true);
+      const timer = value$4();
+      const popup = value$4();
+      const clearTimer = () => {
+        timer.on(clearTimeout);
+      };
+      const resetTimer = (f, delay) => {
+        clearTimer();
+        timer.set(setTimeout(f, delay));
+      };
+      const readState = constant$1('not-implemented');
+      return nu$7({
+        getTooltip: popup.get,
+        isShowing: popup.isSet,
+        setTooltip: popup.set,
+        clearTooltip: popup.clear,
+        clearTimer,
+        resetTimer,
+        readState,
+        isEnabled: () => enabled.get(),
+        setEnabled: setToEnabled => enabled.set(setToEnabled)
+      });
+    };
+    var TooltippingState = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        init: init$a
+    });
+    const Tooltipping = create$4({
+      fields: TooltippingSchema,
+      name: 'tooltipping',
+      active: ActiveTooltipping,
+      state: TooltippingState,
+      apis: TooltippingApis
+    });
+    /*! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE */
+    const {
+      entries,
+      setPrototypeOf,
+      isFrozen,
+      getPrototypeOf,
+      getOwnPropertyDescriptor
+    } = Object;
+    let {
+      freeze,
+      seal,
+      create: create$1
+    } = Object; // eslint-disable-line import/no-mutable-exports
+    let {
+      apply,
+      construct
     } = typeof Reflect !== 'undefined' && Reflect;
     if (!freeze) {
       freeze = function freeze(x) {
         return x;
       };
+    }
     if (!seal) {
       seal = function seal(x) {
         return x;
       };
+    }
+    if (!apply) {
+      apply = function apply(fun, thisValue, args) {
+        return fun.apply(thisValue, args);
+      };
+    }
     if (!construct) {
       construct = function construct(Func, args) {
         return new Func(...args);
       };
+    }
+    const arrayForEach = unapply(Array.prototype.forEach);
-    const arrayForEach = unapply(Array.prototype.forEach);
+    const arrayLastIndexOf = unapply(Array.prototype.lastIndexOf);
     const arrayPop = unapply(Array.prototype.pop);
+    const arrayPush = unapply(Array.prototype.push);
-    const arrayPush = unapply(Array.prototype.push);
+    const arraySplice = unapply(Array.prototype.splice);
     const stringToLowerCase = unapply(String.prototype.toLowerCase);
     const stringToString = unapply(String.prototype.toString);
     const stringMatch = unapply(String.prototype.match);
     const stringReplace = unapply(String.prototype.replace);
     const stringIndexOf = unapply(String.prototype.indexOf);
+    const stringTrim = unapply(String.prototype.trim);
-    const stringTrim = unapply(String.prototype.trim);
+    const objectHasOwnProperty = unapply(Object.prototype.hasOwnProperty);
     const regExpTest = unapply(RegExp.prototype.test);
+    const typeErrorCreate = unconstruct(TypeError);
+    /**
+     * Creates a new function that calls the given function with a specified thisArg and arguments.
+     *
+     * @param func - The function to be wrapped and called.
+     * @returns A new function that calls the given function with a specified thisArg and arguments.
-    const typeErrorCreate = unconstruct(TypeError);
+     */
     function unapply(func) {
       return function (thisArg) {
         for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
           args[_key - 1] = arguments[_key];
+        }
         return apply(func, thisArg, args);
       };
+    }
+    /**
+     * Creates a new function that constructs an instance of the given constructor function with the provided arguments.
+     *
+     * @param func - The constructor function to be wrapped and called.
+     * @returns A new function that constructs an instance of the given constructor function with the provided arguments.
      */
     function unconstruct(func) {
       return function () {
         for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
           args[_key2] = arguments[_key2];
+        }
         return construct(func, args);
       };
+    }
+    /**
+     * Add properties to a lookup table
+     *
+     * @param set - The set to which elements will be added.
+     * @param array - The array containing elements to be added to the set.
-    }
+     * @param transformCaseFunc - An optional function to transform the case of each element before adding to the set.
+     * @returns The modified set with added elements.
-    function addToSet(set, array, transformCaseFunc) {
+     */
-      var _transformCaseFunc;
+    function addToSet(set, array) {
-      transformCaseFunc = (_transformCaseFunc = transformCaseFunc) !== null && _transformCaseFunc !== void 0 ? _transformCaseFunc : stringToLowerCase;
+      let transformCaseFunc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : stringToLowerCase;
+      if (setPrototypeOf) {
+        // Make 'in' and truthy checks like Boolean(set.constructor)
+        // independent of any properties defined on Object.prototype.
-      if (setPrototypeOf) {
+        // Prevent prototype setters from intercepting set as a this value.
         setPrototypeOf(set, null);
+      }
       let l = array.length;
       while (l--) {
         let element = array[l];
         if (typeof element === 'string') {
           const lcElement = transformCaseFunc(element);
+          if (lcElement !== element) {
-          if (lcElement !== element) {
+            // Config presets (e.g. tags.js, attrs.js) are immutable.
             if (!isFrozen(array)) {
               array[l] = lcElement;
+            }
             element = lcElement;
+          }
+        }
         set[element] = true;
+      }
       return set;
+    }
+    /**
+     * Clean up an array to harden against CSPP
+     *
+     * @param array - The array to be cleaned.
+     * @returns The cleaned version of the array
+     */
+    function cleanArray(array) {
+      for (let index = 0; index < array.length; index++) {
+        const isPropertyExist = objectHasOwnProperty(array, index);
+        if (!isPropertyExist) {
+          array[index] = null;
+        }
+      }
+      return array;
+    }
+    /**
+     * Shallow clone an object
+     *
+     * @param object - The object to be cloned.
+     * @returns A new object that copies the original.
      */
     function clone(object) {
       const newObject = create$1(null);
+      for (const [property, value] of entries(object)) {
+        const isPropertyExist = objectHasOwnProperty(object, property);
+        if (isPropertyExist) {
+          if (Array.isArray(value)) {
+            newObject[property] = cleanArray(value);
+          } else if (value && typeof value === 'object' && value.constructor === Object) {
+            newObject[property] = clone(value);
-      for (const [property, value] of entries(object)) {
+          } else {
+            newObject[property] = value;
+          }
         newObject[property] = value;
+      }
       return newObject;
+    }
+    /**
+     * This method automatically checks if the prop is function or getter and behaves accordingly.
+     *
+     * @param object - The object to look up the getter function in its prototype chain.
+     * @param prop - The property name for which to find the getter function.
+     * @returns The getter function found in the prototype chain or a fallback function.
      */
     function lookupGetter(object, prop) {
       while (object !== null) {
         const desc = getOwnPropertyDescriptor(object, prop);
         if (desc) {
             return unapply(desc.value);
+          }
+        }
         object = getPrototypeOf(object);
+      }
-      function fallbackValue(element) {
+      function fallbackValue() {
-        console.warn('fallback value for', element);
         return null;
+      }
       return fallbackValue;
+    }
-    const html$1 = freeze([
-      'a',
-      'abbr',
-      'acronym',
-      'address',
-      'area',
-      'article',
-      'aside',
-      'audio',
-      'b',
-      'bdi',
-      'bdo',
-      'big',
-      'blink',
-      'blockquote',
-      'body',
-      'br',
-      'button',
-      'canvas',
-      'caption',
-      'center',
-      'cite',
-      'code',
-      'col',
-      'colgroup',
-      'content',
-      'data',
-      'datalist',
-      'dd',
-      'decorator',
-      'del',
-      'details',
-      'dfn',
-      'dialog',
-      'dir',
-      'div',
-      'dl',
-      'dt',
-      'element',
-      'em',
-      'fieldset',
-      'figcaption',
-      'figure',
-      'font',
-      'footer',
-      'form',
-      'h1',
-      'h2',
-      'h3',
-      'h4',
-      'h5',
-      'h6',
-      'head',
-      'header',
-      'hgroup',
-      'hr',
-      'html',
-      'i',
-      'img',
-      'input',
-      'ins',
-      'kbd',
-      'label',
-      'legend',
-      'li',
-      'main',
-      'map',
-      'mark',
-      'marquee',
-      'menu',
-      'menuitem',
-      'meter',
-      'nav',
-      'nobr',
-      'ol',
-      'optgroup',
-      'option',
-      'output',
-      'p',
-      'picture',
-      'pre',
-      'progress',
-      'q',
-      'rp',
-      'rt',
-      'ruby',
-      's',
-      'samp',
-      'section',
-      'select',
-      'shadow',
-      'small',
-      'source',
-      'spacer',
-      'span',
-      'strike',
-      'strong',
-      'style',
-      'sub',
-      'summary',
-      'sup',
-      'table',
-      'tbody',
-      'td',
-      'template',
-      'textarea',
-      'tfoot',
-      'th',
-      'thead',
-      'time',
-      'tr',
-      'track',
-      'tt',
-      'u',
-      'ul',
-      'var',
-      'video',
-      'wbr'
-    ]);
-    const svg$1 = freeze([
+    const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']);
-      'svg',
-      'a',
-      'altglyph',
-      'altglyphdef',
-      'altglyphitem',
-      'animatecolor',
-      'animatemotion',
-      'animatetransform',
+    const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);
-      'circle',
-      'clippath',
-      'defs',
-      'desc',
-      'ellipse',
-      'filter',
-      'font',
-      'g',
-      'glyph',
-      'glyphref',
-      'hkern',
-      'image',
-      'line',
-      'lineargradient',
+    const svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']);
-      'marker',
-      'mask',
-      'metadata',
-      'mpath',
-      'path',
-      'pattern',
-      'polygon',
-      'polyline',
-      'radialgradient',
-      'rect',
-      'stop',
-      'style',
-      'switch',
-      'symbol',
-      'text',
-      'textpath',
-      'title',
-      'tref',
-      'tspan',
-      'view',
-      'vkern'
-    ]);
-    const svgFilters = freeze([
+    // List of SVG elements that are disallowed by default.
-      'feBlend',
-      'feColorMatrix',
-      'feComponentTransfer',
+    // We still need to know them so that we can do namespace
-      'feComposite',
-      'feConvolveMatrix',
-      'feDiffuseLighting',
-      'feDisplacementMap',
+    // checks properly in case one wants to add them to
-      'feDistantLight',
-      'feDropShadow',
-      'feFlood',
-      'feFuncA',
-      'feFuncB',
-      'feFuncG',
-      'feFuncR',
+    // allow-list.
-      'feGaussianBlur',
+    const svgDisallowed = freeze(['animate', 'color-profile', 'cursor', 'discard', 'font-face', 'font-face-format', 'font-face-name', 'font-face-src', 'font-face-uri', 'foreignobject', 'hatch', 'hatchpath', 'mesh', 'meshgradient', 'meshpatch', 'meshrow', 'missing-glyph', 'script', 'set', 'solidcolor', 'unknown', 'use']);
-      'feImage',
-      'feMerge',
-      'feMergeNode',
-      'feMorphology',
-      'feOffset',
-      'fePointLight',
+    const mathMl$1 = freeze(['math', 'menclose', 'merror', 'mfenced', 'mfrac', 'mglyph', 'mi', 'mlabeledtr', 'mmultiscripts', 'mn', 'mo', 'mover', 'mpadded', 'mphantom', 'mroot', 'mrow', 'ms', 'mspace', 'msqrt', 'mstyle', 'msub', 'msup', 'msubsup', 'mtable', 'mtd', 'mtext', 'mtr', 'munder', 'munderover', 'mprescripts']);
-      'feSpecularLighting',
+    // Similarly to SVG, we want to know all MathML elements,
-      'feSpotLight',
-      'feTile',
-      'feTurbulence'
-    ]);
-    const svgDisallowed = freeze([
+    // even those that we disallow by default.
-      'animate',
-      'color-profile',
-      'cursor',
-      'discard',
-      'font-face',
-      'font-face-format',
-      'font-face-name',
-      'font-face-src',
-      'font-face-uri',
-      'foreignobject',
-      'hatch',
-      'hatchpath',
-      'mesh',
-      'meshgradient',
-      'meshpatch',
-      'meshrow',
-      'missing-glyph',
-      'script',
-      'set',
-      'solidcolor',
-      'unknown',
-      'use'
-    ]);
-    const mathMl$1 = freeze([
-      'math',
-      'menclose',
-      'merror',
-      'mfenced',
-      'mfrac',
-      'mglyph',
-      'mi',
-      'mlabeledtr',
-      'mmultiscripts',
-      'mn',
-      'mo',
-      'mover',
-      'mpadded',
-      'mphantom',
-      'mroot',
-      'mrow',
-      'ms',
-      'mspace',
-      'msqrt',
-      'mstyle',
-      'msub',
-      'msup',
-      'msubsup',
-      'mtable',
-      'mtd',
-      'mtext',
-      'mtr',
-      'munder',
-      'munderover',
-      'mprescripts'
-    ]);
-    const mathMlDisallowed = freeze([
+    const mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']);
-      'maction',
-      'maligngroup',
-      'malignmark',
-      'mlongdiv',
-      'mscarries',
-      'mscarry',
-      'msgroup',
-      'mstack',
-      'msline',
-      'msrow',
-      'semantics',
-      'annotation',
-      'annotation-xml',
-      'mprescripts',
-      'none'
-    ]);
     const text$1 = freeze(['#text']);
-    const html = freeze([
-      'accept',
-      'action',
-      'align',
-      'alt',
-      'autocapitalize',
-      'autocomplete',
-      'autopictureinpicture',
-      'autoplay',
-      'background',
-      'bgcolor',
-      'border',
-      'capture',
-      'cellpadding',
-      'cellspacing',
-      'checked',
-      'cite',
-      'class',
-      'clear',
-      'color',
-      'cols',
-      'colspan',
-      'controls',
-      'controlslist',
-      'coords',
-      'crossorigin',
-      'datetime',
-      'decoding',
-      'default',
-      'dir',
-      'disabled',
-      'disablepictureinpicture',
-      'disableremoteplayback',
-      'download',
-      'draggable',
-      'enctype',
-      'enterkeyhint',
-      'face',
-      'for',
-      'headers',
-      'height',
-      'hidden',
-      'high',
-      'href',
-      'hreflang',
-      'id',
-      'inputmode',
-      'integrity',
-      'ismap',
-      'kind',
-      'label',
-      'lang',
-      'list',
-      'loading',
-      'loop',
-      'low',
-      'max',
-      'maxlength',
-      'media',
-      'method',
-      'min',
-      'minlength',
-      'multiple',
-      'muted',
-      'name',
-      'nonce',
-      'noshade',
-      'novalidate',
-      'nowrap',
-      'open',
-      'optimum',
-      'pattern',
-      'placeholder',
-      'playsinline',
-      'poster',
-      'preload',
-      'pubdate',
-      'radiogroup',
-      'readonly',
-      'rel',
-      'required',
-      'rev',
-      'reversed',
-      'role',
-      'rows',
-      'rowspan',
-      'spellcheck',
-      'scope',
-      'selected',
-      'shape',
-      'size',
-      'sizes',
-      'span',
-      'srclang',
-      'start',
-      'src',
-      'srcset',
-      'step',
-      'style',
-      'summary',
-      'tabindex',
-      'title',
-      'translate',
-      'type',
-      'usemap',
-      'valign',
-      'value',
-      'width',
-      'xmlns',
-      'slot'
-    ]);
-    const svg = freeze([
+    const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']);
-      'accent-height',
-      'accumulate',
-      'additive',
-      'alignment-baseline',
+    const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']);
-      'ascent',
-      'attributename',
-      'attributetype',
-      'azimuth',
-      'basefrequency',
-      'baseline-shift',
-      'begin',
-      'bias',
-      'by',
-      'class',
-      'clip',
-      'clippathunits',
-      'clip-path',
-      'clip-rule',
-      'color',
-      'color-interpolation',
+    const mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']);
-      'color-interpolation-filters',
+    const xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);
-      'color-profile',
-      'color-rendering',
-      'cx',
-      'cy',
-      'd',
-      'dx',
-      'dy',
-      'diffuseconstant',
-      'direction',
-      'display',
-      'divisor',
-      'dur',
-      'edgemode',
-      'elevation',
-      'end',
-      'fill',
-      'fill-opacity',
-      'fill-rule',
-      'filter',
-      'filterunits',
-      'flood-color',
-      'flood-opacity',
-      'font-family',
-      'font-size',
-      'font-size-adjust',
-      'font-stretch',
-      'font-style',
-      'font-variant',
-      'font-weight',
-      'fx',
-      'fy',
-      'g1',
-      'g2',
-      'glyph-name',
-      'glyphref',
-      'gradientunits',
-      'gradienttransform',
-      'height',
-      'href',
-      'id',
-      'image-rendering',
-      'in',
-      'in2',
-      'k',
-      'k1',
-      'k2',
-      'k3',
-      'k4',
-      'kerning',
-      'keypoints',
-      'keysplines',
-      'keytimes',
-      'lang',
-      'lengthadjust',
-      'letter-spacing',
-      'kernelmatrix',
-      'kernelunitlength',
-      'lighting-color',
-      'local',
-      'marker-end',
-      'marker-mid',
-      'marker-start',
-      'markerheight',
-      'markerunits',
-      'markerwidth',
-      'maskcontentunits',
-      'maskunits',
-      'max',
-      'mask',
-      'media',
-      'method',
-      'mode',
-      'min',
-      'name',
-      'numoctaves',
-      'offset',
-      'operator',
-      'opacity',
-      'order',
-      'orient',
-      'orientation',
-      'origin',
-      'overflow',
-      'paint-order',
-      'path',
-      'pathlength',
-      'patterncontentunits',
-      'patterntransform',
-      'patternunits',
-      'points',
-      'preservealpha',
-      'preserveaspectratio',
-      'primitiveunits',
-      'r',
-      'rx',
-      'ry',
-      'radius',
-      'refx',
-      'refy',
-      'repeatcount',
-      'repeatdur',
-      'restart',
-      'result',
-      'rotate',
-      'scale',
-      'seed',
-      'shape-rendering',
-      'specularconstant',
-      'specularexponent',
-      'spreadmethod',
-      'startoffset',
-      'stddeviation',
-      'stitchtiles',
-      'stop-color',
-      'stop-opacity',
-      'stroke-dasharray',
-      'stroke-dashoffset',
-      'stroke-linecap',
-      'stroke-linejoin',
-      'stroke-miterlimit',
-      'stroke-opacity',
-      'stroke',
-      'stroke-width',
-      'style',
-      'surfacescale',
-      'systemlanguage',
-      'tabindex',
-      'targetx',
-      'targety',
-      'transform',
-      'transform-origin',
-      'text-anchor',
-      'text-decoration',
-      'text-rendering',
-      'textlength',
-      'type',
-      'u1',
-      'u2',
-      'unicode',
-      'values',
-      'viewbox',
-      'visibility',
-      'version',
-      'vert-adv-y',
-      'vert-origin-x',
-      'vert-origin-y',
-      'width',
-      'word-spacing',
-      'wrap',
-      'writing-mode',
-      'xchannelselector',
-      'ychannelselector',
-      'x',
-      'x1',
-      'x2',
-      'xmlns',
-      'y',
-      'y1',
-      'y2',
-      'z',
-      'zoomandpan'
-    ]);
-    const mathMl = freeze([
-      'accent',
-      'accentunder',
-      'align',
-      'bevelled',
-      'close',
-      'columnsalign',
-      'columnlines',
-      'columnspan',
-      'denomalign',
-      'depth',
-      'dir',
-      'display',
-      'displaystyle',
-      'encoding',
-      'fence',
-      'frame',
-      'height',
-      'href',
-      'id',
-      'largeop',
-      'length',
-      'linethickness',
-      'lspace',
-      'lquote',
-      'mathbackground',
-      'mathcolor',
-      'mathsize',
-      'mathvariant',
-      'maxsize',
-      'minsize',
-      'movablelimits',
-      'notation',
-      'numalign',
-      'open',
-      'rowalign',
-      'rowlines',
-      'rowspacing',
-      'rowspan',
-      'rspace',
-      'rquote',
-      'scriptlevel',
-      'scriptminsize',
-      'scriptsizemultiplier',
+    // eslint-disable-next-line unicorn/better-regex
-      'selection',
-      'separator',
-      'separators',
-      'stretchy',
-      'subscriptshift',
-      'supscriptshift',
-      'symmetric',
-      'voffset',
-      'width',
-      'xmlns'
-    ]);
-    const xml = freeze([
-      'xlink:href',
-      'xml:id',
-      'xlink:title',
-      'xml:space',
-      'xmlns:xlink'
-    ]);
-    const MUSTACHE_EXPR = seal(/\{\{[\w\W]*|[\w\W]*\}\}/gm);
+    const MUSTACHE_EXPR = seal(/\{\{[\w\W]*|[\w\W]*\}\}/gm); // Specify template detection regex for SAFE_FOR_TEMPLATES mode
     const ERB_EXPR = seal(/<%[\w\W]*|[\w\W]*%>/gm);
-    const TMPLIT_EXPR = seal(/\${[\w\W]*}/gm);
+    const TMPLIT_EXPR = seal(/\$\{[\w\W]*/gm); // eslint-disable-line unicorn/better-regex
-    const DATA_ATTR = seal(/^data-[\-\w.\u00B7-\uFFFF]/);
+    const DATA_ATTR = seal(/^data-[\-\w.\u00B7-\uFFFF]+$/); // eslint-disable-line no-useless-escape
-    const ARIA_ATTR = seal(/^aria-[\-\w]+$/);
+    const ARIA_ATTR = seal(/^aria-[\-\w]+$/); // eslint-disable-line no-useless-escape
-    const IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i);
+    const IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i // eslint-disable-line no-useless-escape
+    );
     const IS_SCRIPT_OR_DATA = seal(/^(?:\w+script|data):/i);
-    const ATTR_WHITESPACE = seal(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g);
+    const ATTR_WHITESPACE = seal(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g // eslint-disable-line no-control-regex
+    );
     const DOCTYPE_NAME = seal(/^html$/i);
+    const CUSTOM_ELEMENT = seal(/^[a-z][.\w]*(-[.\w]+)+$/i);
-    var EXPRESSIONS = Object.freeze({
+    var EXPRESSIONS = /*#__PURE__*/Object.freeze({
       __proto__: null,
-      MUSTACHE_EXPR: MUSTACHE_EXPR,
-      ERB_EXPR: ERB_EXPR,
-      TMPLIT_EXPR: TMPLIT_EXPR,
-      DATA_ATTR: DATA_ATTR,
       ARIA_ATTR: ARIA_ATTR,
+      ATTR_WHITESPACE: ATTR_WHITESPACE,
+      CUSTOM_ELEMENT: CUSTOM_ELEMENT,
+      DATA_ATTR: DATA_ATTR,
+      DOCTYPE_NAME: DOCTYPE_NAME,
+      ERB_EXPR: ERB_EXPR,
       IS_ALLOWED_URI: IS_ALLOWED_URI,
       IS_SCRIPT_OR_DATA: IS_SCRIPT_OR_DATA,
-      ATTR_WHITESPACE: ATTR_WHITESPACE,
+      MUSTACHE_EXPR: MUSTACHE_EXPR,
-      DOCTYPE_NAME: DOCTYPE_NAME
+      TMPLIT_EXPR: TMPLIT_EXPR
     });
+    /* eslint-disable @typescript-eslint/indent */
+    // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+    const NODE_TYPE = {
+      element: 1,
+      attribute: 2,
+      text: 3,
+      cdataSection: 4,
+      entityReference: 5,
+      // Deprecated
+      entityNode: 6,
+      // Deprecated
+      progressingInstruction: 7,
+      comment: 8,
+      document: 9,
+      documentType: 10,
+      documentFragment: 11,
+      notation: 12 // Deprecated
+    };
+    const getGlobal = function getGlobal() {
-    const getGlobal = () => typeof window === 'undefined' ? null : window;
+      return typeof window === 'undefined' ? null : window;
+    };
+    /**
+     * Creates a no-op policy for internal use only.
+     * Don't export this function outside this module!
+     * @param trustedTypes The policy factory.
+     * @param purifyHostElement The Script element used to load DOMPurify (to determine policy name suffix).
+     * @return The policy created (or null, if Trusted Types
+     * are not supported or creating the policy failed).
+     */
     const _createTrustedTypesPolicy = function _createTrustedTypesPolicy(trustedTypes, purifyHostElement) {
       if (typeof trustedTypes !== 'object' || typeof trustedTypes.createPolicy !== 'function') {
         return null;
+      }
+      // Allow the callers to control the unique policy name
+      // by adding a data-tt-policy-suffix to the script element with the DOMPurify.
+      // Policy creation with duplicate names throws in Trusted Types.
       let suffix = null;
       const ATTR_NAME = 'data-tt-policy-suffix';
       if (purifyHostElement && purifyHostElement.hasAttribute(ATTR_NAME)) {
         suffix = purifyHostElement.getAttribute(ATTR_NAME);
+      }
           createScriptURL(scriptUrl) {
             return scriptUrl;
+          }
         });
       } catch (_) {
+        // Policy creation failed (most likely another DOMPurify script has
+        // already run). Skip creating the policy, as this will only cause errors
+        // if TT are enforced.
         console.warn('TrustedTypes policy ' + policyName + ' could not be created.');
         return null;
+      }
     };
+    const _createHooksMap = function _createHooksMap() {
+      return {
+        afterSanitizeAttributes: [],
+        afterSanitizeElements: [],
+        afterSanitizeShadowDOM: [],
+        beforeSanitizeAttributes: [],
+        beforeSanitizeElements: [],
+        beforeSanitizeShadowDOM: [],
+        uponSanitizeAttribute: [],
+        uponSanitizeElement: [],
+        uponSanitizeShadowNode: []
+      };
+    };
     function createDOMPurify() {
       let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();
       const DOMPurify = root => createDOMPurify(root);
-      DOMPurify.version = '3.0.5';
+      DOMPurify.version = '3.2.4';
       DOMPurify.removed = [];
-      if (!window || !window.document || window.document.nodeType !== 9) {
+      if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document || !window.Element) {
+        // Not running in a browser, provide a factory function
+        // so that you can pass your own Window
         DOMPurify.isSupported = false;
         return DOMPurify;
+      }
+      let {
+        document
+      } = window;
-      const originalDocument = window.document;
+      const originalDocument = document;
       const currentScript = originalDocument.currentScript;
+      const {
-      let {document} = window;
+        DocumentFragment,
+        HTMLTemplateElement,
+        Node,
+        Element,
+        NodeFilter,
-      const {DocumentFragment, HTMLTemplateElement, Node, Element, NodeFilter, NamedNodeMap = window.NamedNodeMap || window.MozNamedAttrMap, HTMLFormElement, DOMParser, trustedTypes} = window;
+        NamedNodeMap = window.NamedNodeMap || window.MozNamedAttrMap,
+        HTMLFormElement,
+        DOMParser,
+        trustedTypes
+      } = window;
       const ElementPrototype = Element.prototype;
       const cloneNode = lookupGetter(ElementPrototype, 'cloneNode');
+      const remove = lookupGetter(ElementPrototype, 'remove');
       const getNextSibling = lookupGetter(ElementPrototype, 'nextSibling');
       const getChildNodes = lookupGetter(ElementPrototype, 'childNodes');
       const getParentNode = lookupGetter(ElementPrototype, 'parentNode');
+      // As per issue #47, the web-components registry is inherited by a
+      // new document created via createHTMLDocument. As per the spec
+      // (http://w3c.github.io/webcomponents/spec/custom/#creating-and-passing-registries)
+      // a new empty registry is used when creating a template contents owner
+      // document, so we use that as our parent document to ensure nothing
+      // is inherited.
       if (typeof HTMLTemplateElement === 'function') {
         const template = document.createElement('template');
         if (template.content && template.content.ownerDocument) {
           document = template.content.ownerDocument;
+        }
+      }
       let trustedTypesPolicy;
       let emptyHTML = '';
+      const {
+        implementation,
+        createNodeIterator,
-      const {implementation, createNodeIterator, createDocumentFragment, getElementsByTagName} = document;
+        createDocumentFragment,
+        getElementsByTagName
+      } = document;
+      const {
+        importNode
-      const {importNode} = originalDocument;
+      } = originalDocument;
-      let hooks = {};
+      let hooks = _createHooksMap();
+      /**
+       * Expose whether this browser supports running the full DOMPurify.
+       */
       DOMPurify.isSupported = typeof entries === 'function' && typeof getParentNode === 'function' && implementation && implementation.createHTMLDocument !== undefined;
+      const {
+        MUSTACHE_EXPR,
+        ERB_EXPR,
+        TMPLIT_EXPR,
+        DATA_ATTR,
+        ARIA_ATTR,
-      const {MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR, DATA_ATTR, ARIA_ATTR, IS_SCRIPT_OR_DATA, ATTR_WHITESPACE} = EXPRESSIONS;
+        IS_SCRIPT_OR_DATA,
+        ATTR_WHITESPACE,
+        CUSTOM_ELEMENT
+      } = EXPRESSIONS;
+      let {
-      let {IS_ALLOWED_URI: IS_ALLOWED_URI$1} = EXPRESSIONS;
+        IS_ALLOWED_URI: IS_ALLOWED_URI$1
+      } = EXPRESSIONS;
+      /**
+       * We consider the elements and attributes below to be safe. Ideally
+       * don't add any new ones but feel free to remove unwanted ones.
+       */
+      /* allowed element names */
       let ALLOWED_TAGS = null;
-      const DEFAULT_ALLOWED_TAGS = addToSet({}, [
+      const DEFAULT_ALLOWED_TAGS = addToSet({}, [...html$1, ...svg$1, ...svgFilters, ...mathMl$1, ...text$1]);
-        ...html$1,
-        ...svg$1,
-        ...svgFilters,
+      /* Allowed attribute names */
-        ...mathMl$1,
-        ...text$1
-      ]);
       let ALLOWED_ATTR = null;
-      const DEFAULT_ALLOWED_ATTR = addToSet({}, [
+      const DEFAULT_ALLOWED_ATTR = addToSet({}, [...html, ...svg, ...mathMl, ...xml]);
-        ...html,
-        ...svg,
+      /*
-        ...mathMl,
+       * Configure how DOMPurify should handle custom elements and their attributes as well as customized built-in elements.
-        ...xml
+       * @property {RegExp|Function|null} tagNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any custom elements)
+       * @property {RegExp|Function|null} attributeNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any attributes not on the allow list)
+       * @property {boolean} allowCustomizedBuiltInElements allow custom elements derived from built-ins if they pass CUSTOM_ELEMENT_HANDLING.tagNameCheck. Default: `false`.
-      ]);
+       */
-      let CUSTOM_ELEMENT_HANDLING = Object.seal(Object.create(null, {
+      let CUSTOM_ELEMENT_HANDLING = Object.seal(create$1(null, {
         tagNameCheck: {
           writable: true,
           configurable: false,
           enumerable: true,
           value: null
           configurable: false,
           enumerable: true,
           value: false
+        }
       }));
+      /* Explicitly forbidden tags (overrides ALLOWED_TAGS/ADD_TAGS) */
       let FORBID_TAGS = null;
+      /* Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) */
       let FORBID_ATTR = null;
+      /* Decide if ARIA attributes are okay */
       let ALLOW_ARIA_ATTR = true;
+      /* Decide if custom data attributes are okay */
       let ALLOW_DATA_ATTR = true;
+      /* Decide if unknown protocols are okay */
       let ALLOW_UNKNOWN_PROTOCOLS = false;
+      /* Decide if self-closing tags in attributes are allowed.
+       * Usually removed due to a mXSS issue in jQuery 3.0 */
       let ALLOW_SELF_CLOSE_IN_ATTR = true;
+      /* Output should be safe for common template engines.
+       * This means, DOMPurify removes data attributes, mustaches and ERB
+       */
       let SAFE_FOR_TEMPLATES = false;
+      /* Output should be safe even for XML used within HTML and alike.
+       * This means, DOMPurify removes comments when containing risky content.
+       */
+      let SAFE_FOR_XML = true;
+      /* Decide if document with <html>... should be returned */
       let WHOLE_DOCUMENT = false;
+      /* Track whether config is already set on this instance of DOMPurify. */
       let SET_CONFIG = false;
+      /* Decide if all elements (e.g. style, script) must be children of
+       * document.body. By default, browsers might move them to document.head */
       let FORCE_BODY = false;
+      /* Decide if a DOM `HTMLBodyElement` should be returned, instead of a html
+       * string (or a TrustedHTML object if Trusted Types are supported).
+       * If `WHOLE_DOCUMENT` is enabled a `HTMLHtmlElement` will be returned instead
+       */
       let RETURN_DOM = false;
+      /* Decide if a DOM `DocumentFragment` should be returned, instead of a html
+       * string  (or a TrustedHTML object if Trusted Types are supported) */
       let RETURN_DOM_FRAGMENT = false;
+      /* Try to return a Trusted Type object instead of a string, return a string in
+       * case Trusted Types are not supported  */
       let RETURN_TRUSTED_TYPE = false;
+      /* Output should be free from DOM clobbering attacks?
+       * This sanitizes markups named with colliding, clobberable built-in DOM APIs.
+       */
       let SANITIZE_DOM = true;
+      /* Achieve full DOM Clobbering protection by isolating the namespace of named
+       * properties and JS variables, mitigating attacks that abuse the HTML/DOM spec rules.
+       *
+       * HTML/DOM spec rules that enable DOM Clobbering:
+       *   - Named Access on Window (§7.3.3)
+       *   - DOM Tree Accessors (§3.1.5)
+       *   - Form Element Parent-Child Relations (§4.10.3)
+       *   - Iframe srcdoc / Nested WindowProxies (§4.8.5)
+       *   - HTMLCollection (§4.2.10.2)
+       *
+       * Namespace isolation is implemented by prefixing `id` and `name` attributes
+       * with a constant string, i.e., `user-content-`
+       */
       let SANITIZE_NAMED_PROPS = false;
       const SANITIZE_NAMED_PROPS_PREFIX = 'user-content-';
+      /* Keep element content when removing element? */
       let KEEP_CONTENT = true;
+      /* If a `Node` is passed to sanitize(), then performs sanitization in-place instead
+       * of importing it into a new Document and returning a sanitized copy */
       let IN_PLACE = false;
+      /* Allow usage of profiles like html, svg and mathMl */
       let USE_PROFILES = {};
+      /* Tags to ignore content of when KEEP_CONTENT is true */
       let FORBID_CONTENTS = null;
-      const DEFAULT_FORBID_CONTENTS = addToSet({}, [
+      const DEFAULT_FORBID_CONTENTS = addToSet({}, ['annotation-xml', 'audio', 'colgroup', 'desc', 'foreignobject', 'head', 'iframe', 'math', 'mi', 'mn', 'mo', 'ms', 'mtext', 'noembed', 'noframes', 'noscript', 'plaintext', 'script', 'style', 'svg', 'template', 'thead', 'title', 'video', 'xmp']);
-        'annotation-xml',
+      /* Tags that are safe for data: URIs */
-        'audio',
-        'colgroup',
-        'desc',
-        'foreignobject',
-        'head',
-        'iframe',
-        'math',
-        'mi',
-        'mn',
-        'mo',
-        'ms',
-        'mtext',
-        'noembed',
-        'noframes',
-        'noscript',
-        'plaintext',
-        'script',
-        'style',
-        'svg',
-        'template',
-        'thead',
-        'title',
-        'video',
-        'xmp'
-      ]);
       let DATA_URI_TAGS = null;
-      const DEFAULT_DATA_URI_TAGS = addToSet({}, [
+      const DEFAULT_DATA_URI_TAGS = addToSet({}, ['audio', 'video', 'img', 'source', 'image', 'track']);
-        'audio',
-        'video',
-        'img',
-        'source',
+      /* Attributes safe for values like "javascript:" */
-        'image',
-        'track'
-      ]);
       let URI_SAFE_ATTRIBUTES = null;
-      const DEFAULT_URI_SAFE_ATTRIBUTES = addToSet({}, [
+      const DEFAULT_URI_SAFE_ATTRIBUTES = addToSet({}, ['alt', 'class', 'for', 'id', 'label', 'name', 'pattern', 'placeholder', 'role', 'summary', 'title', 'value', 'style', 'xmlns']);
-        'alt',
-        'class',
-        'for',
-        'id',
-        'label',
-        'name',
-        'pattern',
-        'placeholder',
-        'role',
-        'summary',
-        'title',
-        'value',
-        'style',
-        'xmlns'
-      ]);
       const MATHML_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
       const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
       const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
+      /* Document namespace */
       let NAMESPACE = HTML_NAMESPACE;
       let IS_EMPTY_INPUT = false;
+      /* Allowed XHTML+XML namespaces */
       let ALLOWED_NAMESPACES = null;
+      const DEFAULT_ALLOWED_NAMESPACES = addToSet({}, [MATHML_NAMESPACE, SVG_NAMESPACE, HTML_NAMESPACE], stringToString);
+      let MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, ['mi', 'mo', 'mn', 'ms', 'mtext']);
-      const DEFAULT_ALLOWED_NAMESPACES = addToSet({}, [
+      let HTML_INTEGRATION_POINTS = addToSet({}, ['annotation-xml']);
-        MATHML_NAMESPACE,
+      // Certain elements are allowed in both SVG and HTML
-        SVG_NAMESPACE,
+      // namespace. We need to specify them explicitly
+      // so that they don't get erroneously deleted from
-        HTML_NAMESPACE
+      // HTML namespace.
+      const COMMON_SVG_AND_HTML_ELEMENTS = addToSet({}, ['title', 'style', 'font', 'a', 'script']);
-      ], stringToString);
+      /* Parsing of strict XHTML documents */
-      let PARSER_MEDIA_TYPE;
+      let PARSER_MEDIA_TYPE = null;
-      const SUPPORTED_PARSER_MEDIA_TYPES = [
+      const SUPPORTED_PARSER_MEDIA_TYPES = ['application/xhtml+xml', 'text/html'];
-        'application/xhtml+xml',
-        'text/html'
-      ];
       const DEFAULT_PARSER_MEDIA_TYPE = 'text/html';
-      let transformCaseFunc;
+      let transformCaseFunc = null;
+      /* Keep a reference to config to pass to hooks */
       let CONFIG = null;
+      /* Ideally, do not touch anything below this line */
+      /* ______________________________________________ */
       const formElement = document.createElement('form');
       const isRegexOrFunction = function isRegexOrFunction(testValue) {
         return testValue instanceof RegExp || testValue instanceof Function;
       };
+      /**
+       * _parseConfig
+       *
+       * @param cfg optional config literal
+       */
+      // eslint-disable-next-line complexity
-      const _parseConfig = function _parseConfig(cfg) {
+      const _parseConfig = function _parseConfig() {
+        let cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         if (CONFIG && CONFIG === cfg) {
           return;
+        }
+        /* Shield configuration object from tampering */
         if (!cfg || typeof cfg !== 'object') {
           cfg = {};
+        }
+        /* Shield configuration object from prototype pollution */
         cfg = clone(cfg);
+        PARSER_MEDIA_TYPE =
+        // eslint-disable-next-line unicorn/prefer-includes
-        PARSER_MEDIA_TYPE = SUPPORTED_PARSER_MEDIA_TYPES.indexOf(cfg.PARSER_MEDIA_TYPE) === -1 ? PARSER_MEDIA_TYPE = DEFAULT_PARSER_MEDIA_TYPE : PARSER_MEDIA_TYPE = cfg.PARSER_MEDIA_TYPE;
+        SUPPORTED_PARSER_MEDIA_TYPES.indexOf(cfg.PARSER_MEDIA_TYPE) === -1 ? DEFAULT_PARSER_MEDIA_TYPE : cfg.PARSER_MEDIA_TYPE;
+        // HTML tags and attributes are not case-sensitive, converting to lowercase. Keeping XHTML as is.
         transformCaseFunc = PARSER_MEDIA_TYPE === 'application/xhtml+xml' ? stringToString : stringToLowerCase;
+        /* Set configuration parameters */
-        ALLOWED_TAGS = 'ALLOWED_TAGS' in cfg ? addToSet({}, cfg.ALLOWED_TAGS, transformCaseFunc) : DEFAULT_ALLOWED_TAGS;
+        ALLOWED_TAGS = objectHasOwnProperty(cfg, 'ALLOWED_TAGS') ? addToSet({}, cfg.ALLOWED_TAGS, transformCaseFunc) : DEFAULT_ALLOWED_TAGS;
-        ALLOWED_ATTR = 'ALLOWED_ATTR' in cfg ? addToSet({}, cfg.ALLOWED_ATTR, transformCaseFunc) : DEFAULT_ALLOWED_ATTR;
+        ALLOWED_ATTR = objectHasOwnProperty(cfg, 'ALLOWED_ATTR') ? addToSet({}, cfg.ALLOWED_ATTR, transformCaseFunc) : DEFAULT_ALLOWED_ATTR;
-        ALLOWED_NAMESPACES = 'ALLOWED_NAMESPACES' in cfg ? addToSet({}, cfg.ALLOWED_NAMESPACES, stringToString) : DEFAULT_ALLOWED_NAMESPACES;
+        ALLOWED_NAMESPACES = objectHasOwnProperty(cfg, 'ALLOWED_NAMESPACES') ? addToSet({}, cfg.ALLOWED_NAMESPACES, stringToString) : DEFAULT_ALLOWED_NAMESPACES;
-        URI_SAFE_ATTRIBUTES = 'ADD_URI_SAFE_ATTR' in cfg ? addToSet(clone(DEFAULT_URI_SAFE_ATTRIBUTES), cfg.ADD_URI_SAFE_ATTR, transformCaseFunc) : DEFAULT_URI_SAFE_ATTRIBUTES;
+        URI_SAFE_ATTRIBUTES = objectHasOwnProperty(cfg, 'ADD_URI_SAFE_ATTR') ? addToSet(clone(DEFAULT_URI_SAFE_ATTRIBUTES), cfg.ADD_URI_SAFE_ATTR, transformCaseFunc) : DEFAULT_URI_SAFE_ATTRIBUTES;
-        DATA_URI_TAGS = 'ADD_DATA_URI_TAGS' in cfg ? addToSet(clone(DEFAULT_DATA_URI_TAGS), cfg.ADD_DATA_URI_TAGS, transformCaseFunc) : DEFAULT_DATA_URI_TAGS;
+        DATA_URI_TAGS = objectHasOwnProperty(cfg, 'ADD_DATA_URI_TAGS') ? addToSet(clone(DEFAULT_DATA_URI_TAGS), cfg.ADD_DATA_URI_TAGS, transformCaseFunc) : DEFAULT_DATA_URI_TAGS;
-        FORBID_CONTENTS = 'FORBID_CONTENTS' in cfg ? addToSet({}, cfg.FORBID_CONTENTS, transformCaseFunc) : DEFAULT_FORBID_CONTENTS;
+        FORBID_CONTENTS = objectHasOwnProperty(cfg, 'FORBID_CONTENTS') ? addToSet({}, cfg.FORBID_CONTENTS, transformCaseFunc) : DEFAULT_FORBID_CONTENTS;
-        FORBID_TAGS = 'FORBID_TAGS' in cfg ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : {};
+        FORBID_TAGS = objectHasOwnProperty(cfg, 'FORBID_TAGS') ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : {};
-        FORBID_ATTR = 'FORBID_ATTR' in cfg ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : {};
+        FORBID_ATTR = objectHasOwnProperty(cfg, 'FORBID_ATTR') ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : {};
-        USE_PROFILES = 'USE_PROFILES' in cfg ? cfg.USE_PROFILES : false;
+        USE_PROFILES = objectHasOwnProperty(cfg, 'USE_PROFILES') ? cfg.USE_PROFILES : false;
-        ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false;
+        ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false; // Default true
-        ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false;
+        ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false; // Default true
-        ALLOW_UNKNOWN_PROTOCOLS = cfg.ALLOW_UNKNOWN_PROTOCOLS || false;
+        ALLOW_UNKNOWN_PROTOCOLS = cfg.ALLOW_UNKNOWN_PROTOCOLS || false; // Default false
-        ALLOW_SELF_CLOSE_IN_ATTR = cfg.ALLOW_SELF_CLOSE_IN_ATTR !== false;
+        ALLOW_SELF_CLOSE_IN_ATTR = cfg.ALLOW_SELF_CLOSE_IN_ATTR !== false; // Default true
-        SAFE_FOR_TEMPLATES = cfg.SAFE_FOR_TEMPLATES || false;
+        SAFE_FOR_TEMPLATES = cfg.SAFE_FOR_TEMPLATES || false; // Default false
+        SAFE_FOR_XML = cfg.SAFE_FOR_XML !== false; // Default true
-        WHOLE_DOCUMENT = cfg.WHOLE_DOCUMENT || false;
+        WHOLE_DOCUMENT = cfg.WHOLE_DOCUMENT || false; // Default false
-        RETURN_DOM = cfg.RETURN_DOM || false;
+        RETURN_DOM = cfg.RETURN_DOM || false; // Default false
-        RETURN_DOM_FRAGMENT = cfg.RETURN_DOM_FRAGMENT || false;
+        RETURN_DOM_FRAGMENT = cfg.RETURN_DOM_FRAGMENT || false; // Default false
-        RETURN_TRUSTED_TYPE = cfg.RETURN_TRUSTED_TYPE || false;
+        RETURN_TRUSTED_TYPE = cfg.RETURN_TRUSTED_TYPE || false; // Default false
-        FORCE_BODY = cfg.FORCE_BODY || false;
+        FORCE_BODY = cfg.FORCE_BODY || false; // Default false
-        SANITIZE_DOM = cfg.SANITIZE_DOM !== false;
+        SANITIZE_DOM = cfg.SANITIZE_DOM !== false; // Default true
-        SANITIZE_NAMED_PROPS = cfg.SANITIZE_NAMED_PROPS || false;
+        SANITIZE_NAMED_PROPS = cfg.SANITIZE_NAMED_PROPS || false; // Default false
-        KEEP_CONTENT = cfg.KEEP_CONTENT !== false;
+        KEEP_CONTENT = cfg.KEEP_CONTENT !== false; // Default true
-        IN_PLACE = cfg.IN_PLACE || false;
+        IN_PLACE = cfg.IN_PLACE || false; // Default false
         IS_ALLOWED_URI$1 = cfg.ALLOWED_URI_REGEXP || IS_ALLOWED_URI;
         NAMESPACE = cfg.NAMESPACE || HTML_NAMESPACE;
+        MATHML_TEXT_INTEGRATION_POINTS = cfg.MATHML_TEXT_INTEGRATION_POINTS || MATHML_TEXT_INTEGRATION_POINTS;
+        HTML_INTEGRATION_POINTS = cfg.HTML_INTEGRATION_POINTS || HTML_INTEGRATION_POINTS;
         CUSTOM_ELEMENT_HANDLING = cfg.CUSTOM_ELEMENT_HANDLING || {};
         if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck)) {
           CUSTOM_ELEMENT_HANDLING.tagNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck;
+        }
         if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)) {
           ALLOW_DATA_ATTR = false;
+        }
         if (RETURN_DOM_FRAGMENT) {
           RETURN_DOM = true;
+        }
+        /* Parse profile info */
         if (USE_PROFILES) {
-          ALLOWED_TAGS = addToSet({}, [...text$1]);
+          ALLOWED_TAGS = addToSet({}, text$1);
           ALLOWED_ATTR = [];
           if (USE_PROFILES.html === true) {
             addToSet(ALLOWED_TAGS, html$1);
             addToSet(ALLOWED_ATTR, html);
+          }
             addToSet(ALLOWED_TAGS, mathMl$1);
             addToSet(ALLOWED_ATTR, mathMl);
             addToSet(ALLOWED_ATTR, xml);
+          }
+        }
+        /* Merge configuration parameters */
         if (cfg.ADD_TAGS) {
           if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) {
             ALLOWED_TAGS = clone(ALLOWED_TAGS);
+          }
           addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc);
           if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) {
             FORBID_CONTENTS = clone(FORBID_CONTENTS);
+          }
           addToSet(FORBID_CONTENTS, cfg.FORBID_CONTENTS, transformCaseFunc);
+        }
+        /* Add #text in case KEEP_CONTENT is set to true */
         if (KEEP_CONTENT) {
           ALLOWED_TAGS['#text'] = true;
+        }
+        /* Add html, head and body to ALLOWED_TAGS in case WHOLE_DOCUMENT is true */
         if (WHOLE_DOCUMENT) {
-          addToSet(ALLOWED_TAGS, [
+          addToSet(ALLOWED_TAGS, ['html', 'head', 'body']);
-            'html',
-            'head',
-            'body'
-          ]);
+        }
+        /* Add tbody to ALLOWED_TAGS in case tables are permitted, see #286, #365 */
         if (ALLOWED_TAGS.table) {
           addToSet(ALLOWED_TAGS, ['tbody']);
           delete FORBID_TAGS.tbody;
+        }
         if (cfg.TRUSTED_TYPES_POLICY) {
             throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.');
+          }
           if (typeof cfg.TRUSTED_TYPES_POLICY.createScriptURL !== 'function') {
             throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.');
+          }
+          // Overwrite existing TrustedTypes policy.
           trustedTypesPolicy = cfg.TRUSTED_TYPES_POLICY;
+          // Sign local variables required by `sanitize`.
           emptyHTML = trustedTypesPolicy.createHTML('');
         } else {
+          // Uninitialized policy, attempt to initialize the internal dompurify policy.
           if (trustedTypesPolicy === undefined) {
             trustedTypesPolicy = _createTrustedTypesPolicy(trustedTypes, currentScript);
+          }
+          // If creating the internal policy succeeded sign internal variables.
           if (trustedTypesPolicy !== null && typeof emptyHTML === 'string') {
             emptyHTML = trustedTypesPolicy.createHTML('');
+          }
+        }
+        // Prevent further manipulation of configuration.
+        // Not available in IE8, Safari 5, etc.
         if (freeze) {
           freeze(cfg);
+        }
         CONFIG = cfg;
       };
-      const MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, [
+      /* Keep track of all possible SVG and MathML tags
-        'mi',
-        'mo',
-        'mn',
-        'ms',
-        'mtext'
-      ]);
-      const HTML_INTEGRATION_POINTS = addToSet({}, [
+       * so that we can perform the namespace checks
-        'foreignobject',
-        'desc',
-        'title',
+       * correctly. */
-        'annotation-xml'
+      const ALL_SVG_TAGS = addToSet({}, [...svg$1, ...svgFilters, ...svgDisallowed]);
-      ]);
-      const COMMON_SVG_AND_HTML_ELEMENTS = addToSet({}, [
+      const ALL_MATHML_TAGS = addToSet({}, [...mathMl$1, ...mathMlDisallowed]);
-        'title',
-        'style',
-        'font',
-        'a',
-        'script'
-      ]);
+      /**
-      const ALL_SVG_TAGS = addToSet({}, svg$1);
+       * @param element a DOM element whose namespace is being checked
-      addToSet(ALL_SVG_TAGS, svgFilters);
+       * @returns Return false if the element has a
-      addToSet(ALL_SVG_TAGS, svgDisallowed);
+       *  namespace that a spec-compliant parser would never
-      const ALL_MATHML_TAGS = addToSet({}, mathMl$1);
+       *  return. Return true otherwise.
-      addToSet(ALL_MATHML_TAGS, mathMlDisallowed);
+       */
       const _checkValidNamespace = function _checkValidNamespace(element) {
         let parent = getParentNode(element);
+        // In JSDOM, if we're inside shadow DOM, then parentNode
+        // can be null. We just simulate parent in this case.
         if (!parent || !parent.tagName) {
           parent = {
             namespaceURI: NAMESPACE,
             tagName: 'template'
           };
         const parentTagName = stringToLowerCase(parent.tagName);
         if (!ALLOWED_NAMESPACES[element.namespaceURI]) {
           return false;
+        }
         if (element.namespaceURI === SVG_NAMESPACE) {
+          // The only way to switch from HTML namespace to SVG
+          // is via <svg>. If it happens via any other tag, then
+          // it should be killed.
           if (parent.namespaceURI === HTML_NAMESPACE) {
             return tagName === 'svg';
+          }
+          // The only way to switch from MathML to SVG is via`
+          // svg if parent is either <annotation-xml> or MathML
+          // text integration points.
           if (parent.namespaceURI === MATHML_NAMESPACE) {
             return tagName === 'svg' && (parentTagName === 'annotation-xml' || MATHML_TEXT_INTEGRATION_POINTS[parentTagName]);
+          }
+          // We only allow elements that are defined in SVG
+          // spec. All others are disallowed in SVG namespace.
           return Boolean(ALL_SVG_TAGS[tagName]);
+        }
         if (element.namespaceURI === MATHML_NAMESPACE) {
+          // The only way to switch from HTML namespace to MathML
+          // is via <math>. If it happens via any other tag, then
+          // it should be killed.
           if (parent.namespaceURI === HTML_NAMESPACE) {
             return tagName === 'math';
+          }
+          // The only way to switch from SVG to MathML is via
+          // <math> and HTML integration points
           if (parent.namespaceURI === SVG_NAMESPACE) {
             return tagName === 'math' && HTML_INTEGRATION_POINTS[parentTagName];
+          }
+          // We only allow elements that are defined in MathML
+          // spec. All others are disallowed in MathML namespace.
           return Boolean(ALL_MATHML_TAGS[tagName]);
+        }
         if (element.namespaceURI === HTML_NAMESPACE) {
+          // The only way to switch from SVG to HTML is via
+          // HTML integration points, and from MathML to HTML
+          // is via MathML text integration points
           if (parent.namespaceURI === SVG_NAMESPACE && !HTML_INTEGRATION_POINTS[parentTagName]) {
             return false;
+          }
           if (parent.namespaceURI === MATHML_NAMESPACE && !MATHML_TEXT_INTEGRATION_POINTS[parentTagName]) {
             return false;
+          }
+          // We disallow tags that are specific for MathML
+          // or SVG and should never appear in HTML namespace
           return !ALL_MATHML_TAGS[tagName] && (COMMON_SVG_AND_HTML_ELEMENTS[tagName] || !ALL_SVG_TAGS[tagName]);
+        }
+        // For XHTML and XML documents that support custom namespaces
         if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && ALLOWED_NAMESPACES[element.namespaceURI]) {
           return true;
+        }
+        // The code should never reach this place (this means
+        // that the element somehow got namespace that is not
+        // HTML, SVG, MathML or allowed via ALLOWED_NAMESPACES).
+        // Return false just in case.
         return false;
       };
+      /**
+       * _forceRemove
+       *
+       * @param node a DOM node
+       */
       const _forceRemove = function _forceRemove(node) {
-        arrayPush(DOMPurify.removed, { element: node });
+        arrayPush(DOMPurify.removed, {
+          element: node
+        });
         try {
+          // eslint-disable-next-line unicorn/prefer-dom-node-remove
-          node.parentNode.removeChild(node);
+          getParentNode(node).removeChild(node);
         } catch (_) {
-          node.remove();
+          remove(node);
+        }
       };
+      /**
+       * _removeAttribute
+       *
+       * @param name an Attribute name
+       * @param element a DOM node
+       */
-      const _removeAttribute = function _removeAttribute(name, node) {
+      const _removeAttribute = function _removeAttribute(name, element) {
         try {
           arrayPush(DOMPurify.removed, {
-            attribute: node.getAttributeNode(name),
+            attribute: element.getAttributeNode(name),
-            from: node
+            from: element
           });
         } catch (_) {
           arrayPush(DOMPurify.removed, {
             attribute: null,
-            from: node
+            from: element
           });
+        }
-        node.removeAttribute(name);
+        element.removeAttribute(name);
+        // We void attribute values for unremovable "is" attributes
-        if (name === 'is' && !ALLOWED_ATTR[name]) {
+        if (name === 'is') {
           if (RETURN_DOM || RETURN_DOM_FRAGMENT) {
             try {
-              _forceRemove(node);
+              _forceRemove(element);
-            } catch (_) {
+            } catch (_) {}
-            }
           } else {
             try {
-              node.setAttribute(name, '');
+              element.setAttribute(name, '');
-            } catch (_) {
+            } catch (_) {}
-            }
+          }
+        }
       };
+      /**
+       * _initDocument
+       *
+       * @param dirty - a string of dirty markup
+       * @return a DOM, filled with the dirty markup
+       */
       const _initDocument = function _initDocument(dirty) {
+        /* Create a HTML document */
-        let doc;
+        let doc = null;
-        let leadingWhitespace;
+        let leadingWhitespace = null;
         if (FORCE_BODY) {
           dirty = '<remove></remove>' + dirty;
         } else {
+          /* If FORCE_BODY isn't used, leading whitespace needs to be preserved manually */
           const matches = stringMatch(dirty, /^[\r\n\t ]+/);
           leadingWhitespace = matches && matches[0];
+        }
         if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && NAMESPACE === HTML_NAMESPACE) {
+          // Root of XHTML doc must contain xmlns declaration (see https://www.w3.org/TR/xhtml1/normative.html#strict)
           dirty = '<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>' + dirty + '</body></html>';
+        }
         const dirtyPayload = trustedTypesPolicy ? trustedTypesPolicy.createHTML(dirty) : dirty;
+        /*
+         * Use the DOMParser API by default, fallback later if needs be
+         * DOMParser not work for svg when has multiple root element.
+         */
         if (NAMESPACE === HTML_NAMESPACE) {
           try {
             doc = new DOMParser().parseFromString(dirtyPayload, PARSER_MEDIA_TYPE);
-          } catch (_) {
+          } catch (_) {}
-          }
+        }
+        /* Use createHTMLDocument in case DOMParser is not available */
         if (!doc || !doc.documentElement) {
           doc = implementation.createDocument(NAMESPACE, 'template', null);
           try {
             doc.documentElement.innerHTML = IS_EMPTY_INPUT ? emptyHTML : dirtyPayload;
           } catch (_) {
+            // Syntax error if dirtyPayload is invalid xml
+          }
+        }
         const body = doc.body || doc.documentElement;
         if (dirty && leadingWhitespace) {
           body.insertBefore(document.createTextNode(leadingWhitespace), body.childNodes[0] || null);
+        }
+        /* Work on whole document or just its body */
         if (NAMESPACE === HTML_NAMESPACE) {
           return getElementsByTagName.call(doc, WHOLE_DOCUMENT ? 'html' : 'body')[0];
+        }
         return WHOLE_DOCUMENT ? doc.documentElement : body;
       };
+      /**
+       * Creates a NodeIterator object that you can use to traverse filtered lists of nodes or elements in a document.
+       *
+       * @param root The root element or node to start traversing on.
+       * @return The created NodeIterator
+       */
-      const _createIterator = function _createIterator(root) {
+      const _createNodeIterator = function _createNodeIterator(root) {
+        return createNodeIterator.call(root.ownerDocument || root, root,
+        // eslint-disable-next-line no-bitwise
-        return createNodeIterator.call(root.ownerDocument || root, root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT, null, false);
+        NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT | NodeFilter.SHOW_PROCESSING_INSTRUCTION | NodeFilter.SHOW_CDATA_SECTION, null);
       };
+      /**
+       * _isClobbered
+       *
+       * @param element element to check for clobbering attacks
+       * @return true if clobbered, false if safe
+       */
-      const _isClobbered = function _isClobbered(elm) {
+      const _isClobbered = function _isClobbered(element) {
-        return elm instanceof HTMLFormElement && (typeof elm.nodeName !== 'string' || typeof elm.textContent !== 'string' || typeof elm.removeChild !== 'function' || !(elm.attributes instanceof NamedNodeMap) || typeof elm.removeAttribute !== 'function' || typeof elm.setAttribute !== 'function' || typeof elm.namespaceURI !== 'string' || typeof elm.insertBefore !== 'function' || typeof elm.hasChildNodes !== 'function');
+        return element instanceof HTMLFormElement && (typeof element.nodeName !== 'string' || typeof element.textContent !== 'string' || typeof element.removeChild !== 'function' || !(element.attributes instanceof NamedNodeMap) || typeof element.removeAttribute !== 'function' || typeof element.setAttribute !== 'function' || typeof element.namespaceURI !== 'string' || typeof element.insertBefore !== 'function' || typeof element.hasChildNodes !== 'function');
       };
+      /**
+       * Checks whether the given object is a DOM node.
+       *
+       * @param value object to check whether it's a DOM node
+       * @return true is object is a DOM node
+       */
-      const _isNode = function _isNode(object) {
+      const _isNode = function _isNode(value) {
-        return typeof Node === 'object' ? object instanceof Node : object && typeof object === 'object' && typeof object.nodeType === 'number' && typeof object.nodeName === 'string';
+        return typeof Node === 'function' && value instanceof Node;
       };
-      const _executeHook = function _executeHook(entryPoint, currentNode, data) {
+      function _executeHooks(hooks, currentNode, data) {
-        if (!hooks[entryPoint]) {
-          return;
-        }
-        arrayForEach(hooks[entryPoint], hook => {
+        arrayForEach(hooks, hook => {
           hook.call(DOMPurify, currentNode, data, CONFIG);
         });
-      };
+      }
+      /**
+       * _sanitizeElements
+       *
+       * @protect nodeName
+       * @protect textContent
+       * @protect removeChild
+       * @param currentNode to check for permission to exist
+       * @return true if node was killed, false if left alive
+       */
       const _sanitizeElements = function _sanitizeElements(currentNode) {
-        let content;
+        let content = null;
+        /* Execute a hook if present */
-        _executeHook('beforeSanitizeElements', currentNode, null);
+        _executeHooks(hooks.beforeSanitizeElements, currentNode, null);
+        /* Check if element is clobbered or can clobber */
         if (_isClobbered(currentNode)) {
           _forceRemove(currentNode);
           return true;
+        }
+        /* Now let's check the element's type and name */
         const tagName = transformCaseFunc(currentNode.nodeName);
+        /* Execute a hook if present */
-        _executeHook('uponSanitizeElement', currentNode, {
+        _executeHooks(hooks.uponSanitizeElement, currentNode, {
           tagName,
           allowedTags: ALLOWED_TAGS
         });
+        /* Detect mXSS attempts abusing namespace confusion */
-        if (currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && (!_isNode(currentNode.content) || !_isNode(currentNode.content.firstElementChild)) && regExpTest(/<[/\w]/g, currentNode.innerHTML) && regExpTest(/<[/\w]/g, currentNode.textContent)) {
+        if (currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\w]/g, currentNode.innerHTML) && regExpTest(/<[/\w]/g, currentNode.textContent)) {
+          _forceRemove(currentNode);
+          return true;
+        }
+        /* Remove any occurrence of processing instructions */
+        if (currentNode.nodeType === NODE_TYPE.progressingInstruction) {
           _forceRemove(currentNode);
           return true;
+        }
+        /* Remove any kind of possibly harmful comments */
+        if (SAFE_FOR_XML && currentNode.nodeType === NODE_TYPE.comment && regExpTest(/<[/\w]/g, currentNode.data)) {
+          _forceRemove(currentNode);
+          return true;
+        }
+        /* Remove element if anything forbids its presence */
         if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {
+          /* Check if we have a custom element to handle */
-          if (!FORBID_TAGS[tagName] && _basicCustomElementTest(tagName)) {
+          if (!FORBID_TAGS[tagName] && _isBasicCustomElement(tagName)) {
-            if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName))
+            if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName)) {
               return false;
+            }
-            if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(tagName))
+            if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(tagName)) {
               return false;
+            }
+          }
+          /* Keep content except for bad-listed elements */
           if (KEEP_CONTENT && !FORBID_CONTENTS[tagName]) {
             const parentNode = getParentNode(currentNode) || currentNode.parentNode;
             const childNodes = getChildNodes(currentNode) || currentNode.childNodes;
             if (childNodes && parentNode) {
               const childCount = childNodes.length;
               for (let i = childCount - 1; i >= 0; --i) {
+                const childClone = cloneNode(childNodes[i], true);
+                childClone.__removalCount = (currentNode.__removalCount || 0) + 1;
-                parentNode.insertBefore(cloneNode(childNodes[i], true), getNextSibling(currentNode));
+                parentNode.insertBefore(childClone, getNextSibling(currentNode));
+              }
+            }
+          }
           _forceRemove(currentNode);
           return true;
+        }
+        /* Check whether element has a valid namespace */
         if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) {
           _forceRemove(currentNode);
           return true;
+        }
+        /* Make sure that older browsers don't get fallback-tag mXSS */
         if ((tagName === 'noscript' || tagName === 'noembed' || tagName === 'noframes') && regExpTest(/<\/no(script|embed|frames)/i, currentNode.innerHTML)) {
           _forceRemove(currentNode);
           return true;
+        }
+        /* Sanitize element content to be template-safe */
-        if (SAFE_FOR_TEMPLATES && currentNode.nodeType === 3) {
+        if (SAFE_FOR_TEMPLATES && currentNode.nodeType === NODE_TYPE.text) {
+          /* Get the element's text content */
           content = currentNode.textContent;
-          content = stringReplace(content, MUSTACHE_EXPR, ' ');
+          arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {
-          content = stringReplace(content, ERB_EXPR, ' ');
+            content = stringReplace(content, expr, ' ');
-          content = stringReplace(content, TMPLIT_EXPR, ' ');
+          });
           if (currentNode.textContent !== content) {
+            arrayPush(DOMPurify.removed, {
-            arrayPush(DOMPurify.removed, { element: currentNode.cloneNode() });
+              element: currentNode.cloneNode()
+            });
             currentNode.textContent = content;
+          }
+        }
+        /* Execute a hook if present */
-        _executeHook('afterSanitizeElements', currentNode, null);
+        _executeHooks(hooks.afterSanitizeElements, currentNode, null);
         return false;
       };
+      /**
+       * _isValidAttribute
+       *
+       * @param lcTag Lowercase tag name of containing element.
+       * @param lcName Lowercase attribute name.
+       * @param value Attribute value.
+       * @return Returns true if `value` is valid, otherwise false.
+       */
+      // eslint-disable-next-line complexity
       const _isValidAttribute = function _isValidAttribute(lcTag, lcName, value) {
+        /* Make sure attribute cannot clobber */
         if (SANITIZE_DOM && (lcName === 'id' || lcName === 'name') && (value in document || value in formElement)) {
           return false;
+        }
-        if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName));
+        /* Allow valid data-* attributes: At least one character after "-"
+            (https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes)
+            XML-compatible (https://html.spec.whatwg.org/multipage/infrastructure.html#xml-compatible and http://www.w3.org/TR/xml/#d0e804)
-        else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName));
+            We don't need to check the value; it's always URI safe. */
+        if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) {
+          if (
+          // First condition does a very basic check if a) it's basically a valid custom element tagname AND
+          // b) if the tagName passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
+          // and c) if the attribute name passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.attributeNameCheck
-        else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) {
+          _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName)) ||
+          // Alternative, second condition checks if it's an `is`-attribute, AND
-          if (_basicCustomElementTest(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName)) || lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value)));
+          // the value passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
-          else {
+          lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value))) ; else {
             return false;
+          }
-        } else if (URI_SAFE_ATTRIBUTES[lcName]);
+          /* Check value is safe. First, is attr inert? If so, is safe */
-        else if (regExpTest(IS_ALLOWED_URI$1, stringReplace(value, ATTR_WHITESPACE, '')));
-        else if ((lcName === 'src' || lcName === 'xlink:href' || lcName === 'href') && lcTag !== 'script' && stringIndexOf(value, 'data:') === 0 && DATA_URI_TAGS[lcTag]);
+        } else if (URI_SAFE_ATTRIBUTES[lcName]) ; else if (regExpTest(IS_ALLOWED_URI$1, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if ((lcName === 'src' || lcName === 'xlink:href' || lcName === 'href') && lcTag !== 'script' && stringIndexOf(value, 'data:') === 0 && DATA_URI_TAGS[lcTag]) ; else if (ALLOW_UNKNOWN_PROTOCOLS && !regExpTest(IS_SCRIPT_OR_DATA, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if (value) {
-        else if (ALLOW_UNKNOWN_PROTOCOLS && !regExpTest(IS_SCRIPT_OR_DATA, stringReplace(value, ATTR_WHITESPACE, '')));
-        else if (value) {
           return false;
         } else ;
         return true;
       };
+      /**
+       * _isBasicCustomElement
+       * checks if at least one dash is included in tagName, and it's not the first char
+       * for more sophisticated checking see https://github.com/sindresorhus/validate-element-name
+       *
+       * @param tagName name of the tag of the node to sanitize
+       * @returns Returns true if the tag name meets the basic criteria for a custom element, otherwise false.
+       */
-      const _basicCustomElementTest = function _basicCustomElementTest(tagName) {
+      const _isBasicCustomElement = function _isBasicCustomElement(tagName) {
-        return tagName.indexOf('-') > 0;
+        return tagName !== 'annotation-xml' && stringMatch(tagName, CUSTOM_ELEMENT);
       };
+      /**
+       * _sanitizeAttributes
+       *
+       * @protect attributes
+       * @protect nodeName
+       * @protect removeAttribute
+       * @protect setAttribute
+       *
+       * @param currentNode to sanitize
+       */
       const _sanitizeAttributes = function _sanitizeAttributes(currentNode) {
-        let attr;
+        /* Execute a hook if present */
+        _executeHooks(hooks.beforeSanitizeAttributes, currentNode, null);
-        let value;
+        const {
-        let lcName;
+          attributes
-        let l;
+        } = currentNode;
-        _executeHook('beforeSanitizeAttributes', currentNode, null);
+        /* Check if we have attributes; if not we might have a text node */
-        const {attributes} = currentNode;
+        if (!attributes || _isClobbered(currentNode)) {
-        if (!attributes) {
           return;
+        }
         const hookEvent = {
           attrName: '',
           attrValue: '',
           keepAttr: true,
-          allowedAttributes: ALLOWED_ATTR
+          allowedAttributes: ALLOWED_ATTR,
+          forceKeepAttr: undefined
         };
-        l = attributes.length;
+        let l = attributes.length;
+        /* Go backwards over all attributes; safely remove bad ones */
         while (l--) {
-          attr = attributes[l];
+          const attr = attributes[l];
+          const {
+            name,
+            namespaceURI,
+            value: attrValue
+          } = attr;
-          const {name, namespaceURI} = attr;
+          const lcName = transformCaseFunc(name);
-          value = name === 'value' ? attr.value : stringTrim(attr.value);
+          let value = name === 'value' ? attrValue : stringTrim(attrValue);
           const initValue = value;
-          lcName = transformCaseFunc(name);
+          /* Execute a hook if present */
           hookEvent.attrName = lcName;
           hookEvent.attrValue = value;
           hookEvent.keepAttr = true;
-          hookEvent.forceKeepAttr = undefined;
+          hookEvent.forceKeepAttr = undefined; // Allows developers to see this is a property they can set
-          _executeHook('uponSanitizeAttribute', currentNode, hookEvent);
+          _executeHooks(hooks.uponSanitizeAttribute, currentNode, hookEvent);
           value = hookEvent.attrValue;
+          /* Full DOM Clobbering protection via namespace isolation,
+           * Prefix id and name attributes with `user-content-`
+           */
+          if (SANITIZE_NAMED_PROPS && (lcName === 'id' || lcName === 'name')) {
+            // Remove the attribute with this value
+            _removeAttribute(name, currentNode);
+            // Prefix the value and later re-create the attribute with the sanitized value
+            value = SANITIZE_NAMED_PROPS_PREFIX + value;
+          }
+          /* Work around a security issue with comments inside attributes */
+          if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|title)/i, value)) {
+            _removeAttribute(name, currentNode);
+            continue;
+          }
+          /* Did the hooks approve of the attribute? */
           if (hookEvent.forceKeepAttr) {
             continue;
+          }
+          /* Remove attribute */
+          /* Did the hooks approve of the attribute? */
           if (!hookEvent.keepAttr) {
             _removeAttribute(name, currentNode);
             continue;
+          }
+          /* Work around a security issue in jQuery 3.0 */
           if (!ALLOW_SELF_CLOSE_IN_ATTR && regExpTest(/\/>/i, value)) {
             _removeAttribute(name, currentNode);
             continue;
+          }
+          /* Sanitize attribute content to be template-safe */
           if (SAFE_FOR_TEMPLATES) {
-            value = stringReplace(value, MUSTACHE_EXPR, ' ');
+            arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {
-            value = stringReplace(value, ERB_EXPR, ' ');
+              value = stringReplace(value, expr, ' ');
-            value = stringReplace(value, TMPLIT_EXPR, ' ');
+            });
+          }
+          /* Is `value` valid for this attribute? */
           const lcTag = transformCaseFunc(currentNode.nodeName);
           if (!_isValidAttribute(lcTag, lcName, value)) {
             _removeAttribute(name, currentNode);
             continue;
+          }
-          if (SANITIZE_NAMED_PROPS && (lcName === 'id' || lcName === 'name')) {
-            _removeAttribute(name, currentNode);
+          /* Handle attributes that require Trusted Types */
-            value = SANITIZE_NAMED_PROPS_PREFIX + value;
-          }
           if (trustedTypesPolicy && typeof trustedTypes === 'object' && typeof trustedTypes.getAttributeType === 'function') {
-            if (namespaceURI);
+            if (namespaceURI) ; else {
-            else {
               switch (trustedTypes.getAttributeType(lcTag, lcName)) {
-              case 'TrustedHTML': {
+                case 'TrustedHTML':
+                  {
-                  value = trustedTypesPolicy.createHTML(value);
+                    value = trustedTypesPolicy.createHTML(value);
-                  break;
+                    break;
-                }
+                  }
-              case 'TrustedScriptURL': {
+                case 'TrustedScriptURL':
+                  {
-                  value = trustedTypesPolicy.createScriptURL(value);
+                    value = trustedTypesPolicy.createScriptURL(value);
-                  break;
+                    break;
-                }
+                  }
+              }
+            }
+          }
+          /* Handle invalid data-* attribute set by try-catching it */
           if (value !== initValue) {
             try {
               if (namespaceURI) {
                 currentNode.setAttributeNS(namespaceURI, name, value);
               } else {
+                /* Fallback to setAttribute() for browser-unrecognized namespaces e.g. "x-schema". */
                 currentNode.setAttribute(name, value);
+              }
+              if (_isClobbered(currentNode)) {
+                _forceRemove(currentNode);
-            } catch (_) {
+              } else {
-              _removeAttribute(name, currentNode);
+                arrayPop(DOMPurify.removed);
-            }
+              }
+            } catch (_) {}
+          }
+        }
+        /* Execute a hook if present */
-        _executeHook('afterSanitizeAttributes', currentNode, null);
+        _executeHooks(hooks.afterSanitizeAttributes, currentNode, null);
       };
+      /**
+       * _sanitizeShadowDOM
+       *
+       * @param fragment to iterate over recursively
+       */
       const _sanitizeShadowDOM = function _sanitizeShadowDOM(fragment) {
-        let shadowNode;
+        let shadowNode = null;
-        const shadowIterator = _createIterator(fragment);
+        const shadowIterator = _createNodeIterator(fragment);
+        /* Execute a hook if present */
-        _executeHook('beforeSanitizeShadowDOM', fragment, null);
+        _executeHooks(hooks.beforeSanitizeShadowDOM, fragment, null);
         while (shadowNode = shadowIterator.nextNode()) {
+          /* Execute a hook if present */
-          _executeHook('uponSanitizeShadowNode', shadowNode, null);
+          _executeHooks(hooks.uponSanitizeShadowNode, shadowNode, null);
+          /* Sanitize tags and elements */
-          if (_sanitizeElements(shadowNode)) {
+          _sanitizeElements(shadowNode);
-            continue;
+          /* Check attributes next */
+          _sanitizeAttributes(shadowNode);
-          }
+          /* Deep shadow DOM detected */
           if (shadowNode.content instanceof DocumentFragment) {
             _sanitizeShadowDOM(shadowNode.content);
+          }
-          _sanitizeAttributes(shadowNode);
+        }
+        /* Execute a hook if present */
-        _executeHook('afterSanitizeShadowDOM', fragment, null);
+        _executeHooks(hooks.afterSanitizeShadowDOM, fragment, null);
       };
+      // eslint-disable-next-line complexity
       DOMPurify.sanitize = function (dirty) {
         let cfg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        let body;
+        let body = null;
-        let importedNode;
+        let importedNode = null;
-        let currentNode;
+        let currentNode = null;
-        let returnNode;
+        let returnNode = null;
+        /* Make sure we have a string to sanitize.
+          DO NOT return early, as this will return the wrong type if
+          the user has requested a DOM object rather than a string */
         IS_EMPTY_INPUT = !dirty;
         if (IS_EMPTY_INPUT) {
           dirty = '<!-->';
+        }
+        /* Stringify, in case dirty is an object */
         if (typeof dirty !== 'string' && !_isNode(dirty)) {
           if (typeof dirty.toString === 'function') {
             dirty = dirty.toString();
             if (typeof dirty !== 'string') {
               throw typeErrorCreate('dirty is not a string, aborting');
+            }
           } else {
             throw typeErrorCreate('toString is not a function');
+          }
+        }
+        /* Return dirty HTML if DOMPurify cannot run */
         if (!DOMPurify.isSupported) {
           return dirty;
+        }
+        /* Assign config vars */
         if (!SET_CONFIG) {
           _parseConfig(cfg);
+        }
+        /* Clean up removed elements */
         DOMPurify.removed = [];
+        /* Check if dirty is correctly typed for IN_PLACE */
         if (typeof dirty === 'string') {
           IN_PLACE = false;
+        }
         if (IN_PLACE) {
+          /* Do some early pre-sanitization to avoid unsafe root nodes */
           if (dirty.nodeName) {
             const tagName = transformCaseFunc(dirty.nodeName);
             if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {
               throw typeErrorCreate('root node is forbidden and cannot be sanitized in-place');
+            }
+          }
         } else if (dirty instanceof Node) {
+          /* If dirty is a DOM element, append to an empty document to avoid
+             elements being stripped by the parser */
           body = _initDocument('<!---->');
           importedNode = body.ownerDocument.importNode(dirty, true);
-          if (importedNode.nodeType === 1 && importedNode.nodeName === 'BODY') {
+          if (importedNode.nodeType === NODE_TYPE.element && importedNode.nodeName === 'BODY') {
+            /* Node is already a body, use as is */
             body = importedNode;
           } else if (importedNode.nodeName === 'HTML') {
             body = importedNode;
           } else {
+            // eslint-disable-next-line unicorn/prefer-dom-node-append
             body.appendChild(importedNode);
+          }
         } else {
+          /* Exit directly if we have nothing to do */
-          if (!RETURN_DOM && !SAFE_FOR_TEMPLATES && !WHOLE_DOCUMENT && dirty.indexOf('<') === -1) {
+          if (!RETURN_DOM && !SAFE_FOR_TEMPLATES && !WHOLE_DOCUMENT &&
+          // eslint-disable-next-line unicorn/prefer-includes
+          dirty.indexOf('<') === -1) {
             return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(dirty) : dirty;
+          }
+          /* Initialize the document to work on */
           body = _initDocument(dirty);
+          /* Check we have a DOM node from the data */
           if (!body) {
             return RETURN_DOM ? null : RETURN_TRUSTED_TYPE ? emptyHTML : '';
+          }
+        }
+        /* Remove first element node (ours) if FORCE_BODY is set */
         if (body && FORCE_BODY) {
           _forceRemove(body.firstChild);
+        }
+        /* Get node iterator */
-        const nodeIterator = _createIterator(IN_PLACE ? dirty : body);
+        const nodeIterator = _createNodeIterator(IN_PLACE ? dirty : body);
+        /* Now start iterating over the created document */
         while (currentNode = nodeIterator.nextNode()) {
+          /* Sanitize tags and elements */
-          if (_sanitizeElements(currentNode)) {
+          _sanitizeElements(currentNode);
-            continue;
+          /* Check attributes next */
-          }
+          _sanitizeAttributes(currentNode);
+          /* Shadow DOM detected, sanitize it */
           if (currentNode.content instanceof DocumentFragment) {
             _sanitizeShadowDOM(currentNode.content);
+          }
-          _sanitizeAttributes(currentNode);
+        }
+        /* If we sanitized `dirty` in-place, return it. */
         if (IN_PLACE) {
           return dirty;
+        }
+        /* Return sanitized string or DOM */
         if (RETURN_DOM) {
           if (RETURN_DOM_FRAGMENT) {
             returnNode = createDocumentFragment.call(body.ownerDocument);
             while (body.firstChild) {
+              // eslint-disable-next-line unicorn/prefer-dom-node-append
               returnNode.appendChild(body.firstChild);
+            }
           } else {
             returnNode = body;
+          }
           if (ALLOWED_ATTR.shadowroot || ALLOWED_ATTR.shadowrootmode) {
+            /*
+              AdoptNode() is not used because internal state is not reset
+              (e.g. the past names map of a HTMLFormElement), this is safe
+              in theory but we would rather not risk another attack vector.
+              The state that is cloned by importNode() is explicitly defined
+              by the specs.
+            */
             returnNode = importNode.call(originalDocument, returnNode, true);
+          }
           return returnNode;
+        }
         let serializedHTML = WHOLE_DOCUMENT ? body.outerHTML : body.innerHTML;
+        /* Serialize doctype if allowed */
         if (WHOLE_DOCUMENT && ALLOWED_TAGS['!doctype'] && body.ownerDocument && body.ownerDocument.doctype && body.ownerDocument.doctype.name && regExpTest(DOCTYPE_NAME, body.ownerDocument.doctype.name)) {
           serializedHTML = '<!DOCTYPE ' + body.ownerDocument.doctype.name + '>\n' + serializedHTML;
+        }
+        /* Sanitize final string template-safe */
         if (SAFE_FOR_TEMPLATES) {
-          serializedHTML = stringReplace(serializedHTML, MUSTACHE_EXPR, ' ');
+          arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {
-          serializedHTML = stringReplace(serializedHTML, ERB_EXPR, ' ');
+            serializedHTML = stringReplace(serializedHTML, expr, ' ');
-          serializedHTML = stringReplace(serializedHTML, TMPLIT_EXPR, ' ');
+          });
+        }
         return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(serializedHTML) : serializedHTML;
       };
-      DOMPurify.setConfig = function (cfg) {
+      DOMPurify.setConfig = function () {
+        let cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         _parseConfig(cfg);
         SET_CONFIG = true;
       };
       DOMPurify.clearConfig = function () {
         CONFIG = null;
         SET_CONFIG = false;
       };
       DOMPurify.isValidAttribute = function (tag, attr, value) {
+        /* Initialize shared config vars if necessary. */
         if (!CONFIG) {
           _parseConfig({});
+        }
         const lcTag = transformCaseFunc(tag);
         const lcName = transformCaseFunc(attr);
       };
       DOMPurify.addHook = function (entryPoint, hookFunction) {
         if (typeof hookFunction !== 'function') {
           return;
+        }
-        hooks[entryPoint] = hooks[entryPoint] || [];
         arrayPush(hooks[entryPoint], hookFunction);
       };
-      DOMPurify.removeHook = function (entryPoint) {
+      DOMPurify.removeHook = function (entryPoint, hookFunction) {
-        if (hooks[entryPoint]) {
+        if (hookFunction !== undefined) {
-          return arrayPop(hooks[entryPoint]);
+          const index = arrayLastIndexOf(hooks[entryPoint], hookFunction);
+          return index === -1 ? undefined : arraySplice(hooks[entryPoint], index, 1)[0];
+        }
+        return arrayPop(hooks[entryPoint]);
       };
       DOMPurify.removeHooks = function (entryPoint) {
-        if (hooks[entryPoint]) {
-          hooks[entryPoint] = [];
+        hooks[entryPoint] = [];
-        }
       };
       DOMPurify.removeAllHooks = function () {
-        hooks = {};
+        hooks = _createHooksMap();
       };
       return DOMPurify;
+    }
     var purify = createDOMPurify();
     const sanitizeHtmlString = html => purify().sanitize(html);
-    var global$8 = tinymce.util.Tools.resolve('tinymce.util.I18n');
+    var global$5 = tinymce.util.Tools.resolve('tinymce.util.I18n');
     const rtlTransform = {
       'list-bull-circle': true,
       'list-bull-default': true,
       'list-bull-square': true
     };
     const defaultIconName = 'temporary-placeholder';
-    const defaultIcon = icons => () => get$g(icons, defaultIconName).getOr('!not found!');
+    const defaultIcon = icons => () => get$h(icons, defaultIconName).getOr('!not found!');
     const getIconName = (name, icons) => {
       const lcName = name.toLowerCase();
-      if (global$8.isRtl()) {
+      if (global$5.isRtl()) {
         const rtlName = ensureTrailing(lcName, '-rtl');
         return has$2(icons, rtlName) ? rtlName : lcName;
       } else {
         return lcName;
+      }
     };
-    const lookupIcon = (name, icons) => get$g(icons, getIconName(name, icons));
+    const lookupIcon = (name, icons) => get$h(icons, getIconName(name, icons));
-    const get$2 = (name, iconProvider) => {
+    const get$3 = (name, iconProvider) => {
       const icons = iconProvider();
       return lookupIcon(name, icons).getOrThunk(defaultIcon(icons));
     };
     const getOr = (name, iconProvider, fallbackIcon) => {
       const icons = iconProvider();
       return lookupIcon(name, icons).or(fallbackIcon).getOrThunk(defaultIcon(icons));
     };
-    const needsRtlTransform = iconName => global$8.isRtl() ? has$2(rtlTransform, iconName) : false;
+    const needsRtlTransform = iconName => global$5.isRtl() ? has$2(rtlTransform, iconName) : false;
     const addFocusableBehaviour = () => config('add-focusable', [runOnAttached(comp => {
         child(comp.element, 'svg').each(svg => set$9(svg, 'focusable', 'false'));
       })]);
     const renderIcon$3 = (spec, iconName, icons, fallbackIcon) => {
       var _a, _b;
       const rtlIconClasses = needsRtlTransform(iconName) ? ['tox-icon--flip'] : [];
-      const iconHtml = get$g(icons, getIconName(iconName, icons)).or(fallbackIcon).getOrThunk(defaultIcon(icons));
+      const iconHtml = get$h(icons, getIconName(iconName, icons)).or(fallbackIcon).getOrThunk(defaultIcon(icons));
       return {
         dom: {
           tag: spec.tag,
           attributes: (_a = spec.attributes) !== null && _a !== void 0 ? _a : {},
           classes: spec.classes.concat(rtlIconClasses),
       warning: 'warning',
       warn: 'warning',
       info: 'info'
     };
     const factory$m = detail => {
+      const notificationTextId = generate$6('notification-text');
       const memBannerText = record({
-        dom: fromHtml(`<p>${ sanitizeHtmlString(detail.translationProvider(detail.text)) }</p>`),
+        dom: fromHtml(`<p id=${ notificationTextId }>${ sanitizeHtmlString(detail.backstageProvider.translate(detail.text)) }</p>`),
         behaviours: derive$1([Replacing.config({})])
       });
       const renderPercentBar = percent => ({
         dom: {
           tag: 'div',
         updateProgress,
         updateText
       };
       const iconChoices = flatten([
         detail.icon.toArray(),
-        detail.level.toArray(),
+        [detail.level],
-        detail.level.bind(level => Optional.from(notificationIconMap[level])).toArray()
+        Optional.from(notificationIconMap[detail.level]).toArray()
       ]);
       const memButton = record(Button.sketch({
         dom: {
           tag: 'button',
           classes: [
             'tox-notification__dismiss',
             'tox-button',
             'tox-button--naked',
             'tox-button--icon'
-          ]
+          ],
+          attributes: { 'aria-label': detail.backstageProvider.translate('Close') }
         },
         components: [render$3('close', {
             tag: 'span',
-            classes: ['tox-icon'],
+            classes: ['tox-icon']
-            attributes: { 'aria-label': detail.translationProvider('Close') }
           }, detail.iconProvider)],
+        buttonBehaviours: derive$1([
+          Tabstopping.config({}),
+          Tooltipping.config({ ...detail.backstageProvider.tooltips.getConfig({ tooltipText: detail.backstageProvider.translate('Close') }) })
+        ]),
         action: comp => {
           detail.onAction(comp);
+        }
       }));
       const notificationIconSpec = renderFirst(iconChoices, {
       ];
       return {
         uid: detail.uid,
         dom: {
           tag: 'div',
+          attributes: {
-          attributes: { role: 'alert' },
+            'role': 'alert',
+            'aria-labelledby': notificationTextId
+          },
-          classes: detail.level.map(level => [
+          classes: [
             'tox-notification',
             'tox-notification--in',
-            `tox-notification--${ level }`
+            `tox-notification--${ detail.level }`
-          ]).getOr([
-            'tox-notification',
-            'tox-notification--in'
-          ])
+          ]
         },
         behaviours: derive$1([
+          Tabstopping.config({}),
           Focusing.config({}),
+          Keying.config({
+            mode: 'special',
+            onEscape: comp => {
-          config('notification-events', [run$1(focusin(), comp => {
+              detail.onAction(comp);
-              memButton.getOpt(comp).each(Focusing.focus);
+              return Optional.some(true);
-            })])
+            }
+          })
         ]),
-        components: components.concat(detail.progress ? [memBannerProgress.asSpec()] : []).concat(!detail.closeButton ? [] : [memButton.asSpec()]),
+        components: components.concat(detail.progress ? [memBannerProgress.asSpec()] : []).concat([memButton.asSpec()]),
         apis
       };
     };
     const Notification = single({
       name: 'Notification',
       factory: factory$m,
       configFields: [
+        defaultedStringEnum('level', 'info', [
-        option$3('level'),
+          'success',
+          'error',
+          'warning',
+          'warn',
+          'info'
+        ]),
         required$1('progress'),
         option$3('icon'),
         required$1('onAction'),
         required$1('text'),
         required$1('iconProvider'),
-        required$1('translationProvider'),
+        required$1('backstageProvider')
-        defaultedBoolean('closeButton', true)
       ],
       apis: {
         updateProgress: (apis, comp, percent) => {
           apis.updateProgress(comp, percent);
         },
           apis.updateText(comp, text);
+        }
+      }
     });
-    var NotificationManagerImpl = (editor, extras, uiMothership) => {
+    var NotificationManagerImpl = (editor, extras, uiMothership, notificationRegion) => {
+      const sharedBackstage = extras.backstage.shared;
-      const sharedBackstage = extras.backstage.shared;
+      const getBoundsContainer = () => SugarElement.fromDom(editor.queryCommandValue('ToggleView') === '' ? editor.getContentAreaContainer() : editor.getContainer());
       const getBounds = () => {
-        const contentArea = box$1(SugarElement.fromDom(editor.getContentAreaContainer()));
+        const contentArea = box$1(getBoundsContainer());
+        return Optional.some(contentArea);
-        const win$1 = win();
+      };
+      const clampComponentsToBounds = components => {
-        const x = clamp(win$1.x, contentArea.x, contentArea.right);
+        getBounds().each(bounds => {
-        const y = clamp(win$1.y, contentArea.y, contentArea.bottom);
+          each$1(components, comp => {
-        const right = Math.max(contentArea.right, win$1.right);
+            remove$7(comp.element, 'width');
-        const bottom = Math.max(contentArea.bottom, win$1.bottom);
+            if (get$d(comp.element) > bounds.width) {
+              set$8(comp.element, 'width', bounds.width + 'px');
+            }
+          });
-        return Optional.some(bounds(x, y, right - x, bottom - y));
+        });
       };
-      const open = (settings, closeCallback) => {
+      const open = (settings, closeCallback, isEditorOrUIFocused) => {
+        const close = () => {
+          const removeNotificationAndReposition = region => {
+            Replacing.remove(region, notification);
+            reposition();
+          };
+          const manageRegionVisibility = (region, editorOrUiFocused) => {
+            if (children(region.element).length === 0) {
+              handleEmptyRegion(region, editorOrUiFocused);
+            } else {
+              handleRegionWithChildren(region, editorOrUiFocused);
+            }
+          };
+          const handleEmptyRegion = (region, editorOrUIFocused) => {
+            InlineView.hide(region);
+            notificationRegion.clear();
+            if (editorOrUIFocused) {
+              editor.focus();
+            }
+          };
+          const handleRegionWithChildren = (region, editorOrUIFocused) => {
+            if (editorOrUIFocused) {
+              Keying.focusIn(region);
+            }
+          };
-        const close = () => {
+          notificationRegion.on(region => {
+            closeCallback();
-          closeCallback();
+            const editorOrUIFocused = isEditorOrUIFocused();
+            removeNotificationAndReposition(region);
+            manageRegionVisibility(region, editorOrUIFocused);
-          InlineView.hide(notificationWrapper);
+          });
+        };
-        };
+        const shouldApplyDocking = () => !isStickyToolbar(editor) || !sharedBackstage.header.isPositionedAtTop();
         const notification = build$1(Notification.sketch({
           text: settings.text,
           level: contains$2([
             'success',
             'warn',
             'info'
           ], settings.type) ? settings.type : undefined,
           progress: settings.progressBar === true,
           icon: settings.icon,
-          closeButton: settings.closeButton,
           onAction: close,
           iconProvider: sharedBackstage.providers.icons,
-          translationProvider: sharedBackstage.providers.translate
+          backstageProvider: sharedBackstage.providers
-        }));
-        const notificationWrapper = build$1(InlineView.sketch({
-          dom: {
-            tag: 'div',
-            classes: ['tox-notifications-container']
-          },
-          lazySink: sharedBackstage.getSink,
-          fireDismissalEventInstead: {},
-          ...sharedBackstage.header.isPositionedAtTop() ? {} : { fireRepositionEventInstead: {} }
         }));
+        if (!notificationRegion.isSet()) {
+          const notificationWrapper = build$1(InlineView.sketch({
+            dom: {
+              tag: 'div',
+              classes: ['tox-notifications-container'],
+              attributes: {
+                'aria-label': 'Notifications',
+                'role': 'region'
+              }
+            },
+            lazySink: sharedBackstage.getSink,
+            fireDismissalEventInstead: {},
+            ...sharedBackstage.header.isPositionedAtTop() ? {} : { fireRepositionEventInstead: {} },
+            inlineBehaviours: derive$1([
+              Keying.config({
+                mode: 'cyclic',
+                selector: '.tox-notification, .tox-notification a, .tox-notification button'
+              }),
+              Replacing.config({}),
+              ...shouldApplyDocking() ? [Docking.config({
+                  contextual: {
+                    lazyContext: () => Optional.some(box$1(getBoundsContainer())),
+                    fadeInClass: 'tox-notification-container-dock-fadein',
+                    fadeOutClass: 'tox-notification-container-dock-fadeout',
+                    transitionClass: 'tox-notification-container-dock-transition'
+                  },
+                  modes: ['top'],
+                  lazyViewport: comp => {
+                    const optScrollingContext = detectWhenSplitUiMode(editor, comp.element);
+                    return optScrollingContext.map(sc => {
+                      const combinedBounds = getBoundsFrom(sc);
+                      return {
+                        bounds: combinedBounds,
+                        optScrollEnv: Optional.some({
+                          currentScrollTop: sc.element.dom.scrollTop,
+                          scrollElmTop: absolute$3(sc.element).top
+                        })
+                      };
+                    }).getOrThunk(() => ({
+                      bounds: win(),
+                      optScrollEnv: Optional.none()
+                    }));
+                  }
+                })] : []
+            ])
+          }));
+          const notificationSpec = premade(notification);
+          const anchorOverrides = { maxHeightFunction: expandable$1() };
+          const anchor = {
+            ...sharedBackstage.anchors.banner(),
+            overrides: anchorOverrides
+          };
+          notificationRegion.set(notificationWrapper);
-        uiMothership.add(notificationWrapper);
+          uiMothership.add(notificationWrapper);
+          InlineView.showWithinBounds(notificationWrapper, notificationSpec, { anchor }, getBounds);
+        } else {
+          const notificationSpec = premade(notification);
+          notificationRegion.on(notificationWrapper => {
+            Replacing.append(notificationWrapper, notificationSpec);
+            InlineView.reposition(notificationWrapper);
+            if (notification.hasConfigured(Docking)) {
+              Docking.refresh(notificationWrapper);
+            }
+            clampComponentsToBounds(notificationWrapper.components());
+          });
+        }
         if (isNumber(settings.timeout) && settings.timeout > 0) {
           global$9.setEditorTimeout(editor, () => {
             close();
           }, settings.timeout);
+        }
         const reposition = () => {
-          const notificationSpec = premade(notification);
+          notificationRegion.on(region => {
-          const anchorOverrides = { maxHeightFunction: expandable$1() };
-          const allNotifications = editor.notificationManager.getNotifications();
-          if (allNotifications[0] === thisNotification) {
+            InlineView.reposition(region);
-            const anchor = {
-              ...sharedBackstage.anchors.banner(),
+            if (region.hasConfigured(Docking)) {
-              overrides: anchorOverrides
+              Docking.refresh(region);
-            };
+            }
-            InlineView.showWithinBounds(notificationWrapper, notificationSpec, { anchor }, getBounds);
-          } else {
-            indexOf(allNotifications, thisNotification).each(idx => {
+            clampComponentsToBounds(region.components());
-              const previousNotification = allNotifications[idx - 1].getEl();
-              const nodeAnchor = {
-                type: 'node',
-                root: body(),
-                node: Optional.some(SugarElement.fromDom(previousNotification)),
-                overrides: anchorOverrides,
-                layouts: {
-                  onRtl: () => [south$2],
-                  onLtr: () => [south$2]
-                }
-              };
-              InlineView.showWithinBounds(notificationWrapper, notificationSpec, { anchor: nodeAnchor }, getBounds);
-            });
+          });
-          }
         };
         const thisNotification = {
           close,
           reposition,
           text: nuText => {
         close,
         getArgs
       };
     };
-    var global$7 = tinymce.util.Tools.resolve('tinymce.dom.DOMUtils');
-    var global$6 = tinymce.util.Tools.resolve('tinymce.EditorManager');
-    var global$5 = tinymce.util.Tools.resolve('tinymce.Env');
-    var ToolbarMode$1;
-    (function (ToolbarMode) {
-      ToolbarMode['default'] = 'wrap';
-      ToolbarMode['floating'] = 'floating';
-      ToolbarMode['sliding'] = 'sliding';
-      ToolbarMode['scrolling'] = 'scrolling';
-    }(ToolbarMode$1 || (ToolbarMode$1 = {})));
-    var ToolbarLocation$1;
-    (function (ToolbarLocation) {
-      ToolbarLocation['auto'] = 'auto';
-      ToolbarLocation['top'] = 'top';
-      ToolbarLocation['bottom'] = 'bottom';
-    }(ToolbarLocation$1 || (ToolbarLocation$1 = {})));
-    const option$2 = name => editor => editor.options.get(name);
-    const wrapOptional = fn => editor => Optional.from(fn(editor));
-    const register$e = editor => {
-      const isPhone = global$5.deviceType.isPhone();
-      const isMobile = global$5.deviceType.isTablet() || isPhone;
-      const registerOption = editor.options.register;
-      const stringOrFalseProcessor = value => isString(value) || value === false;
-      const stringOrNumberProcessor = value => isString(value) || isNumber(value);
-      registerOption('skin', {
-        processor: value => isString(value) || value === false,
-        default: 'oxide'
-      });
-      registerOption('skin_url', { processor: 'string' });
-      registerOption('height', {
-        processor: stringOrNumberProcessor,
-        default: Math.max(editor.getElement().offsetHeight, 400)
-      });
-      registerOption('width', {
-        processor: stringOrNumberProcessor,
-        default: global$7.DOM.getStyle(editor.getElement(), 'width')
-      });
-      registerOption('min_height', {
-        processor: 'number',
-        default: 100
-      });
-      registerOption('min_width', { processor: 'number' });
-      registerOption('max_height', { processor: 'number' });
-      registerOption('max_width', { processor: 'number' });
-      registerOption('style_formats', { processor: 'object[]' });
-      registerOption('style_formats_merge', {
-        processor: 'boolean',
-        default: false
-      });
-      registerOption('style_formats_autohide', {
-        processor: 'boolean',
-        default: false
-      });
-      registerOption('line_height_formats', {
-        processor: 'string',
-        default: '1 1.1 1.2 1.3 1.4 1.5 2'
-      });
-      registerOption('font_family_formats', {
-        processor: 'string',
-        default: 'Andale Mono=andale mono,monospace;' + 'Arial=arial,helvetica,sans-serif;' + 'Arial Black=arial black,sans-serif;' + 'Book Antiqua=book antiqua,palatino,serif;' + 'Comic Sans MS=comic sans ms,sans-serif;' + 'Courier New=courier new,courier,monospace;' + 'Georgia=georgia,palatino,serif;' + 'Helvetica=helvetica,arial,sans-serif;' + 'Impact=impact,sans-serif;' + 'Symbol=symbol;' + 'Tahoma=tahoma,arial,helvetica,sans-serif;' + 'Terminal=terminal,monaco,monospace;' + 'Times New Roman=times new roman,times,serif;' + 'Trebuchet MS=trebuchet ms,geneva,sans-serif;' + 'Verdana=verdana,geneva,sans-serif;' + 'Webdings=webdings;' + 'Wingdings=wingdings,zapf dingbats'
-      });
-      registerOption('font_size_formats', {
-        processor: 'string',
-        default: '8pt 10pt 12pt 14pt 18pt 24pt 36pt'
-      });
-      registerOption('font_size_input_default_unit', {
-        processor: 'string',
-        default: 'pt'
-      });
-      registerOption('block_formats', {
-        processor: 'string',
-        default: 'Paragraph=p;' + 'Heading 1=h1;' + 'Heading 2=h2;' + 'Heading 3=h3;' + 'Heading 4=h4;' + 'Heading 5=h5;' + 'Heading 6=h6;' + 'Preformatted=pre'
-      });
-      registerOption('content_langs', { processor: 'object[]' });
-      registerOption('removed_menuitems', {
-        processor: 'string',
-        default: ''
-      });
-      registerOption('menubar', {
-        processor: value => isString(value) || isBoolean(value),
-        default: !isPhone
-      });
-      registerOption('menu', {
-        processor: 'object',
-        default: {}
-      });
-      registerOption('toolbar', {
-        processor: value => {
-          if (isBoolean(value) || isString(value) || isArray(value)) {
-            return {
-              value,
-              valid: true
-            };
-          } else {
-            return {
-              valid: false,
-              message: 'Must be a boolean, string or array.'
-            };
-          }
-        },
-        default: true
-      });
-      range$2(9, num => {
-        registerOption('toolbar' + (num + 1), { processor: 'string' });
-      });
-      registerOption('toolbar_mode', {
-        processor: 'string',
-        default: isMobile ? 'scrolling' : 'floating'
-      });
-      registerOption('toolbar_groups', {
-        processor: 'object',
-        default: {}
-      });
-      registerOption('toolbar_location', {
-        processor: 'string',
-        default: ToolbarLocation$1.auto
-      });
-      registerOption('toolbar_persist', {
-        processor: 'boolean',
-        default: false
-      });
-      registerOption('toolbar_sticky', {
-        processor: 'boolean',
-        default: editor.inline
-      });
-      registerOption('toolbar_sticky_offset', {
-        processor: 'number',
-        default: 0
-      });
-      registerOption('fixed_toolbar_container', {
-        processor: 'string',
-        default: ''
-      });
-      registerOption('fixed_toolbar_container_target', { processor: 'object' });
-      registerOption('ui_mode', {
-        processor: 'string',
-        default: 'combined'
-      });
-      registerOption('file_picker_callback', { processor: 'function' });
-      registerOption('file_picker_validator_handler', { processor: 'function' });
-      registerOption('file_picker_types', { processor: 'string' });
-      registerOption('typeahead_urls', {
-        processor: 'boolean',
-        default: true
-      });
-      registerOption('anchor_top', {
-        processor: stringOrFalseProcessor,
-        default: '#top'
-      });
-      registerOption('anchor_bottom', {
-        processor: stringOrFalseProcessor,
-        default: '#bottom'
-      });
-      registerOption('draggable_modal', {
-        processor: 'boolean',
-        default: false
-      });
-      registerOption('statusbar', {
-        processor: 'boolean',
-        default: true
-      });
-      registerOption('elementpath', {
-        processor: 'boolean',
-        default: true
-      });
-      registerOption('branding', {
-        processor: 'boolean',
-        default: true
-      });
-      registerOption('promotion', {
-        processor: 'boolean',
-        default: true
-      });
-      registerOption('resize', {
-        processor: value => value === 'both' || isBoolean(value),
-        default: !global$5.deviceType.isTouch()
-      });
-      registerOption('sidebar_show', { processor: 'string' });
-      registerOption('help_accessibility', {
-        processor: 'boolean',
-        default: editor.hasPlugin('help')
-      });
-      registerOption('default_font_stack', {
-        processor: 'string[]',
-        default: []
-      });
-    };
-    const isReadOnly = option$2('readonly');
-    const getHeightOption = option$2('height');
-    const getWidthOption = option$2('width');
-    const getMinWidthOption = wrapOptional(option$2('min_width'));
-    const getMinHeightOption = wrapOptional(option$2('min_height'));
-    const getMaxWidthOption = wrapOptional(option$2('max_width'));
-    const getMaxHeightOption = wrapOptional(option$2('max_height'));
-    const getUserStyleFormats = wrapOptional(option$2('style_formats'));
-    const shouldMergeStyleFormats = option$2('style_formats_merge');
-    const shouldAutoHideStyleFormats = option$2('style_formats_autohide');
-    const getContentLanguages = option$2('content_langs');
-    const getRemovedMenuItems = option$2('removed_menuitems');
-    const getToolbarMode = option$2('toolbar_mode');
-    const getToolbarGroups = option$2('toolbar_groups');
-    const getToolbarLocation = option$2('toolbar_location');
-    const fixedContainerSelector = option$2('fixed_toolbar_container');
-    const fixedToolbarContainerTarget = option$2('fixed_toolbar_container_target');
-    const isToolbarPersist = option$2('toolbar_persist');
-    const getStickyToolbarOffset = option$2('toolbar_sticky_offset');
-    const getMenubar = option$2('menubar');
-    const getToolbar = option$2('toolbar');
-    const getFilePickerCallback = option$2('file_picker_callback');
-    const getFilePickerValidatorHandler = option$2('file_picker_validator_handler');
-    const getFontSizeInputDefaultUnit = option$2('font_size_input_default_unit');
-    const getFilePickerTypes = option$2('file_picker_types');
-    const useTypeaheadUrls = option$2('typeahead_urls');
-    const getAnchorTop = option$2('anchor_top');
-    const getAnchorBottom = option$2('anchor_bottom');
-    const isDraggableModal$1 = option$2('draggable_modal');
-    const useStatusBar = option$2('statusbar');
-    const useElementPath = option$2('elementpath');
-    const useBranding = option$2('branding');
-    const getResize = option$2('resize');
-    const getPasteAsText = option$2('paste_as_text');
-    const getSidebarShow = option$2('sidebar_show');
-    const promotionEnabled = option$2('promotion');
-    const useHelpAccessibility = option$2('help_accessibility');
-    const getDefaultFontStack = option$2('default_font_stack');
-    const isSkinDisabled = editor => editor.options.get('skin') === false;
-    const isMenubarEnabled = editor => editor.options.get('menubar') !== false;
-    const getSkinUrl = editor => {
-      const skinUrl = editor.options.get('skin_url');
-      if (isSkinDisabled(editor)) {
-        return skinUrl;
-      } else {
-        if (skinUrl) {
-          return editor.documentBaseURI.toAbsolute(skinUrl);
-        } else {
-          const skin = editor.options.get('skin');
-          return global$6.baseURL + '/skins/ui/' + skin;
-        }
-      }
-    };
-    const getSkinUrlOption = editor => Optional.from(editor.options.get('skin_url'));
-    const getLineHeightFormats = editor => editor.options.get('line_height_formats').split(' ');
-    const isToolbarEnabled = editor => {
-      const toolbar = getToolbar(editor);
-      const isToolbarString = isString(toolbar);
-      const isToolbarObjectArray = isArray(toolbar) && toolbar.length > 0;
-      return !isMultipleToolbars(editor) && (isToolbarObjectArray || isToolbarString || toolbar === true);
-    };
-    const getMultipleToolbarsOption = editor => {
-      const toolbars = range$2(9, num => editor.options.get('toolbar' + (num + 1)));
-      const toolbarArray = filter$2(toolbars, isString);
-      return someIf(toolbarArray.length > 0, toolbarArray);
-    };
-    const isMultipleToolbars = editor => getMultipleToolbarsOption(editor).fold(() => {
-      const toolbar = getToolbar(editor);
-      return isArrayOf(toolbar, isString) && toolbar.length > 0;
-    }, always);
-    const isToolbarLocationBottom = editor => getToolbarLocation(editor) === ToolbarLocation$1.bottom;
-    const fixedContainerTarget = editor => {
-      var _a;
-      if (!editor.inline) {
-        return Optional.none();
-      }
-      const selector = (_a = fixedContainerSelector(editor)) !== null && _a !== void 0 ? _a : '';
-      if (selector.length > 0) {
-        return descendant(body(), selector);
-      }
-      const element = fixedToolbarContainerTarget(editor);
-      if (isNonNullable(element)) {
-        return Optional.some(SugarElement.fromDom(element));
-      }
-      return Optional.none();
-    };
-    const useFixedContainer = editor => editor.inline && fixedContainerTarget(editor).isSome();
-    const getUiContainer = editor => {
-      const fixedContainer = fixedContainerTarget(editor);
-      return fixedContainer.getOrThunk(() => getContentContainer(getRootNode(SugarElement.fromDom(editor.getElement()))));
-    };
-    const isDistractionFree = editor => editor.inline && !isMenubarEnabled(editor) && !isToolbarEnabled(editor) && !isMultipleToolbars(editor);
-    const isStickyToolbar = editor => {
-      const isStickyToolbar = editor.options.get('toolbar_sticky');
-      return (isStickyToolbar || editor.inline) && !useFixedContainer(editor) && !isDistractionFree(editor);
-    };
-    const isSplitUiMode = editor => !useFixedContainer(editor) && editor.options.get('ui_mode') === 'split';
-    const getMenus = editor => {
-      const menu = editor.options.get('menu');
-      return map$1(menu, menu => ({
-        ...menu,
-        items: menu.items
-      }));
-    };
-    var Options = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        get ToolbarMode () { return ToolbarMode$1; },
-        get ToolbarLocation () { return ToolbarLocation$1; },
-        register: register$e,
-        getSkinUrl: getSkinUrl,
-        getSkinUrlOption: getSkinUrlOption,
-        isReadOnly: isReadOnly,
-        isSkinDisabled: isSkinDisabled,
-        getHeightOption: getHeightOption,
-        getWidthOption: getWidthOption,
-        getMinWidthOption: getMinWidthOption,
-        getMinHeightOption: getMinHeightOption,
-        getMaxWidthOption: getMaxWidthOption,
-        getMaxHeightOption: getMaxHeightOption,
-        getUserStyleFormats: getUserStyleFormats,
-        shouldMergeStyleFormats: shouldMergeStyleFormats,
-        shouldAutoHideStyleFormats: shouldAutoHideStyleFormats,
-        getLineHeightFormats: getLineHeightFormats,
-        getContentLanguages: getContentLanguages,
-        getRemovedMenuItems: getRemovedMenuItems,
-        isMenubarEnabled: isMenubarEnabled,
-        isMultipleToolbars: isMultipleToolbars,
-        isToolbarEnabled: isToolbarEnabled,
-        isToolbarPersist: isToolbarPersist,
-        getMultipleToolbarsOption: getMultipleToolbarsOption,
-        getUiContainer: getUiContainer,
-        useFixedContainer: useFixedContainer,
-        isSplitUiMode: isSplitUiMode,
-        getToolbarMode: getToolbarMode,
-        isDraggableModal: isDraggableModal$1,
-        isDistractionFree: isDistractionFree,
-        isStickyToolbar: isStickyToolbar,
-        getStickyToolbarOffset: getStickyToolbarOffset,
-        getToolbarLocation: getToolbarLocation,
-        isToolbarLocationBottom: isToolbarLocationBottom,
-        getToolbarGroups: getToolbarGroups,
-        getMenus: getMenus,
-        getMenubar: getMenubar,
-        getToolbar: getToolbar,
-        getFilePickerCallback: getFilePickerCallback,
-        getFilePickerTypes: getFilePickerTypes,
-        useTypeaheadUrls: useTypeaheadUrls,
-        getAnchorTop: getAnchorTop,
-        getAnchorBottom: getAnchorBottom,
-        getFilePickerValidatorHandler: getFilePickerValidatorHandler,
-        getFontSizeInputDefaultUnit: getFontSizeInputDefaultUnit,
-        useStatusBar: useStatusBar,
-        useElementPath: useElementPath,
-        promotionEnabled: promotionEnabled,
-        useBranding: useBranding,
-        getResize: getResize,
-        getPasteAsText: getPasteAsText,
-        getSidebarShow: getSidebarShow,
-        useHelpAccessibility: useHelpAccessibility,
-        getDefaultFontStack: getDefaultFontStack
-    });
-    const autocompleteSelector = '[data-mce-autocompleter]';
-    const detect$1 = elm => closest$1(elm, autocompleteSelector);
-    const findIn = elm => descendant(elm, autocompleteSelector);
     const setup$e = (api, editor) => {
       const redirectKeyToItem = (item, e) => {
         emitWith(item, keydown(), { raw: e });
       };
           if (keyCode === 13 || keyCode === 38 || keyCode === 40) {
             api.cancelIfNecessary();
+          }
+        }
       });
-      editor.on('NodeChange', e => {
+      editor.on('NodeChange', () => {
-        if (api.isActive() && !api.isProcessingAction() && detect$1(SugarElement.fromDom(e.element)).isNone()) {
+        if (api.isActive() && !api.isProcessingAction() && !editor.queryCommandState('mceAutoCompleterInRange')) {
           api.cancelIfNecessary();
+        }
       });
     };
     const AutocompleterEditorEvents = { setup: setup$e };
     const containerAlignRightClass = 'tox-collection__item-container--align-right';
     const containerAlignLeftClass = 'tox-collection__item-container--align-left';
     const containerValignTopClass = 'tox-collection__item-container--valign-top';
     const containerValignMiddleClass = 'tox-collection__item-container--valign-middle';
     const containerValignBottomClass = 'tox-collection__item-container--valign-bottom';
-    const classForPreset = presets => get$g(presetClasses, presets).getOr(navClass);
+    const classForPreset = presets => get$h(presetClasses, presets).getOr(navClass);
     const forMenu = presets => {
       if (presets === 'color') {
         return 'tox-swatches';
         markers: markers(presets)
       };
     };
+    const schema$l = constant$1([
-    const schema$l = constant$1([
+      defaultedString('type', 'text'),
       option$3('data'),
       defaulted('inputAttributes', {}),
       defaulted('inputStyles', {}),
       defaulted('tag', 'input'),
       defaulted('inputClasses', []),
+      onHandler('onSetValue'),
+      defaultedFunction('fromInputValue', identity),
-      onHandler('onSetValue'),
+      defaultedFunction('toInputValue', identity),
       defaulted('styles', {}),
       defaulted('eventOrder', {}),
       field('inputBehaviours', [
         Representing,
       defaulted('selectOnFocus', true)
     ]);
     const focusBehaviours = detail => derive$1([Focusing.config({
         onFocus: !detail.selectOnFocus ? noop : component => {
           const input = component.element;
-          const value = get$6(input);
+          const value = get$7(input);
+          if (detail.type !== 'range') {
-          input.dom.setSelectionRange(0, value.length);
+            input.dom.setSelectionRange(0, value.length);
+          }
+        }
       })]);
     const behaviours = detail => ({
       ...focusBehaviours(detail),
       ...augment(detail.inputBehaviours, [Representing.config({
           store: {
             mode: 'manual',
             ...detail.data.map(data => ({ initialValue: data })).getOr({}),
             getValue: input => {
-              return get$6(input.element);
+              return detail.fromInputValue(get$7(input.element));
             },
             setValue: (input, data) => {
-              const current = get$6(input.element);
+              const current = get$7(input.element);
               if (current !== data) {
-                set$5(input.element, data);
+                set$5(input.element, detail.toInputValue(data));
+              }
+            }
           },
           onSetValue: detail.onSetValue
         })])
     });
     const dom = detail => ({
       tag: detail.tag,
       attributes: {
-        type: 'text',
+        type: detail.type,
         ...detail.inputAttributes
       },
       styles: detail.inputStyles,
       classes: detail.inputClasses
     });
             'tox-collection'
           ].concat(columns === 1 ? ['tox-collection--list'] : ['tox-collection--grid'])
         },
         components: [
           renderMenuSearcher({
-            i18n: global$8.translate,
+            i18n: global$5.translate,
             placeholder: searchField.placeholder
           }),
+          {
             dom: {
               tag: 'div',
     const onAction = requiredFunction('onAction');
     const onItemAction = requiredFunction('onItemAction');
     const onSetup = defaultedFunction('onSetup', () => noop);
     const optionalName = optionString('name');
     const optionalText = optionString('text');
+    const optionalRole = optionString('role');
     const optionalIcon = optionString('icon');
     const optionalTooltip = optionString('tooltip');
     const optionalLabel = optionString('label');
     const optionalShortcut = optionString('shortcut');
     const optionalSelect = optionFunction('select');
     const baseToolbarButtonFields = [
       enabled,
       optionalTooltip,
       optionalIcon,
       optionalText,
-      onSetup
+      onSetup,
+      defaultedString('context', 'mode:design')
     ];
     const toolbarButtonSchema = objOf([
       type,
-      onAction
+      onAction,
+      optionalShortcut
     ].concat(baseToolbarButtonFields));
     const createToolbarButton = spec => asRaw('toolbarbutton', toolbarButtonSchema, spec);
     const baseToolbarToggleButtonFields = [active].concat(baseToolbarButtonFields);
     const toggleButtonSchema = objOf(baseToolbarToggleButtonFields.concat([
       type,
+      onAction,
-      onAction
+      optionalShortcut
     ]));
     const createToggleButton = spec => asRaw('ToggleButton', toggleButtonSchema, spec);
       ])
     ];
     const contextButtonFields = baseToolbarButtonFields.concat([
+      defaultedType('contextformbutton'),
-      defaultedType('contextformbutton'),
+      defaultedString('align', 'end'),
       primary,
       onAction,
       customField('original', identity)
     ]);
     const contextToggleButtonFields = baseToolbarToggleButtonFields.concat([
+      defaultedType('contextformbutton'),
-      defaultedType('contextformbutton'),
+      defaultedString('align', 'end'),
       primary,
       onAction,
       customField('original', identity)
     ]);
     const launchButtonFields = baseToolbarButtonFields.concat([defaultedType('contextformbutton')]);
     const launchToggleButtonFields = baseToolbarToggleButtonFields.concat([defaultedType('contextformtogglebutton')]);
     const toggleOrNormal = choose$1('type', {
       contextformbutton: contextButtonFields,
       contextformtogglebutton: contextToggleButtonFields
     });
-    const contextFormSchema = objOf([
-      defaultedType('contextform'),
-      defaultedFunction('initValue', constant$1('')),
+    const baseContextFormFields = [
       optionalLabel,
       requiredArrayOf('commands', toggleOrNormal),
       optionOf('launch', choose$1('type', {
         contextformbutton: launchButtonFields,
+        contextformtogglebutton: launchToggleButtonFields
+      })),
+      defaultedFunction('onInput', noop),
+      defaultedFunction('onSetup', noop)
+    ];
+    const contextFormFields = [
+      ...contextBarFields,
+      ...baseContextFormFields,
+      requiredStringEnum('type', ['contextform']),
+      defaultedFunction('initValue', constant$1('')),
+      optionString('placeholder')
+    ];
+    const contextSliderFormFields = [
+      ...contextBarFields,
+      ...baseContextFormFields,
+      requiredStringEnum('type', ['contextsliderform']),
+      defaultedFunction('initValue', constant$1(0)),
+      defaultedFunction('min', constant$1(0)),
+      defaultedFunction('max', constant$1(100))
+    ];
+    const contextSizeInputFormFields = [
+      ...contextBarFields,
+      ...baseContextFormFields,
+      requiredStringEnum('type', ['contextsizeinputform']),
+      defaultedFunction('initValue', constant$1({
+        width: '',
-        contextformtogglebutton: launchToggleButtonFields
+        height: ''
+      }))
+    ];
-      }))
+    const contextFormSchema = choose$1('type', {
+      contextform: contextFormFields,
+      contextsliderform: contextSliderFormFields,
+      contextsizeinputform: contextSizeInputFormFields
-    ].concat(contextBarFields));
+    });
     const createContextForm = spec => asRaw('ContextForm', contextFormSchema, spec);
     const contextToolbarSchema = objOf([
+      defaultedType('contexttoolbar'),
+      requiredOf('items', oneOf([
+        string,
+        arrOfObj([
+          optionString('name'),
+          optionString('label'),
+          requiredArrayOf('items', string)
-      defaultedType('contexttoolbar'),
+        ])
+      ]))
+    ].concat(contextBarFields));
+    const toolbarGroupBackToSpec = toolbarGroup => ({
+      name: toolbarGroup.name.getOrUndefined(),
+      label: toolbarGroup.label.getOrUndefined(),
+      items: toolbarGroup.items
+    });
+    const contextToolbarToSpec = contextToolbar => ({
+      ...contextToolbar,
-      requiredString('items')
+      items: isString(contextToolbar.items) ? contextToolbar.items : map$2(contextToolbar.items, toolbarGroupBackToSpec)
-    ].concat(contextBarFields));
+    });
     const createContextToolbar = spec => asRaw('ContextToolbar', contextToolbarSchema, spec);
     ]);
     const commonMenuItemFields = [
       enabled,
+      optionalText,
-      optionalText,
+      optionalRole,
       optionalShortcut,
       generatedValue('menuitem'),
+      defaultedMeta,
-      defaultedMeta
+      defaultedString('context', 'mode:design')
     ];
     const cardMenuItemSchema = objOf([
     const SimpleBehaviours = {
       namedEvents,
       unnamedEvents
     };
-    const ExclusivityChannel = generate$6('tooltip.exclusive');
-    const ShowTooltipEvent = generate$6('tooltip.show');
-    const HideTooltipEvent = generate$6('tooltip.hide');
-    const hideAllExclusive = (component, _tConfig, _tState) => {
-      component.getSystem().broadcastOn([ExclusivityChannel], {});
-    };
-    const setComponents = (component, tConfig, tState, specs) => {
-      tState.getTooltip().each(tooltip => {
-        if (tooltip.getSystem().isConnected()) {
-          Replacing.set(tooltip, specs);
-        }
-      });
-    };
-    var TooltippingApis = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        hideAllExclusive: hideAllExclusive,
-        setComponents: setComponents
-    });
-    const events$9 = (tooltipConfig, state) => {
-      const hide = comp => {
-        state.getTooltip().each(p => {
-          detach(p);
-          tooltipConfig.onHide(comp, p);
-          state.clearTooltip();
-        });
-        state.clearTimer();
-      };
-      const show = comp => {
-        if (!state.isShowing()) {
-          hideAllExclusive(comp);
-          const sink = tooltipConfig.lazySink(comp).getOrDie();
-          const popup = comp.getSystem().build({
-            dom: tooltipConfig.tooltipDom,
-            components: tooltipConfig.tooltipComponents,
-            events: derive$2(tooltipConfig.mode === 'normal' ? [
-              run$1(mouseover(), _ => {
-                emit(comp, ShowTooltipEvent);
-              }),
-              run$1(mouseout(), _ => {
-                emit(comp, HideTooltipEvent);
-              })
-            ] : []),
-            behaviours: derive$1([Replacing.config({})])
-          });
-          state.setTooltip(popup);
-          attach(sink, popup);
-          tooltipConfig.onShow(comp, popup);
-          Positioning.position(sink, popup, { anchor: tooltipConfig.anchor(comp) });
-        }
-      };
-      return derive$2(flatten([
-        [
-          run$1(ShowTooltipEvent, comp => {
-            state.resetTimer(() => {
-              show(comp);
-            }, tooltipConfig.delay);
-          }),
-          run$1(HideTooltipEvent, comp => {
-            state.resetTimer(() => {
-              hide(comp);
-            }, tooltipConfig.delay);
-          }),
-          run$1(receive(), (comp, message) => {
-            const receivingData = message;
-            if (!receivingData.universal) {
-              if (contains$2(receivingData.channels, ExclusivityChannel)) {
-                hide(comp);
-              }
-            }
-          }),
-          runOnDetached(comp => {
-            hide(comp);
-          })
-        ],
-        tooltipConfig.mode === 'normal' ? [
-          run$1(focusin(), comp => {
-            emit(comp, ShowTooltipEvent);
-          }),
-          run$1(postBlur(), comp => {
-            emit(comp, HideTooltipEvent);
-          }),
-          run$1(mouseover(), comp => {
-            emit(comp, ShowTooltipEvent);
-          }),
-          run$1(mouseout(), comp => {
-            emit(comp, HideTooltipEvent);
-          })
-        ] : [
-          run$1(highlight$1(), (comp, _se) => {
-            emit(comp, ShowTooltipEvent);
-          }),
-          run$1(dehighlight$1(), comp => {
-            emit(comp, HideTooltipEvent);
-          })
-        ]
-      ]));
-    };
-    var ActiveTooltipping = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        events: events$9
-    });
-    var TooltippingSchema = [
-      required$1('lazySink'),
-      required$1('tooltipDom'),
-      defaulted('exclusive', true),
-      defaulted('tooltipComponents', []),
-      defaulted('delay', 300),
-      defaultedStringEnum('mode', 'normal', [
-        'normal',
-        'follow-highlight'
-      ]),
-      defaulted('anchor', comp => ({
-        type: 'hotspot',
-        hotspot: comp,
-        layouts: {
-          onLtr: constant$1([
-            south$2,
-            north$2,
-            southeast$2,
-            northeast$2,
-            southwest$2,
-            northwest$2
-          ]),
-          onRtl: constant$1([
-            south$2,
-            north$2,
-            southeast$2,
-            northeast$2,
-            southwest$2,
-            northwest$2
-          ])
-        }
-      })),
-      onHandler('onHide'),
-      onHandler('onShow')
-    ];
-    const init$b = () => {
-      const timer = value$2();
-      const popup = value$2();
-      const clearTimer = () => {
-        timer.on(clearTimeout);
-      };
-      const resetTimer = (f, delay) => {
-        clearTimer();
-        timer.set(setTimeout(f, delay));
-      };
-      const readState = constant$1('not-implemented');
-      return nu$8({
-        getTooltip: popup.get,
-        isShowing: popup.isSet,
-        setTooltip: popup.set,
-        clearTooltip: popup.clear,
-        clearTimer,
-        resetTimer,
-        readState
-      });
-    };
-    var TooltippingState = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        init: init$b
-    });
-    const Tooltipping = create$4({
-      fields: TooltippingSchema,
-      name: 'tooltipping',
-      active: ActiveTooltipping,
-      state: TooltippingState,
-      apis: TooltippingApis
-    });
-    const escape = text => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    const ReadOnlyChannel = 'silver.readonly';
-    const ReadOnlyDataSchema = objOf([requiredBoolean('readonly')]);
-    const broadcastReadonly = (uiRefs, readonly) => {
-      const outerContainer = uiRefs.mainUi.outerContainer;
-      const target = outerContainer.element;
-      const motherships = [
-        uiRefs.mainUi.mothership,
-        ...uiRefs.uiMotherships
-      ];
-      if (readonly) {
-        each$1(motherships, m => {
-          m.broadcastOn([dismissPopups()], { target });
-        });
-      }
-      each$1(motherships, m => {
-        m.broadcastOn([ReadOnlyChannel], { readonly });
-      });
-    };
-    const setupReadonlyModeSwitch = (editor, uiRefs) => {
-      editor.on('init', () => {
-        if (editor.mode.isReadOnly()) {
-          broadcastReadonly(uiRefs, true);
-        }
-      });
-      editor.on('SwitchMode', () => broadcastReadonly(uiRefs, editor.mode.isReadOnly()));
-      if (isReadOnly(editor)) {
-        editor.mode.set('readonly');
-      }
-    };
-    const receivingConfig = () => Receiving.config({
-      channels: {
-        [ReadOnlyChannel]: {
-          schema: ReadOnlyDataSchema,
-          onReceive: (comp, data) => {
-            Disabling.set(comp, data.readonly);
-          }
-        }
-      }
-    });
+    const escape = text => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     const item = disabled => Disabling.config({
       disabled,
       disableClass: 'tox-collection__item--state-disabled'
       return f => {
         f(api);
       };
     };
     const onControlAttached = (info, editorOffCell) => runOnAttached(comp => {
+      if (isFunction(info.onBeforeSetup)) {
+        info.onBeforeSetup(comp);
+      }
       const run = runWithApi(info, comp);
       run(api => {
         const onDestroy = info.onSetup(api);
         if (isFunction(onDestroy)) {
           editorOffCell.set(onDestroy);
+        }
       });
     });
     const onControlDetached = (getApi, editorOffCell) => runOnDetached(comp => runWithApi(getApi, comp)(editorOffCell.get()));
+    const UiStateChannel = 'silver.uistate';
+    const messageSetDisabled = 'setDisabled';
+    const messageSetEnabled = 'setEnabled';
+    const messageInit = 'init';
+    const messageSwitchMode = 'switchmode';
+    const modeContextMessages = [
+      messageSwitchMode,
+      messageInit
+    ];
+    const broadcastEvents = (uiRefs, messageType) => {
+      const outerContainer = uiRefs.mainUi.outerContainer;
+      const motherships = [
+        uiRefs.mainUi.mothership,
+        ...uiRefs.uiMotherships
+      ];
+      if (messageType === messageSetDisabled) {
+        each$1(motherships, m => {
+          m.broadcastOn([dismissPopups()], { target: outerContainer.element });
+        });
+      }
+      each$1(motherships, m => {
+        m.broadcastOn([UiStateChannel], messageType);
+      });
+    };
+    const setupEventsForUi = (editor, uiRefs) => {
+      editor.on('init SwitchMode', event => {
+        broadcastEvents(uiRefs, event.type);
+      });
+      editor.on('DisabledStateChange', event => {
+        if (!event.isDefaultPrevented()) {
+          const messageType = event.state ? messageSetDisabled : messageInit;
+          broadcastEvents(uiRefs, messageType);
+          if (!event.state) {
+            editor.nodeChanged();
+          }
+        }
+      });
+      editor.on('NodeChange', e => {
+        const messageType = editor.ui.isEnabled() ? e.type : messageSetDisabled;
+        broadcastEvents(uiRefs, messageType);
+      });
+      if (isReadOnly(editor)) {
+        editor.mode.set('readonly');
+      }
+    };
+    const toggleOnReceive = getContext => Receiving.config({
+      channels: {
+        [UiStateChannel]: {
+          onReceive: (comp, messageType) => {
+            if (messageType === messageSetDisabled || messageType === messageSetEnabled) {
+              Disabling.set(comp, messageType === messageSetDisabled);
+              return;
+            }
+            const {contextType, shouldDisable} = getContext();
+            if (contextType === 'mode' && !contains$2(modeContextMessages, messageType)) {
+              return;
+            }
+            Disabling.set(comp, shouldDisable);
+          }
+        }
+      }
+    });
     const onMenuItemExecute = (info, itemResponse) => runOnExecute$1((comp, simulatedEvent) => {
       runWithApi(info, comp)(info.onAction);
       if (!info.triggersSubmenu && itemResponse === ItemResponse$1.CLOSE_ON_EXECUTE) {
         if (comp.getSystem().isConnected()) {
           config('item-events', [
             onMenuItemExecute(spec, itemResponse),
             onControlAttached(spec, editorOffCell),
             onControlDetached(spec, editorOffCell)
           ]),
-          DisablingConfigs.item(() => !spec.enabled || providersBackstage.isDisabled()),
+          DisablingConfigs.item(() => !spec.enabled || providersBackstage.checkUiComponentContext(spec.context).shouldDisable),
-          receivingConfig(),
+          toggleOnReceive(() => providersBackstage.checkUiComponentContext(spec.context)),
           Replacing.config({})
         ].concat(spec.itemBehaviours))
       };
     };
     const buildData = source => ({
         ...source.meta
+      }
     });
     const convertText = source => {
-      const isMac = global$5.os.isMacOS() || global$5.os.isiOS();
+      const isMac = global$6.os.isMacOS() || global$6.os.isiOS();
       const mac = {
         alt: '\u2325',
         ctrl: '\u2303',
         shift: '\u21E7',
     const renderText = text => ({
       dom: {
         tag: 'div',
         classes: [textClass]
       },
-      components: [text$2(global$8.translate(text))]
+      components: [text$2(global$5.translate(text))]
     });
     const renderHtml = (html, classes) => ({
       dom: {
         tag: 'div',
         classes,
       components: [{
           dom: {
             tag: style.tag,
             styles: style.styles
           },
-          components: [text$2(global$8.translate(text))]
+          components: [text$2(global$5.translate(text))]
         }]
     });
     const renderShortcut = shortcut => ({
       dom: {
         tag: 'div',
     });
     const renderColorStructure = (item, providerBackstage, fallbackIcon) => {
       const colorPickerCommand = 'custom';
-      const removeColorCommand = 'remove';
-      const itemText = item.ariaLabel;
+      const removeColorCommand = 'remove';
       const itemValue = item.value;
+      const iconSvg = item.iconContent.map(name => getOr(name, providerBackstage.icons, fallbackIcon));
+      const attributes = item.ariaLabel.map(al => ({
+        'aria-label': providerBackstage.translate(al),
+        'data-mce-name': al
-      const iconSvg = item.iconContent.map(name => getOr(name, providerBackstage.icons, fallbackIcon));
+      })).getOr({});
       const getDom = () => {
         const common = colorClass;
-        const icon = iconSvg.getOr('');
-        const attributes = itemText.map(text => ({ title: providerBackstage.translate(text) })).getOr({});
+        const icon = iconSvg.getOr('');
         const baseDom = {
           tag: 'div',
           attributes,
           classes: [common]
       };
     };
     const renderItemDomStructure = ariaLabel => {
       const domTitle = ariaLabel.map(label => ({
         attributes: {
-          title: global$8.translate(label),
+          'id': generate$6('menu-item'),
-          id: generate$6('menu-item')
+          'aria-label': global$5.translate(label)
+        }
       })).getOr({});
       return {
         tag: 'div',
         classes: [
       } else {
         return renderNormalItemStructure(info, providersBackstage, renderIcons, fallbackIcon);
+      }
     };
-    const tooltipBehaviour = (meta, sharedBackstage) => get$g(meta, 'tooltipWorker').map(tooltipWorker => [Tooltipping.config({
+    const tooltipBehaviour = (meta, sharedBackstage, tooltipText) => get$h(meta, 'tooltipWorker').map(tooltipWorker => [Tooltipping.config({
         lazySink: sharedBackstage.getSink,
         tooltipDom: {
           tag: 'div',
           classes: ['tox-tooltip-worker-container']
         onShow: (component, _tooltip) => {
           tooltipWorker(elm => {
             Tooltipping.setComponents(component, [external$1({ element: SugarElement.fromDom(elm) })]);
           });
+        }
+      })]).getOrThunk(() => {
+      return tooltipText.map(text => [Tooltipping.config({
+          ...sharedBackstage.providers.tooltips.getConfig({ tooltipText: text }),
+          mode: 'follow-highlight'
-      })]).getOr([]);
+        })]).getOr([]);
+    });
-    const encodeText = text => global$7.DOM.encode(text);
+    const encodeText = text => global$8.DOM.encode(text);
     const replaceText = (text, matchText) => {
-      const translated = global$8.translate(text);
+      const translated = global$5.translate(text);
       const encoded = encodeText(translated);
       if (matchText.length > 0) {
         const escapedMatchRegex = new RegExp(escape(matchText), 'gi');
         return encoded.replace(escapedMatchRegex, match => `<span class="tox-autocompleter-highlight">${ match }</span>`);
       } else {
         shortcutContent: Optional.none(),
         checkMark: Optional.none(),
         caret: Optional.none(),
         value: spec.value
       }, sharedBackstage.providers, renderIcons, spec.icon);
+      const tooltipString = spec.text.filter(text => !useText && text !== '');
       return renderCommonItem({
+        context: 'mode:design',
         data: buildData(spec),
         enabled: spec.enabled,
         getApi: constant$1({}),
         onAction: _api => onItemValueHandler(spec.value, spec.meta),
         onSetup: constant$1(noop),
         triggersSubmenu: false,
-        itemBehaviours: tooltipBehaviour(spec.meta, sharedBackstage)
+        itemBehaviours: tooltipBehaviour(spec, sharedBackstage, tooltipString)
       }, structure, itemResponse, sharedBackstage.providers);
     };
     const render$2 = (items, extras) => map$2(items, item => {
             },
             components: render$2(spec.items, extras)
           })]
       };
       return renderCommonItem({
+        context: 'mode:design',
         data: buildData({
           text: Optional.none(),
           ...spec
         }),
         enabled: spec.enabled,
         shortcutContent: useText ? spec.shortcut : Optional.none(),
         checkMark: useText ? Optional.some(renderCheckmark(providersBackstage.icons)) : Optional.none(),
         caret: Optional.none(),
         value: spec.value
       }, providersBackstage, renderIcons);
+      const optTooltipping = spec.text.filter(constant$1(!useText)).map(t => Tooltipping.config(providersBackstage.tooltips.getConfig({ tooltipText: providersBackstage.translate(t) })));
       return deepMerge(renderCommonItem({
+        context: spec.context,
         data: buildData(spec),
         enabled: spec.enabled,
         getApi,
         onAction: _api => onItemValueHandler(spec.value),
         onSetup: api => {
           api.setActive(isSelected);
           return noop;
         },
         triggersSubmenu: false,
-        itemBehaviours: []
+        itemBehaviours: [...optTooltipping.toArray()]
       }, structure, itemResponse, providersBackstage), {
         toggling: {
           toggleClass: tickedClass,
           toggleOnExecute: false,
           selected: spec.active,
     };
     const min = Math.min;
     const max = Math.max;
     const round$1 = Math.round;
-    const rgbRegex = /^\s*rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/i;
+    const rgbRegex = /^\s*rgb\s*\(\s*(\d+)\s*[,\s]\s*(\d+)\s*[,\s]\s*(\d+)\s*\)\s*$/i;
-    const rgbaRegex = /^\s*rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?(?:\.\d+)?)\s*\)\s*$/i;
+    const rgbaRegex = /^\s*rgba\s*\(\s*(\d+)\s*[,\s]\s*(\d+)\s*[,\s]\s*(\d+)\s*[,\s]\s*((?:\d?\.\d+|\d+)%?)\s*\)\s*$/i;
     const rgbaColour = (red, green, blue, alpha) => ({
       red,
       green,
       blue,
       const b = parseInt(blue, 10);
       const a = parseFloat(alpha);
       return rgbaColour(r, g, b, a);
     };
     const fromString = rgbaString => {
-      if (rgbaString === 'transparent') {
-        return Optional.some(rgbaColour(0, 0, 0, 0));
-      }
       const rgbMatch = rgbRegex.exec(rgbaString);
       if (rgbMatch !== null) {
         return Optional.some(fromStringValues(rgbMatch[1], rgbMatch[2], rgbMatch[3], '1'));
+      }
       const rgbaMatch = rgbaRegex.exec(rgbaString);
       editor.dispatch('BlocksTextUpdate', data);
     };
     const fireFontFamilyTextUpdate = (editor, data) => {
       editor.dispatch('FontFamilyTextUpdate', data);
     };
+    const fireToggleSidebar = editor => {
+      editor.dispatch('ToggleSidebar');
+    };
+    const fireToggleView = editor => {
+      editor.dispatch('ToggleView');
+    };
+    const fireContextToolbarClose = editor => {
+      editor.dispatch('ContextToolbarClose');
+    };
+    const fireContextFormSlideBack = editor => {
+      editor.dispatch('ContextFormSlideBack');
+    };
     const composeUnbinders = (f, g) => () => {
       f();
       g();
       return {
         add,
         state
       };
     };
-    const getCacheForId = id => get$g(cacheStorage, id).getOrThunk(() => {
+    const getCacheForId = id => get$h(cacheStorage, id).getOrThunk(() => {
       const storageId = `tinymce-custom-colors-${ id }`;
       const currentData = global$4.getItem(storageId);
       if (isNullable(currentData)) {
         const legacyDefault = global$4.getItem('tinymce-custom-colors');
         global$4.setItem(storageId, isNonNullable(legacyDefault) ? legacyDefault : '[]');
     });
     const foregroundId = 'forecolor';
     const backgroundId = 'hilitecolor';
+    const fallbackCols = 5;
+    const mapColors = colorMap => mapColorsRaw(colorMap.map((color, index) => {
+      if (index % 2 === 0) {
+        return '#' + anyToHex(color).value;
+      }
+      return color;
-    const fallbackCols = 5;
+    }));
-    const mapColors = colorMap => {
+    const mapColorsRaw = colorMap => {
       const colors = [];
       for (let i = 0; i < colorMap.length; i += 2) {
         colors.push({
           text: colorMap[i + 1],
-          value: '#' + anyToHex(colorMap[i]).value,
+          value: colorMap[i],
           icon: 'checkmark',
           type: 'choiceitem'
         });
+      }
       return colors;
     };
     const option$1 = name => editor => editor.options.get(name);
     const fallbackColor = '#000000';
-    const register$d = editor => {
+    const register$e = editor => {
       const registerOption = editor.options.register;
       const colorProcessor = value => {
         if (isArrayOf(value, isString)) {
           return {
             valid: false,
             message: 'Must be an array of strings.'
           };
+        }
       };
+      const colorProcessorRaw = value => {
+        if (isArrayOf(value, isString)) {
+          return {
+            value: mapColorsRaw(value),
+            valid: true
+          };
+        } else {
+          return {
+            valid: false,
+            message: 'Must be an array of strings.'
+          };
+        }
+      };
       const colorColsProcessor = value => {
         if (isNumber(value) && value > 0) {
           return {
             value,
             valid: true
           'Black',
           '#ffffff',
           'White'
+        ]
       });
+      registerOption('color_map_raw', { processor: colorProcessorRaw });
       registerOption('color_map_background', { processor: colorProcessor });
       registerOption('color_map_foreground', { processor: colorProcessor });
       registerOption('color_cols', {
         processor: colorColsProcessor,
         default: calcCols(editor)
     const getColors$2 = (editor, id) => {
       if (id === foregroundId && editor.options.isSet('color_map_foreground')) {
         return option$1('color_map_foreground')(editor);
       } else if (id === backgroundId && editor.options.isSet('color_map_background')) {
         return option$1('color_map_background')(editor);
+      } else if (editor.options.isSet('color_map_raw')) {
+        return option$1('color_map_raw')(editor);
       } else {
         return option$1('color_map')(editor);
+      }
     };
     const calcCols = (editor, id = 'default') => Math.max(fallbackCols, Math.ceil(Math.sqrt(getColors$2(editor, id).length)));
     const defaultBackgroundColor = 'rgba(0, 0, 0, 0)';
     const isValidBackgroundColor = value => fromString(value).exists(c => c.alpha !== 0);
     const getClosestCssBackgroundColorValue = scope => {
       return closest$4(scope, node => {
         if (isElement$1(node)) {
-          const color = get$e(node, 'background-color');
+          const color = get$f(node, 'background-color');
           return someIf(isValidBackgroundColor(color), color);
         } else {
           return Optional.none();
+        }
       }).getOr(defaultBackgroundColor);
     };
     const getCurrentColor = (editor, format) => {
       const node = SugarElement.fromDom(editor.selection.getStart());
-      const cssRgbValue = format === 'hilitecolor' ? getClosestCssBackgroundColorValue(node) : get$e(node, 'color');
+      const cssRgbValue = format === 'hilitecolor' ? getClosestCssBackgroundColorValue(node) : get$f(node, 'color');
       return fromString(cssRgbValue).map(rgba => '#' + fromRgba(rgba).value);
     };
     const applyFormat = (editor, format, value) => {
       editor.undoManager.transact(() => {
         editor.focus();
         onCancel: () => {
           callback(Optional.none());
+        }
       });
     };
-    const register$c = editor => {
+    const register$d = editor => {
       registerCommands(editor);
       const fallbackColorForeground = getDefaultForegroundColor(editor);
       const fallbackColorBackground = getDefaultBackgroundColor(editor);
       const lastForeColor = Cell(fallbackColorForeground);
       const lastBackColor = Cell(fallbackColorBackground);
         spec.onAction({ value });
       }, columns, presets, ItemResponse$1.CLOSE_ON_EXECUTE, spec.select.getOr(never), backstage.shared.providers);
       const widgetSpec = {
         ...menuSpec,
         markers: markers(presets),
-        movement: deriveMenuMovement(columns, presets)
+        movement: deriveMenuMovement(columns, presets),
+        showMenuRole: false
       };
       return {
         type: 'widget',
         data: { value: generate$6('widget-id') },
         dom: {
                   selectCells(cells, row, col, numRows, numColumns);
                   Replacing.set(memLabel.get(c), [makeLabelText(row + 1, col + 1)]);
                 }),
                 runWithTarget(cellExecuteEvent, (c, _, e) => {
                   const {row, col} = e.event;
+                  emit(c, sandboxClose());
                   spec.onAction({
                     numRows: row + 1,
                     numColumns: col + 1
                   });
-                  emit(c, sandboxClose());
                 })
               ]),
               Keying.config({
                 initSize: {
                   numRows,
     const fancyMenuItems = {
       inserttable: renderInsertTableMenuItem,
       colorswatch: renderColorSwatchItem
     };
-    const renderFancyMenuItem = (spec, backstage) => get$g(fancyMenuItems, spec.fancytype).map(render => render(spec, backstage));
+    const renderFancyMenuItem = (spec, backstage) => get$h(fancyMenuItems, spec.fancytype).map(render => render(spec, backstage));
     const renderNestedItem = (spec, itemResponse, providersBackstage, renderIcons = true, downwardsCaret = false) => {
       const caret = downwardsCaret ? renderDownwardsCaret(providersBackstage.icons) : renderSubmenuCaret(providersBackstage.icons);
             set$9(underlinePath, 'fill', value);
           });
         },
         setTooltip: tooltip => {
           const translatedTooltip = providersBackstage.translate(tooltip);
-          setAll$1(component.element, {
-            'aria-label': translatedTooltip,
+          set$9(component.element, 'aria-label', translatedTooltip);
-            'title': translatedTooltip
-          });
+        }
       });
       const structure = renderItemStructure({
         presets: 'normal',
         iconContent: spec.icon,
         caret: Optional.some(caret),
         checkMark: Optional.none(),
         shortcutContent: spec.shortcut
       }, providersBackstage, renderIcons);
       return renderCommonItem({
+        context: spec.context,
         data: buildData(spec),
         getApi,
         enabled: spec.enabled,
         onAction: noop,
         onSetup: spec.onSetup,
         caret: Optional.none(),
         checkMark: Optional.none(),
         shortcutContent: spec.shortcut
       }, providersBackstage, renderIcons);
       return renderCommonItem({
+        context: spec.context,
         data: buildData(spec),
         getApi,
         enabled: spec.enabled,
         onAction: spec.onAction,
         onSetup: spec.onSetup,
         shortcutContent: spec.shortcut,
         presets: 'normal',
         meta: spec.meta
       }, providersBackstage, renderIcons);
       return deepMerge(renderCommonItem({
+        context: spec.context,
         data: buildData(spec),
         enabled: spec.enabled,
         getApi,
         onAction: spec.onAction,
         onSetup: spec.onSetup,
       }, structure, itemResponse, providersBackstage), {
         toggling: {
           toggleClass: tickedClass,
           toggleOnExecute: false,
           selected: spec.active
-        }
+        },
+        role: spec.role.getOrUndefined()
       });
     };
     const autocomplete = renderAutocompleteItem;
         getExistingCoupled: getExistingCoupled
     });
     var CouplingSchema = [requiredOf('others', setOf(Result.value, anyValue()))];
-    const init$a = () => {
+    const init$9 = () => {
       const coupled = {};
       const lookupCoupled = (coupleConfig, coupledName) => {
         const available = keys(coupleConfig.others);
         if (available.length === 0) {
           throw new Error('Cannot find any known coupled components');
         } else {
-          return get$g(coupled, coupledName);
+          return get$h(coupled, coupledName);
+        }
       };
       const getOrCreate = (component, coupleConfig, name) => {
         return lookupCoupled(coupleConfig, name).getOrThunk(() => {
-          const builder = get$g(coupleConfig.others, name).getOrDie('No information found for coupled component: ' + name);
+          const builder = get$h(coupleConfig.others, name).getOrDie('No information found for coupled component: ' + name);
           const spec = builder(component);
           const built = component.getSystem().build(spec);
           coupled[name] = built;
           return built;
         });
       };
       const getExisting = (component, coupleConfig, name) => {
         return lookupCoupled(coupleConfig, name).orThunk(() => {
-          get$g(coupleConfig.others, name).getOrDie('No information found for coupled component: ' + name);
+          get$h(coupleConfig.others, name).getOrDie('No information found for coupled component: ' + name);
           return Optional.none();
         });
       };
       const readState = constant$1({});
-      return nu$8({
+      return nu$7({
         readState,
         getExisting,
         getOrCreate
       });
     };
     var CouplingState = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        init: init$a
+        init: init$9
     });
       return fetcher(component).map(mapFetch);
     };
     const openF = (detail, mapFetch, anchor, component, sandbox, externals, highlightOnOpen) => {
       const futureData = fetch(detail, mapFetch, component);
       const getLazySink = getSink(component, detail);
-      return futureData.map(tdata => tdata.bind(data => Optional.from(tieredMenu.sketch({
+      return futureData.map(tdata => tdata.bind(data => {
-        ...externals.menu(),
-        uid: generate$5(''),
-        data,
-        highlightOnOpen,
-        onOpenMenu: (tmenu, menu) => {
-          const sink = getLazySink().getOrDie();
+        const primaryMenu = data.menus[data.primary];
-          Positioning.position(sink, menu, { anchor });
-          Sandboxing.decloak(sandbox);
-        },
-        onOpenSubmenu: (tmenu, item, submenu) => {
+        Optional.from(primaryMenu).each(menu => {
-          const sink = getLazySink().getOrDie();
-          Positioning.position(sink, submenu, {
+          detail.listRole.each(listRole => {
-            anchor: {
-              type: 'submenu',
-              item
+            menu.role = listRole;
-            }
           });
+        });
+        return Optional.from(tieredMenu.sketch({
+          ...externals.menu(),
-          Sandboxing.decloak(sandbox);
+          uid: generate$5(''),
-        },
+          data,
+          highlightOnOpen,
-        onRepositionMenu: (tmenu, primaryMenu, submenuTriggers) => {
+          onOpenMenu: (tmenu, menu) => {
-          const sink = getLazySink().getOrDie();
+            const sink = getLazySink().getOrDie();
-          Positioning.position(sink, primaryMenu, { anchor });
+            Positioning.position(sink, menu, { anchor });
+            Sandboxing.decloak(sandbox);
+          },
-          each$1(submenuTriggers, st => {
+          onOpenSubmenu: (tmenu, item, submenu) => {
+            const sink = getLazySink().getOrDie();
-            Positioning.position(sink, st.triggeredMenu, {
+            Positioning.position(sink, submenu, {
               anchor: {
                 type: 'submenu',
-                item: st.triggeringItem
+                item
+              }
             });
+            Sandboxing.decloak(sandbox);
+          },
+          onRepositionMenu: (tmenu, primaryMenu, submenuTriggers) => {
+            const sink = getLazySink().getOrDie();
+            Positioning.position(sink, primaryMenu, { anchor });
+            each$1(submenuTriggers, st => {
+              Positioning.position(sink, st.triggeredMenu, {
+                anchor: {
+                  type: 'submenu',
+                  item: st.triggeringItem
+                }
+              });
-          });
+            });
-        },
+          },
-        onEscape: () => {
+          onEscape: () => {
-          Focusing.focus(component);
+            Focusing.focus(component);
-          Sandboxing.close(sandbox);
+            Sandboxing.close(sandbox);
-          return Optional.some(true);
+            return Optional.some(true);
-        }
+          }
+        }));
-      }))));
+      }));
     };
     const open = (detail, mapFetch, hotspot, sandbox, externals, onOpenSync, highlightOnOpen) => {
       const anchor = getAnchor(detail, hotspot);
       const processed = openF(detail, mapFetch, anchor, hotspot, sandbox, externals, highlightOnOpen);
       return processed.map(tdata => {
       const action = showing ? close : open;
       return action(detail, mapFetch, hotspot, sandbox, externals, onOpenSync, highlightOnOpen);
     };
     const matchWidth = (hotspot, container, useMinWidth) => {
       const menu = Composing.getCurrent(container).getOr(container);
-      const buttonWidth = get$c(hotspot.element);
+      const buttonWidth = get$d(hotspot.element);
       if (useMinWidth) {
         set$8(menu.element, 'min-width', buttonWidth + 'px');
       } else {
         set$7(menu.element, buttonWidth);
+      }
           extras.onOpen(component, menu);
+        }
       };
       const onClose = (component, menu) => {
         ariaControls.unlink(hotspot.element);
+        lazySink().getOr(menu).element.dom.dispatchEvent(new window.FocusEvent('focusout'));
         if (extras !== undefined && extras.onClose !== undefined) {
           extras.onClose(component, menu);
+        }
       };
       const lazySink = getSink(hotspot, detail);
       return {
         dom: {
           tag: 'div',
           classes: detail.sandboxClasses,
-          attributes: {
-            id: ariaControls.id,
+          attributes: { id: ariaControls.id }
-            role: 'listbox'
-          }
         },
         behaviours: SketchBehaviours.augment(detail.sandboxBehaviours, [
           Representing.config({
             store: {
               mode: 'memory',
       required$1('toggleClass'),
       defaulted('eventOrder', {}),
       option$3('lazySink'),
       defaulted('matchWidth', false),
       defaulted('useMinWidth', false),
-      option$3('role')
+      option$3('role'),
+      option$3('listRole')
     ].concat(sandboxFields()));
     const parts$e = constant$1([
       external({
         schema: [
           tieredMenuMarkers(),
       }),
       partType$1()
     ]);
     const factory$k = (detail, components, _spec, externals) => {
-      const lookupAttr = attr => get$g(detail.dom, 'attributes').bind(attrs => get$g(attrs, attr));
+      const lookupAttr = attr => get$h(detail.dom, 'attributes').bind(attrs => get$h(attrs, attr));
       const switchToMenu = sandbox => {
         Sandboxing.getState(sandbox).each(tmenu => {
           tieredMenu.highlightPrimary(tmenu);
         });
+              }
+            }
           }),
           Focusing.config({})
         ]),
-        events: events$a(Optional.some(action)),
+        events: events$9(Optional.some(action)),
         eventOrder: {
           ...detail.eventOrder,
           [execute$5()]: [
             'disabling',
             'toggling',
+          ]
         },
         apis,
         domModification: {
           attributes: {
-            'aria-haspopup': 'true',
+            'aria-haspopup': detail.listRole.getOr('true'),
             ...detail.role.fold(() => ({}), role => ({ role })),
             ...detail.dom.tag === 'button' ? { type: lookupAttr('type').getOr('button') } : {}
+          }
+        }
       };
             onAction: api => {
               d.onAction(api);
               onItemValueHandler(d.value, d.meta);
+            }
           }, itemResponse, sharedBackstage, {
-            itemBehaviours: tooltipBehaviour(d.meta, sharedBackstage),
+            itemBehaviours: tooltipBehaviour(d.meta, sharedBackstage, Optional.none()),
             cardText: {
               matchText,
               highlightOn
+            }
           })));
           fakeFocus: focusMode === FocusMode.ContentFocus
+        }
       };
     };
-    const getAutocompleterRange = (dom, initRange) => {
-      return detect$1(SugarElement.fromDom(initRange.startContainer)).map(elm => {
-        const range = dom.createRng();
-        range.selectNode(elm.dom);
-        return range;
-      });
-    };
+    const rangeToSimRange = r => SimRange.create(SugarElement.fromDom(r.startContainer), r.startOffset, SugarElement.fromDom(r.endContainer), r.endOffset);
-    const register$b = (editor, sharedBackstage) => {
+    const register$c = (editor, sharedBackstage) => {
       const autocompleterId = generate$6('autocompleter');
       const processingAction = Cell(false);
+      const activeState = Cell(false);
-      const activeState = Cell(false);
+      const activeRange = value$4();
       const autocompleter = build$1(InlineView.sketch({
         dom: {
           tag: 'div',
           classes: ['tox-autocompleter'],
         if (isMenuOpen()) {
           InlineView.hide(autocompleter);
           editor.dom.remove(autocompleterId, false);
           const editorBody = SugarElement.fromDom(editor.getBody());
           getOpt(editorBody, 'aria-owns').filter(ariaOwnsAttr => ariaOwnsAttr === autocompleterId).each(() => {
-            remove$7(editorBody, 'aria-owns');
+            remove$8(editorBody, 'aria-owns');
-            remove$7(editorBody, 'aria-activedescendant');
+            remove$8(editorBody, 'aria-activedescendant');
           });
+        }
       };
       const getMenu = () => InlineView.getContent(autocompleter).bind(tmenu => {
-        return get$h(tmenu.components(), 0);
+        return get$i(tmenu.components(), 0);
       });
       const cancelIfNecessary = () => editor.execCommand('mceAutocompleterClose');
       const getCombinedItems = matches => {
         const columns = findMap(matches, m => Optional.from(m.columns)).getOr(1);
         return bind$3(matches, match => {
           const choices = match.items;
           return createAutocompleteItems(choices, match.matchText, (itemValue, itemMeta) => {
-            const nr = editor.selection.getRng();
-            getAutocompleterRange(editor.dom, nr).each(range => {
-              const autocompleterApi = {
+            const autocompleterApi = {
-                hide: () => cancelIfNecessary(),
+              hide: () => cancelIfNecessary(),
-                reload: fetchOptions => {
+              reload: fetchOptions => {
-                  hideIfNecessary();
+                hideIfNecessary();
-                  editor.execCommand('mceAutocompleterReload', false, { fetchOptions });
+                editor.execCommand('mceAutocompleterReload', false, { fetchOptions });
-                }
+              }
-              };
+            };
+            editor.execCommand('mceAutocompleterRefreshActiveRange');
+            activeRange.get().each(range => {
               processingAction.set(true);
               match.onAction(autocompleterApi, range, itemValue, itemMeta);
               processingAction.set(false);
             });
           }, columns, ItemResponse$1.BUBBLE_TO_SANDBOX, sharedBackstage, match.highlightOn);
         });
       };
       const display = (lookupData, items) => {
-        findIn(SugarElement.fromDom(editor.getBody())).each(element => {
-          const columns = findMap(lookupData, ld => Optional.from(ld.columns)).getOr(1);
+        const columns = findMap(lookupData, ld => Optional.from(ld.columns)).getOr(1);
-          InlineView.showMenuAt(autocompleter, {
+        InlineView.showMenuAt(autocompleter, {
-            anchor: {
+          anchor: {
-              type: 'node',
+            type: 'selection',
-              root: SugarElement.fromDom(editor.getBody()),
+            getSelection: () => activeRange.get().map(rangeToSimRange),
-              node: Optional.from(element)
+            root: SugarElement.fromDom(editor.getBody())
-            }
+          }
-          }, createInlineMenuFrom(createPartialMenuWithAlloyItems('autocompleter-value', true, items, columns, { menuType: 'normal' }), columns, FocusMode.ContentFocus, 'normal'));
+        }, createInlineMenuFrom(createPartialMenuWithAlloyItems('autocompleter-value', true, items, columns, { menuType: 'normal' }), columns, FocusMode.ContentFocus, 'normal'));
-        });
         getMenu().each(Highlighting.highlightFirst);
       };
       const updateDisplay = lookupData => {
         const combinedItems = getCombinedItems(lookupData);
         if (combinedItems.length > 0) {
           top: `${ selection.offsetTop }px`,
           left: `${ selection.offsetLeft }px`
         });
         editor.dom.add(docElm, newElm.dom);
         descendant(newElm, '[role="menu"]').each(child => {
-          remove$6(child, 'position');
+          remove$7(child, 'position');
-          remove$6(child, 'max-height');
+          remove$7(child, 'max-height');
         });
       };
       editor.on('AutocompleterStart', ({lookupData}) => {
         activeState.set(true);
         processingAction.set(false);
         updateDisplay(lookupData);
       });
       editor.on('AutocompleterUpdate', ({lookupData}) => updateDisplay(lookupData));
+      editor.on('AutocompleterUpdateActiveRange', ({range}) => activeRange.set(range));
       editor.on('AutocompleterEnd', () => {
         hideIfNecessary();
         activeState.set(false);
         processingAction.set(false);
+        activeRange.clear();
       });
       const autocompleterUiApi = {
         cancelIfNecessary,
         isMenuOpen,
         isActive,
         isProcessingAction: processingAction.get,
         getMenu
       };
       AutocompleterEditorEvents.setup(autocompleterUiApi, editor);
     };
-    const Autocompleter = { register: register$b };
+    const Autocompleter = { register: register$c };
-    const nonScrollingOverflows = [
-      'visible',
-      'hidden',
-      'clip'
-    ];
-    const isScrollingOverflowValue = value => trim$1(value).length > 0 && !contains$2(nonScrollingOverflows, value);
-    const isScroller = elem => {
-      if (isHTMLElement(elem)) {
-        const overflowX = get$e(elem, 'overflow-x');
-        const overflowY = get$e(elem, 'overflow-y');
-        return isScrollingOverflowValue(overflowX) || isScrollingOverflowValue(overflowY);
-      } else {
-        return false;
-      }
-    };
-    const detect = popupSinkElem => {
-      const ancestorsScrollers = ancestors(popupSinkElem, isScroller);
-      const scrollers = ancestorsScrollers.length === 0 ? getShadowRoot(popupSinkElem).map(getShadowHost).map(x => ancestors(x, isScroller)).getOr([]) : ancestorsScrollers;
-      return head(scrollers).map(element => ({
-        element,
-        others: scrollers.slice(1)
-      }));
-    };
-    const detectWhenSplitUiMode = (editor, popupSinkElem) => isSplitUiMode(editor) ? detect(popupSinkElem) : Optional.none();
-    const getBoundsFrom = sc => {
-      const scrollableBoxes = [
-        ...map$2(sc.others, box$1),
-        win()
-      ];
-      return constrainByMany(box$1(sc.element), scrollableBoxes);
-    };
     const closest = (scope, selector, isRoot) => closest$1(scope, selector, isRoot).isSome();
       const distX = Math.abs(touch.clientX - data.x);
       const distY = Math.abs(touch.clientY - data.y);
       return distX > SIGNIFICANT_MOVE || distY > SIGNIFICANT_MOVE;
     };
     const monitor = settings => {
-      const startData = value$2();
+      const startData = value$4();
       const longpressFired = Cell(false);
       const longpress$1 = DelayedFunction(event => {
         settings.triggerEvent(longpress(), event);
         longpressFired.set(true);
       }, LONGPRESS_DELAY);
+        {
           key: touchend(),
           value: handleTouchend
+        }
       ]);
-      const fireIfReady = (event, type) => get$g(handlers, type).bind(handler => handler(event));
+      const fireIfReady = (event, type) => get$h(handlers, type).bind(handler => handler(event));
       return { fireIfReady };
     };
     const isDangerous = event => {
         const stopped = settings.triggerEvent(type, event);
         if (stopped) {
           event.kill();
+        }
       }));
-      const pasteTimeout = value$2();
+      const pasteTimeout = value$4();
       const onPaste = bind(container, 'paste', event => {
         tapEvent.fireIfReady(event, 'paste').each(tapStopped => {
           if (tapStopped) {
             event.kill();
+          }
         const stopped = settings.triggerEvent('focusin', event);
         if (stopped) {
           event.kill();
+        }
       });
-      const focusoutTimeout = value$2();
+      const focusoutTimeout = value$4();
       const onFocusOut = bind(container, 'focusout', event => {
         const stopped = settings.triggerEvent('focusout', event);
         if (stopped) {
           event.kill();
+        }
       };
       return { unbind };
     };
     const derive = (rawEvent, rawTarget) => {
-      const source = get$g(rawEvent, 'target').getOr(rawTarget);
+      const source = get$h(rawEvent, 'target').getOr(rawTarget);
       return Cell(source);
     };
           const handlers = registry[k] !== undefined ? registry[k] : {};
           handlers[id] = curryArgs(v, extraArgs);
           registry[k] = handlers;
         });
       };
-      const findHandler = (handlers, elem) => read$1(elem).bind(id => get$g(handlers, id)).map(descHandler => eventHandler(elem, descHandler));
+      const findHandler = (handlers, elem) => read(elem).bind(id => get$h(handlers, id)).map(descHandler => eventHandler(elem, descHandler));
-      const filterByType = type => get$g(registry, type).map(handlers => mapToArray(handlers, (f, id) => broadcastHandler(id, f))).getOr([]);
+      const filterByType = type => get$h(registry, type).map(handlers => mapToArray(handlers, (f, id) => broadcastHandler(id, f))).getOr([]);
-      const find = (isAboveRoot, type, target) => get$g(registry, type).bind(handlers => closest$4(target, elem => findHandler(handlers, elem), isAboveRoot));
+      const find = (isAboveRoot, type, target) => get$h(registry, type).bind(handlers => closest$4(target, elem => findHandler(handlers, elem), isAboveRoot));
       const unregisterId = id => {
         each(registry, (handlersById, _eventName) => {
           if (has$2(handlersById, id)) {
             delete handlersById[id];
+          }
     const Registry = () => {
       const events = EventRegistry();
       const components = {};
       const readOrTag = component => {
         const elem = component.element;
-        return read$1(elem).getOrThunk(() => write('uid-', component.element));
+        return read(elem).getOrThunk(() => write('uid-', component.element));
       };
       const failOnDuplicate = (component, tagId) => {
         const conflict = components[tagId];
         if (conflict === component) {
           unregister(component);
         const extraArgs = [component];
         events.registerId(extraArgs, tagId, component.events);
         components[tagId] = component;
       };
       const unregister = component => {
-        read$1(component.element).each(tagId => {
+        read(component.element).each(tagId => {
           delete components[tagId];
           events.unregisterId(tagId);
         });
       };
       const filter = type => events.filterByType(type);
       const find = (isAboveRoot, type, target) => events.find(isAboveRoot, type, target);
-      const getById = id => get$g(components, id);
+      const getById = id => get$h(components, id);
       return {
         find,
         filter,
         register,
         unregister,
             ...attributes
           },
           ...domWithoutAttributes
         },
         components: detail.components,
-        behaviours: get$3(detail.containerBehaviours),
+        behaviours: get$4(detail.containerBehaviours),
         events: detail.events,
         domModification: detail.domModification,
         eventOrder: detail.eventOrder
       };
     };
         debugInfo: constant$1('real'),
         triggerEvent: (eventName, target, data) => {
           monitorEvent(eventName, target, logger => triggerOnUntilStopped(lookup, eventName, data, target, logger));
         },
         triggerFocus: (target, originator) => {
-          read$1(target).fold(() => {
+          read(target).fold(() => {
             focus$3(target);
           }, _alloyId => {
             monitorEvent(focus$4(), target, logger => {
               triggerHandler(lookup, focus$4(), {
                 originator,
       const remove = component => {
         detach(component);
       };
       const destroy = () => {
         domEvents.unbind();
-        remove$5(root.element);
+        remove$6(root.element);
       };
       const broadcastData = data => {
         const receivers = registry.filter(receive());
         each$1(receivers, receiver => {
           const descHandler = receiver.descHandler;
         const listeners = registry.filter(eventName);
         return broadcast(listeners, event);
       };
       const getByUid = uid => registry.getById(uid).fold(() => Result.error(new Error('Could not find component with uid: "' + uid + '" in system.')), Result.value);
       const getByDom = elem => {
-        const uid = read$1(elem).getOr('not found');
+        const uid = read(elem).getOr('not found');
         return getByUid(uid);
       };
       addToWorld(root);
       return {
         root,
         getField: (apis, comp) => apis.getField(comp),
         getLabel: (apis, comp) => apis.getLabel(comp)
+      }
     });
-    const exhibit$2 = (base, tabConfig) => nu$7({
-      attributes: wrapAll([{
-          key: tabConfig.tabAttr,
-          value: 'true'
-        }])
-    });
-    var ActiveTabstopping = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        exhibit: exhibit$2
-    });
-    var TabstopSchema = [defaulted('tabAttr', 'data-alloy-tabstop')];
-    const Tabstopping = create$4({
-      fields: TabstopSchema,
-      name: 'tabstopping',
-      active: ActiveTabstopping
-    });
     var global$3 = tinymce.util.Tools.resolve('tinymce.html.Entities');
     const renderFormFieldWith = (pLabel, pField, extraClasses, extraBehaviours) => {
       },
       components: [text$2(providersBackstage.translate(label))]
     });
+    const formChangeEvent = generate$6('form-component-change');
-    const formChangeEvent = generate$6('form-component-change');
+    const formInputEvent = generate$6('form-component-input');
     const formCloseEvent = generate$6('form-close');
     const formCancelEvent = generate$6('form-cancel');
     const formActionEvent = generate$6('form-action');
     const formSubmitEvent = generate$6('form-submit');
         var _a;
         return (_a = icons[icon]) !== null && _a !== void 0 ? _a : icon;
       };
       const runOnItem = f => (comp, se) => {
         closest$1(se.event.target, '[data-collection-item-value]').each(target => {
-          f(comp, se, target, get$f(target, 'data-collection-item-value'));
+          f(comp, se, target, get$g(target, 'data-collection-item-value'));
         });
       };
       const setContents = (comp, items) => {
+        const disabled = providersBackstage.checkUiComponentContext('mode:design').shouldDisable || providersBackstage.isDisabled();
+        const disabledClass = disabled ? ' tox-collection__item--state-disabled' : '';
         const htmlLines = map$2(items, item => {
-          const itemText = global$8.translate(item.text);
+          const itemText = global$5.translate(item.text);
           const textContent = spec.columns === 1 ? `<div class="tox-collection__item-label">${ itemText }</div>` : '';
           const iconContent = `<div class="tox-collection__item-icon">${ getIcon(item.icon) }</div>`;
           const mapItemName = {
             '_': ' ',
             ' - ': ' ',
             '-': ' '
           };
           const ariaLabel = itemText.replace(/\_| \- |\-/g, match => mapItemName[match]);
-          const disabledClass = providersBackstage.isDisabled() ? ' tox-collection__item--state-disabled' : '';
-          return `<div class="tox-collection__item${ disabledClass }" tabindex="-1" data-collection-item-value="${ global$3.encodeAllRaw(item.value) }" title="${ ariaLabel }" aria-label="${ ariaLabel }">${ iconContent }${ textContent }</div>`;
+          return `<div data-mce-tooltip="${ ariaLabel }" class="tox-collection__item${ disabledClass }" tabindex="-1" data-collection-item-value="${ global$3.encodeAllRaw(item.value) }" aria-label="${ ariaLabel }">${ iconContent }${ textContent }</div>`;
         });
         const chunks = spec.columns !== 'auto' && spec.columns > 1 ? chunk$1(htmlLines, spec.columns) : [htmlLines];
         const html = map$2(chunks, ch => `<div class="tox-collection__group">${ ch.join('') }</div>`);
         set$6(comp.element, html.join(''));
       };
       const onClick = runOnItem((comp, se, tgt, itemValue) => {
         se.stop();
-        if (!providersBackstage.isDisabled()) {
+        if (!(providersBackstage.checkUiComponentContext('mode:design').shouldDisable || providersBackstage.isDisabled())) {
           emitWith(comp, formActionEvent, {
             name: spec.name,
             value: itemValue
           });
+        }
       });
       const collectionEvents = [
         run$1(mouseover(), runOnItem((comp, se, tgt) => {
-          focus$3(tgt);
+          focus$3(tgt, true);
         })),
         run$1(click(), onClick),
         run$1(tap(), onClick),
         run$1(focusin(), runOnItem((comp, se, tgt) => {
           descendant(comp.element, '.' + activeClass).each(currentActive => {
-            remove$2(currentActive, activeClass);
+            remove$3(currentActive, activeClass);
           });
           add$2(tgt, activeClass);
         })),
         run$1(focusout(), runOnItem(comp => {
           descendant(comp.element, '.' + activeClass).each(currentActive => {
-            remove$2(currentActive, activeClass);
+            remove$3(currentActive, activeClass);
+            blur$1(currentActive);
           });
         })),
         runOnExecute$1(runOnItem((comp, se, tgt, itemValue) => {
           emitWith(comp, formActionEvent, {
             name: spec.name,
         },
         components: [],
         factory: { sketch: identity },
         behaviours: derive$1([
           Disabling.config({
-            disabled: providersBackstage.isDisabled,
+            disabled: () => providersBackstage.checkUiComponentContext(spec.context).shouldDisable,
             onDisabled: comp => {
               iterCollectionItems(comp, childElm => {
                 add$2(childElm, 'tox-collection__item--state-disabled');
                 set$9(childElm, 'aria-disabled', true);
               });
             },
             onEnabled: comp => {
               iterCollectionItems(comp, childElm => {
-                remove$2(childElm, 'tox-collection__item--state-disabled');
+                remove$3(childElm, 'tox-collection__item--state-disabled');
-                remove$7(childElm, 'aria-disabled');
+                remove$8(childElm, 'aria-disabled');
               });
+            }
           }),
-          receivingConfig(),
+          toggleOnReceive(() => providersBackstage.checkUiComponentContext(spec.context)),
           Replacing.config({}),
+          Tooltipping.config({
+            ...providersBackstage.tooltips.getConfig({
+              tooltipText: '',
+              onShow: comp => {
+                descendant(comp.element, '.' + activeClass + '[data-mce-tooltip]').each(current => {
+                  getOpt(current, 'data-mce-tooltip').each(text => {
+                    Tooltipping.setComponents(comp, providersBackstage.tooltips.getComponents({ tooltipText: text }));
+                  });
+                });
+              }
+            }),
+            mode: 'children-keyboard-focus',
+            anchor: comp => ({
+              type: 'node',
+              node: descendant(comp.element, '.' + activeClass).orThunk(() => first$1('.tox-collection__item')),
+              root: comp.element,
+              layouts: {
+                onLtr: constant$1([
+                  south$2,
+                  north$2,
+                  southeast$2,
+                  northeast$2,
+                  southwest$2,
+                  northwest$2
+                ]),
+                onRtl: constant$1([
+                  south$2,
+                  north$2,
+                  southeast$2,
+                  northeast$2,
+                  southwest$2,
+                  northwest$2
+                ])
+              },
+              bubble: nu$5(0, -2, {})
+            })
+          }),
           Representing.config({
             store: {
               mode: 'memory',
               initialValue: initialData.getOr([])
             },
         eventOrder: {
           [execute$5()]: [
             'disabling',
             'alloy.base.behaviour',
             'collection-events'
+          ],
+          [focusin()]: [
+            'collection-events',
+            'tooltipping'
+          ]
+        }
       });
       const extraClasses = ['tox-form__group--collection'];
       return renderFormFieldWith(pLabel, pField, extraClasses, []);
       const name = name$3(elem);
       return contains$2(ariaElements, name);
     };
     const markValid = (component, invalidConfig) => {
       const elem = invalidConfig.getRoot(component).getOr(component.element);
-      remove$2(elem, invalidConfig.invalidClass);
+      remove$3(elem, invalidConfig.invalidClass);
       invalidConfig.notify.each(notifyInfo => {
         if (isAriaElement(component.element)) {
           set$9(component.element, 'aria-invalid', false);
+        }
         notifyInfo.getContainer(component).each(container => {
         query: query,
         run: run,
         isInvalid: isInvalid
     });
-    const events$8 = (invalidConfig, invalidState) => invalidConfig.validator.map(validatorInfo => derive$2([run$1(validatorInfo.onEvent, component => {
+    const events$7 = (invalidConfig, invalidState) => invalidConfig.validator.map(validatorInfo => derive$2([run$1(validatorInfo.onEvent, component => {
         run(component, invalidConfig, invalidState).get(identity);
       })].concat(validatorInfo.validateOnLoad ? [runOnAttached(component => {
         run(component, invalidConfig, invalidState).get(noop);
       })] : []))).getOr({});
     var ActiveInvalidate = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        events: events$8
+        events: events$7
     });
           };
+        }
+      }
     });
-    const exhibit$1 = () => nu$7({
+    const exhibit$1 = () => nu$8({
       styles: {
         '-webkit-user-select': 'none',
         'user-select': 'none',
         '-ms-user-select': 'none',
         '-moz-user-select': '-moz-none'
       },
       attributes: { unselectable: 'on' }
     });
-    const events$7 = () => derive$2([abort(selectstart(), always)]);
+    const events$6 = () => derive$2([abort(selectstart(), always)]);
     var ActiveUnselecting = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        events: events$7,
+        events: events$6,
         exhibit: exhibit$1
     });
     const renderPanelButton = (spec, sharedBackstage) => Dropdown.sketch({
       dom: spec.dom,
       components: spec.components,
       toggleClass: 'mce-active',
       dropdownBehaviours: derive$1([
-        DisablingConfigs.button(sharedBackstage.providers.isDisabled),
+        DisablingConfigs.button(() => sharedBackstage.providers.isDisabled() || sharedBackstage.providers.checkUiComponentContext(spec.context).shouldDisable),
-        receivingConfig(),
+        toggleOnReceive(() => sharedBackstage.providers.checkUiComponentContext(spec.context)),
         Unselecting.config({}),
         Tabstopping.config({})
       ]),
       layouts: spec.layouts,
       sandboxClasses: ['tox-dialog__popups'],
         factory: Input,
         inputClasses: ['tox-textfield'],
         data: initialData,
         onSetValue: c => Invalidating.run(c).get(noop),
         inputBehaviours: derive$1([
-          Disabling.config({ disabled: sharedBackstage.providers.isDisabled }),
+          Disabling.config({ disabled: () => sharedBackstage.providers.isDisabled() || sharedBackstage.providers.checkUiComponentContext(spec.context).shouldDisable }),
-          receivingConfig(),
+          toggleOnReceive(() => sharedBackstage.providers.checkUiComponentContext(spec.context)),
           Tabstopping.config({}),
           Invalidating.config({
             invalidClass: 'tox-textbox-field-invalid',
             getRoot: comp => parentElement(comp.element),
             notify: {
         },
         components: [],
         fetch: getFetch$1(colorInputBackstage.getColors(spec.storageKey), spec.storageKey, colorInputBackstage.hasCustomColors()),
         columns: colorInputBackstage.getColorCols(spec.storageKey),
         presets: 'color',
-        onItemAction
+        onItemAction,
+        context: spec.context
       }, sharedBackstage));
       return FormField.sketch({
         dom: {
           tag: 'div',
           classes: ['tox-form__group']
       return getMinXBounds(spectrum) - getMinXBounds(slider) + offset;
     };
     const setPositionFromValue$2 = (slider, thumb, detail, edges) => {
       const value = currentValue(detail);
       const pos = findPositionOfValue$1(slider, edges.getSpectrum(slider), value, edges.getLeftEdge(slider), edges.getRightEdge(slider), detail);
-      const thumbRadius = get$c(thumb.element) / 2;
+      const thumbRadius = get$d(thumb.element) / 2;
       set$8(thumb.element, 'left', pos - thumbRadius + 'px');
     };
     const onLeft$2 = handleMovement$2(-1);
     const onRight$2 = handleMovement$2(1);
     const onUp$2 = Optional.none;
       return getMinYBounds(spectrum) - getMinYBounds(slider) + offset;
     };
     const setPositionFromValue$1 = (slider, thumb, detail, edges) => {
       const value = currentValue(detail);
       const pos = findPositionOfValue(slider, edges.getSpectrum(slider), value, edges.getTopEdge(slider), edges.getBottomEdge(slider), detail);
-      const thumbRadius = get$d(thumb.element) / 2;
+      const thumbRadius = get$e(thumb.element) / 2;
       set$8(thumb.element, 'top', pos - thumbRadius + 'px');
     };
     const onLeft$1 = Optional.none;
     const onRight$1 = Optional.none;
     const onUp$1 = handleMovement$1(-1);
     const getValueFromEvent = simulatedEvent => getEventSource(simulatedEvent);
     const setPositionFromValue = (slider, thumb, detail, edges) => {
       const value = currentValue(detail);
       const xPos = findPositionOfValue$1(slider, edges.getSpectrum(slider), value.x, edges.getLeftEdge(slider), edges.getRightEdge(slider), detail);
       const yPos = findPositionOfValue(slider, edges.getSpectrum(slider), value.y, edges.getTopEdge(slider), edges.getBottomEdge(slider), detail);
-      const thumbXRadius = get$c(thumb.element) / 2;
+      const thumbXRadius = get$d(thumb.element) / 2;
-      const thumbYRadius = get$d(thumb.element) / 2;
+      const thumbYRadius = get$e(thumb.element) / 2;
       set$8(thumb.element, 'left', xPos - thumbXRadius + 'px');
       set$8(thumb.element, 'top', yPos - thumbYRadius + 'px');
     };
     const onLeft = handleMovement(-1, false);
     const onRight = handleMovement(1, false);
     const validInput = generate$6('valid-input');
     const invalidInput = generate$6('invalid-input');
     const validatingInput = generate$6('validating-input');
+    const translatePrefix = 'colorcustom.rgb.';
+    const uninitiatedTooltipApi = {
+      isEnabled: always,
+      setEnabled: noop,
+      immediatelyShow: noop,
+      immediatelyHide: noop
-    const translatePrefix = 'colorcustom.rgb.';
+    };
+    const rgbFormFactory = (translate, getClass, onValidHexx, onInvalidHexx, tooltipGetConfig, makeIcon) => {
+      const setTooltipEnabled = (enabled, tooltipApi) => {
+        const api = tooltipApi.get();
+        if (enabled === api.isEnabled()) {
+          return;
+        }
+        api.setEnabled(enabled);
+        if (enabled) {
+          api.immediatelyShow();
+        } else {
+          api.immediatelyHide();
+        }
-    const rgbFormFactory = (translate, getClass, onValidHexx, onInvalidHexx) => {
+      };
-      const invalidation = (label, isValid) => Invalidating.config({
+      const invalidation = (label, isValid, tooltipApi) => Invalidating.config({
         invalidClass: getClass('invalid'),
         notify: {
           onValidate: comp => {
             emitWith(comp, validatingInput, { type: label });
           },
+          onValid: comp => {
-          onValid: comp => {
+            setTooltipEnabled(false, tooltipApi);
             emitWith(comp, validInput, {
               type: label,
               value: Representing.getValue(comp)
             });
           },
+          onInvalid: comp => {
-          onInvalid: comp => {
+            setTooltipEnabled(true, tooltipApi);
             emitWith(comp, invalidInput, {
               type: label,
               value: Representing.getValue(comp)
             });
           },
           validateOnLoad: false
+        }
       });
       const renderTextField = (isValid, name, label, description, data) => {
+        const tooltipApi = Cell(uninitiatedTooltipApi);
         const helptext = translate(translatePrefix + 'range');
         const pLabel = FormField.parts.label({
-          dom: {
-            tag: 'label',
+          dom: { tag: 'label' },
-            attributes: { 'aria-label': description }
-          },
           components: [text$2(label)]
         });
         const pField = FormField.parts.field({
           data,
           factory: Input,
           inputAttributes: {
-            type: 'text',
+            'type': 'text',
+            'aria-label': description,
             ...name === 'hex' ? { 'aria-live': 'polite' } : {}
           },
           inputClasses: [getClass('textfield')],
           inputBehaviours: derive$1([
-            invalidation(name, isValid),
+            invalidation(name, isValid, tooltipApi),
-            Tabstopping.config({})
+            Tabstopping.config({}),
+            Tooltipping.config({
+              ...tooltipGetConfig({
+                tooltipText: '',
+                onSetup: comp => {
+                  tooltipApi.set({
+                    isEnabled: () => {
+                      return Tooltipping.isEnabled(comp);
+                    },
+                    setEnabled: enabled => {
+                      return Tooltipping.setEnabled(comp, enabled);
+                    },
+                    immediatelyShow: () => {
+                      return Tooltipping.immediateOpenClose(comp, true);
+                    },
+                    immediatelyHide: () => {
+                      return Tooltipping.immediateOpenClose(comp, false);
+                    }
+                  });
+                  Tooltipping.setEnabled(comp, false);
+                },
+                onShow: (component, _tooltip) => {
+                  Tooltipping.setComponents(component, [{
+                      dom: {
+                        tag: 'p',
+                        classes: [getClass('rgb-warning-note')]
+                      },
+                      components: [text$2(translate(name === 'hex' ? 'colorcustom.rgb.invalidHex' : 'colorcustom.rgb.invalid'))]
+                    }]);
+                }
+              })
+            })
           ]),
           onSetValue: input => {
             if (Invalidating.isInvalid(input)) {
               const run = Invalidating.run(input);
               run.get(noop);
+            }
+          }
         });
+        const errorId = generate$6('aria-invalid');
+        const memInvalidIcon = record(makeIcon('invalid', Optional.some(errorId), 'warning'));
+        const memStatus = record({
+          dom: {
+            tag: 'div',
+            classes: [getClass('invalid-icon')]
+          },
+          components: [memInvalidIcon.asSpec()]
+        });
         const comps = [
           pLabel,
-          pField
+          pField,
+          memStatus.asSpec()
         ];
         const concats = name !== 'hex' ? [FormField.parts['aria-descriptor']({ text: helptext })] : [];
         const components = comps.concat(concats);
         return {
           dom: {
             tag: 'div',
-            attributes: { role: 'presentation' }
+            attributes: { role: 'presentation' },
+            classes: [getClass('rgb-container')]
           },
           components
         };
       };
       const copyRgbToHex = (form, rgba) => {
         extraApis: {}
       });
       return saturationBrightnessPaletteSketcher;
     };
-    const makeFactory = (translate, getClass) => {
+    const makeFactory = (translate, getClass, tooltipConfig, makeIcon) => {
       const factory = detail => {
-        const rgbForm = rgbFormFactory(translate, getClass, detail.onValidHex, detail.onInvalidHex);
+        const rgbForm = rgbFormFactory(translate, getClass, detail.onValidHex, detail.onInvalidHex, tooltipConfig, makeIcon);
         const sbPalette = paletteFactory(translate, getClass);
         const hueSliderToDegrees = hue => (100 - hue) / 100 * 360;
         const hueDegreesToSlider = hue => 100 - hue / 360 * 100;
         const state = {
         getValue: getter,
         setValue: setter
+      }
     });
     const withElement = (initialValue, getter, setter) => withComp(initialValue, c => getter(c.element), (c, v) => setter(c.element, v));
-    const domHtml = optInitialValue => withElement(optInitialValue, get$9, set$6);
+    const domHtml = optInitialValue => withElement(optInitialValue, get$8, set$6);
     const memory = initialValue => Representing.config({
       store: {
         mode: 'memory',
         initialValue
+      }
     });
     const english = {
       'colorcustom.rgb.red.label': 'R',
-      'colorcustom.rgb.red.description': 'Red component',
+      'colorcustom.rgb.red.description': 'Red channel',
       'colorcustom.rgb.green.label': 'G',
-      'colorcustom.rgb.green.description': 'Green component',
+      'colorcustom.rgb.green.description': 'Green channel',
       'colorcustom.rgb.blue.label': 'B',
-      'colorcustom.rgb.blue.description': 'Blue component',
+      'colorcustom.rgb.blue.description': 'Blue channel',
       'colorcustom.rgb.hex.label': '#',
       'colorcustom.rgb.hex.description': 'Hex color code',
+      'colorcustom.rgb.range': 'Range 0 to 255',
+      'colorcustom.rgb.invalid': 'Numbers only, 0 to 255',
-      'colorcustom.rgb.range': 'Range 0 to 255',
+      'colorcustom.rgb.invalidHex': 'Hexadecimal only, 000000 to FFFFFF',
       'aria.color.picker': 'Color Picker',
       'aria.input.invalid': 'Invalid input'
     };
     const translate$1 = providerBackstage => key => {
         return providerBackstage.translate(key);
+      }
     };
     const renderColorPicker = (_spec, providerBackstage, initialData) => {
       const getClass = key => 'tox-' + key;
+      const renderIcon = (name, errId, icon = name, label = name) => render$3(icon, {
+        tag: 'div',
+        classes: [
+          'tox-icon',
+          'tox-control-wrap__status-icon-' + name
+        ],
+        attributes: {
+          'title': providerBackstage.translate(label),
+          'aria-live': 'polite',
+          ...errId.fold(() => ({}), id => ({ id }))
+        }
+      }, providerBackstage.icons);
-      const colourPickerFactory = makeFactory(translate$1(providerBackstage), getClass);
+      const colourPickerFactory = makeFactory(translate$1(providerBackstage), getClass, providerBackstage.tooltips.getConfig, renderIcon);
       const onValidHex = form => {
         emitWith(form, formActionEvent, {
           name: 'hex-valid',
           value: true
         });
               return formValues.hex;
             });
             return optHex.map(hex => '#' + removeLeading(hex, '#')).getOr('');
           }, (comp, newValue) => {
             const pattern = /^#([a-fA-F0-9]{3}(?:[a-fA-F0-9]{3})?)/;
-            const valOpt = Optional.from(pattern.exec(newValue)).bind(matches => get$h(matches, 1));
+            const valOpt = Optional.from(pattern.exec(newValue)).bind(matches => get$i(matches, 1));
             const picker = memPicker.get(comp);
             const optRgbForm = Composing.getCurrent(picker);
             optRgbForm.fold(() => {
               console.log('Can not find form');
             }, rgbForm => {
     var global$2 = tinymce.util.Tools.resolve('tinymce.Resource');
     const isOldCustomEditor = spec => has$2(spec, 'init');
     const renderCustomEditor = spec => {
-      const editorApi = value$2();
+      const editorApi = value$4();
+      const memReplaced = record({ dom: { tag: spec.tag } });
+      const initialValue = value$4();
+      const focusBehaviour = !isOldCustomEditor(spec) && spec.onFocus.isSome() ? [
+        Focusing.config({
+          onFocus: comp => {
+            spec.onFocus.each(onFocusFn => {
+              onFocusFn(comp.element.dom);
+            });
+          }
+        }),
-      const memReplaced = record({ dom: { tag: spec.tag } });
+        Tabstopping.config({})
-      const initialValue = value$2();
+      ] : [];
       return {
         dom: {
           tag: 'div',
                   initialValue.clear();
                   editorApi.set(ea);
                 });
               });
             })]),
-          withComp(Optional.none(), () => editorApi.get().fold(() => initialValue.get().getOr(''), ed => ed.getValue()), (component, value) => {
+          withComp(Optional.none(), () => editorApi.get().fold(() => initialValue.get().getOr(''), ed => ed.getValue()), (_component, value) => {
             editorApi.get().fold(() => initialValue.set(value), ed => ed.setValue(value));
           }),
           ComposingConfigs.self()
-        ]),
+        ].concat(focusBehaviour)),
         components: [memReplaced.asSpec()]
       };
     };
+    var global$1 = tinymce.util.Tools.resolve('tinymce.util.Tools');
     var global$1 = tinymce.util.Tools.resolve('tinymce.util.Tools');
     const browseFilesEvent = generate$6('browse.files.event');
     const filterByExtension = (files, providersBackstage) => {
       const allowedImageFileTypes = global$1.explode(providersBackstage.getOption('images_file_types'));
       const isFileInAllowedTypes = file => exists(allowedImageFileTypes, type => endsWith(file.name.toLowerCase(), `.${ type.toLowerCase() }`));
       };
       const onDrop = (comp, se) => {
         var _a;
         if (!Disabling.isDisabled(comp)) {
           const transferEvent = se.event.raw;
-          handleFiles(comp, (_a = transferEvent.dataTransfer) === null || _a === void 0 ? void 0 : _a.files);
+          emitWith(comp, browseFilesEvent, { files: (_a = transferEvent.dataTransfer) === null || _a === void 0 ? void 0 : _a.files });
+        }
       };
       const onSelect = (component, simulatedEvent) => {
         const input = simulatedEvent.event.raw.target;
-        handleFiles(component, input.files);
+        emitWith(component, browseFilesEvent, { files: input.files });
       };
       const handleFiles = (component, files) => {
         if (files) {
           Representing.setValue(component, filterByExtension(files, providersBackstage));
           emitWith(component, formChangeEvent, { name: spec.name });
         behaviours: derive$1([config('input-file-events', [
             cutter(click()),
             cutter(tap())
           ])])
       });
+      const pLabel = spec.label.map(label => renderLabel$3(label, providersBackstage));
-      const renderField = s => ({
+      const pField = FormField.parts.field({
+        factory: Button,
-        uid: s.uid,
+        dom: {
+          tag: 'button',
+          styles: { position: 'relative' },
+          classes: [
+            'tox-button',
+            'tox-button--secondary'
+          ]
+        },
+        components: [
+          text$2(providersBackstage.translate('Browse for an image')),
+          memInput.asSpec()
+        ],
+        action: comp => {
+          const inputComp = memInput.get(comp);
+          inputComp.element.dom.click();
+        },
+        buttonBehaviours: derive$1([
+          ComposingConfigs.self(),
+          memory(initialData.getOr([])),
+          Tabstopping.config({}),
+          DisablingConfigs.button(() => providersBackstage.checkUiComponentContext(spec.context).shouldDisable),
+          toggleOnReceive(() => providersBackstage.checkUiComponentContext(spec.context))
+        ])
+      });
+      const wrapper = {
         dom: {
           tag: 'div',
           classes: ['tox-dropzone-container']
         },
         behaviours: derive$1([
-          memory(initialData.getOr([])),
+          Disabling.config({ disabled: () => providersBackstage.checkUiComponentContext(spec.context).shouldDisable }),
-          ComposingConfigs.self(),
+          toggleOnReceive(() => providersBackstage.checkUiComponentContext(spec.context)),
-          Disabling.config({}),
           Toggling.config({
             toggleClass: 'dragenter',
             toggleOnExecute: false
           }),
           config('dropzone-events', [
             components: [
+              {
                 dom: { tag: 'p' },
                 components: [text$2(providersBackstage.translate('Drop an image here'))]
               },
-              Button.sketch({
-                dom: {
-                  tag: 'button',
-                  styles: { position: 'relative' },
-                  classes: [
-                    'tox-button',
-                    'tox-button--secondary'
-                  ]
+              pField
-                },
-                components: [
-                  text$2(providersBackstage.translate('Browse for an image')),
-                  memInput.asSpec()
-                ],
-                action: comp => {
-                  const inputComp = memInput.get(comp);
-                  inputComp.element.dom.click();
-                },
-                buttonBehaviours: derive$1([
-                  Tabstopping.config({}),
-                  DisablingConfigs.button(providersBackstage.isDisabled),
-                  receivingConfig()
-                ])
-              })
+            ]
           }]
-      });
+      };
-      const pLabel = spec.label.map(label => renderLabel$3(label, providersBackstage));
+      return renderFormFieldWith(pLabel, wrapper, ['tox-form__group--stretched'], [config('handle-files', [run$1(browseFilesEvent, (comp, se) => {
-      const pField = FormField.parts.field({ factory: { sketch: renderField } });
+            FormField.getField(comp).each(field => {
-      return renderFormFieldWith(pLabel, pField, ['tox-form__group--stretched'], []);
+              handleFiles(field, se.event.files);
+            });
+          })])]);
     };
     const renderGrid = (spec, backstage) => ({
       dom: {
     const bodyChannel = generate$6('update-body');
     const footerChannel = generate$6('update-footer');
     const bodySendMessageChannel = generate$6('body-send-message');
     const dialogFocusShiftedChannel = generate$6('dialog-focus-shifted');
-    const browser = detect$2().browser;
+    const browser = detect$1().browser;
     const isSafari = browser.isSafari();
     const isFirefox = browser.isFirefox();
     const isSafariOrFirefox = isSafari || isFirefox;
     const isChromium = browser.isChromium();
             channels: {
               [dialogFocusShiftedChannel]: {
                 onReceive: (comp, message) => {
                   message.newFocus.each(newFocus => {
                     parentElement(comp.element).each(parent => {
-                      const f = eq(comp.element, newFocus) ? add$2 : remove$2;
+                      const f = eq(comp.element, newFocus) ? add$2 : remove$3;
                       f(parent, 'tox-navobj-bordered-focus');
                     });
                   });
+                }
+              }
         width: width.toString() + 'px',
         height: height.toString() + 'px'
       };
     };
     const zoomToFit = (panel, width, height) => {
-      const panelW = get$c(panel);
+      const panelW = get$d(panel);
-      const panelH = get$d(panel);
+      const panelH = get$e(panel);
       return Math.min(panelW / width, panelH / height, 1);
     };
     const renderImagePreview = (spec, initialData) => {
       const cachedData = Cell(initialData.getOr({ url: '' }));
       const memImage = record({
           if (!isUndefined(cachedWidth) && !isUndefined(cachedHeight)) {
             if (isUndefined(zoom)) {
               const z = zoomToFit(frameComponent.element, cachedWidth, cachedHeight);
               translatedData.zoom = z;
+            }
-            const position = calculateImagePosition(get$c(frameComponent.element), get$d(frameComponent.element), cachedWidth, cachedHeight, translatedData.zoom);
+            const position = calculateImagePosition(get$d(frameComponent.element), get$e(frameComponent.element), cachedWidth, cachedHeight, translatedData.zoom);
             memContainer.getOpt(frameComponent).each(container => {
               setAll(container.element, position);
             });
+          }
         };
         memImage.getOpt(frameComponent).each(imageComponent => {
           const img = imageComponent.element;
-          if (data.url !== get$f(img, 'src')) {
+          if (data.url !== get$g(img, 'src')) {
             set$9(img, 'src', data.url);
-            remove$2(frameComponent.element, 'tox-imagepreview__loaded');
+            remove$3(frameComponent.element, 'tox-imagepreview__loaded');
+          }
           applyFramePositioning();
           image(img).then(img => {
             if (frameComponent.getSystem().isConnected()) {
               add$2(frameComponent.element, 'tox-imagepreview__loaded');
           withComp(fakeValidatedData, () => cachedData.get(), setValue)
         ])
       };
     };
-    const renderLabel$2 = (spec, backstageShared) => {
+    const renderLabel$2 = (spec, backstageShared, getCompByName) => {
       const baseClass = 'tox-label';
       const centerClass = spec.align === 'center' ? [`${ baseClass }--center`] : [];
       const endClass = spec.align === 'end' ? [`${ baseClass }--end`] : [];
-      const label = {
+      const label = record({
         dom: {
           tag: 'label',
           classes: [
             baseClass,
             ...centerClass,
             ...endClass
+          ]
         },
         components: [text$2(backstageShared.providers.translate(spec.label))]
-      };
+      });
       const comps = map$2(spec.items, backstageShared.interpreter);
       return {
         dom: {
           tag: 'div',
           classes: ['tox-form__group']
         },
         components: [
-          label,
+          label.asSpec(),
           ...comps
         ],
         behaviours: derive$1([
           ComposingConfigs.self(),
           Replacing.config({}),
           domHtml(Optional.none()),
+          Keying.config({ mode: 'acyclic' }),
+          config('label', [runOnAttached(comp => {
+              spec.for.each(name => {
+                getCompByName(name).each(target => {
+                  label.getOpt(comp).each(labelComp => {
+                    var _a;
+                    const id = (_a = get$g(target.element, 'id')) !== null && _a !== void 0 ? _a : generate$6('form-field');
+                    set$9(target.element, 'id', id);
+                    set$9(labelComp.element, 'for', id);
+                  });
+                });
+              });
-          Keying.config({ mode: 'acyclic' })
+            })])
         ])
       };
     };
     const toolbarButtonEventOrder = {
       [execute$5()]: [
         'disabling',
         'alloy.base.behaviour',
         'toggling',
-        'toolbar-button-events'
+        'toolbar-button-events',
+        'tooltipping'
       ],
       [attachedToDom()]: [
         'toolbar-button-events',
         commonButtonDisplayEvent
       ],
+      [detachedFromDom()]: [
+        'toolbar-button-events',
+        'dropdown-events',
+        'tooltipping'
+      ],
       [mousedown()]: [
         'focusing',
         'alloy.base.behaviour',
         commonButtonDisplayEvent
+      ]
     };
-    const forceInitialSize = comp => set$8(comp.element, 'width', get$e(comp.element, 'width'));
+    const forceInitialSize = comp => set$8(comp.element, 'width', get$f(comp.element, 'width'));
     const renderIcon$1 = (iconName, iconsProvider, behaviours) => render$3(iconName, {
       tag: 'span',
       behaviours: derive$1([Replacing.config({})])
     });
     const updateMenuText = generate$6('update-menu-text');
     const updateMenuIcon = generate$6('update-menu-icon');
-    const renderCommonDropdown = (spec, prefix, sharedBackstage) => {
+    const renderCommonDropdown = (spec, prefix, sharedBackstage, btnName) => {
       const editorOffCell = Cell(noop);
       const optMemDisplayText = spec.text.map(text => record(renderLabel$1(text, prefix, sharedBackstage.providers)));
       const optMemDisplayIcon = spec.icon.map(iconName => record(renderReplaceableIconFromPack(iconName, sharedBackstage.providers.icons)));
       const onLeftOrRightInMenu = (comp, se) => {
         emitWith(dropdown, 'keydown', { raw: se.event.raw });
         Dropdown.close(dropdown);
         return Optional.some(true);
       };
       const role = spec.role.fold(() => ({}), role => ({ role }));
+      const listRole = Optional.from(spec.listRole).map(listRole => ({ listRole })).getOr({});
-      const tooltipAttributes = spec.tooltip.fold(() => ({}), tooltip => {
+      const ariaLabelAttribute = spec.ariaLabel.fold(() => ({}), ariaLabel => {
-        const translatedTooltip = sharedBackstage.providers.translate(tooltip);
+        const translatedAriaLabel = sharedBackstage.providers.translate(ariaLabel);
-        return {
-          'title': translatedTooltip,
-          'aria-label': translatedTooltip
+        return { 'aria-label': translatedAriaLabel };
-        };
       });
       const iconSpec = render$3('chevron-down', {
         tag: 'div',
         classes: [`${ prefix }__select-chevron`]
       }, sharedBackstage.providers.icons);
       const fixWidthBehaviourName = generate$6('common-button-display-events');
+      const customEventsName = 'dropdown-events';
       const memDropdown = record(Dropdown.sketch({
         ...spec.uid ? { uid: spec.uid } : {},
         ...role,
+        ...listRole,
         dom: {
           tag: 'button',
           classes: [
             prefix,
             `${ prefix }--select`
           ].concat(map$2(spec.classes, c => `${ prefix }--${ c }`)),
+          attributes: {
-          attributes: { ...tooltipAttributes }
+            ...ariaLabelAttribute,
+            ...isNonNullable(btnName) ? { 'data-mce-name': btnName } : {}
+          }
         },
         components: componentRenderPipeline([
           optMemDisplayIcon.map(mem => mem.asSpec()),
           optMemDisplayText.map(mem => mem.asSpec()),
           Optional.some(iconSpec)
             focusSearchField(tmenuComp);
+          }
         },
         dropdownBehaviours: derive$1([
           ...spec.dropdownBehaviours,
-          DisablingConfigs.button(() => spec.disabled || sharedBackstage.providers.isDisabled()),
+          DisablingConfigs.button(() => spec.disabled || sharedBackstage.providers.checkUiComponentContext(spec.context).shouldDisable),
-          receivingConfig(),
+          toggleOnReceive(() => sharedBackstage.providers.checkUiComponentContext(spec.context)),
           Unselecting.config({}),
           Replacing.config({}),
+          ...spec.tooltip.map(t => Tooltipping.config(sharedBackstage.providers.tooltips.getConfig({ tooltipText: sharedBackstage.providers.translate(t) }))).toArray(),
-          config('dropdown-events', [
+          config(customEventsName, [
             onControlAttached(spec, editorOffCell),
             onControlDetached(spec, editorOffCell)
           ]),
-          config(fixWidthBehaviourName, [runOnAttached((comp, _se) => forceInitialSize(comp))]),
+          config(fixWidthBehaviourName, [runOnAttached((comp, _se) => {
+              if (spec.listRole !== 'listbox') {
+                forceInitialSize(comp);
+              }
+            })]),
+          config('update-dropdown-width-variable', [run$1(windowResize(), (comp, _se) => Dropdown.close(comp))]),
           config('menubutton-update-display-text', [
             run$1(updateMenuText, (comp, se) => {
               optMemDisplayText.bind(mem => mem.getOpt(comp)).each(displayText => {
                 Replacing.set(displayText, [text$2(sharedBackstage.providers.translate(se.event.text))]);
               });
               });
             })
           ])
         ]),
         eventOrder: deepMerge(toolbarButtonEventOrder, {
-          mousedown: [
+          [mousedown()]: [
             'focusing',
             'alloy.base.behaviour',
             'item-type-events',
             'normal-dropdown-events'
           ],
           [attachedToDom()]: [
             'toolbar-button-events',
+            Tooltipping.name(),
-            'dropdown-events',
+            customEventsName,
             fixWidthBehaviourName
+          ]
         }),
         sandboxBehaviours: derive$1([
           Keying.config({
         toggleClass: `${ prefix }--active`,
         parts: {
           menu: {
             ...part(false, spec.columns, spec.presets),
             fakeFocus: spec.searchable,
+            ...spec.listRole === 'listbox' ? {} : {
-            onHighlightItem: updateAriaOnHighlight,
+              onHighlightItem: updateAriaOnHighlight,
-            onCollapseMenu: (tmenuComp, itemCompCausingCollapse, nowActiveMenuComp) => {
+              onCollapseMenu: (tmenuComp, itemCompCausingCollapse, nowActiveMenuComp) => {
-              Highlighting.getHighlighted(nowActiveMenuComp).each(itemComp => {
+                Highlighting.getHighlighted(nowActiveMenuComp).each(itemComp => {
-                updateAriaOnHighlight(tmenuComp, nowActiveMenuComp, itemComp);
+                  updateAriaOnHighlight(tmenuComp, nowActiveMenuComp, itemComp);
-              });
+                });
-            },
+              },
-            onDehighlightItem: updateAriaOnDehighlight
+              onDehighlightItem: updateAriaOnDehighlight
+            }
+          }
         },
         getAnchorOverrides: () => {
           return {
             maxHeightFunction: (element, available) => {
         menus: newMenus,
         expansions: newExpansions
       };
     };
     const generateValueIfRequired = item => {
-      const itemValue = get$g(item, 'value').getOrThunk(() => generate$6('generated-menu-item'));
+      const itemValue = get$h(item, 'value').getOrThunk(() => generate$6('generated-menu-item'));
       return deepMerge({ value: itemValue }, item);
     };
     const expand = (items, menuItems) => {
       const realItems = unwrapReferences(isString(items) ? items.split(' ') : items, menuItems);
       return foldr(realItems, (acc, item) => {
       return Optional.from(tieredMenu.tieredData(primary, menus, data.expansions));
     };
     const isSingleListItem = item => !has$2(item, 'items');
     const dataAttribute = 'data-value';
-    const fetchItems = (dropdownComp, name, items, selectedValue) => map$2(items, item => {
+    const fetchItems = (dropdownComp, name, items, selectedValue, hasNestedItems) => map$2(items, item => {
       if (!isSingleListItem(item)) {
         return {
           type: 'nestedmenuitem',
           text: item.text,
-          getSubmenuItems: () => fetchItems(dropdownComp, name, item.items, selectedValue)
+          getSubmenuItems: () => fetchItems(dropdownComp, name, item.items, selectedValue, hasNestedItems)
         };
       } else {
         return {
+          type: 'togglemenuitem',
-          type: 'togglemenuitem',
+          ...hasNestedItems ? {} : { role: 'option' },
           text: item.text,
           value: item.value,
           active: item.value === selectedValue,
           onAction: () => {
       } else {
         return someIf(item.value === value, item);
+      }
     });
     const renderListBox = (spec, backstage, initialData) => {
+      const hasNestedItems = exists(spec.items, item => !isSingleListItem(item));
       const providersBackstage = backstage.shared.providers;
       const initialItem = initialData.bind(value => findItemByValue(spec.items, value)).orThunk(() => head(spec.items).filter(isSingleListItem));
       const pLabel = spec.label.map(label => renderLabel$3(label, providersBackstage));
       const pField = FormField.parts.field({
         dom: {},
         factory: {
           sketch: sketchSpec => renderCommonDropdown({
+            context: spec.context,
             uid: sketchSpec.uid,
             text: initialItem.map(item => item.text),
             icon: Optional.none(),
-            tooltip: spec.label,
+            tooltip: Optional.none(),
+            role: someIf(!hasNestedItems, 'combobox'),
+            ...hasNestedItems ? {} : { listRole: 'listbox' },
-            role: Optional.none(),
+            ariaLabel: spec.label,
             fetch: (comp, callback) => {
-              const items = fetchItems(comp, spec.name, spec.items, Representing.getValue(comp));
+              const items = fetchItems(comp, spec.name, spec.items, Representing.getValue(comp), hasNestedItems);
               callback(build(items, ItemResponse$1.CLOSE_ON_EXECUTE, backstage, {
                 isHorizontalMenu: false,
                 search: Optional.none()
               }));
             },
             columns: 1,
             presets: 'normal',
             classes: [],
             dropdownBehaviours: [
               Tabstopping.config({}),
-              withComp(initialItem.map(item => item.value), comp => get$f(comp.element, dataAttribute), (comp, data) => {
+              withComp(initialItem.map(item => item.value), comp => get$g(comp.element, dataAttribute), (comp, data) => {
                 findItemByValue(spec.items, data).each(item => {
                   set$9(comp.element, dataAttribute, item.value);
                   emitWith(comp, updateMenuText, { text: item.text });
                 });
               })
         components: flatten([
           pLabel.toArray(),
           [listBoxWrap]
         ]),
         fieldBehaviours: derive$1([Disabling.config({
-            disabled: constant$1(!spec.enabled),
+            disabled: () => !spec.enabled || providersBackstage.checkUiComponentContext(spec.context).shouldDisable,
             onDisabled: comp => {
               FormField.getField(comp).each(Disabling.disable);
             },
             onEnabled: comp => {
               FormField.getField(comp).each(Disabling.enable);
           Focusing.config({}),
           Representing.config({
             store: {
               mode: 'manual',
               getValue: select => {
-                return get$6(select.element);
+                return get$7(select.element);
               },
               setValue: (select, newValue) => {
                 const firstOption = head(detail.options);
                 const found = find$5(detail.options, opt => opt.value === newValue);
                 if (found.isSome()) {
         ...initialData.map(data => ({ data })).getOr({}),
         selectAttributes: { size: spec.size },
         options: translatedOptions,
         factory: HtmlSelect,
         selectBehaviours: derive$1([
-          Disabling.config({ disabled: () => !spec.enabled || providersBackstage.isDisabled() }),
+          Disabling.config({ disabled: () => !spec.enabled || providersBackstage.checkUiComponentContext(spec.context).shouldDisable }),
           Tabstopping.config({}),
           config('selectbox-change', [run$1(change(), (component, _) => {
               emitWith(component, formChangeEvent, { name: spec.name });
             })])
         ])
           pLabel.toArray(),
           [selectWrap]
         ]),
         fieldBehaviours: derive$1([
           Disabling.config({
-            disabled: () => !spec.enabled || providersBackstage.isDisabled(),
+            disabled: () => !spec.enabled || providersBackstage.checkUiComponentContext(spec.context).shouldDisable,
             onDisabled: comp => {
               FormField.getField(comp).each(Disabling.disable);
             },
             onEnabled: comp => {
               FormField.getField(comp).each(Disabling.enable);
+            }
           }),
-          receivingConfig()
+          toggleOnReceive(() => providersBackstage.checkUiComponentContext(spec.context))
         ])
       });
     };
       markers$1(['lockClass']),
       defaulted('locked', false),
       SketchBehaviours.field('coupledFieldBehaviours', [
         Composing,
         Representing
-      ])
+      ]),
+      defaultedFunction('onInput', noop)
     ]);
     const getField = (comp, detail, partName) => getPart(comp, detail, partName).bind(Composing.getCurrent);
     const coupledPart = (selfName, otherName) => required({
       factory: FormField,
       name: selfName,
                 getField(me, detail, otherName).each(other => {
                   getPart(me, detail, 'lock').each(lock => {
                     if (Toggling.isOn(lock)) {
                       detail.onLockedChange(me, other, lock);
+                    }
+                    detail.onInput(me);
                   });
                 });
               })])])
         };
+      }
         classes: [
           'tox-icon',
           'tox-lock-icon__' + iconName
+        ]
       }, providersBackstage.icons);
+      const disabled = () => !spec.enabled || providersBackstage.checkUiComponentContext(spec.context).shouldDisable;
+      const toggleOnReceive$1 = toggleOnReceive(() => providersBackstage.checkUiComponentContext(spec.context));
+      const label = spec.label.getOr('Constrain proportions');
+      const translatedLabel = providersBackstage.translate(label);
       const pLock = FormCoupledInputs.parts.lock({
         dom: {
           tag: 'button',
           classes: [
             'tox-lock',
             'tox-button',
             'tox-button--naked',
             'tox-button--icon'
           ],
+          attributes: {
-          attributes: { title: providersBackstage.translate(spec.label.getOr('Constrain proportions')) }
+            'aria-label': translatedLabel,
+            'data-mce-name': label
+          }
         },
         components: [
           makeIcon('lock'),
           makeIcon('unlock')
         ],
         buttonBehaviours: derive$1([
-          Disabling.config({ disabled: () => !spec.enabled || providersBackstage.isDisabled() }),
+          Disabling.config({ disabled }),
-          receivingConfig(),
+          toggleOnReceive$1,
-          Tabstopping.config({})
+          Tabstopping.config({}),
+          Tooltipping.config(providersBackstage.tooltips.getConfig({ tooltipText: translatedLabel }))
         ])
       });
       const formGroup = components => ({
         dom: {
           tag: 'div',
       });
       const getFieldPart = isField1 => FormField.parts.field({
         factory: Input,
         inputClasses: ['tox-textfield'],
         inputBehaviours: derive$1([
-          Disabling.config({ disabled: () => !spec.enabled || providersBackstage.isDisabled() }),
+          Disabling.config({ disabled }),
-          receivingConfig(),
+          toggleOnReceive$1,
           Tabstopping.config({}),
           config('size-input-events', [
             run$1(focusin(), (component, _simulatedEvent) => {
               emitWith(component, ratioEvent, { isField1 });
             }),
             });
           });
         },
         coupledFieldBehaviours: derive$1([
           Disabling.config({
-            disabled: () => !spec.enabled || providersBackstage.isDisabled(),
+            disabled,
             onDisabled: comp => {
               FormCoupledInputs.getField1(comp).bind(FormField.getField).each(Disabling.disable);
               FormCoupledInputs.getField2(comp).bind(FormField.getField).each(Disabling.disable);
               FormCoupledInputs.getLock(comp).each(Disabling.disable);
             },
               FormCoupledInputs.getField1(comp).bind(FormField.getField).each(Disabling.enable);
               FormCoupledInputs.getField2(comp).bind(FormField.getField).each(Disabling.enable);
               FormCoupledInputs.getLock(comp).each(Disabling.enable);
+            }
           }),
-          receivingConfig(),
+          toggleOnReceive(() => providersBackstage.checkUiComponentContext('mode:design')),
           config('size-input-events2', [run$1(ratioEvent, (component, simulatedEvent) => {
               const isField1 = simulatedEvent.event.isField1;
               const optCurrent = isField1 ? FormCoupledInputs.getField1(component) : FormCoupledInputs.getField2(component);
               const optOther = isField1 ? FormCoupledInputs.getField2(component) : FormCoupledInputs.getField1(component);
               const value1 = optCurrent.map(Representing.getValue).getOr('');
         onChoose: (component, thumb, value) => {
           emitWith(component, formChangeEvent, {
             name: spec.name,
             value
           });
+        },
+        onChange: (component, thumb, value) => {
+          emitWith(component, formChangeEvent, {
+            name: spec.name,
+            value
+          });
+        }
       });
     };
     };
     const renderTextField = (spec, providersBackstage) => {
       const pLabel = spec.label.map(label => renderLabel$3(label, providersBackstage));
       const baseInputBehaviours = [
-        Disabling.config({ disabled: () => spec.disabled || providersBackstage.isDisabled() }),
+        Disabling.config({ disabled: () => spec.disabled || providersBackstage.checkUiComponentContext(spec.context).shouldDisable }),
-        receivingConfig(),
+        toggleOnReceive(() => providersBackstage.checkUiComponentContext(spec.context)),
         Keying.config({
           mode: 'execution',
           useEnter: spec.multiline !== true,
           useControlEnter: spec.multiline === true,
       })).toArray();
       const placeholder = spec.placeholder.fold(constant$1({}), p => ({ placeholder: providersBackstage.translate(p) }));
       const inputMode = spec.inputMode.fold(constant$1({}), mode => ({ inputmode: mode }));
       const inputAttributes = {
         ...placeholder,
-        ...inputMode
+        ...inputMode,
+        'data-mce-name': spec.name
       };
       const pField = FormField.parts.field({
         tag: spec.multiline === true ? 'textarea' : 'input',
         ...spec.data.map(data => ({ data })).getOr({}),
         inputAttributes,
       } : pField;
       const extraClasses = spec.flex ? ['tox-form__group--stretched'] : [];
       const extraClasses2 = extraClasses.concat(spec.maximized ? ['tox-form-group--maximize'] : []);
       const extraBehaviours = [
         Disabling.config({
-          disabled: () => spec.disabled || providersBackstage.isDisabled(),
+          disabled: () => spec.disabled || providersBackstage.checkUiComponentContext(spec.context).shouldDisable,
           onDisabled: comp => {
             FormField.getField(comp).each(Disabling.disable);
           },
           onEnabled: comp => {
             FormField.getField(comp).each(Disabling.enable);
+          }
         }),
-        receivingConfig()
+        toggleOnReceive(() => providersBackstage.checkUiComponentContext(spec.context))
       ];
       return renderFormFieldWith(pLabel, pTextField, extraClasses2, extraBehaviours);
     };
     const renderInput = (spec, providersBackstage, initialData) => renderTextField({
       name: spec.name,
       flex: false,
       disabled: !spec.enabled,
       classname: 'tox-textfield',
       validation: Optional.none(),
       maximized: spec.maximized,
-      data: initialData
+      data: initialData,
+      context: spec.context
     }, providersBackstage);
     const renderTextarea = (spec, providersBackstage, initialData) => renderTextField({
       name: spec.name,
       multiline: true,
       label: spec.label,
       flex: true,
       disabled: !spec.enabled,
       classname: 'tox-textarea',
       validation: Optional.none(),
       maximized: spec.maximized,
-      data: initialData
+      data: initialData,
+      context: spec.context
     }, providersBackstage);
     const getAnimationRoot = (component, slideConfig) => slideConfig.getAnimationRoot.fold(() => component.element, get => get(component));
     const getDimensionProperty = slideConfig => slideConfig.dimension.property;
     const getDimension = (slideConfig, elem) => slideConfig.dimension.getDimension(elem);
     const disableTransitions = (component, slideConfig) => {
       const root = getAnimationRoot(component, slideConfig);
-      remove$1(root, [
+      remove$2(root, [
         slideConfig.shrinkingClass,
         slideConfig.growingClass
       ]);
     };
     const setShrunk = (component, slideConfig) => {
-      remove$2(component.element, slideConfig.openClass);
+      remove$3(component.element, slideConfig.openClass);
       add$2(component.element, slideConfig.closedClass);
       set$8(component.element, getDimensionProperty(slideConfig), '0px');
       reflow(component.element);
     };
     const setGrown = (component, slideConfig) => {
-      remove$2(component.element, slideConfig.closedClass);
+      remove$3(component.element, slideConfig.closedClass);
       add$2(component.element, slideConfig.openClass);
-      remove$6(component.element, getDimensionProperty(slideConfig));
+      remove$7(component.element, getDimensionProperty(slideConfig));
     };
     const doImmediateShrink = (component, slideConfig, slideState, _calculatedSize) => {
       slideState.setCollapsed();
       const size = calculatedSize.getOrThunk(() => getDimension(slideConfig, component.element));
       slideState.setCollapsed();
       set$8(component.element, getDimensionProperty(slideConfig), size);
       reflow(component.element);
       const root = getAnimationRoot(component, slideConfig);
-      remove$2(root, slideConfig.growingClass);
+      remove$3(root, slideConfig.growingClass);
       add$2(root, slideConfig.shrinkingClass);
       setShrunk(component, slideConfig);
       slideConfig.onStartShrink(component);
     };
     const doStartSmartShrink = (component, slideConfig, slideState) => {
       const startCompleteGrow = () => {
         setShrunk(component, slideConfig);
       };
       const setStartSize = wasShrinking ? startPartialGrow : startCompleteGrow;
       setStartSize();
-      remove$2(root, slideConfig.shrinkingClass);
+      remove$3(root, slideConfig.shrinkingClass);
       add$2(root, slideConfig.growingClass);
       setGrown(component, slideConfig);
       set$8(component.element, getDimensionProperty(slideConfig), fullSize);
       slideState.setExpanded();
       slideConfig.onStartGrow(component);
     };
-    const refresh$4 = (component, slideConfig, slideState) => {
+    const refresh$3 = (component, slideConfig, slideState) => {
       if (slideState.isExpanded()) {
-        remove$6(component.element, getDimensionProperty(slideConfig));
+        remove$7(component.element, getDimensionProperty(slideConfig));
         const fullSize = getDimension(slideConfig, component.element);
         set$8(component.element, getDimensionProperty(slideConfig), fullSize);
+      }
     };
     const grow = (component, slideConfig, slideState) => {
+      }
     };
     var SlidingApis = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        refresh: refresh$4,
+        refresh: refresh$3,
         grow: grow,
         shrink: shrink,
         immediateShrink: immediateShrink,
         hasGrown: hasGrown,
         immediateGrow: immediateGrow
     });
     const exhibit = (base, slideConfig, _slideState) => {
       const expanded = slideConfig.expanded;
-      return expanded ? nu$7({
+      return expanded ? nu$8({
         classes: [slideConfig.openClass],
         styles: {}
-      }) : nu$7({
+      }) : nu$8({
         classes: [slideConfig.closedClass],
         styles: wrap$1(slideConfig.dimension.property, '0px')
       });
     };
-    const events$6 = (slideConfig, slideState) => derive$2([runOnSource(transitionend(), (component, simulatedEvent) => {
+    const events$5 = (slideConfig, slideState) => derive$2([runOnSource(transitionend(), (component, simulatedEvent) => {
         const raw = simulatedEvent.event.raw;
         if (raw.propertyName === slideConfig.dimension.property) {
           disableTransitions(component, slideConfig);
           if (slideState.isExpanded()) {
-            remove$6(component.element, slideConfig.dimension.property);
+            remove$7(component.element, slideConfig.dimension.property);
+          }
           const notify = slideState.isExpanded() ? slideConfig.onGrown : slideConfig.onShrunk;
           notify(component);
+        }
       })]);
     var ActiveSliding = /*#__PURE__*/Object.freeze({
         __proto__: null,
         exhibit: exhibit,
-        events: events$6
+        events: events$5
     });
       onHandler('onStartGrow'),
       defaulted('expanded', false),
       requiredOf('dimension', choose$1('property', {
         width: [
           output$1('property', 'width'),
-          output$1('getDimension', elem => get$c(elem) + 'px')
+          output$1('getDimension', elem => get$d(elem) + 'px')
         ],
         height: [
           output$1('property', 'height'),
-          output$1('getDimension', elem => get$d(elem) + 'px')
+          output$1('getDimension', elem => get$e(elem) + 'px')
+        ]
       }))
     ];
-    const init$9 = spec => {
+    const init$8 = spec => {
       const state = Cell(spec.expanded);
       const readState = () => 'expanded: ' + state.get();
-      return nu$8({
+      return nu$7({
         isExpanded: () => state.get() === true,
         isCollapsed: () => state.get() === false,
         setCollapsed: curry(state.set, false),
         setExpanded: curry(state.set, true),
         readState
       });
     };
     var SlidingState = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        init: init$9
+        init: init$8
     });
         const elm = component.element;
         if (state) {
           add$2(elm, 'tox-tbtn--enabled');
           set$9(elm, 'aria-pressed', true);
         } else {
-          remove$2(elm, 'tox-tbtn--enabled');
+          remove$3(elm, 'tox-tbtn--enabled');
-          remove$7(elm, 'aria-pressed');
+          remove$8(elm, 'aria-pressed');
+        }
       },
       isActive: () => has(component.element, 'tox-tbtn--enabled'),
       setText: text => {
         emitWith(component, updateMenuText, { text });
       },
       setIcon: icon => emitWith(component, updateMenuIcon, { icon })
     });
-    const renderMenuButton = (spec, prefix, backstage, role, tabstopping = true) => {
+    const renderMenuButton = (spec, prefix, backstage, role, tabstopping = true, btnName) => {
       return renderCommonDropdown({
         text: spec.text,
         icon: spec.icon,
         tooltip: spec.tooltip,
+        ariaLabel: spec.tooltip,
         searchable: spec.search.isSome(),
         role,
         fetch: (dropdownComp, callback) => {
           const fetchContext = { pattern: spec.search.isSome() ? getSearchPattern(dropdownComp) : '' };
           spec.fetch(items => {
         onSetup: spec.onSetup,
         getApi: getMenuButtonApi,
         columns: 1,
         presets: 'normal',
         classes: [],
-        dropdownBehaviours: [...tabstopping ? [Tabstopping.config({})] : []]
+        dropdownBehaviours: [...tabstopping ? [Tabstopping.config({})] : []],
+        context: spec.context
-      }, prefix, backstage.shared);
+      }, prefix, backstage.shared, btnName);
     };
     const getFetch = (items, getButton, backstage) => {
       const getMenuItemAction = item => api => {
         const newValue = !api.isActive();
         api.setActive(newValue);
           const text = item.text.fold(() => ({}), text => ({ text }));
           return {
             type: item.type,
             active: false,
             ...text,
+            context: item.context,
             onAction: getMenuItemAction(item),
             onSetup: getMenuItemSetup(item)
           };
         }));
       };
     const renderLabel = text => ({
       dom: {
         tag: 'span',
-        classes: ['tox-tree__label'],
-        attributes: {
-          'title': text,
+        classes: ['tox-tree__label'],
-          'aria-label': text
         attributes: { 'aria-label': text }
       },
       components: [text$2(text)]
+    });
+    const renderCustomStateIcon = (container, components, backstage) => {
+      container.customStateIcon.each(icon => components.push(renderIcon(icon, backstage.shared.providers.icons, container.customStateIconTooltip.fold(() => [], tooltip => [Tooltipping.config(backstage.shared.providers.tooltips.getConfig({ tooltipText: tooltip }))]), ['tox-icon-custom-state'])));
-    });
+    };
     const leafLabelEventsId = generate$6('leaf-label-event-id');
     const renderLeafLabel = ({leaf, onLeafAction, visible, treeId, selectedId, backstage}) => {
       const internalMenuButton = leaf.menu.map(btn => renderMenuButton(btn, 'tox-mbtn', backstage, Optional.none(), visible));
+      const components = [renderLabel(leaf.title)];
-      const components = [renderLabel(leaf.title)];
+      renderCustomStateIcon(leaf, components, backstage);
       internalMenuButton.each(btn => components.push(btn));
       return Button.sketch({
         dom: {
           tag: 'div',
             })
           ])
         ])
       });
     };
-    const renderIcon = (iconName, iconsProvider, behaviours) => render$3(iconName, {
+    const renderIcon = (iconName, iconsProvider, behaviours, extraClasses, extraAttributes) => render$3(iconName, {
       tag: 'span',
       classes: [
         'tox-tree__icon-wrap',
         'tox-icon'
-      ],
+      ].concat(extraClasses || []),
-      behaviours
+      behaviours,
+      attributes: extraAttributes
     }, iconsProvider);
     const renderIconFromPack = (iconName, iconsProvider) => renderIcon(iconName, iconsProvider, []);
     const directoryLabelEventsId = generate$6('directory-label-event-id');
     const renderDirectoryLabel = ({directory, visible, noChildren, backstage}) => {
       const internalMenuButton = directory.menu.map(btn => renderMenuButton(btn, 'tox-mbtn', backstage, Optional.none()));
           },
           components: [renderIconFromPack('chevron-right', backstage.shared.providers.icons)]
         },
         renderLabel(directory.title)
       ];
+      renderCustomStateIcon(directory, components, backstage);
       internalMenuButton.each(btn => {
         components.push(btn);
       });
       const toggleExpandChildren = button => {
         ancestor(button.element, '.tox-tree--directory').each(directoryEle => {
           Replacing.config({})
         ])
       };
     };
-    const events$5 = (streamConfig, streamState) => {
+    const events$4 = (streamConfig, streamState) => {
       const streams = streamConfig.stream.streams;
       const processor = streams.setup(streamConfig, streamState);
       return derive$2([
         run$1(streamConfig.event, processor),
         runOnDetached(() => streamState.cancel())
       ].concat(streamConfig.cancelEvent.map(e => [run$1(e, () => streamState.cancel())]).getOr([])));
     };
     var ActiveStreaming = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        events: events$5
+        events: events$4
     });
         const t = state.get();
         if (t !== null) {
           t.cancel();
+        }
       };
-      return nu$8({
+      return nu$7({
         readState,
         setTimer,
         cancel
       });
     };
-    const init$8 = spec => spec.stream.streams.state(spec);
+    const init$7 = spec => spec.stream.streams.state(spec);
     var StreamingState = /*#__PURE__*/Object.freeze({
         __proto__: null,
         throttle: throttle,
-        init: init$8
+        init: init$7
     });
     const setup$c = (streamInfo, streamState) => {
       Representing.setValue(input, itemData);
       setCursorAtEnd(input);
     };
     const setSelectionOn = (input, f) => {
       const el = input.element;
-      const value = get$6(el);
+      const value = get$7(el);
       const node = el.dom;
-      if (get$f(el, 'type') !== 'number') {
+      if (get$g(el, 'type') !== 'number') {
         f(node, value);
+      }
     };
     const setCursorAtEnd = input => {
       setSelectionOn(input, (node, value) => node.setSelectionRange(value.length, value.length));
         Focusing.config({}),
         Representing.config({
           onSetValue: detail.onSetValue,
           store: {
             mode: 'dataset',
-            getDataKey: comp => get$6(comp.element),
+            getDataKey: comp => get$7(comp.element),
             getFallbackEntry: itemString => ({
               value: itemString,
               meta: {}
             }),
             setValue: (comp, data) => {
           },
           onStream: (component, _simulatedEvent) => {
             const sandbox = Coupling.getCoupled(component, 'sandbox');
             const focusInInput = Focusing.isFocused(component);
             if (focusInInput) {
-              if (get$6(component.element).length >= detail.minChars) {
+              if (get$7(component.element).length >= detail.minChars) {
                 const previousValue = getActiveMenu(sandbox).bind(activeMenu => Highlighting.getHighlighted(activeMenu).map(Representing.getValue));
                 detail.previewing.set(true);
                 const onOpenSync = _sandbox => {
                   getActiveMenu(sandbox).each(activeMenu => {
                     previousValue.fold(() => {
           others: {
             sandbox: hotspot => {
               return makeSandbox$1(detail, hotspot, {
                 onOpen: () => Toggling.on(hotspot),
                 onClose: () => {
-                  detail.lazyTypeaheadComp.get().each(input => remove$7(input.element, 'aria-activedescendant'));
+                  detail.lazyTypeaheadComp.get().each(input => remove$8(input.element, 'aria-activedescendant'));
                   Toggling.off(hotspot);
+                }
               });
+            }
+          }
       defaulted('matchWidth', true),
       defaulted('useMinWidth', false),
       defaulted('dismissOnBlur', true),
       markers$1(['openClass']),
       option$3('initialData'),
+      option$3('listRole'),
       field('typeaheadBehaviours', [
         Focusing,
         Representing,
         Streaming,
         Keying,
       fromResult,
       fromFuture,
       fromPromise
     };
-    const renderCommonSpec = (spec, actionOpt, extraBehaviours = [], dom, components, providersBackstage) => {
+    const renderCommonSpec = (spec, actionOpt, extraBehaviours = [], dom, components, tooltip, providersBackstage) => {
       const action = actionOpt.fold(() => ({}), action => ({ action }));
       const common = {
         buttonBehaviours: derive$1([
-          DisablingConfigs.button(() => !spec.enabled || providersBackstage.isDisabled()),
+          DisablingConfigs.item(() => !spec.enabled || providersBackstage.checkUiComponentContext(spec.context).shouldDisable),
-          receivingConfig(),
+          toggleOnReceive(() => providersBackstage.checkUiComponentContext(spec.context)),
           Tabstopping.config({}),
-          config('button press', [
+          ...tooltip.map(t => Tooltipping.config(providersBackstage.tooltips.getConfig({ tooltipText: providersBackstage.translate(t) }))).toArray(),
-            preventDefault('click'),
-            preventDefault('mousedown')
-          ])
+          config('button press', [preventDefault('click')])
         ].concat(extraBehaviours)),
         eventOrder: {
           click: [
             'button press',
         ...action
       };
       const domFinal = deepMerge(common, { dom });
       return deepMerge(domFinal, { components });
     };
-    const renderIconButtonSpec = (spec, action, providersBackstage, extraBehaviours = []) => {
+    const renderIconButtonSpec = (spec, action, providersBackstage, extraBehaviours = [], btnName) => {
-      const tooltipAttributes = spec.tooltip.map(tooltip => ({
+      const tooltipAttributes = spec.tooltip.map(tooltip => ({ 'aria-label': providersBackstage.translate(tooltip) })).getOr({});
-        'aria-label': providersBackstage.translate(tooltip),
-        'title': providersBackstage.translate(tooltip)
-      })).getOr({});
       const dom = {
         tag: 'button',
         classes: ['tox-tbtn'],
+        attributes: {
-        attributes: tooltipAttributes
+          ...tooltipAttributes,
+          'data-mce-name': btnName
+        }
       };
       const icon = spec.icon.map(iconName => renderIconFromPack$1(iconName, providersBackstage.icons));
       const components = componentRenderPipeline([icon]);
-      return renderCommonSpec(spec, action, extraBehaviours, dom, components, providersBackstage);
+      return renderCommonSpec(spec, action, extraBehaviours, dom, components, spec.tooltip, providersBackstage);
     };
     const calculateClassesFromButtonType = buttonType => {
       switch (buttonType) {
       case 'primary':
         return ['tox-button'];
         ...extraClasses
       ];
       const dom = {
         tag: 'button',
         classes,
+        attributes: {
-        attributes: { title: translatedText }
+          'aria-label': translatedText,
+          'data-mce-name': spec.text
+        }
       };
+      const optTooltip = spec.icon.map(constant$1(translatedText));
-      return renderCommonSpec(spec, action, extraBehaviours, dom, components, providersBackstage);
+      return renderCommonSpec(spec, action, extraBehaviours, dom, components, optTooltip, providersBackstage);
     };
     const renderButton$1 = (spec, action, providersBackstage, extraBehaviours = [], extraClasses = []) => {
       const buttonSpec = renderButtonSpec(spec, Optional.some(action), providersBackstage, extraBehaviours, extraClasses);
       return Button.sketch(buttonSpec);
     };
+      }
     };
     const isMenuFooterButtonSpec = (spec, buttonType) => buttonType === 'menu';
     const isNormalFooterButtonSpec = (spec, buttonType) => buttonType === 'custom' || buttonType === 'cancel' || buttonType === 'submit';
     const isToggleButtonSpec = (spec, buttonType) => buttonType === 'togglebutton';
-    const renderToggleButton = (spec, providers) => {
+    const renderToggleButton = (spec, providers, btnName) => {
       var _a, _b;
       const optMemIcon = spec.icon.map(memIcon => renderReplaceableIconFromPack(memIcon, providers.icons)).map(record);
       const action = comp => {
         emitWith(comp, formActionEvent, {
           name: spec.name,
       const buttonType = spec.buttonType.getOr(!spec.primary ? 'secondary' : 'primary');
       const buttonSpec = {
         ...spec,
         name: (_a = spec.name) !== null && _a !== void 0 ? _a : '',
         primary: buttonType === 'primary',
-        tooltip: Optional.from(spec.tooltip),
+        tooltip: spec.tooltip,
         enabled: (_b = spec.enabled) !== null && _b !== void 0 ? _b : false,
         borderless: false
       };
-      const tooltipAttributes = buttonSpec.tooltip.map(tooltip => ({
+      const tooltipAttributes = buttonSpec.tooltip.or(spec.text).map(tooltip => ({ 'aria-label': providers.translate(tooltip) })).getOr({});
-        'aria-label': providers.translate(tooltip),
-        'title': providers.translate(tooltip)
-      })).getOr({});
       const buttonTypeClasses = calculateClassesFromButtonType(buttonType !== null && buttonType !== void 0 ? buttonType : 'secondary');
       const showIconAndText = spec.icon.isSome() && spec.text.isSome();
       const dom = {
         tag: 'button',
         classes: [
           ...buttonTypeClasses.concat(spec.icon.isSome() ? ['tox-button--icon'] : []),
           ...spec.active ? ['tox-button--enabled'] : [],
           ...showIconAndText ? ['tox-button--icon-and-text'] : []
         ],
+        attributes: {
-        attributes: tooltipAttributes
+          ...tooltipAttributes,
+          ...isNonNullable(btnName) ? { 'data-mce-name': btnName } : {}
+        }
       };
       const extraBehaviours = [];
       const translatedText = providers.translate(spec.text.getOr(''));
       const translatedTextComponed = text$2(translatedText);
       const iconComp = componentRenderPipeline([optMemIcon.map(memIcon => memIcon.asSpec())]);
       const components = [
         ...iconComp,
         ...spec.text.isSome() ? [translatedTextComponed] : []
       ];
-      const iconButtonSpec = renderCommonSpec(buttonSpec, Optional.some(action), extraBehaviours, dom, components, providers);
+      const iconButtonSpec = renderCommonSpec(buttonSpec, Optional.some(action), extraBehaviours, dom, components, spec.tooltip, providers);
       return Button.sketch(iconButtonSpec);
     };
     const renderFooterButton = (spec, buttonType, backstage) => {
       if (isMenuFooterButtonSpec(spec, buttonType)) {
         const getButton = () => memButton;
             api.setEnabled(spec.enabled);
             return noop;
           },
           fetch: getFetch(menuButtonSpec.items, getButton, backstage)
         };
-        const memButton = record(renderMenuButton(fixedSpec, 'tox-tbtn', backstage, Optional.none()));
+        const memButton = record(renderMenuButton(fixedSpec, 'tox-tbtn', backstage, Optional.none(), true, spec.text.or(spec.tooltip).getOrUndefined()));
         return memButton.asSpec();
       } else if (isNormalFooterButtonSpec(spec, buttonType)) {
         const action = getAction(spec.name, buttonType);
         const buttonSpec = {
           ...spec,
+          context: buttonType === 'cancel' ? 'any' : spec.context,
           borderless: false
         };
         return renderButton$1(buttonSpec, action, backstage.shared.providers, []);
       } else if (isToggleButtonSpec(spec, buttonType)) {
-        return renderToggleButton(spec, backstage.shared.providers);
+        return renderToggleButton(spec, backstage.shared.providers, spec.text.or(spec.tooltip).getOrUndefined());
       } else {
         console.error('Unknown footer button type: ', buttonType);
         throw new Error('Unknown footer button type');
+      }
     };
                 });
               },
               validateOnLoad: false
+            }
           })).toArray(),
-          Disabling.config({ disabled: () => !spec.enabled || providersBackstage.isDisabled() }),
+          Disabling.config({ disabled: () => !spec.enabled || providersBackstage.checkUiComponentContext(spec.context).shouldDisable }),
           Tabstopping.config({}),
           config('urlinput-events', [
             run$1(input(), comp => {
-              const currentValue = get$6(comp.element);
+              const currentValue = get$7(comp.element);
               const trimmedValue = currentValue.trim();
               if (trimmedValue !== currentValue) {
                 set$5(comp.element, trimmedValue);
+              }
               if (spec.filetype === 'file') {
         },
         components: [
           pField,
           memStatus.asSpec()
         ],
-        behaviours: derive$1([Disabling.config({ disabled: () => !spec.enabled || providersBackstage.isDisabled() })])
+        behaviours: derive$1([Disabling.config({ disabled: () => !spec.enabled || providersBackstage.checkUiComponentContext(spec.context).shouldDisable })])
       });
       const memUrlPickerButton = record(renderButton$1({
+        context: spec.context,
         name: spec.name,
         icon: Optional.some('browse'),
         text: spec.picker_text.or(spec.label).getOr(''),
         enabled: spec.enabled,
         primary: false,
       return FormField.sketch({
         dom: renderFormFieldDom(),
         components: pLabel.toArray().concat([controlHWrapper()]),
         fieldBehaviours: derive$1([
           Disabling.config({
-            disabled: () => !spec.enabled || providersBackstage.isDisabled(),
+            disabled: () => !spec.enabled || providersBackstage.checkUiComponentContext(spec.context).shouldDisable,
             onDisabled: comp => {
               FormField.getField(comp).each(Disabling.disable);
               memUrlPickerButton.getOpt(comp).each(Disabling.disable);
             },
             onEnabled: comp => {
               FormField.getField(comp).each(Disabling.enable);
               memUrlPickerButton.getOpt(comp).each(Disabling.enable);
+            }
           }),
-          receivingConfig(),
+          toggleOnReceive(() => providersBackstage.checkUiComponentContext(spec.context)),
           config('url-input-events', [run$1(browseUrlEvent, openUrlPicker)])
         ])
       });
     };
     const renderAlertBanner = (spec, providersBackstage) => {
-      const icon = get$2(spec.icon, providersBackstage.icons);
+      const icon = get$3(spec.icon, providersBackstage.icons);
       return Container.sketch({
         dom: {
           tag: 'div',
           attributes: { role: 'alert' },
     };
     const set$1 = (element, status) => {
       element.dom.checked = status;
     };
-    const get$1 = element => element.dom.checked;
+    const get$2 = element => element.dom.checked;
     const renderCheckbox = (spec, providerBackstage, initialData) => {
       const toggleCheckboxHandler = comp => {
           attributes: { type: 'checkbox' }
         },
         behaviours: derive$1([
           ComposingConfigs.self(),
           Disabling.config({
-            disabled: () => !spec.enabled || providerBackstage.isDisabled(),
+            disabled: () => !spec.enabled || providerBackstage.checkUiComponentContext(spec.context).shouldDisable,
             onDisabled: component => {
               parentElement(component.element).each(element => add$2(element, 'tox-checkbox--disabled'));
             },
             onEnabled: component => {
-              parentElement(component.element).each(element => remove$2(element, 'tox-checkbox--disabled'));
+              parentElement(component.element).each(element => remove$3(element, 'tox-checkbox--disabled'));
+            }
           }),
           Tabstopping.config({}),
           Focusing.config({}),
-          withElement(initialData, get$1, set$1),
+          withElement(initialData, get$2, set$1),
           Keying.config({
             mode: 'special',
             onEnter: toggleCheckboxHandler,
             onSpace: toggleCheckboxHandler,
             stopSpaceKeyup: true
           pField,
           memIcons.asSpec(),
           pLabel
         ],
         fieldBehaviours: derive$1([
-          Disabling.config({ disabled: () => !spec.enabled || providerBackstage.isDisabled() }),
+          Disabling.config({ disabled: () => !spec.enabled || providerBackstage.checkUiComponentContext(spec.context).shouldDisable }),
-          receivingConfig()
+          toggleOnReceive(() => providerBackstage.checkUiComponentContext(spec.context))
         ])
       });
     };
+    const renderHtmlPanel = (spec, providersBackstage) => {
+      const classes = [
+        'tox-form__group',
+        ...spec.stretched ? ['tox-form__group--stretched'] : []
+      ];
+      const init = config('htmlpanel', [runOnAttached(comp => {
+          spec.onInit(comp.element.dom);
-    const renderHtmlPanel = spec => {
+        })]);
       if (spec.presets === 'presentation') {
         return Container.sketch({
           dom: {
             tag: 'div',
-            classes: ['tox-form__group'],
+            classes,
             innerHtml: spec.html
+          },
+          containerBehaviours: derive$1([
+            Tooltipping.config({
+              ...providersBackstage.tooltips.getConfig({
+                tooltipText: '',
+                onShow: comp => {
+                  descendant(comp.element, '[data-mce-tooltip]:hover').orThunk(() => search(comp.element)).each(current => {
+                    getOpt(current, 'data-mce-tooltip').each(text => {
+                      Tooltipping.setComponents(comp, providersBackstage.tooltips.getComponents({ tooltipText: text }));
+                    });
+                  });
+                }
+              }),
+              mode: 'children-normal',
+              anchor: comp => ({
+                type: 'node',
+                node: descendant(comp.element, '[data-mce-tooltip]:hover').orThunk(() => search(comp.element).filter(current => getOpt(current, 'data-mce-tooltip').isSome())),
+                root: comp.element,
+                layouts: {
+                  onLtr: constant$1([
+                    south$2,
+                    north$2,
+                    southeast$2,
+                    northeast$2,
+                    southwest$2,
+                    northwest$2
+                  ]),
+                  onRtl: constant$1([
+                    south$2,
+                    north$2,
+                    southeast$2,
+                    northeast$2,
+                    southwest$2,
+                    northwest$2
+                  ])
+                },
+                bubble: nu$5(0, -2, {})
+              })
+            }),
+            init
           ])
         });
       } else {
         return Container.sketch({
           dom: {
             tag: 'div',
-            classes: ['tox-form__group'],
+            classes,
             innerHtml: spec.html,
             attributes: { role: 'document' }
           },
           containerBehaviours: derive$1([
             Tabstopping.config({}),
+            Focusing.config({}),
-            Focusing.config({})
+            init
           ])
         });
+      }
     };
     const make$2 = render => {
-      return (parts, spec, dialogData, backstage) => get$g(spec, 'name').fold(() => render(spec, backstage, Optional.none()), fieldName => parts.field(fieldName, render(spec, backstage, get$g(dialogData, fieldName))));
+      return (parts, spec, dialogData, backstage, getCompByName) => get$h(spec, 'name').fold(() => render(spec, backstage, Optional.none(), getCompByName), fieldName => parts.field(fieldName, render(spec, backstage, get$h(dialogData, fieldName), getCompByName)));
     };
-    const makeIframe = render => (parts, spec, dialogData, backstage) => {
+    const makeIframe = render => (parts, spec, dialogData, backstage, getCompByName) => {
       const iframeSpec = deepMerge(spec, { source: 'dynamic' });
-      return make$2(render)(parts, iframeSpec, dialogData, backstage);
+      return make$2(render)(parts, iframeSpec, dialogData, backstage, getCompByName);
     };
     const factories = {
       bar: make$2((spec, backstage) => renderBar(spec, backstage.shared)),
       collection: make$2((spec, backstage, data) => renderCollection(spec, backstage.shared.providers, data)),
       alertbanner: make$2((spec, backstage) => renderAlertBanner(spec, backstage.shared.providers)),
       input: make$2((spec, backstage, data) => renderInput(spec, backstage.shared.providers, data)),
       textarea: make$2((spec, backstage, data) => renderTextarea(spec, backstage.shared.providers, data)),
-      label: make$2((spec, backstage) => renderLabel$2(spec, backstage.shared)),
+      label: make$2((spec, backstage, _data, getCompByName) => renderLabel$2(spec, backstage.shared, getCompByName)),
       iframe: makeIframe((spec, backstage, data) => renderIFrame(spec, backstage.shared.providers, data)),
       button: make$2((spec, backstage) => renderDialogButton(spec, backstage.shared.providers)),
       checkbox: make$2((spec, backstage, data) => renderCheckbox(spec, backstage.shared.providers, data)),
       selectbox: make$2((spec, backstage, data) => renderSelectBox(spec, backstage.shared.providers, data)),
       sizeinput: make$2((spec, backstage) => renderSizeInput(spec, backstage.shared.providers)),
       slider: make$2((spec, backstage, data) => renderSlider(spec, backstage.shared.providers, data)),
       urlinput: make$2((spec, backstage, data) => renderUrlInput(spec, backstage, backstage.urlinput, data)),
       customeditor: make$2(renderCustomEditor),
-      htmlpanel: make$2(renderHtmlPanel),
+      htmlpanel: make$2((spec, backstage) => renderHtmlPanel(spec, backstage.shared.providers)),
       imagepreview: make$2((spec, _, data) => renderImagePreview(spec, data)),
       table: make$2((spec, backstage) => renderTable(spec, backstage.shared.providers)),
       tree: make$2((spec, backstage) => renderTree(spec, backstage)),
       panel: make$2((spec, backstage) => renderPanel(spec, backstage))
     };
     const noFormParts = {
       field: (_name, spec) => spec,
       record: constant$1([])
     };
-    const interpretInForm = (parts, spec, dialogData, oldBackstage) => {
+    const interpretInForm = (parts, spec, dialogData, oldBackstage, getCompByName) => {
-      const newBackstage = deepMerge(oldBackstage, { shared: { interpreter: childSpec => interpretParts(parts, childSpec, dialogData, newBackstage) } });
+      const newBackstage = deepMerge(oldBackstage, { shared: { interpreter: childSpec => interpretParts(parts, childSpec, dialogData, newBackstage, getCompByName) } });
-      return interpretParts(parts, spec, dialogData, newBackstage);
+      return interpretParts(parts, spec, dialogData, newBackstage, getCompByName);
     };
-    const interpretParts = (parts, spec, dialogData, backstage) => get$g(factories, spec.type).fold(() => {
+    const interpretParts = (parts, spec, dialogData, backstage, getCompByName) => get$h(factories, spec.type).fold(() => {
       console.error(`Unknown factory type "${ spec.type }", defaulting to container: `, spec);
       return spec;
-    }, factory => factory(parts, spec, dialogData, backstage));
+    }, factory => factory(parts, spec, dialogData, backstage, getCompByName));
-    const interpretWithoutForm = (spec, dialogData, backstage) => interpretParts(noFormParts, spec, dialogData, backstage);
+    const interpretWithoutForm = (spec, dialogData, backstage, getCompByName) => interpretParts(noFormParts, spec, dialogData, backstage, getCompByName);
     const labelPrefix = 'layout-inset';
     const westEdgeX = anchor => anchor.x;
     const middleX = (anchor, element) => anchor.x + anchor.width / 2 - element.width / 2;
       ...item,
       type: 'formatter',
       isSelected: isSelectedFor(item.format),
       getStylePreview: getPreviewFor(item.format)
     });
-    const register$a = (editor, formats, isSelectedFor, getPreviewFor) => {
+    const register$b = (editor, formats, isSelectedFor, getPreviewFor) => {
       const enrichSupported = item => processBasic(item, isSelectedFor, getPreviewFor);
       const enrichMenu = item => {
         const newItems = doEnrich(item.items);
         return {
           ...item,
+        }
       });
       return doEnrich(formats);
     };
-    const init$7 = editor => {
+    const init$6 = editor => {
       const isSelectedFor = format => () => editor.formatter.match(format);
       const getPreviewFor = format => () => {
         const fmt = editor.formatter.get(format);
         return fmt !== undefined ? Optional.some({
       const settingsFormats = Cell([]);
       const eventsFormats = Cell([]);
       const replaceSettings = Cell(false);
       editor.on('PreInit', _e => {
         const formats = getStyleFormats(editor);
-        const enriched = register$a(editor, formats, isSelectedFor, getPreviewFor);
+        const enriched = register$b(editor, formats, isSelectedFor, getPreviewFor);
         settingsFormats.set(enriched);
       });
       editor.on('addStyleModifications', e => {
-        const modifications = register$a(editor, e.items, isSelectedFor, getPreviewFor);
+        const modifications = register$b(editor, e.items, isSelectedFor, getPreviewFor);
         eventsFormats.set(modifications);
         replaceSettings.set(e.replace);
       });
       const getData = () => {
         const fromSettings = replaceSettings.get() ? [] : settingsFormats.get();
         return fromSettings.concat(fromEvents);
       };
       return { getData };
     };
+    const TooltipsBackstage = getSink => {
+      const tooltipDelay = 300;
+      const intervalDelay = tooltipDelay * 0.2;
+      let numActiveTooltips = 0;
+      const alreadyShowingTooltips = () => numActiveTooltips > 0;
+      const getComponents = spec => {
+        return [{
+            dom: {
+              tag: 'div',
+              classes: ['tox-tooltip__body']
+            },
+            components: [text$2(spec.tooltipText)]
+          }];
+      };
+      const getConfig = spec => {
+        return {
+          delayForShow: () => alreadyShowingTooltips() ? intervalDelay : tooltipDelay,
+          delayForHide: constant$1(tooltipDelay),
+          exclusive: true,
+          lazySink: getSink,
+          tooltipDom: {
+            tag: 'div',
+            classes: [
+              'tox-tooltip',
+              'tox-tooltip--up'
+            ]
+          },
+          tooltipComponents: getComponents(spec),
+          onShow: (comp, tooltip) => {
+            numActiveTooltips++;
+            if (spec.onShow) {
+              spec.onShow(comp, tooltip);
+            }
+          },
+          onHide: (comp, tooltip) => {
+            numActiveTooltips--;
+            if (spec.onHide) {
+              spec.onHide(comp, tooltip);
+            }
+          },
+          onSetup: spec.onSetup
+        };
+      };
+      return {
+        getConfig,
+        getComponents
+      };
+    };
     const isElement = node => isNonNullable(node) && node.nodeType === 1;
     const trim = global$1.trim;
     const hasContentEditableState = value => {
       return node => {
+      }
       global$4.setItem(STORAGE_KEY, JSON.stringify(history));
     };
     const getHistory = fileType => {
       const history = getAllHistory();
-      return get$g(history, fileType).getOr([]);
+      return get$h(history, fileType).getOr([]);
     };
     const addToHistory = (url, fileType) => {
       if (!isHttpUrl(url)) {
         return;
+      }
       const history = getAllHistory();
-      const items = get$g(history, fileType).getOr([]);
+      const items = get$h(history, fileType).getOr([]);
       const itemsWithoutUrl = filter$2(items, item => item !== url);
       history[fileType] = [url].concat(itemsWithoutUrl).slice(0, HISTORY_LENGTH);
       setAllHistory(history);
     };
       getLinkInformation: () => getLinkInformation(editor),
       getValidationHandler: () => getValidationHandler(editor),
       getUrlPicker: filetype => getUrlPicker(editor, filetype)
     });
-    const init$6 = (lazySinks, editor, lazyAnchorbar, lazyBottomAnchorBar) => {
+    const init$5 = (lazySinks, editor, lazyAnchorbar, lazyBottomAnchorBar) => {
       const contextMenuState = Cell(false);
       const toolbar = HeaderBackstage(editor);
       const providers = {
         icons: () => editor.ui.registry.getAll().icons,
         menuItems: () => editor.ui.registry.getAll().menuItems,
-        translate: global$8.translate,
+        translate: global$5.translate,
-        isDisabled: () => editor.mode.isReadOnly() || !editor.ui.isEnabled(),
+        isDisabled: () => !editor.ui.isEnabled(),
+        getOption: editor.options.get,
+        tooltips: TooltipsBackstage(lazySinks.dialog),
+        checkUiComponentContext: specContext => {
+          if (isDisabled(editor)) {
+            return {
+              contextType: 'disabled',
+              shouldDisable: true
+            };
+          }
+          const [key, value = ''] = specContext.split(':');
+          const contexts = editor.ui.registry.getAll().contexts;
+          const enabledInContext = get$h(contexts, key).fold(() => get$h(contexts, 'mode').map(pred => pred('design')).getOr(false), pred => value.charAt(0) === '!' ? !pred(value.slice(1)) : pred(value));
+          return {
+            contextType: key,
+            shouldDisable: !enabledInContext
+          };
         getOption: editor.options.get
       };
       const urlinput = UrlInputBackstage(editor);
-      const styles = init$7(editor);
+      const styles = init$6(editor);
       const colorinput = ColorInputBackstage(editor);
       const dialogSettings = DialogBackstage(editor);
       const isContextMenuOpen = () => contextMenuState.get();
       const setContextMenuState = state => contextMenuState.set(state);
         colorinput,
         dialog: dialogSettings,
         isContextMenuOpen,
         setContextMenuState
       };
+      const getCompByName = _name => Optional.none();
       const popupBackstage = {
         ...commonBackstage,
         shared: {
           ...commonBackstage.shared,
-          interpreter: s => interpretWithoutForm(s, {}, popupBackstage),
+          interpreter: s => interpretWithoutForm(s, {}, popupBackstage, getCompByName),
           getSink: lazySinks.popup
+        }
       };
       const dialogBackstage = {
         ...commonBackstage,
         shared: {
           ...commonBackstage.shared,
-          interpreter: s => interpretWithoutForm(s, {}, dialogBackstage),
+          interpreter: s => interpretWithoutForm(s, {}, dialogBackstage, getCompByName),
           getSink: lazySinks.dialog
+        }
       };
       return {
         popup: popupBackstage,
+        }
       };
       const onDismissPopups = event => {
         broadcastOn(dismissPopups(), { target: SugarElement.fromDom(event.relatedTarget.getContainer()) });
       };
+      const onFocusIn = event => editor.dispatch('focusin', event);
+      const onFocusOut = event => editor.dispatch('focusout', event);
       editor.on('PostRender', () => {
         editor.on('click', onContentClick);
         editor.on('tap', onContentClick);
         editor.on('mouseup', onContentMouseup);
         editor.on('mousedown', onContentMousedown);
         editor.on('ScrollWindow', onWindowScroll);
         editor.on('ResizeWindow', onWindowResize);
         editor.on('ResizeEditor', onEditorResize);
         editor.on('AfterProgressState', onEditorProgress);
         editor.on('DismissPopups', onDismissPopups);
+        each$1([
+          mothership,
+          ...uiMotherships
+        ], gui => {
+          gui.element.dom.addEventListener('focusin', onFocusIn);
+          gui.element.dom.addEventListener('focusout', onFocusOut);
+        });
       });
       editor.on('remove', () => {
         editor.off('click', onContentClick);
         editor.off('tap', onContentClick);
         editor.off('mouseup', onContentMouseup);
         editor.off('ScrollWindow', onWindowScroll);
         editor.off('ResizeWindow', onWindowResize);
         editor.off('ResizeEditor', onEditorResize);
         editor.off('AfterProgressState', onEditorProgress);
         editor.off('DismissPopups', onDismissPopups);
+        each$1([
+          mothership,
+          ...uiMotherships
+        ], gui => {
+          gui.element.dom.removeEventListener('focusin', onFocusIn);
+          gui.element.dom.removeEventListener('focusout', onFocusOut);
+        });
         onMousedown.unbind();
         onTouchstart.unbind();
         onTouchmove.unbind();
         onTouchend.unbind();
         onMouseup.unbind();
+        }
+      }
     });
     const setup$a = noop;
-    const isDocked$2 = never;
+    const isDocked$1 = never;
     const getBehaviours$1 = constant$1([]);
     var StaticHeader = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        setup: setup$a,
-        isDocked: isDocked$2,
-        getBehaviours: getBehaviours$1
-    });
-    const getOffsetParent = element => {
-      const isFixed = is$1(getRaw(element, 'position'), 'fixed');
-      const offsetParent$1 = isFixed ? Optional.none() : offsetParent(element);
-      return offsetParent$1.orThunk(() => {
-        const marker = SugarElement.fromTag('span');
-        return parent(element).bind(parent => {
-          append$2(parent, marker);
-          const offsetParent$1 = offsetParent(marker);
-          remove$5(marker);
-          return offsetParent$1;
-        });
-      });
-    };
-    const getOrigin = element => getOffsetParent(element).map(absolute$3).getOrThunk(() => SugarPosition(0, 0));
-    const appear = (component, contextualInfo) => {
-      const elem = component.element;
-      add$2(elem, contextualInfo.transitionClass);
-      remove$2(elem, contextualInfo.fadeOutClass);
-      add$2(elem, contextualInfo.fadeInClass);
-      contextualInfo.onShow(component);
-    };
-    const disappear = (component, contextualInfo) => {
-      const elem = component.element;
-      add$2(elem, contextualInfo.transitionClass);
-      remove$2(elem, contextualInfo.fadeInClass);
-      add$2(elem, contextualInfo.fadeOutClass);
-      contextualInfo.onHide(component);
-    };
-    const isPartiallyVisible = (box, bounds) => box.y < bounds.bottom && box.bottom > bounds.y;
-    const isTopCompletelyVisible = (box, bounds) => box.y >= bounds.y;
-    const isBottomCompletelyVisible = (box, bounds) => box.bottom <= bounds.bottom;
-    const forceTopPosition = (winBox, leftX, viewport) => ({
-      location: 'top',
-      leftX,
-      topY: viewport.bounds.y - winBox.y
-    });
-    const forceBottomPosition = (winBox, leftX, viewport) => ({
-      location: 'bottom',
-      leftX,
-      bottomY: winBox.bottom - viewport.bounds.bottom
-    });
-    const getDockedLeftPosition = bounds => {
-      return bounds.box.x - bounds.win.x;
-    };
-    const tryDockingPosition = (modes, bounds, viewport) => {
-      const winBox = bounds.win;
-      const box = bounds.box;
-      const leftX = getDockedLeftPosition(bounds);
-      return findMap(modes, mode => {
-        switch (mode) {
-        case 'bottom':
-          return !isBottomCompletelyVisible(box, viewport.bounds) ? Optional.some(forceBottomPosition(winBox, leftX, viewport)) : Optional.none();
-        case 'top':
-          return !isTopCompletelyVisible(box, viewport.bounds) ? Optional.some(forceTopPosition(winBox, leftX, viewport)) : Optional.none();
-        default:
-          return Optional.none();
-        }
-      }).getOr({ location: 'no-dock' });
-    };
-    const isVisibleForModes = (modes, box, viewport) => forall(modes, mode => {
-      switch (mode) {
-      case 'bottom':
-        return isBottomCompletelyVisible(box, viewport.bounds);
-      case 'top':
-        return isTopCompletelyVisible(box, viewport.bounds);
-      }
-    });
-    const getXYForRestoring = (pos, viewport) => {
-      const priorY = viewport.optScrollEnv.fold(constant$1(pos.bounds.y), scrollEnv => scrollEnv.scrollElmTop + (pos.bounds.y - scrollEnv.currentScrollTop));
-      return SugarPosition(pos.bounds.x, priorY);
-    };
-    const getXYForSaving = (box, viewport) => {
-      const priorY = viewport.optScrollEnv.fold(constant$1(box.y), scrollEnv => box.y + scrollEnv.currentScrollTop - scrollEnv.scrollElmTop);
-      return SugarPosition(box.x, priorY);
-    };
-    const getPrior = (elem, viewport, state) => state.getInitialPos().map(pos => {
-      const xy = getXYForRestoring(pos, viewport);
-      return {
-        box: bounds(xy.left, xy.top, get$c(elem), get$d(elem)),
-        location: pos.location
-      };
-    });
-    const storePrior = (elem, box, viewport, state, decision) => {
-      const xy = getXYForSaving(box, viewport);
-      const bounds$1 = bounds(xy.left, xy.top, box.width, box.height);
-      state.setInitialPos({
-        style: getAllRaw(elem),
-        position: get$e(elem, 'position') || 'static',
-        bounds: bounds$1,
-        location: decision.location
-      });
-    };
-    const storePriorIfNone = (elem, box, viewport, state, decision) => {
-      state.getInitialPos().fold(() => storePrior(elem, box, viewport, state, decision), () => noop);
-    };
-    const revertToOriginal = (elem, box, state) => state.getInitialPos().bind(position => {
-      var _a;
-      state.clearInitialPos();
-      switch (position.position) {
-      case 'static':
-        return Optional.some({ morph: 'static' });
-      case 'absolute':
-        const offsetParent = getOffsetParent(elem).getOr(body());
-        const offsetBox = box$1(offsetParent);
-        const scrollDelta = (_a = offsetParent.dom.scrollTop) !== null && _a !== void 0 ? _a : 0;
-        return Optional.some({
-          morph: 'absolute',
-          positionCss: NuPositionCss('absolute', get$g(position.style, 'left').map(_left => box.x - offsetBox.x), get$g(position.style, 'top').map(_top => box.y - offsetBox.y + scrollDelta), get$g(position.style, 'right').map(_right => offsetBox.right - box.right), get$g(position.style, 'bottom').map(_bottom => offsetBox.bottom - box.bottom))
-        });
-      default:
-        return Optional.none();
-      }
-    });
-    const tryMorphToOriginal = (elem, viewport, state) => getPrior(elem, viewport, state).filter(({box}) => isVisibleForModes(state.getModes(), box, viewport)).bind(({box}) => revertToOriginal(elem, box, state));
-    const tryDecisionToFixedMorph = decision => {
-      switch (decision.location) {
-      case 'top': {
-          return Optional.some({
-            morph: 'fixed',
-            positionCss: NuPositionCss('fixed', Optional.some(decision.leftX), Optional.some(decision.topY), Optional.none(), Optional.none())
-          });
-        }
-      case 'bottom': {
-          return Optional.some({
-            morph: 'fixed',
-            positionCss: NuPositionCss('fixed', Optional.some(decision.leftX), Optional.none(), Optional.none(), Optional.some(decision.bottomY))
-          });
-        }
-      default:
-        return Optional.none();
-      }
-    };
-    const tryMorphToFixed = (elem, viewport, state) => {
-      const box = box$1(elem);
-      const winBox = win();
-      const decision = tryDockingPosition(state.getModes(), {
-        win: winBox,
-        box
-      }, viewport);
-      if (decision.location === 'top' || decision.location === 'bottom') {
-        storePrior(elem, box, viewport, state, decision);
-        return tryDecisionToFixedMorph(decision);
-      } else {
-        return Optional.none();
-      }
-    };
-    const tryMorphToOriginalOrUpdateFixed = (elem, viewport, state) => {
-      return tryMorphToOriginal(elem, viewport, state).orThunk(() => {
-        return viewport.optScrollEnv.bind(_ => getPrior(elem, viewport, state)).bind(({box, location}) => {
-          const winBox = win();
-          const leftX = getDockedLeftPosition({
-            win: winBox,
-            box
-          });
-          const decision = location === 'top' ? forceTopPosition(winBox, leftX, viewport) : forceBottomPosition(winBox, leftX, viewport);
-          return tryDecisionToFixedMorph(decision);
-        });
-      });
-    };
-    const tryMorph = (component, viewport, state) => {
-      const elem = component.element;
-      const isDocked = is$1(getRaw(elem, 'position'), 'fixed');
-      return isDocked ? tryMorphToOriginalOrUpdateFixed(elem, viewport, state) : tryMorphToFixed(elem, viewport, state);
-    };
-    const calculateMorphToOriginal = (component, viewport, state) => {
-      const elem = component.element;
-      return getPrior(elem, viewport, state).bind(({box}) => revertToOriginal(elem, box, state));
-    };
-    const forceDockWith = (elem, viewport, state, getDecision) => {
-      const box = box$1(elem);
-      const winBox = win();
-      const leftX = getDockedLeftPosition({
-        win: winBox,
-        box
-      });
-      const decision = getDecision(winBox, leftX, viewport);
-      if (decision.location === 'bottom' || decision.location === 'top') {
-        storePriorIfNone(elem, box, viewport, state, decision);
-        return tryDecisionToFixedMorph(decision);
-      } else {
-        return Optional.none();
-      }
-    };
-    const morphToStatic = (component, config, state) => {
-      state.setDocked(false);
-      each$1([
-        'left',
-        'right',
-        'top',
-        'bottom',
-        'position'
-      ], prop => remove$6(component.element, prop));
-      config.onUndocked(component);
-    };
-    const morphToCoord = (component, config, state, position) => {
-      const isDocked = position.position === 'fixed';
-      state.setDocked(isDocked);
-      applyPositionCss(component.element, position);
-      const method = isDocked ? config.onDocked : config.onUndocked;
-      method(component);
-    };
-    const updateVisibility = (component, config, state, viewport, morphToDocked = false) => {
-      config.contextual.each(contextInfo => {
-        contextInfo.lazyContext(component).each(box => {
-          const isVisible = isPartiallyVisible(box, viewport.bounds);
-          if (isVisible !== state.isVisible()) {
-            state.setVisible(isVisible);
-            if (morphToDocked && !isVisible) {
-              add$1(component.element, [contextInfo.fadeOutClass]);
-              contextInfo.onHide(component);
-            } else {
-              const method = isVisible ? appear : disappear;
-              method(component, contextInfo);
-            }
-          }
-        });
-      });
-    };
-    const applyFixedMorph = (component, config, state, viewport, morph) => {
-      updateVisibility(component, config, state, viewport, true);
-      morphToCoord(component, config, state, morph.positionCss);
-    };
-    const applyMorph = (component, config, state, viewport, morph) => {
-      switch (morph.morph) {
-      case 'static': {
-          return morphToStatic(component, config, state);
-        }
-      case 'absolute': {
-          return morphToCoord(component, config, state, morph.positionCss);
-        }
-      case 'fixed': {
-          return applyFixedMorph(component, config, state, viewport, morph);
-        }
-      }
-    };
-    const refreshInternal = (component, config, state) => {
-      const viewport = config.lazyViewport(component);
-      updateVisibility(component, config, state, viewport);
-      tryMorph(component, viewport, state).each(morph => {
-        applyMorph(component, config, state, viewport, morph);
-      });
-    };
-    const resetInternal = (component, config, state) => {
-      const elem = component.element;
-      state.setDocked(false);
-      const viewport = config.lazyViewport(component);
-      calculateMorphToOriginal(component, viewport, state).each(staticOrAbsoluteMorph => {
-        switch (staticOrAbsoluteMorph.morph) {
-        case 'static': {
-            morphToStatic(component, config, state);
-            break;
-          }
-        case 'absolute': {
-            morphToCoord(component, config, state, staticOrAbsoluteMorph.positionCss);
-            break;
-          }
-        }
-      });
-      state.setVisible(true);
-      config.contextual.each(contextInfo => {
-        remove$1(elem, [
-          contextInfo.fadeInClass,
-          contextInfo.fadeOutClass,
-          contextInfo.transitionClass
-        ]);
-        contextInfo.onShow(component);
-      });
-      refresh$3(component, config, state);
-    };
-    const refresh$3 = (component, config, state) => {
-      if (component.getSystem().isConnected()) {
-        refreshInternal(component, config, state);
-      }
-    };
-    const reset = (component, config, state) => {
-      if (state.isDocked()) {
-        resetInternal(component, config, state);
-      }
-    };
-    const forceDockWithDecision = getDecision => (component, config, state) => {
-      const viewport = config.lazyViewport(component);
-      const optMorph = forceDockWith(component.element, viewport, state, getDecision);
-      optMorph.each(morph => {
-        applyFixedMorph(component, config, state, viewport, morph);
-      });
-    };
-    const forceDockToTop = forceDockWithDecision(forceTopPosition);
-    const forceDockToBottom = forceDockWithDecision(forceBottomPosition);
-    const isDocked$1 = (component, config, state) => state.isDocked();
-    const setModes = (component, config, state, modes) => state.setModes(modes);
-    const getModes = (component, config, state) => state.getModes();
-    var DockingApis = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        refresh: refresh$3,
+        __proto__: null,
-        reset: reset,
+        setup: setup$a,
-        isDocked: isDocked$1,
-        getModes: getModes,
-        setModes: setModes,
-        forceDockToTop: forceDockToTop,
-        forceDockToBottom: forceDockToBottom
-    });
-    const events$4 = (dockInfo, dockState) => derive$2([
-      runOnSource(transitionend(), (component, simulatedEvent) => {
-        dockInfo.contextual.each(contextInfo => {
-          if (has(component.element, contextInfo.transitionClass)) {
-            remove$1(component.element, [
-              contextInfo.transitionClass,
-              contextInfo.fadeInClass
-            ]);
-            const notify = dockState.isVisible() ? contextInfo.onShown : contextInfo.onHidden;
-            notify(component);
-          }
-          simulatedEvent.stop();
-        });
-      }),
-      run$1(windowScroll(), (component, _) => {
-        refresh$3(component, dockInfo, dockState);
-      }),
-      run$1(externalElementScroll(), (component, _) => {
-        refresh$3(component, dockInfo, dockState);
-      }),
-      run$1(windowResize(), (component, _) => {
-        reset(component, dockInfo, dockState);
-      })
-    ]);
-    var ActiveDocking = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        events: events$4
-    });
-    var DockingSchema = [
-      optionObjOf('contextual', [
-        requiredString('fadeInClass'),
-        requiredString('fadeOutClass'),
-        requiredString('transitionClass'),
-        requiredFunction('lazyContext'),
-        onHandler('onShow'),
-        onHandler('onShown'),
-        onHandler('onHide'),
-        onHandler('onHidden')
-      ]),
-      defaultedFunction('lazyViewport', () => ({
-        bounds: win(),
-        optScrollEnv: Optional.none()
-      })),
-      defaultedArrayOf('modes', [
-        'top',
-        'bottom'
-      ], string),
-      onHandler('onDocked'),
-      onHandler('onUndocked')
-    ];
-    const init$5 = spec => {
-      const docked = Cell(false);
-      const visible = Cell(true);
-      const initialBounds = value$2();
-      const modes = Cell(spec.modes);
-      const readState = () => `docked:  ${ docked.get() }, visible: ${ visible.get() }, modes: ${ modes.get().join(',') }`;
-      return nu$8({
-        isDocked: docked.get,
-        setDocked: docked.set,
-        getInitialPos: initialBounds.get,
-        setInitialPos: initialBounds.set,
-        clearInitialPos: initialBounds.clear,
-        isVisible: visible.get,
-        setVisible: visible.set,
-        getModes: modes.get,
-        setModes: modes.set,
-        readState
-      });
-    };
-    var DockingState = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        init: init$5
-    });
-    const Docking = create$4({
-      fields: DockingSchema,
-      name: 'docking',
-      active: ActiveDocking,
-      apis: DockingApis,
+        isDocked: isDocked$1,
-      state: DockingState
+        getBehaviours: getBehaviours$1
     });
     const editorStickyOffClass = 'tox-tinymce--toolbar-sticky-off';
     const scrollFromBehindHeader = (e, containerHeader) => {
       const doc = owner$4(containerHeader);
       const win = defaultView(containerHeader);
       const viewHeight = win.dom.innerHeight;
-      const scrollPos = get$b(doc);
+      const scrollPos = get$c(doc);
       const markerElement = SugarElement.fromDom(e.elm);
       const markerPos = absolute$2(markerElement);
-      const markerHeight = get$d(markerElement);
+      const markerHeight = get$e(markerElement);
       const markerTop = markerPos.y;
       const markerBottom = markerTop + markerHeight;
       const editorHeaderPos = absolute$3(containerHeader);
-      const editorHeaderHeight = get$d(containerHeader);
+      const editorHeaderHeight = get$e(containerHeader);
       const editorHeaderTop = editorHeaderPos.top;
       const editorHeaderBottom = editorHeaderTop + editorHeaderHeight;
       const editorHeaderDockedAtTop = Math.abs(editorHeaderTop - scrollPos.top) < 2;
       const editorHeaderDockedAtBottom = Math.abs(editorHeaderBottom - (scrollPos.top + viewHeight)) < 2;
       if (editorHeaderDockedAtTop && markerTop < editorHeaderBottom) {
         to(scrollPos.left, y, doc);
+      }
     };
     const isDockedMode = (header, mode) => contains$2(Docking.getModes(header), mode);
     const updateIframeContentFlow = header => {
-      const getOccupiedHeight = elm => getOuter$2(elm) + (parseInt(get$e(elm, 'margin-top'), 10) || 0) + (parseInt(get$e(elm, 'margin-bottom'), 10) || 0);
+      const getOccupiedHeight = elm => getOuter$2(elm) + (parseInt(get$f(elm, 'margin-top'), 10) || 0) + (parseInt(get$f(elm, 'margin-bottom'), 10) || 0);
       const elm = header.element;
       parentElement(elm).each(parentElem => {
         const padding = 'padding-' + Docking.getModes(header)[0];
         if (Docking.isDocked(header)) {
-          const parentWidth = get$c(parentElem);
+          const parentWidth = get$d(parentElem);
           set$8(elm, 'width', parentWidth + 'px');
           set$8(parentElem, padding, getOccupiedHeight(elm) + 'px');
         } else {
-          remove$6(elm, 'width');
+          remove$7(elm, 'width');
-          remove$6(parentElem, padding);
+          remove$7(parentElem, padding);
+        }
       });
     };
     const updateSinkVisibility = (sinkElem, visible) => {
       if (visible) {
-        remove$2(sinkElem, visibility.fadeOutClass);
+        remove$3(sinkElem, visibility.fadeOutClass);
         add$1(sinkElem, [
           visibility.transitionClass,
           visibility.fadeInClass
         ]);
       } else {
-        remove$2(sinkElem, visibility.fadeInClass);
+        remove$3(sinkElem, visibility.fadeInClass);
         add$1(sinkElem, [
           visibility.fadeOutClass,
           visibility.transitionClass
         ]);
+      }
     };
     const updateEditorClasses = (editor, docked) => {
       const editorContainer = SugarElement.fromDom(editor.getContainer());
       if (docked) {
         add$2(editorContainer, editorStickyOnClass);
-        remove$2(editorContainer, editorStickyOffClass);
+        remove$3(editorContainer, editorStickyOffClass);
       } else {
         add$2(editorContainer, editorStickyOffClass);
-        remove$2(editorContainer, editorStickyOnClass);
+        remove$3(editorContainer, editorStickyOnClass);
+      }
     };
     const restoreFocus = (headerElem, focusedElem) => {
       const ownerDoc = owner$4(focusedElem);
       active$1(ownerDoc).filter(activeElm => !eq(focusedElem, activeElm)).filter(activeElm => eq(activeElm, SugarElement.fromDom(ownerDoc.dom.body)) || contains(headerElem, activeElm)).each(() => focus$3(focusedElem));
       });
     };
     const isDocked = lazyHeader => lazyHeader().map(Docking.isDocked).getOr(false);
     const getIframeBehaviours = () => [Receiving.config({ channels: { [toolbarHeightChange()]: { onReceive: updateIframeContentFlow } } })];
     const getBehaviours = (editor, sharedBackstage) => {
-      const focusedElm = value$2();
+      const focusedElm = value$4();
       const lazySink = sharedBackstage.getSink;
       const runOnSinkElement = f => {
         lazySink().each(sink => f(sink.element));
       };
       const onDockingSwitch = comp => {
             },
             onShow: () => {
               runOnSinkElement(elem => updateSinkVisibility(elem, true));
             },
             onShown: comp => {
-              runOnSinkElement(elem => remove$1(elem, [
+              runOnSinkElement(elem => remove$2(elem, [
                 visibility.transitionClass,
                 visibility.fadeInClass
               ]));
               focusedElm.get().each(elem => {
                 restoreFocus(comp.element, elem);
             onHide: comp => {
               findFocusedElem(comp.element, lazySink).fold(focusedElm.clear, focusedElm.set);
               runOnSinkElement(elem => updateSinkVisibility(elem, false));
             },
             onHidden: () => {
-              runOnSinkElement(elem => remove$1(elem, [visibility.transitionClass]));
+              runOnSinkElement(elem => remove$2(elem, [visibility.transitionClass]));
             },
             ...visibility
           },
           lazyViewport: comp => {
             const optScrollingContext = detectWhenSplitUiMode(editor, comp.element);
             return optScrollingContext.fold(() => {
               const boundsWithoutOffset = win();
               const offset = getStickyToolbarOffset(editor);
-              const top = boundsWithoutOffset.y + (isDockedMode(comp, 'top') ? offset : 0);
+              const top = boundsWithoutOffset.y + (isDockedMode(comp, 'top') && !isFullscreen(editor) ? offset : 0);
               const height = boundsWithoutOffset.height - (isDockedMode(comp, 'bottom') ? offset : 0);
               return {
                 bounds: bounds(boundsWithoutOffset.x, top, boundsWithoutOffset.width, height),
                 optScrollEnv: Optional.none()
               };
         } else {
           return Optional.some(x);
+        }
       })),
       requiredFunction('fetch'),
-      defaultedFunction('onSetup', () => noop)
+      defaultedFunction('onSetup', () => noop),
+      defaultedString('context', 'mode:design')
     ];
     const MenuButtonSchema = objOf([
       type,
         'color',
         'listpreview'
       ]),
       defaultedColumns(1),
       onAction,
-      onItemAction
+      onItemAction,
+      defaultedString('context', 'mode:design')
     ]);
     const createSplitButton = spec => asRaw('SplitButton', splitButtonSchema, spec);
     const factory$d = (detail, spec) => {
           const buttonSpec = {
             type: 'menubutton',
             text: m.text,
             fetch: callback => {
               callback(m.getItems());
-            }
+            },
+            context: 'any'
           };
           const internal = createMenuButton(buttonSpec).mapError(errInfo => formatError(errInfo)).getOrDie();
           return renderMenuButton(internal, 'tox-mbtn', spec.backstage, Optional.some('menuitem'));
         });
         Replacing.set(comp, newMenus);
       const getSlot = (container, key) => getPart(container, detail, key);
       const onSlot = (f, def) => (container, key) => getPart(container, detail, key).map(slot => f(slot, key)).getOr(def);
       const onSlots = f => (container, keys) => {
         each$1(keys, key => f(container, key));
       };
-      const doShowing = (comp, _key) => get$f(comp.element, 'aria-hidden') !== 'true';
+      const doShowing = (comp, _key) => get$g(comp.element, 'aria-hidden') !== 'true';
       const doShow = (comp, key) => {
         if (!doShowing(comp)) {
           const element = comp.element;
-          remove$6(element, 'display');
+          remove$7(element, 'display');
-          remove$7(element, 'aria-hidden');
+          remove$8(element, 'aria-hidden');
           emitWith(comp, slotVisibility(), {
             name: key,
             visible: true
           });
+        }
       };
       return {
         uid: detail.uid,
         dom: detail.dom,
         components,
-        behaviours: get$3(detail.slotBehaviours),
+        behaviours: get$4(detail.slotBehaviours),
         apis
       };
     };
     const slotApis = map$1({
       getSlotNames: (apis, c) => apis.getSlotNames(c),
             const handleToggle = () => buttonApi.setActive(isActive());
             editor.on('ToggleSidebar', handleToggle);
             return () => {
               editor.off('ToggleSidebar', handleToggle);
             };
-          }
+          },
+          context: 'any'
         });
       });
     };
     const getApi = comp => ({ element: () => comp.element.dom });
     const makePanels = (parts, panelConfigs) => {
         const configKey = showSidebar === null || showSidebar === void 0 ? void 0 : showSidebar.toLowerCase();
         if (isString(configKey) && has$2(panelConfigs, configKey)) {
           Composing.getCurrent(slider).each(slotContainer => {
             SlotContainer.showSlot(slotContainer, configKey);
             Sliding.immediateGrow(slider);
-            remove$6(slider.element, 'width');
+            remove$7(slider.element, 'width');
             updateSidebarRoleOnToggle(sidebar.element, 'region');
           });
+        }
       });
     };
               },
               onStartGrow: slider => {
                 emitWith(slider, fixSize, { width: getRaw(slider.element, 'width').getOr('') });
               },
               onStartShrink: slider => {
-                emitWith(slider, fixSize, { width: get$c(slider.element) + 'px' });
+                emitWith(slider, fixSize, { width: get$d(slider.element) + 'px' });
+              }
             }),
             Replacing.config({}),
             Composing.config({
               find: comp => {
         config('sidebar-sliding-events', [
           run$1(fixSize, (comp, se) => {
             set$8(comp.element, 'width', se.event.width);
           }),
           run$1(autoSize, (comp, _se) => {
-            remove$6(comp.element, 'width');
+            remove$7(comp.element, 'width');
           })
         ])
       ])
     });
         config.onBlock(component);
+      }
       state.blockWith(() => Replacing.remove(root, blocker));
     };
     const unblock = (component, config, state) => {
-      remove$7(component.element, 'aria-busy');
+      remove$8(component.element, 'aria-busy');
       if (state.isBlocked()) {
         config.onUnblock(component);
+      }
       state.clear();
     };
     const init$4 = () => {
       const blocker = destroyable();
       const blockWith = destroy => {
         blocker.set({ destroy });
       };
-      return nu$8({
+      return nu$7({
         readState: blocker.isSet,
         blockWith,
         clear: blocker.clear,
         isBlocked: blocker.isSet
       });
       Optional.from(editor.iframeElement).map(SugarElement.fromDom).each(iframe => {
         if (state) {
           getOpt(iframe, tabIndexAttr).each(tabIndex => set$9(iframe, dataTabIndexAttr, tabIndex));
           set$9(iframe, tabIndexAttr, -1);
         } else {
-          remove$7(iframe, tabIndexAttr);
+          remove$8(iframe, tabIndexAttr);
           getOpt(iframe, dataTabIndexAttr).each(tabIndex => {
             set$9(iframe, tabIndexAttr, tabIndex);
-            remove$7(iframe, dataTabIndexAttr);
+            remove$8(iframe, dataTabIndexAttr);
           });
+        }
       });
     };
     const toggleThrobber = (editor, comp, state, providerBackstage) => {
       const element = comp.element;
       toggleEditorTabIndex(editor, state);
       if (state) {
         Blocking.block(comp, getBusySpec$1(providerBackstage));
-        remove$6(element, 'display');
+        remove$7(element, 'display');
-        remove$7(element, 'aria-hidden');
+        remove$8(element, 'aria-hidden');
         if (editor.hasFocus()) {
           focusBusyComponent(comp);
+        }
       } else {
         const throbberFocus = Composing.getCurrent(comp).exists(busyComp => hasFocus(busyComp.element));
         return false;
+      }
     };
     const setup$7 = (editor, lazyThrobber, sharedBackstage) => {
       const throbberState = Cell(false);
-      const timer = value$2();
+      const timer = value$4();
       const stealFocus = e => {
         if (throbberState.get() && !isPasteBinTarget(e)) {
           e.preventDefault();
           focusBusyComponent(lazyThrobber());
           editor.editorManager.setActive(editor);
       set$8(primary.element, 'visibility', 'hidden');
       const groups = builtGroups.concat([overflowGroup]);
       const focusedComp = findFocusedComp(groups);
       setOverflow([]);
       setGroups$1(primary, groups);
-      const availableWidth = get$c(primary.element);
+      const availableWidth = get$d(primary.element);
-      const overflows = partition(availableWidth, detail.builtGroups.get(), comp => get$c(comp.element), overflowGroup);
+      const overflows = partition(availableWidth, detail.builtGroups.get(), comp => Math.ceil(comp.element.dom.getBoundingClientRect().width), overflowGroup);
       if (overflows.extra.length === 0) {
         Replacing.remove(primary, overflowGroup);
         setOverflow([]);
       } else {
         setGroups$1(primary, overflows.within);
         setOverflow(overflows.extra);
+      }
-      remove$6(primary.element, 'visibility');
+      remove$7(primary.element, 'visibility');
       reflow(primary.element);
       focusedComp.each(Focusing.focus);
     };
           };
+        }
       })
     ]);
-    const shouldSkipFocus = value$2();
+    const shouldSkipFocus = value$4();
     const toggleWithoutFocusing = (button, externals) => {
       shouldSkipFocus.set(true);
       toggle(button, externals);
       shouldSkipFocus.clear();
                 shrinkingClass: detail.markers.shrinkingClass,
                 growingClass: detail.markers.growingClass,
                 onShrunk: comp => {
                   getPart(comp, detail, 'overflow-button').each(button => {
                     Toggling.off(button);
-                    Focusing.focus(button);
                   });
                   detail.onClosed(comp);
                 },
                 onGrown: comp => {
-                  Keying.focusIn(comp);
                   detail.onOpened(comp);
                 },
                 onStartGrow: comp => {
                   getPart(comp, detail, 'overflow-button').each(Toggling.on);
+                }
       external({
         name: 'overflow-button',
         overrides: detail => ({
           buttonBehaviours: derive$1([Toggling.config({
               toggleClass: detail.markers.overflowToggledClass,
-              aria: { mode: 'pressed' },
+              aria: { mode: 'expanded' },
               toggleOnExecute: false
             })])
         })
       }),
       external({ name: 'overflow-group' })
     ]);
     const isOpen = (toolbar, detail) => getPart(toolbar, detail, 'overflow').map(Sliding.hasGrown).getOr(false);
-    const toggleToolbar = (toolbar, detail) => {
+    const toggleToolbar = (toolbar, detail, skipFocus) => {
+      getPart(toolbar, detail, 'overflow-button').each(oveflowButton => {
-      getPart(toolbar, detail, 'overflow-button').bind(() => getPart(toolbar, detail, 'overflow')).each(overf => {
+        getPart(toolbar, detail, 'overflow').each(overf => {
+          refresh(toolbar, detail);
+          if (Sliding.hasShrunk(overf)) {
+            const fn = detail.onOpened;
+            detail.onOpened = comp => {
+              if (!skipFocus) {
+                Keying.focusIn(overf);
+              }
+              fn(comp);
+              detail.onOpened = fn;
+            };
+          } else {
+            const fn = detail.onClosed;
+            detail.onClosed = comp => {
+              if (!skipFocus) {
+                Focusing.focus(oveflowButton);
+              }
+              fn(comp);
+              detail.onClosed = fn;
+            };
-        refresh(toolbar, detail);
+          }
+          Sliding.toggleGrow(overf);
-        Sliding.toggleGrow(overf);
+        });
       });
     };
     const refresh = (toolbar, detail) => {
       getPart(toolbar, detail, 'overflow').each(overflow => {
                 });
+              }
+            }
           }),
           config('toolbar-toggle-events', [run$1(toolbarToggleEvent, toolbar => {
-              toggleToolbar(toolbar, detail);
+              toggleToolbar(toolbar, detail, false);
             })])
         ]),
         apis: {
           setGroups: (toolbar, groups) => {
             doSetGroups(toolbar, groups);
             refresh(toolbar, detail);
           },
           refresh: toolbar => refresh(toolbar, detail),
+          toggle: toolbar => {
+            toggleToolbar(toolbar, detail, false);
+          },
+          toggleWithoutFocusing: toolbar => {
-          toggle: toolbar => toggleToolbar(toolbar, detail),
+            toggleToolbar(toolbar, detail, true);
+          },
           isOpen: toolbar => isOpen(toolbar, detail)
         },
         domModification: { attributes: { role: 'group' } }
       };
     };
         isOpen: (apis, toolbar) => apis.isOpen(toolbar)
+      }
     });
     const renderToolbarGroupCommon = toolbarGroup => {
-      const attributes = toolbarGroup.title.fold(() => ({}), title => ({ attributes: { title } }));
+      const attributes = toolbarGroup.label.isNone() ? toolbarGroup.title.fold(() => ({}), title => ({ attributes: { 'aria-label': title } })) : toolbarGroup.label.fold(() => ({}), label => ({ attributes: { 'aria-label': label } }));
       return {
         dom: {
           tag: 'div',
-          classes: ['tox-toolbar__group'],
+          classes: ['tox-toolbar__group'].concat(toolbarGroup.label.isSome() ? ['tox-toolbar__group_with_label'] : []),
           ...attributes
+        },
+        components: [
+          ...toolbarGroup.label.map(label => {
+            return {
+              dom: {
+                tag: 'span',
+                classes: [
+                  'tox-label',
+                  'tox-label--context-toolbar'
+                ]
+              },
+              components: [text$2(label)]
+            };
-        },
+          }).toArray(),
+          ToolbarGroup.parts.items({})
-        components: [ToolbarGroup.parts.items({})],
+        ],
         items: toolbarGroup.items,
-        markers: { itemSelector: '*:not(.tox-split-button) > .tox-tbtn:not([disabled]), ' + '.tox-split-button:not([disabled]), ' + '.tox-toolbar-nav-js:not([disabled]), ' + '.tox-number-input:not([disabled])' },
+        markers: { itemSelector: '*:not(.tox-split-button) > .tox-tbtn:not([disabled]), ' + '.tox-split-button:not([disabled]), ' + '.tox-toolbar-nav-item:not([disabled]), ' + '.tox-number-input:not([disabled])' },
         tgroupBehaviours: derive$1([
           Tabstopping.config({}),
-          Focusing.config({})
+          Focusing.config({ ignore: true })
         ])
       };
     };
     const renderToolbarGroup = toolbarGroup => ToolbarGroup.sketch(renderToolbarGroupCommon(toolbarGroup));
     const getToolbarBehaviours = (toolbarSpec, modeName) => {
       const onAttached = runOnAttached(component => {
         const groups = map$2(toolbarSpec.initGroups, renderToolbarGroup);
         Toolbar.setGroups(component, groups);
       });
       return derive$1([
-        DisablingConfigs.toolbarButton(toolbarSpec.providers.isDisabled),
+        DisablingConfigs.toolbarButton(() => toolbarSpec.providers.checkUiComponentContext('any').shouldDisable),
-        receivingConfig(),
+        toggleOnReceive(() => toolbarSpec.providers.checkUiComponentContext('any')),
         Keying.config({
           mode: modeName,
+          onEscape: toolbarSpec.onEscape,
-          onEscape: toolbarSpec.onEscape,
+          visibilitySelector: '.tox-toolbar__overflow',
           selector: '.tox-toolbar__group'
         }),
         config('toolbar-events', [onAttached])
       ]);
           classes: ['tox-toolbar-overlord']
         },
         parts: {
           'overflow-group': renderToolbarGroupCommon({
             title: Optional.none(),
+            label: Optional.none(),
             items: []
           }),
           'overflow-button': renderIconButtonSpec({
+            context: 'any',
             name: 'more',
             icon: Optional.some('more-drawer'),
             enabled: true,
             tooltip: Optional.some('Reveal or hide additional toolbar items'),
             primary: false,
             buttonType: Optional.none(),
             borderless: false
-          }, Optional.none(), toolbarSpec.providers)
+          }, Optional.none(), toolbarSpec.providers, [], 'overflow-button')
         },
         splitToolbarBehaviours: getToolbarBehaviours(toolbarSpec, modeName)
       };
     };
     const renderFloatingMoreToolbar = toolbarSpec => {
       defaultedStringEnum('buttonType', 'secondary', [
         'primary',
         'secondary'
       ]),
       defaultedBoolean('borderless', false),
-      requiredFunction('onAction')
+      requiredFunction('onAction'),
+      defaultedString('context', 'mode:design')
     ];
     const normalButtonFields = [
       ...baseButtonFields,
       text,
       requiredStringEnum('type', ['button'])
           const elm = comp.element;
           if (state) {
             add$2(elm, 'tox-button--enabled');
             set$9(elm, 'aria-pressed', true);
           } else {
-            remove$2(elm, 'tox-button--enabled');
+            remove$3(elm, 'tox-button--enabled');
-            remove$7(elm, 'aria-pressed');
+            remove$8(elm, 'aria-pressed');
+          }
         };
         const isActive = () => has(comp.element, 'tox-button--enabled');
+        const focus = () => focus$3(comp.element);
         if (isToggleButton) {
           return spec.onAction({
             setIcon,
             setActive,
-            isActive
+            isActive,
+            focus
           });
+        }
         if (spec.type === 'button') {
           return spec.onAction({ setIcon });
+        }
         borderless: spec.borderless
       };
       const buttonTypeClasses = calculateClassesFromButtonType((_b = spec.buttonType) !== null && _b !== void 0 ? _b : 'secondary');
       const optTranslatedText = isToggleButton ? spec.text.map(providers.translate) : Optional.some(providers.translate(spec.text));
       const optTranslatedTextComponed = optTranslatedText.map(text$2);
-      const tooltipAttributes = buttonSpec.tooltip.or(optTranslatedText).map(tooltip => ({
+      const ariaLabelAttributes = buttonSpec.tooltip.or(optTranslatedText).map(al => ({ 'aria-label': providers.translate(al) })).getOr({});
-        'aria-label': providers.translate(tooltip),
-        'title': providers.translate(tooltip)
-      })).getOr({});
       const optIconSpec = optMemIcon.map(memIcon => memIcon.asSpec());
       const components = componentRenderPipeline([
         optIconSpec,
         optTranslatedTextComponed
       ]);
       const hasIconAndText = spec.icon.isSome() && optTranslatedTextComponed.isSome();
       const dom = {
         tag: 'button',
         classes: buttonTypeClasses.concat(...spec.icon.isSome() && !hasIconAndText ? ['tox-button--icon'] : []).concat(...hasIconAndText ? ['tox-button--icon-and-text'] : []).concat(...spec.borderless ? ['tox-button--naked'] : []).concat(...spec.type === 'togglebutton' && spec.active ? ['tox-button--enabled'] : []),
-        attributes: tooltipAttributes
+        attributes: ariaLabelAttributes
       };
       const extraBehaviours = [];
-      const iconButtonSpec = renderCommonSpec(buttonSpec, Optional.some(action), extraBehaviours, dom, components, providers);
+      const iconButtonSpec = renderCommonSpec(buttonSpec, Optional.some(action), extraBehaviours, dom, components, spec.tooltip, providers);
       return Button.sketch(iconButtonSpec);
     };
     const renderViewButton = (spec, providers) => renderButton(spec, providers);
           classes: ['tox-view__toolbar__group']
         },
         components: map$2(spec.buttons, button => renderViewButton(button, providers))
       };
     };
-    const deviceDetection = detect$2().deviceType;
+    const deviceDetection = detect$1().deviceType;
     const isPhone = deviceDetection.isPhone();
     const isTablet = deviceDetection.isTablet();
     const renderViewHeader = spec => {
       let hasGroups = false;
       const endButtons = map$2(spec.buttons, btnspec => {
       };
     };
     const renderViewPane = spec => {
       return {
         uid: spec.uid,
+        behaviours: derive$1([
+          Focusing.config({}),
+          Tabstopping.config({})
+        ]),
         dom: {
           tag: 'div',
           classes: ['tox-view__pane']
+        }
       };
       };
       return {
         uid: detail.uid,
         dom: detail.dom,
         components,
+        behaviours: derive$1([
+          Focusing.config({}),
+          Keying.config({
+            mode: 'cyclic',
+            focusInside: FocusInsideModes.OnEnterOrSpaceMode
+          })
+        ]),
         apis
       };
     };
     var View = composite({
       name: 'silver.View',
       set$8(element, 'display', 'none');
       set$9(element, 'aria-hidden', 'true');
     };
     const showContainer = comp => {
       const element = comp.element;
-      remove$6(element, 'display');
+      remove$7(element, 'display');
-      remove$7(element, 'aria-hidden');
+      remove$8(element, 'aria-hidden');
     };
     const makeViewInstanceApi = slot => ({ getContainer: constant$1(slot) });
     const runOnPaneWithInstanceApi = (slotContainer, name, get) => {
       SlotContainer.getSlot(slotContainer, name).each(view => {
         View.getPane(view).each(pane => {
+      }
     });
     const factory$6 = (detail, components, _spec) => {
+      let toolbarDrawerOpenState = false;
+      const toggleStatusbar = editorContainer => {
+        sibling(editorContainer, '.tox-statusbar').each(statusBar => {
+          if (get$f(statusBar, 'display') === 'none' && get$g(statusBar, 'aria-hidden') === 'true') {
+            remove$7(statusBar, 'display');
+            remove$8(statusBar, 'aria-hidden');
+          } else {
+            set$8(statusBar, 'display', 'none');
+            set$9(statusBar, 'aria-hidden', 'true');
+          }
+        });
-      let toolbarDrawerOpenState = false;
+      };
       const apis = {
         getSocket: comp => {
           return parts$a.getPart(comp, detail, 'socket');
         },
           if (toolbarDrawerOpenState) {
             apis.toggleToolbarDrawer(comp);
+          }
           parts$a.getPart(comp, detail, 'editorContainer').each(editorContainer => {
             const element = editorContainer.element;
+            toggleStatusbar(element);
             set$8(element, 'display', 'none');
             set$9(element, 'aria-hidden', 'true');
           });
         },
         showMainView: comp => {
           if (toolbarDrawerOpenState) {
             apis.toggleToolbarDrawer(comp);
+          }
           parts$a.getPart(comp, detail, 'editorContainer').each(editorContainer => {
             const element = editorContainer.element;
+            toggleStatusbar(element);
-            remove$6(element, 'display');
+            remove$7(element, 'display');
-            remove$7(element, 'aria-hidden');
+            remove$8(element, 'aria-hidden');
           });
+        }
       };
       return {
         uid: detail.uid,
     const defaultMenubar = 'file edit view insert format tools table help';
     const defaultMenus = {
       file: {
         title: 'File',
-        items: 'newdocument restoredraft | preview | export print | deleteallconversations'
+        items: 'newdocument restoredraft | preview | importword exportpdf exportword | export print | deleteallconversations'
       },
       edit: {
         title: 'Edit',
         items: 'undo redo | cut copy paste pastetext | selectall | searchreplace'
       },
       view: {
         title: 'View',
-        items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments'
+        items: 'code revisionhistory | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments'
       },
       insert: {
         title: 'Insert',
-        items: 'image link media addcomment pageembed template inserttemplate codesample inserttable accordion | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents footnotes | mergetags | insertdatetime'
+        items: 'image link media addcomment pageembed inserttemplate codesample inserttable accordion math | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents footnotes | mergetags | insertdatetime'
       },
       format: {
         title: 'Format',
         items: 'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat'
       const userDefinedMenus = keys(registry.menus).length > 0;
       const menubar = registry.menubar === undefined || registry.menubar === true ? parseItemsString(defaultMenubar) : parseItemsString(registry.menubar === false ? '' : registry.menubar);
       const validMenus = filter$2(menubar, menuName => {
         const isDefaultMenu = has$2(defaultMenus, menuName);
         if (userDefinedMenus) {
-          return isDefaultMenu || get$g(registry.menus, menuName).exists(menu => has$2(menu, 'items'));
+          return isDefaultMenu || get$h(registry.menus, menuName).exists(menu => has$2(menu, 'items'));
         } else {
           return isDefaultMenu;
+        }
       });
       const menus = map$2(validMenus, menuName => {
+        }
       };
     };
     const fireSkinLoadError = (editor, err) => () => fireSkinLoadError$1(editor, { message: err });
+    const getSkinResourceIdentifier = editor => {
+      const skin = getSkin(editor);
+      if (!skin) {
+        return Optional.none();
+      } else {
+        return Optional.from(skin);
+      }
     };
     const loadStylesheet = (editor, stylesheetUrl, styleSheetLoader) => {
       editor.on('remove', () => styleSheetLoader.unload(stylesheetUrl));
       return styleSheetLoader.load(stylesheetUrl);
     };
     const loadRawCss = (editor, key, css, styleSheetLoader) => {
       editor.on('remove', () => styleSheetLoader.unloadRawCss(key));
       return styleSheetLoader.loadRawCss(key, css);
+    };
+    const skinIdentifierToResourceKey = (identifier, filename) => 'ui/' + identifier + '/' + filename;
-    };
+    const getResourceValue = resourceKey => Optional.from(tinymce.Resource.get(resourceKey)).filter(isString);
-    const loadUiSkins = async (editor, skinUrl) => {
+    const determineCSSDecision = (editor, filenameBase, skinUrl = '') => {
-      const skinResourceIdentifier = getSkinUrlOption(editor).getOr('default');
+      const resourceKey = getSkinResourceIdentifier(editor).map(identifier => skinIdentifierToResourceKey(identifier, `${ filenameBase }.css`));
-      const skinUiCss = 'ui/' + skinResourceIdentifier + '/skin.css';
+      const resourceValue = resourceKey.bind(getResourceValue);
+      return lift2(resourceKey, resourceValue, (key, css) => {
+        return {
+          _kind: 'load-raw',
+          key,
+          css
-      const css = tinymce.Resource.get(skinUiCss);
+        };
+      }).getOrThunk(() => {
-      if (isString(css)) {
+        const suffix = editor.editorManager.suffix;
-        return Promise.resolve(loadRawCss(editor, skinUiCss, css, editor.ui.styleSheetLoader));
+        const skinUiCssUrl = skinUrl + `/${ filenameBase }${ suffix }.css`;
+        return {
+          _kind: 'load-stylesheet',
+          url: skinUiCssUrl
+        };
+      });
-      } else {
+    };
+    const loadUiSkins = (editor, skinUrl) => {
+      const loader = editor.ui.styleSheetLoader;
+      const decision = determineCSSDecision(editor, 'skin', skinUrl);
+      switch (decision._kind) {
+      case 'load-raw':
+        const {key, css} = decision;
+        loadRawCss(editor, key, css, loader);
+        return Promise.resolve();
+      case 'load-stylesheet':
-        const skinUiCss = skinUrl + '/skin.min.css';
+        const {url} = decision;
+        return loadStylesheet(editor, url, loader);
+      default:
-        return loadStylesheet(editor, skinUiCss, editor.ui.styleSheetLoader);
+        return Promise.resolve();
+      }
     };
-    const loadShadowDomUiSkins = async (editor, skinUrl) => {
+    const loadShadowDomUiSkins = (editor, skinUrl) => {
       const isInShadowRoot$1 = isInShadowRoot(SugarElement.fromDom(editor.getElement()));
+      if (!isInShadowRoot$1) {
+        return Promise.resolve();
-      if (isInShadowRoot$1) {
+      } else {
-        const skinResourceIdentifier = getSkinUrlOption(editor).getOr('default');
+        const loader = global$8.DOM.styleSheetLoader;
-        const shadowDomSkinCss = 'ui/' + skinResourceIdentifier + '/skin.shadowdom.css';
+        const decision = determineCSSDecision(editor, 'skin.shadowdom', skinUrl);
-        const css = tinymce.Resource.get(shadowDomSkinCss);
+        switch (decision._kind) {
+        case 'load-raw':
-        if (isString(css)) {
+          const {key, css} = decision;
-          loadRawCss(editor, shadowDomSkinCss, css, global$7.DOM.styleSheetLoader);
+          loadRawCss(editor, key, css, loader);
+          return Promise.resolve();
+        case 'load-stylesheet':
+          const {url} = decision;
+          return loadStylesheet(editor, url, loader);
+        default:
+          return Promise.resolve();
+        }
+      }
+    };
+    const loadUiContentCSS = (editor, isInline, skinUrl) => {
+      const filenameBase = isInline ? 'content.inline' : 'content';
+      const decision = determineCSSDecision(editor, filenameBase, skinUrl);
+      switch (decision._kind) {
+      case 'load-raw':
+        const {key, css} = decision;
+        if (isInline) {
-          return Promise.resolve();
+          loadRawCss(editor, key, css, editor.ui.styleSheetLoader);
         } else {
-          const shadowDomSkinCss = skinUrl + '/skin.shadowdom.min.css';
+          editor.on('PostRender', () => {
+            loadRawCss(editor, key, css, editor.dom.styleSheetLoader);
-          return loadStylesheet(editor, shadowDomSkinCss, global$7.DOM.styleSheetLoader);
+          });
+        }
+        return Promise.resolve();
+      case 'load-stylesheet':
+        const {url} = decision;
+        if (skinUrl) {
+          editor.contentCSS.push(url);
+        }
+        return Promise.resolve();
+      default:
         return Promise.resolve();
+      }
     };
-    const loadUrlSkin = async (isInline, editor) => {
-      getSkinUrlOption(editor).fold(() => {
-        const skinResourceIdentifier = getSkinUrl(editor);
-        if (skinResourceIdentifier) {
-          editor.contentCSS.push(skinResourceIdentifier + (isInline ? '/content.inline' : '/content') + '.min.css');
-        }
-      }, skinUrl => {
-        const skinContentCss = 'ui/' + skinUrl + (isInline ? '/content.inline' : '/content') + '.css';
-        const css = tinymce.Resource.get(skinContentCss);
-        if (isString(css)) {
-          loadRawCss(editor, skinContentCss, css, editor.ui.styleSheetLoader);
-        } else {
-          const skinResourceIdentifier = getSkinUrl(editor);
-          if (skinResourceIdentifier) {
-            editor.contentCSS.push(skinResourceIdentifier + (isInline ? '/content.inline' : '/content') + '.min.css');
-          }
-        }
-      });
+    const loadUrlSkin = async (isInline, editor) => {
+      const skinUrl = getSkinUrl(editor);
-      const skinUrl = getSkinUrl(editor);
+      await loadUiContentCSS(editor, isInline, skinUrl);
       if (!isSkinDisabled(editor) && isString(skinUrl)) {
         return Promise.all([
           loadUiSkins(editor, skinUrl),
           loadShadowDomUiSkins(editor, skinUrl)
       return loadUrlSkin(isInline, editor).then(fireSkinLoaded(editor), fireSkinLoadError(editor, 'Skin could not be loaded'));
     };
     const iframe = curry(loadSkin, false);
     const inline = curry(loadSkin, true);
-    const makeTooltipText = (editor, labelWithPlaceholder, value) => editor.translate([
+    const makeTooltipText = (editor, labelWithPlaceholder, value) => isEmpty(value) ? editor.translate(labelWithPlaceholder) : editor.translate([
       labelWithPlaceholder,
       editor.translate(value)
     ]);
       return {
         validateItems,
         getFetch
       };
     };
-    const createMenuItems = (editor, backstage, spec) => {
+    const createMenuItems = (backstage, spec) => {
       const dataset = spec.dataset;
       const getStyleItems = dataset.type === 'basic' ? () => map$2(dataset.data, d => processBasic(d, spec.isSelectedFor, spec.getPreviewFor)) : dataset.getData;
       return {
         items: generateSelectItems(backstage, spec),
         getStyleItems
       };
     };
-    const createSelectButton = (editor, backstage, spec, tooltipWithPlaceholder, textUpdateEventName) => {
+    const createSelectButton = (editor, backstage, spec, getTooltip, textUpdateEventName, btnName) => {
-      const {items, getStyleItems} = createMenuItems(editor, backstage, spec);
+      const {items, getStyleItems} = createMenuItems(backstage, spec);
+      const tooltipString = Cell(spec.tooltip);
       const getApi = comp => ({
         getComponent: constant$1(comp),
         setTooltip: tooltip => {
           const translatedTooltip = backstage.shared.providers.translate(tooltip);
-          setAll$1(comp.element, {
-            'aria-label': translatedTooltip,
+          set$9(comp.element, 'aria-label', translatedTooltip);
-            'title': translatedTooltip
+          tooltipString.set(tooltip);
-          });
+        }
       });
       const onSetup = api => {
-        const handler = e => api.setTooltip(makeTooltipText(editor, tooltipWithPlaceholder, e.value));
+        const handler = e => api.setTooltip(makeTooltipText(editor, getTooltip(e.value), e.value));
         editor.on(textUpdateEventName, handler);
         return composeUnbinders(onSetupEvent(editor, 'NodeChange', api => {
           const comp = api.getComponent();
           spec.updateText(comp);
           Disabling.set(api.getComponent(), !editor.selection.isEditable());
         })(api), () => editor.off(textUpdateEventName, handler));
       };
       return renderCommonDropdown({
+        context: 'mode:design',
         text: spec.icon.isSome() ? Optional.none() : spec.text,
         icon: spec.icon,
-        tooltip: Optional.from(spec.tooltip),
+        ariaLabel: Optional.some(spec.tooltip),
+        tooltip: Optional.none(),
         role: Optional.none(),
         fetch: items.getFetch(backstage, getStyleItems),
         onSetup,
         getApi,
         columns: 1,
         presets: 'normal',
         classes: spec.icon.isSome() ? [] : ['bespoke'],
-        dropdownBehaviours: []
+        dropdownBehaviours: [Tooltipping.config({
+            ...backstage.shared.providers.tooltips.getConfig({
+              tooltipText: backstage.shared.providers.translate(spec.tooltip),
+              onShow: comp => {
+                if (spec.tooltip !== tooltipString.get()) {
+                  const translatedTooltip = backstage.shared.providers.translate(tooltipString.get());
+                  Tooltipping.setComponents(comp, backstage.shared.providers.tooltips.getComponents({ tooltipText: translatedTooltip }));
+                }
+              }
+            })
+          })]
-      }, 'tox-tbtn', backstage.shared);
+      }, 'tox-tbtn', backstage.shared, btnName);
     };
     const process = rawFormats => map$2(rawFormats, item => {
       let title = item, format = item;
         data
       };
     };
     const menuTitle$4 = 'Align';
-    const btnTooltip$4 = 'Alignment {0}';
+    const getTooltipPlaceholder$4 = constant$1('Alignment {0}');
     const fallbackAlignment = 'left';
     const alignMenuItems = [
+      {
         title: 'Left',
         fireAlignTextUpdate(editor, { value: alignment });
       };
       const dataset = buildBasicStaticDataset(alignMenuItems);
       const onAction = rawItem => () => find$5(alignMenuItems, item => item.format === rawItem.format).each(item => editor.execCommand(item.command));
       return {
-        tooltip: makeTooltipText(editor, btnTooltip$4, fallbackAlignment),
+        tooltip: makeTooltipText(editor, getTooltipPlaceholder$4(), fallbackAlignment),
         text: Optional.none(),
         icon: Optional.some('align-left'),
         isSelectedFor,
         getCurrentValue: Optional.none,
         getPreviewFor,
         dataset,
         shouldHide: false,
         isInvalid: item => !editor.formatter.canApply(item.format)
       };
     };
-    const createAlignButton = (editor, backstage) => createSelectButton(editor, backstage, getSpec$4(editor), btnTooltip$4, 'AlignTextUpdate');
+    const createAlignButton = (editor, backstage) => createSelectButton(editor, backstage, getSpec$4(editor), getTooltipPlaceholder$4, 'AlignTextUpdate', 'align');
     const createAlignMenu = (editor, backstage) => {
-      const menuItems = createMenuItems(editor, backstage, getSpec$4(editor));
+      const menuItems = createMenuItems(backstage, getSpec$4(editor));
       editor.ui.registry.addNestedMenuItem('align', {
         text: backstage.shared.providers.translate(menuTitle$4),
         onSetup: onSetupEditableToggle(editor),
         getSubmenuItems: () => menuItems.items.validateItems(menuItems.getStyleItems())
       });
     };
     const findNearest = (editor, getStyles) => {
       const styles = getStyles();
       const formats = map$2(styles, style => style.format);
-      return Optional.from(editor.formatter.closest(formats)).bind(fmt => find$5(styles, data => data.format === fmt)).orThunk(() => someIf(editor.formatter.match('p'), {
-        title: 'Paragraph',
-        format: 'p'
-      }));
+      return Optional.from(editor.formatter.closest(formats)).bind(fmt => find$5(styles, data => data.format === fmt));
     };
     const menuTitle$3 = 'Blocks';
-    const btnTooltip$3 = 'Block {0}';
+    const getTooltipPlaceholder$3 = constant$1('Block {0}');
     const fallbackFormat = 'Paragraph';
     const getSpec$3 = editor => {
       const isSelectedFor = format => () => editor.formatter.match(format);
         emitWith(comp, updateMenuText, { text });
         fireBlocksTextUpdate(editor, { value: text });
       };
       const dataset = buildBasicSettingsDataset(editor, 'block_formats', Delimiter.SemiColon);
       return {
-        tooltip: makeTooltipText(editor, btnTooltip$3, fallbackFormat),
+        tooltip: makeTooltipText(editor, getTooltipPlaceholder$3(), fallbackFormat),
         text: Optional.some(fallbackFormat),
         icon: Optional.none(),
         isSelectedFor,
         getCurrentValue: Optional.none,
         getPreviewFor,
         dataset,
         shouldHide: false,
         isInvalid: item => !editor.formatter.canApply(item.format)
       };
     };
-    const createBlocksButton = (editor, backstage) => createSelectButton(editor, backstage, getSpec$3(editor), btnTooltip$3, 'BlocksTextUpdate');
+    const createBlocksButton = (editor, backstage) => createSelectButton(editor, backstage, getSpec$3(editor), getTooltipPlaceholder$3, 'BlocksTextUpdate', 'blocks');
     const createBlocksMenu = (editor, backstage) => {
-      const menuItems = createMenuItems(editor, backstage, getSpec$3(editor));
+      const menuItems = createMenuItems(backstage, getSpec$3(editor));
       editor.ui.registry.addNestedMenuItem('blocks', {
         text: menuTitle$3,
         onSetup: onSetupEditableToggle(editor),
         getSubmenuItems: () => menuItems.items.validateItems(menuItems.getStyleItems())
       });
     };
     const menuTitle$2 = 'Fonts';
-    const btnTooltip$2 = 'Font {0}';
+    const getTooltipPlaceholder$2 = constant$1('Font {0}');
     const systemFont = 'System Font';
     const systemStackFonts = [
       '-apple-system',
       'Segoe UI',
         emitWith(comp, updateMenuText, { text });
         fireFontFamilyTextUpdate(editor, { value: text });
       };
       const dataset = buildBasicSettingsDataset(editor, 'font_family_formats', Delimiter.SemiColon);
       return {
-        tooltip: makeTooltipText(editor, btnTooltip$2, systemFont),
+        tooltip: makeTooltipText(editor, getTooltipPlaceholder$2(), systemFont),
         text: Optional.some(systemFont),
         icon: Optional.none(),
         isSelectedFor,
         getCurrentValue,
         getPreviewFor,
         dataset,
         shouldHide: false,
         isInvalid: never
       };
     };
-    const createFontFamilyButton = (editor, backstage) => createSelectButton(editor, backstage, getSpec$2(editor), btnTooltip$2, 'FontFamilyTextUpdate');
+    const createFontFamilyButton = (editor, backstage) => createSelectButton(editor, backstage, getSpec$2(editor), getTooltipPlaceholder$2, 'FontFamilyTextUpdate', 'fontfamily');
     const createFontFamilyMenu = (editor, backstage) => {
-      const menuItems = createMenuItems(editor, backstage, getSpec$2(editor));
+      const menuItems = createMenuItems(backstage, getSpec$2(editor));
       editor.ui.registry.addNestedMenuItem('fontfamily', {
         text: backstage.shared.providers.translate(menuTitle$2),
         onSetup: onSetupEditableToggle(editor),
         getSubmenuItems: () => menuItems.items.validateItems(menuItems.getStyleItems())
       });
       end: constant$1(35),
       pageUp: constant$1(33),
       pageDown: constant$1(34)
     };
-    const createBespokeNumberInput = (editor, backstage, spec) => {
+    const createBespokeNumberInput = (editor, backstage, spec, btnName) => {
       let currentComp = Optional.none();
       const getValueFromCurrentComp = comp => comp.map(alloyComp => Representing.getValue(alloyComp)).getOr('');
-      const onSetup = onSetupEvent(editor, 'NodeChange SwitchMode', api => {
+      const onSetup = onSetupEvent(editor, 'NodeChange SwitchMode DisabledStateChange', api => {
         const comp = api.getComponent();
         currentComp = Optional.some(comp);
         spec.updateInputValue(comp);
-        Disabling.set(comp, !editor.selection.isEditable());
+        Disabling.set(comp, !editor.selection.isEditable() || isDisabled(editor));
       });
       const getApi = comp => ({ getComponent: constant$1(comp) });
       const editorOffCell = Cell(noop);
       const customEvents = generate$6('custom-number-input-events');
       };
       const makeStepperButton = (action, title, tooltip, classes) => {
         const editorOffCellStepButton = Cell(noop);
         const translatedTooltip = backstage.shared.providers.translate(tooltip);
         const altExecuting = generate$6('altExecuting');
-        const onSetup = onSetupEvent(editor, 'NodeChange SwitchMode', api => {
+        const onSetup = onSetupEvent(editor, 'NodeChange SwitchMode DisabledStateChange', api => {
-          Disabling.set(api.getComponent(), !editor.selection.isEditable());
+          Disabling.set(api.getComponent(), !editor.selection.isEditable() || isDisabled(editor));
         });
         const onClick = comp => {
           if (!Disabling.isDisabled(comp)) {
             action(true);
+          }
         };
         return Button.sketch({
           dom: {
             tag: 'button',
             attributes: {
-              'title': translatedTooltip,
+              'aria-label': translatedTooltip,
-              'aria-label': translatedTooltip
+              'data-mce-name': title
             },
             classes: classes.concat(title)
           },
           components: [renderIconFromPack$1(title, backstage.shared.providers.icons)],
           buttonBehaviours: derive$1([
             Disabling.config({}),
+            Tooltipping.config(backstage.shared.providers.tooltips.getConfig({ tooltipText: translatedTooltip })),
             config(altExecuting, [
               onControlAttached({
                 onSetup,
                 getApi
               }, editorOffCellStepButton),
               'alloy.base.behaviour'
             ],
             [touchend()]: [
               altExecuting,
               'alloy.base.behaviour'
+            ],
+            [attachedToDom()]: [
+              'alloy.base.behaviour',
+              altExecuting,
+              'tooltipping'
+            ],
+            [detachedFromDom()]: [
+              altExecuting,
+              'tooltipping'
+            ]
+          }
         });
       };
       const memMinus = record(makeStepperButton(focusBack => decrease(false, focusBack), 'minus', 'Decrease font size', []));
         ])
       });
       return {
         dom: {
           tag: 'div',
-          classes: ['tox-number-input']
+          classes: ['tox-number-input'],
+          attributes: { ...isNonNullable(btnName) ? { 'data-mce-name': btnName } : {} }
         },
         components: [
           memMinus.asSpec(),
           memInput.asSpec(),
           memPlus.asSpec()
         ])
       };
     };
     const menuTitle$1 = 'Font sizes';
-    const btnTooltip$1 = 'Font size {0}';
+    const getTooltipPlaceholder$1 = constant$1('Font size {0}');
     const fallbackFontSize = '12pt';
     const legacyFontSizes = {
       '8pt': '1',
       '10pt': '2',
     };
     const toPt = (fontSize, precision) => {
       if (/[0-9.]+px$/.test(fontSize)) {
         return round(parseInt(fontSize, 10) * 72 / 96, precision || 0) + 'pt';
       } else {
-        return get$g(keywordFontSizes, fontSize).getOr(fontSize);
+        return get$h(keywordFontSizes, fontSize).getOr(fontSize);
+      }
     };
-    const toLegacy = fontSize => get$g(legacyFontSizes, fontSize).getOr('');
+    const toLegacy = fontSize => get$h(legacyFontSizes, fontSize).getOr('');
     const getSpec$1 = editor => {
       const getMatchingValue = () => {
         let matchOpt = Optional.none();
         const items = dataset.data;
         const fontSize = editor.queryCommandValue('FontSize');
         emitWith(comp, updateMenuText, { text });
         fireFontSizeTextUpdate(editor, { value: text });
       };
       const dataset = buildBasicSettingsDataset(editor, 'font_size_formats', Delimiter.Space);
       return {
-        tooltip: makeTooltipText(editor, btnTooltip$1, fallbackFontSize),
+        tooltip: makeTooltipText(editor, getTooltipPlaceholder$1(), fallbackFontSize),
         text: Optional.some(fallbackFontSize),
         icon: Optional.none(),
         isSelectedFor,
         getPreviewFor,
         getCurrentValue,
         dataset,
         shouldHide: false,
         isInvalid: never
       };
     };
-    const createFontSizeButton = (editor, backstage) => createSelectButton(editor, backstage, getSpec$1(editor), btnTooltip$1, 'FontSizeTextUpdate');
+    const createFontSizeButton = (editor, backstage) => createSelectButton(editor, backstage, getSpec$1(editor), getTooltipPlaceholder$1, 'FontSizeTextUpdate', 'fontsize');
     const getConfigFromUnit = unit => {
       var _a;
       const baseConfig = { step: 1 };
       const configs = {
         em: { step: 0.1 },
+          }
           return res;
+        }
       };
     };
-    const createFontSizeInputButton = (editor, backstage) => createBespokeNumberInput(editor, backstage, getNumberInputSpec(editor));
+    const createFontSizeInputButton = (editor, backstage) => createBespokeNumberInput(editor, backstage, getNumberInputSpec(editor), 'fontsizeinput');
     const createFontSizeMenu = (editor, backstage) => {
-      const menuItems = createMenuItems(editor, backstage, getSpec$1(editor));
+      const menuItems = createMenuItems(backstage, getSpec$1(editor));
       editor.ui.registry.addNestedMenuItem('fontsize', {
         text: menuTitle$1,
         onSetup: onSetupEditableToggle(editor),
         getSubmenuItems: () => menuItems.items.validateItems(menuItems.getStyleItems())
       });
     };
     const menuTitle = 'Formats';
-    const btnTooltip = 'Format {0}';
+    const getTooltipPlaceholder = value => isEmpty(value) ? 'Formats' : 'Format {0}';
     const getSpec = (editor, dataset) => {
-      const fallbackFormat = 'Paragraph';
+      const fallbackFormat = 'Formats';
       const isSelectedFor = format => () => editor.formatter.match(format);
       const getPreviewFor = format => () => {
         const fmt = editor.formatter.get(format);
         return fmt !== undefined ? Optional.some({
             return [];
+          }
         };
         const flattenedItems = bind$3(getStyleFormats(editor), getFormatItems);
         const detectedFormat = findNearest(editor, constant$1(flattenedItems));
-        const text = detectedFormat.fold(constant$1(fallbackFormat), fmt => fmt.title);
+        const text = detectedFormat.fold(constant$1({
+          title: fallbackFormat,
+          tooltipLabel: ''
+        }), fmt => ({
+          title: fmt.title,
+          tooltipLabel: fmt.title
+        }));
-        emitWith(comp, updateMenuText, { text });
+        emitWith(comp, updateMenuText, { text: text.title });
-        fireStylesTextUpdate(editor, { value: text });
+        fireStylesTextUpdate(editor, { value: text.tooltipLabel });
       };
       return {
-        tooltip: makeTooltipText(editor, btnTooltip, fallbackFormat),
+        tooltip: makeTooltipText(editor, getTooltipPlaceholder(''), ''),
         text: Optional.some(fallbackFormat),
         icon: Optional.none(),
         isSelectedFor,
         getCurrentValue: Optional.none,
         getPreviewFor,
     const createStylesButton = (editor, backstage) => {
       const dataset = {
         type: 'advanced',
         ...backstage.styles
       };
-      return createSelectButton(editor, backstage, getSpec(editor, dataset), btnTooltip, 'StylesTextUpdate');
+      return createSelectButton(editor, backstage, getSpec(editor, dataset), getTooltipPlaceholder, 'StylesTextUpdate', 'styles');
     };
     const createStylesMenu = (editor, backstage) => {
       const dataset = {
         type: 'advanced',
         ...backstage.styles
       };
-      const menuItems = createMenuItems(editor, backstage, getSpec(editor, dataset));
+      const menuItems = createMenuItems(backstage, getSpec(editor, dataset));
       editor.ui.registry.addNestedMenuItem('styles', {
         text: menuTitle,
         onSetup: onSetupEditableToggle(editor),
         getSubmenuItems: () => menuItems.items.validateItems(menuItems.getStyleItems())
       });
         Focusing
       ]),
       defaulted('matchWidth', false),
       defaulted('useMinWidth', false),
       defaulted('eventOrder', {}),
-      option$3('role')
+      option$3('role'),
+      option$3('listRole')
     ].concat(sandboxFields()));
     const arrowPart = required({
       factory: Button,
       schema: [required$1('dom')],
       name: 'arrow',
               const descriptorId = generate$6('aria');
               set$9(descriptor.element, 'id', descriptorId);
               set$9(component.element, 'aria-describedby', descriptorId);
             });
           })]),
-        ...events$a(Optional.some(action))
+        ...events$9(Optional.some(action))
       };
       const apis = {
         repositionMenus: comp => {
           if (Toggling.isOn(comp)) {
             repositionMenus(comp);
       isEnabled: () => !Disabling.isDisabled(component),
       setEnabled: state => Disabling.set(component, !state),
       setText: text => emitWith(component, updateMenuText, { text }),
       setIcon: icon => emitWith(component, updateMenuIcon, { icon })
     });
-    const getTooltipAttributes = (tooltip, providersBackstage) => tooltip.map(tooltip => ({
+    const getTooltipAttributes = (tooltip, providersBackstage) => tooltip.map(tooltip => ({ 'aria-label': providersBackstage.translate(tooltip) })).getOr({});
-      'aria-label': providersBackstage.translate(tooltip),
-      'title': providersBackstage.translate(tooltip)
-    })).getOr({});
     const focusButtonEvent = generate$6('focus-button');
-    const renderCommonStructure = (optIcon, optText, tooltip, behaviours, providersBackstage) => {
+    const renderCommonStructure = (optIcon, optText, tooltip, behaviours, providersBackstage, context, btnName) => {
       const optMemDisplayText = optText.map(text => record(renderLabel$1(text, 'tox-tbtn', providersBackstage)));
       const optMemDisplayIcon = optIcon.map(icon => record(renderReplaceableIconFromPack(icon, providersBackstage.icons)));
       return {
         dom: {
           tag: 'button',
           classes: ['tox-tbtn'].concat(optText.isSome() ? ['tox-tbtn--select'] : []),
+          attributes: {
-          attributes: getTooltipAttributes(tooltip, providersBackstage)
+            ...getTooltipAttributes(tooltip, providersBackstage),
+            ...isNonNullable(btnName) ? { 'data-mce-name': btnName } : {}
+          }
         },
         components: componentRenderPipeline([
           optMemDisplayIcon.map(mem => mem.asSpec()),
           optMemDisplayText.map(mem => mem.asSpec())
         ]),
             commonButtonDisplayEvent
           ],
           [attachedToDom()]: [
             commonButtonDisplayEvent,
             'toolbar-group-button-events'
+          ],
+          [detachedFromDom()]: [
+            commonButtonDisplayEvent,
+            'toolbar-group-button-events',
+            'tooltipping'
+          ]
         },
         buttonBehaviours: derive$1([
-          DisablingConfigs.toolbarButton(providersBackstage.isDisabled),
+          DisablingConfigs.toolbarButton(() => providersBackstage.checkUiComponentContext(context).shouldDisable),
-          receivingConfig(),
+          toggleOnReceive(() => providersBackstage.checkUiComponentContext(context)),
           config(commonButtonDisplayEvent, [
             runOnAttached((comp, _se) => forceInitialSize(comp)),
             run$1(updateMenuText, (comp, se) => {
               optMemDisplayText.bind(mem => mem.getOpt(comp)).each(displayText => {
                 Replacing.set(displayText, [text$2(providersBackstage.translate(se.event.text))]);
             })
           ])
         ].concat(behaviours.getOr([])))
       };
     };
-    const renderFloatingToolbarButton = (spec, backstage, identifyButtons, attributes) => {
+    const renderFloatingToolbarButton = (spec, backstage, identifyButtons, attributes, btnName) => {
       const sharedBackstage = backstage.shared;
       const editorOffCell = Cell(noop);
       const specialisation = {
         toolbarButtonBehaviours: [],
         getApi: getButtonApi,
         onSetup: spec.onSetup
       };
+      const behaviours = [
-      const behaviours = [config('toolbar-group-button-events', [
+        config('toolbar-group-button-events', [
           onControlAttached(specialisation, editorOffCell),
           onControlDetached(specialisation, editorOffCell)
-        ])];
+        ]),
+        ...spec.tooltip.map(t => Tooltipping.config(backstage.shared.providers.tooltips.getConfig({ tooltipText: backstage.shared.providers.translate(t) }))).toArray()
+      ];
       return FloatingToolbarButton.sketch({
         lazySink: sharedBackstage.getSink,
         fetch: () => Future.nu(resolve => {
           resolve(map$2(identifyButtons(spec.items), renderToolbarGroup));
         }),
         markers: { toggledClass: 'tox-tbtn--enabled' },
         parts: {
-          button: renderCommonStructure(spec.icon, spec.text, spec.tooltip, Optional.some(behaviours), sharedBackstage.providers),
+          button: renderCommonStructure(spec.icon, spec.text, spec.tooltip, Optional.some(behaviours), sharedBackstage.providers, spec.context, btnName),
           toolbar: {
             dom: {
               tag: 'div',
               classes: ['tox-toolbar__overflow'],
               attributes
+            }
+          }
+        }
       });
     };
-    const renderCommonToolbarButton = (spec, specialisation, providersBackstage) => {
+    const renderCommonToolbarButton = (spec, specialisation, providersBackstage, btnName) => {
       var _d;
       const editorOffCell = Cell(noop);
-      const structure = renderCommonStructure(spec.icon, spec.text, spec.tooltip, Optional.none(), providersBackstage);
+      const structure = renderCommonStructure(spec.icon, spec.text, spec.tooltip, Optional.none(), providersBackstage, spec.context, btnName);
       return Button.sketch({
         dom: structure.dom,
         components: structure.components,
         eventOrder: toolbarButtonEventOrder,
         buttonBehaviours: {
                 getApi: specialisation.getApi
               }),
               onControlAttached(specialisation, editorOffCell),
               onControlDetached(specialisation, editorOffCell)
             ]),
+            ...spec.tooltip.map(t => Tooltipping.config(providersBackstage.tooltips.getConfig({ tooltipText: providersBackstage.translate(t) + spec.shortcut.map(shortcut => ` (${ convertText(shortcut) })`).getOr('') }))).toArray(),
-            DisablingConfigs.toolbarButton(() => !spec.enabled || providersBackstage.isDisabled()),
+            DisablingConfigs.toolbarButton(() => !spec.enabled || providersBackstage.checkUiComponentContext(spec.context).shouldDisable),
-            receivingConfig()
+            toggleOnReceive(() => providersBackstage.checkUiComponentContext(spec.context))
           ].concat(specialisation.toolbarButtonBehaviours)),
           [commonButtonDisplayEvent]: (_d = structure.buttonBehaviours) === null || _d === void 0 ? void 0 : _d[commonButtonDisplayEvent]
+        }
       });
     };
-    const renderToolbarButton = (spec, providersBackstage) => renderToolbarButtonWith(spec, providersBackstage, []);
+    const renderToolbarButton = (spec, providersBackstage, btnName) => renderToolbarButtonWith(spec, providersBackstage, [], btnName);
-    const renderToolbarButtonWith = (spec, providersBackstage, bonusEvents) => renderCommonToolbarButton(spec, {
+    const renderToolbarButtonWith = (spec, providersBackstage, bonusEvents, btnName) => renderCommonToolbarButton(spec, {
       toolbarButtonBehaviours: bonusEvents.length > 0 ? [config('toolbarButtonWith', bonusEvents)] : [],
       getApi: getButtonApi,
       onSetup: spec.onSetup
-    }, providersBackstage);
+    }, providersBackstage, btnName);
-    const renderToolbarToggleButton = (spec, providersBackstage) => renderToolbarToggleButtonWith(spec, providersBackstage, []);
+    const renderToolbarToggleButton = (spec, providersBackstage, btnName) => renderToolbarToggleButtonWith(spec, providersBackstage, [], btnName);
-    const renderToolbarToggleButtonWith = (spec, providersBackstage, bonusEvents) => renderCommonToolbarButton(spec, {
+    const renderToolbarToggleButtonWith = (spec, providersBackstage, bonusEvents, btnName) => renderCommonToolbarButton(spec, {
       toolbarButtonBehaviours: [
         Replacing.config({}),
         Toggling.config({
           toggleClass: 'tox-tbtn--enabled',
           aria: { mode: 'pressed' },
           toggleOnExecute: false
         })
       ].concat(bonusEvents.length > 0 ? [config('toolbarToggleButtonWith', bonusEvents)] : []),
       getApi: getToggleApi,
       onSetup: spec.onSetup
-    }, providersBackstage);
+    }, providersBackstage, btnName);
     const fetchChoices = (getApi, spec, providersBackstage) => comp => Future.nu(callback => spec.fetch(callback)).map(items => Optional.from(createTieredDataFrom(deepMerge(createPartialChoiceMenu(generate$6('menu-value'), items, value => {
       spec.onItemAction(getApi(comp), value);
     }, spec.columns, spec.presets, ItemResponse$1.CLOSE_ON_EXECUTE, spec.select.getOr(never), providersBackstage), {
       movement: deriveMenuMovement(spec.columns, spec.presets),
       menuBehaviours: SimpleBehaviours.unnamedEvents(spec.columns !== 'auto' ? [] : [runOnAttached((comp, _se) => {
           detectSize(comp, 4, classForPreset(spec.presets)).each(({numRows, numColumns}) => {
             Keying.setGridSize(comp, numRows, numColumns);
           });
         })])
     }))));
-    const renderSplitButton = (spec, sharedBackstage) => {
+    const renderSplitButton = (spec, sharedBackstage, btnName) => {
+      const tooltipString = Cell(spec.tooltip.getOr(''));
       const getApi = comp => ({
         isEnabled: () => !Disabling.isDisabled(comp),
         setEnabled: state => Disabling.set(comp, !state),
         setIconFill: (id, value) => {
           descendant(comp.element, `svg path[class="${ id }"], rect[class="${ id }"]`).each(underlinePath => {
         isActive: () => descendant(comp.element, 'span').exists(button => comp.getSystem().getByDom(button).exists(Toggling.isOn)),
         setText: text => descendant(comp.element, 'span').each(button => comp.getSystem().getByDom(button).each(buttonComp => emitWith(buttonComp, updateMenuText, { text }))),
         setIcon: icon => descendant(comp.element, 'span').each(button => comp.getSystem().getByDom(button).each(buttonComp => emitWith(buttonComp, updateMenuIcon, { icon }))),
         setTooltip: tooltip => {
           const translatedTooltip = sharedBackstage.providers.translate(tooltip);
-          setAll$1(comp.element, {
-            'aria-label': translatedTooltip,
+          set$9(comp.element, 'aria-label', translatedTooltip);
-            'title': translatedTooltip
+          tooltipString.set(tooltip);
-          });
+        }
       });
       const editorOffCell = Cell(noop);
       const specialisation = {
         getApi,
         dom: {
           tag: 'div',
           classes: ['tox-split-button'],
           attributes: {
             'aria-pressed': false,
-            ...getTooltipAttributes(spec.tooltip, sharedBackstage.providers)
+            ...getTooltipAttributes(spec.tooltip, sharedBackstage.providers),
+            ...isNonNullable(btnName) ? { 'data-mce-name': btnName } : {}
+          }
         },
         onExecute: button => {
           const api = getApi(button);
           if (api.isEnabled()) {
+          }
         },
         onItemExecute: (_a, _b, _c) => {
         },
         splitDropdownBehaviours: derive$1([
-          DisablingConfigs.splitButton(sharedBackstage.providers.isDisabled),
-          receivingConfig(),
           config('split-dropdown-events', [
             runOnAttached((comp, _se) => forceInitialSize(comp)),
             run$1(focusButtonEvent, Focusing.focus),
             onControlAttached(specialisation, editorOffCell),
             onControlDetached(specialisation, editorOffCell)
           ]),
+          DisablingConfigs.splitButton(() => sharedBackstage.providers.isDisabled() || sharedBackstage.providers.checkUiComponentContext(spec.context).shouldDisable),
+          toggleOnReceive(() => sharedBackstage.providers.checkUiComponentContext(spec.context)),
-          Unselecting.config({})
+          Unselecting.config({}),
+          ...spec.tooltip.map(tooltip => {
+            return Tooltipping.config({
+              ...sharedBackstage.providers.tooltips.getConfig({
+                tooltipText: sharedBackstage.providers.translate(tooltip),
+                onShow: comp => {
+                  if (tooltipString.get() !== tooltip) {
+                    const translatedTooltip = sharedBackstage.providers.translate(tooltipString.get());
+                    Tooltipping.setComponents(comp, sharedBackstage.providers.tooltips.getComponents({ tooltipText: translatedTooltip }));
+                  }
+                }
+              })
+            });
+          }).toArray()
         ]),
         eventOrder: {
           [attachedToDom()]: [
             'alloy.base.behaviour',
-            'split-dropdown-events'
+            'split-dropdown-events',
+            'tooltipping'
+          ],
+          [detachedFromDom()]: [
+            'split-dropdown-events',
+            'tooltipping'
+          ]
         },
         toggleClass: 'tox-tbtn--enabled',
         lazySink: sharedBackstage.getSink,
         fetch: fetchChoices(getApi, spec, sharedBackstage.providers),
         parts: { menu: part(false, spec.columns, spec.presets) },
         components: [
-          SplitDropdown.parts.button(renderCommonStructure(spec.icon, spec.text, Optional.none(), Optional.some([Toggling.config({
+          SplitDropdown.parts.button(renderCommonStructure(spec.icon, spec.text, Optional.none(), Optional.some([
+            Toggling.config({
               toggleClass: 'tox-tbtn--enabled',
               toggleOnExecute: false
+            }),
+            DisablingConfigs.toolbarButton(never),
+            toggleOnReceive(constant$1({
+              contextType: 'any',
+              shouldDisable: false
+            }))
-            })]), sharedBackstage.providers)),
+          ]), sharedBackstage.providers, spec.context)),
           SplitDropdown.parts.arrow({
             dom: {
               tag: 'button',
               classes: [
                 'tox-tbtn',
                 'tox-split-button__chevron'
               ],
-              innerHtml: get$2('chevron-down', sharedBackstage.providers.icons)
+              innerHtml: get$3('chevron-down', sharedBackstage.providers.icons)
             },
             buttonBehaviours: derive$1([
-              DisablingConfigs.splitButton(sharedBackstage.providers.isDisabled),
+              DisablingConfigs.splitButton(never),
+              toggleOnReceive(constant$1({
-              receivingConfig(),
+                contextType: 'any',
-              addFocusableBehaviour()
+                shouldDisable: false
+              }))
             ])
           }),
           SplitDropdown.parts['aria-descriptor']({ text: sharedBackstage.providers.translate('To open the popup, press Shift+Enter') })
+        ]
       });
+      {
         name: 'comments',
         items: ['addcomment']
+      }
     ];
-    const renderFromBridge = (bridgeBuilder, render) => (spec, backstage, editor) => {
+    const renderFromBridge = (bridgeBuilder, render) => (spec, backstage, editor, btnName) => {
       const internal = bridgeBuilder(spec).mapError(errInfo => formatError(errInfo)).getOrDie();
-      return render(internal, backstage, editor);
+      return render(internal, backstage, editor, btnName);
     };
     const types = {
-      button: renderFromBridge(createToolbarButton, (s, backstage) => renderToolbarButton(s, backstage.shared.providers)),
+      button: renderFromBridge(createToolbarButton, (s, backstage, _, btnName) => renderToolbarButton(s, backstage.shared.providers, btnName)),
-      togglebutton: renderFromBridge(createToggleButton, (s, backstage) => renderToolbarToggleButton(s, backstage.shared.providers)),
+      togglebutton: renderFromBridge(createToggleButton, (s, backstage, _, btnName) => renderToolbarToggleButton(s, backstage.shared.providers, btnName)),
-      menubutton: renderFromBridge(createMenuButton, (s, backstage) => renderMenuButton(s, 'tox-tbtn', backstage, Optional.none(), false)),
+      menubutton: renderFromBridge(createMenuButton, (s, backstage, _, btnName) => renderMenuButton(s, 'tox-tbtn', backstage, Optional.none(), false, btnName)),
-      splitbutton: renderFromBridge(createSplitButton, (s, backstage) => renderSplitButton(s, backstage.shared)),
+      splitbutton: renderFromBridge(createSplitButton, (s, backstage, _, btnName) => renderSplitButton(s, backstage.shared, btnName)),
-      grouptoolbarbutton: renderFromBridge(createGroupToolbarButton, (s, backstage, editor) => {
+      grouptoolbarbutton: renderFromBridge(createGroupToolbarButton, (s, backstage, editor, btnName) => {
         const buttons = editor.ui.registry.getAll().buttons;
         const identify = toolbar => identifyButtons(editor, {
           buttons,
           toolbar,
           allowToolbarGroups: false
         }, backstage, Optional.none());
         const attributes = { [Attribute]: backstage.shared.header.isPositionedAtTop() ? AttributeValue.TopToBottom : AttributeValue.BottomToTop };
         switch (getToolbarMode(editor)) {
         case ToolbarMode$1.floating:
-          return renderFloatingToolbarButton(s, backstage, identify, attributes);
+          return renderFloatingToolbarButton(s, backstage, identify, attributes, btnName);
         default:
           throw new Error('Toolbar groups are only supported when using floating toolbar mode');
+        }
       })
     };
-    const extractFrom = (spec, backstage, editor) => get$g(types, spec.type).fold(() => {
+    const extractFrom = (spec, backstage, editor, btnName) => get$h(types, spec.type).fold(() => {
       console.error('skipping button defined by', spec);
       return Optional.none();
-    }, render => Optional.some(render(spec, backstage, editor)));
+    }, render => Optional.some(render(spec, backstage, editor, btnName)));
     const bespokeButtons = {
       styles: createStylesButton,
       fontsize: createFontSizeButton,
       fontsizeinput: createFontSizeInputButton,
       fontfamily: createFontFamilyButton,
     };
     const convertStringToolbar = strToolbar => {
       const groupsStrings = strToolbar.split('|');
       return map$2(groupsStrings, g => ({ items: g.trim().split(' ') }));
     };
-    const isToolbarGroupSettingArray = toolbar => isArrayOf(toolbar, t => has$2(t, 'name') && has$2(t, 'items'));
+    const isToolbarGroupSettingArray = toolbar => isArrayOf(toolbar, t => (has$2(t, 'name') || has$2(t, 'label')) && has$2(t, 'items'));
     const createToolbar = toolbarConfig => {
       const toolbar = toolbarConfig.toolbar;
       const buttons = toolbarConfig.buttons;
       if (toolbar === false) {
         return [];
       } else {
         console.error('Toolbar type should be string, string[], boolean or ToolbarGroup[]');
         return [];
+      }
     };
-    const lookupButton = (editor, buttons, toolbarItem, allowToolbarGroups, backstage, prefixes) => get$g(buttons, toolbarItem.toLowerCase()).orThunk(() => prefixes.bind(ps => findMap(ps, prefix => get$g(buttons, prefix + toolbarItem.toLowerCase())))).fold(() => get$g(bespokeButtons, toolbarItem.toLowerCase()).map(r => r(editor, backstage)), spec => {
+    const lookupButton = (editor, buttons, toolbarItem, allowToolbarGroups, backstage, prefixes) => get$h(buttons, toolbarItem.toLowerCase()).orThunk(() => prefixes.bind(ps => findMap(ps, prefix => get$h(buttons, prefix + toolbarItem.toLowerCase())))).fold(() => get$h(bespokeButtons, toolbarItem.toLowerCase()).map(r => r(editor, backstage)), spec => {
       if (spec.type === 'grouptoolbarbutton' && !allowToolbarGroups) {
         console.warn(`Ignoring the '${ toolbarItem }' toolbar button. Group toolbar buttons are only supported when using floating toolbar mode and cannot be nested.`);
         return Optional.none();
       } else {
-        return extractFrom(spec, backstage, editor);
+        return extractFrom(spec, backstage, editor, toolbarItem.toLowerCase());
+      }
     });
     const identifyButtons = (editor, toolbarConfig, backstage, prefixes) => {
       const toolbarGroups = createToolbar(toolbarConfig);
       const groups = map$2(toolbarGroups, group => {
         const items = bind$3(group.items, toolbarItem => {
           return toolbarItem.trim().length === 0 ? [] : lookupButton(editor, toolbarConfig.buttons, toolbarItem, toolbarConfig.allowToolbarGroups, backstage, prefixes).toArray();
         });
         return {
           title: Optional.from(editor.translate(group.name)),
+          label: someIf(group.label !== undefined, editor.translate(group.label)),
           items
         };
       });
       return filter$2(groups, group => group.items.length > 0);
     };
       } else {
         OuterContainer.setToolbar(outerContainer, identifyButtons(editor, rawUiConfig, backstage, Optional.none()));
+      }
     };
-    const detection = detect$2();
+    const detection = detect$1();
     const isiOS12 = detection.os.isiOS() && detection.os.version.major <= 12;
     const setupEvents$1 = (editor, uiRefs) => {
       const {uiMotherships} = uiRefs;
       const dom = editor.dom;
           set$8(m.element, 'display', 'none');
         });
       });
       editor.on('show', () => {
         each$1(uiMotherships, m => {
-          remove$6(m.element, 'display');
+          remove$7(m.element, 'display');
         });
       });
       editor.on('NodeChange', resizeDocument);
       editor.on('remove', () => {
         elementLoad.unbind();
       iframe(editor);
       const eTargetNode = SugarElement.fromDom(args.targetNode);
       const uiRoot = getContentContainer(getRootNode(eTargetNode));
       attachSystemAfter(eTargetNode, mainUi.mothership);
       attachUiMotherships(editor, uiRoot, uiRefs);
-      editor.on('SkinLoaded', () => {
+      editor.on('PostRender', () => {
         OuterContainer.setSidebar(outerContainer, rawUiConfig.sidebar, getSidebarShow(editor));
+      });
+      editor.on('SkinLoaded', () => {
         setToolbar(editor, uiRefs, rawUiConfig, backstage);
         lastToolbarWidth.set(editor.getWin().innerWidth);
         OuterContainer.setMenubar(outerContainer, identifyMenus(editor, rawUiConfig));
         OuterContainer.setViews(outerContainer, rawUiConfig.views);
         setupEvents$1(editor, uiRefs);
           editor.dispatch('ScrollContent');
         }, 20);
         const unbinder = bind(socket.element, 'scroll', limit.throttle);
         editor.on('remove', unbinder.unbind);
+      }
-      setupReadonlyModeSwitch(editor, uiRefs);
+      setupEventsForUi(editor, uiRefs);
       editor.addCommand('ToggleSidebar', (_ui, value) => {
         OuterContainer.toggleSidebar(outerContainer, value);
-        editor.dispatch('ToggleSidebar');
+        fireToggleSidebar(editor);
       });
       editor.addQueryValueHandler('ToggleSidebar', () => {
         var _a;
         return (_a = OuterContainer.whichSidebar(outerContainer)) !== null && _a !== void 0 ? _a : '';
       });
           if (isNull(OuterContainer.whichView(outerContainer))) {
             editor.focus();
             editor.nodeChanged();
             OuterContainer.refreshToolbar(outerContainer);
+          }
+          fireToggleView(editor);
+        }
       });
       editor.addQueryValueHandler('ToggleView', () => {
         var _a;
         return (_a = OuterContainer.whichView(outerContainer)) !== null && _a !== void 0 ? _a : '';
+          }
         });
+      }
       const api = {
         setEnabled: state => {
+          const eventType = state ? 'setEnabled' : 'setDisabled';
-          broadcastReadonly(uiRefs, !state);
+          broadcastEvents(uiRefs, eventType);
         },
         isEnabled: () => !Disabling.isDisabled(outerContainer)
       };
       return {
         iframeContainer: socket.element.dom,
     const {ToolbarLocation, ToolbarMode} = Options;
     const maximumDistanceToEdge = 40;
     const InlineHeader = (editor, targetElm, uiRefs, backstage, floatContainer) => {
       const {mainUi, uiMotherships} = uiRefs;
-      const DOM = global$7.DOM;
+      const DOM = global$8.DOM;
       const useFixedToolbarContainer = useFixedContainer(editor);
       const isSticky = isStickyToolbar(editor);
       const editorMaxWidthOpt = getMaxWidthOption(editor).or(getWidth(editor));
       const headerBackstage = backstage.shared.header;
+      const isPositionedAtTop = headerBackstage.isPositionedAtTop;
-      const isPositionedAtTop = headerBackstage.isPositionedAtTop;
+      const minimumToolbarWidth = 150;
       const toolbarMode = getToolbarMode(editor);
       const isSplitToolbar = toolbarMode === ToolbarMode.sliding || toolbarMode === ToolbarMode.floating;
       const visible = Cell(false);
       const isVisible = () => visible.get() && !editor.removed;
-      const calcToolbarOffset = toolbar => isSplitToolbar ? toolbar.fold(constant$1(0), tbar => tbar.components().length > 1 ? get$d(tbar.components()[1].element) : 0) : 0;
+      const calcToolbarOffset = toolbar => isSplitToolbar ? toolbar.fold(constant$1(0), tbar => tbar.components().length > 1 ? get$e(tbar.components()[1].element) : 0) : 0;
       const calcMode = container => {
         switch (getToolbarLocation(editor)) {
         case ToolbarLocation.auto:
           const toolbar = OuterContainer.getToolbar(mainUi.outerContainer);
           const offset = calcToolbarOffset(toolbar);
-          const toolbarHeight = get$d(container.element) - offset;
+          const toolbarHeight = get$e(container.element) - offset;
           const targetBounds = box$1(targetElm);
           const roomAtTop = targetBounds.y > toolbarHeight;
           if (roomAtTop) {
             return 'top';
           } else {
             const doc = documentElement(targetElm);
-            const docHeight = Math.max(doc.dom.scrollHeight, get$d(doc));
+            const docHeight = Math.max(doc.dom.scrollHeight, get$e(doc));
             const roomAtBottom = targetBounds.bottom < docHeight - toolbarHeight;
             if (roomAtBottom) {
               return 'bottom';
             } else {
         });
       };
       const updateChromeWidth = () => {
         floatContainer.on(container => {
           const maxWidth = editorMaxWidthOpt.getOrThunk(() => {
-            const bodyMargin = parseToInt(get$e(body(), 'margin-left')).getOr(0);
-            return get$c(body()) - absolute$3(targetElm).left + bodyMargin;
+            return getBounds$3().width - viewport$1(targetElm).left - 10;
           });
           set$8(container.element, 'max-width', maxWidth + 'px');
         });
       };
-      const updateChromePosition = optToolbarWidth => {
+      const updateChromePosition = (isOuterContainerWidthRestored, prevScroll) => {
         floatContainer.on(container => {
           const toolbar = OuterContainer.getToolbar(mainUi.outerContainer);
           const offset = calcToolbarOffset(toolbar);
           const targetBounds = box$1(targetElm);
-          const {top, left} = getOffsetParent$1(editor, mainUi.outerContainer.element).fold(() => {
+          const offsetParent = getOffsetParent$1(editor, mainUi.outerContainer.element);
+          const getLeft = () => offsetParent.fold(() => targetBounds.x, offsetParent => {
-            return {
+            const offsetBox = box$1(offsetParent);
-              top: isPositionedAtTop() ? Math.max(targetBounds.y - get$d(container.element) + offset, 0) : targetBounds.bottom,
+            const isOffsetParentBody = eq(offsetParent, body());
-              left: targetBounds.x
+            return isOffsetParentBody ? targetBounds.x : targetBounds.x - offsetBox.x;
-            };
+          });
-          }, offsetParent => {
+          const getTop = () => offsetParent.fold(() => isPositionedAtTop() ? Math.max(targetBounds.y - get$e(container.element) + offset, 0) : targetBounds.bottom, offsetParent => {
             var _a;
             const offsetBox = box$1(offsetParent);
             const scrollDelta = (_a = offsetParent.dom.scrollTop) !== null && _a !== void 0 ? _a : 0;
             const isOffsetParentBody = eq(offsetParent, body());
-            const topValue = isOffsetParentBody ? Math.max(targetBounds.y - get$d(container.element) + offset, 0) : targetBounds.y - offsetBox.y + scrollDelta - get$d(container.element) + offset;
+            const topValue = isOffsetParentBody ? Math.max(targetBounds.y - get$e(container.element) + offset, 0) : targetBounds.y - offsetBox.y + scrollDelta - get$e(container.element) + offset;
-            return {
-              top: isPositionedAtTop() ? topValue : targetBounds.bottom,
+            return isPositionedAtTop() ? topValue : targetBounds.bottom;
-              left: isOffsetParentBody ? targetBounds.x : targetBounds.x - offsetBox.x
-            };
           });
+          const left = getLeft();
+          const widthProperties = someIf(isOuterContainerWidthRestored, Math.ceil(mainUi.outerContainer.element.dom.getBoundingClientRect().width)).filter(w => w > minimumToolbarWidth).map(toolbarWidth => {
+            const scroll = prevScroll.getOr(get$c());
+            const availableWidth = window.innerWidth - (left - scroll.left);
+            const width = Math.max(Math.min(toolbarWidth, availableWidth), minimumToolbarWidth);
+            if (availableWidth < toolbarWidth) {
+              set$8(mainUi.outerContainer.element, 'width', width + 'px');
+            }
+            return { width: width + 'px' };
+          }).getOr({ width: 'max-content' });
           const baseProperties = {
             position: 'absolute',
             left: Math.round(left) + 'px',
-            top: Math.round(top) + 'px'
+            top: getTop() + 'px'
           };
-          const widthProperties = optToolbarWidth.map(toolbarWidth => {
-            const scroll = get$b();
-            const minimumToolbarWidth = 150;
-            const availableWidth = window.innerWidth - (left - scroll.left);
-            const width = Math.max(Math.min(toolbarWidth, availableWidth), minimumToolbarWidth);
-            return { width: width + 'px' };
-          }).getOr({});
           setAll(mainUi.outerContainer.element, {
             ...baseProperties,
             ...widthProperties
           });
         });
       const repositionPopups$1 = () => {
         each$1(uiMotherships, m => {
           m.broadcastOn([repositionPopups()], {});
         });
       };
-      const restoreAndGetCompleteOuterContainerWidth = () => {
+      const restoreOuterContainerWidth = () => {
         if (!useFixedToolbarContainer) {
           const toolbarCurrentRightsidePosition = absolute$3(mainUi.outerContainer.element).left + getOuter$1(mainUi.outerContainer.element);
           if (toolbarCurrentRightsidePosition >= window.innerWidth - maximumDistanceToEdge || getRaw(mainUi.outerContainer.element, 'width').isSome()) {
             set$8(mainUi.outerContainer.element, 'position', 'absolute');
             set$8(mainUi.outerContainer.element, 'left', '0px');
-            remove$6(mainUi.outerContainer.element, 'width');
+            remove$7(mainUi.outerContainer.element, 'width');
-            const w = getOuter$1(mainUi.outerContainer.element);
-            return Optional.some(w);
-          } else {
-            return Optional.none();
+            return true;
+          }
-        } else {
-          return Optional.none();
+        }
+        return false;
       };
       const update = stickyAction => {
         if (!isVisible()) {
           return;
+        }
         if (!useFixedToolbarContainer) {
           updateChromeWidth();
+        }
+        const prevScroll = get$c();
-        const optToolbarWidth = useFixedToolbarContainer ? Optional.none() : restoreAndGetCompleteOuterContainerWidth();
+        const isOuterContainerWidthRestored = useFixedToolbarContainer ? false : restoreOuterContainerWidth();
         if (isSplitToolbar) {
           OuterContainer.refreshToolbar(mainUi.outerContainer);
+        }
         if (!useFixedToolbarContainer) {
+          const currentScroll = get$c();
+          const optScroll = someIf(prevScroll.left !== currentScroll.left, prevScroll);
-          updateChromePosition(optToolbarWidth);
+          updateChromePosition(isOuterContainerWidthRestored, optScroll);
+          optScroll.each(scroll => {
+            to(scroll.left, currentScroll.top);
+          });
+        }
         if (isSticky) {
           floatContainer.on(stickyAction);
+        }
         repositionPopups$1();
       const show = () => {
         visible.set(true);
         set$8(mainUi.outerContainer.element, 'display', 'flex');
         DOM.addClass(editor.getBody(), 'mce-edit-focus');
         each$1(uiMotherships, m => {
-          remove$6(m.element, 'display');
+          remove$7(m.element, 'display');
         });
         doUpdateMode();
         if (isSplitUiMode(editor)) {
           update(elem => Docking.isDocked(elem) ? Docking.reset(elem) : Docking.refresh(elem));
         } else {
         requestAnimationFrame(() => resizeContent(e));
       });
       let lastScrollX = 0;
       const updateUi = last(() => ui.update(Docking.refresh), 33);
       editor.on('ScrollWindow', () => {
-        const newScrollX = get$b().left;
+        const newScrollX = get$c().left;
         if (newScrollX !== lastScrollX) {
           lastScrollX = newScrollX;
           updateUi.throttle();
+        }
         ui.updateMode();
         elementLoad.clear();
       });
     };
     const render = (editor, uiRefs, rawUiConfig, backstage, args) => {
       const {mainUi} = uiRefs;
-      const floatContainer = value$2();
+      const floatContainer = value$4();
       const targetElm = SugarElement.fromDom(args.targetNode);
       const ui = InlineHeader(editor, targetElm, uiRefs, backstage, floatContainer);
       const toolbarPersist = isToolbarPersist(editor);
       inline(editor);
       const render = () => {
           attachSystemAfter(targetElm, uiRefs.popupUi.mothership);
         } else {
           attachSystem(uiContainer, mainUi.mothership);
+        }
         attachSystem(uiContainer, uiRefs.dialogUi.mothership);
+        const setup = () => {
-        setToolbar(editor, uiRefs, rawUiConfig, backstage);
+          setToolbar(editor, uiRefs, rawUiConfig, backstage);
-        OuterContainer.setMenubar(mainUi.outerContainer, identifyMenus(editor, rawUiConfig));
+          OuterContainer.setMenubar(mainUi.outerContainer, identifyMenus(editor, rawUiConfig));
-        ui.show();
+          ui.show();
-        setupEvents(editor, targetElm, ui, toolbarPersist);
+          setupEvents(editor, targetElm, ui, toolbarPersist);
-        editor.nodeChanged();
+          editor.nodeChanged();
+        };
+        if (toolbarPersist) {
+          editor.once('SkinLoaded', setup);
+        } else {
+          setup();
+        }
       };
       editor.on('show', render);
       editor.on('hide', ui.hide);
       if (!toolbarPersist) {
         editor.on('focus', render);
       editor.on('init', () => {
         if (editor.hasFocus() || toolbarPersist) {
           render();
+        }
       });
-      setupReadonlyModeSwitch(editor, uiRefs);
+      setupEventsForUi(editor, uiRefs);
       const api = {
         show: render,
         hide: ui.hide,
         setEnabled: state => {
+          const eventType = state ? 'setEnabled' : 'setDisabled';
-          broadcastReadonly(uiRefs, !state);
+          broadcastEvents(uiRefs, eventType);
         },
         isEnabled: () => !Disabling.isDisabled(mainUi.outerContainer)
       };
       return {
         editorContainer: mainUi.outerContainer.element.dom,
         __proto__: null,
         render: render
     });
     const LazyUiReferences = () => {
-      const dialogUi = value$2();
+      const dialogUi = value$4();
-      const popupUi = value$2();
+      const popupUi = value$4();
-      const mainUi = value$2();
+      const mainUi = value$4();
       const lazyGetInOuterOrDie = (label, f) => () => mainUi.get().bind(oc => f(oc.outerContainer)).getOrDie(`Could not find ${ label } element in OuterContainer`);
       const getUiMotherships = () => {
         const optDialogMothership = dialogUi.get().map(ui => ui.mothership);
         const optPopupMothership = popupUi.get().map(ui => ui.mothership);
     };
     const showContextToolbarEvent = 'contexttoolbar-show';
+    const hideContextToolbarEvent = 'contexttoolbar-hide';
-    const hideContextToolbarEvent = 'contexttoolbar-hide';
+    const contextFormInputSelector = '.tox-toolbar-slider__input,.tox-toolbar-textfield';
+    const focusIn = contextbar => {
+      InlineView.getContent(contextbar).each(comp => {
+        descendant(comp.element, contextFormInputSelector).fold(() => Keying.focusIn(comp), focus$3);
+      });
-    const getFormApi = input => ({
+    };
+    const focusParent = comp => search(comp.element).each(focus => {
+      ancestor(focus, '[tabindex="-1"]').each(parent => {
-      hide: () => emit(input, sandboxClose()),
+        focus$3(parent);
+      });
+    });
+    const forwardSlideEvent = generate$6('forward-slide');
+    const backSlideEvent = generate$6('backward-slide');
+    const changeSlideEvent = generate$6('change-slide-event');
+    const resizingClass = 'tox-pop--resizing';
+    const renderContextToolbar = spec => {
+      const stack = Cell([]);
+      return InlineView.sketch({
+        dom: {
+          tag: 'div',
+          classes: ['tox-pop']
+        },
+        fireDismissalEventInstead: { event: 'doNotDismissYet' },
+        onShow: comp => {
+          stack.set([]);
+          InlineView.getContent(comp).each(c => {
+            remove$7(c.element, 'visibility');
+          });
+          remove$3(comp.element, resizingClass);
+          remove$7(comp.element, 'width');
+        },
+        onHide: () => {
+          spec.onHide();
+        },
+        inlineBehaviours: derive$1([
+          config('context-toolbar-events', [
+            runOnSource(transitionend(), (comp, se) => {
+              if (se.event.raw.propertyName === 'width') {
+                remove$3(comp.element, resizingClass);
+                remove$7(comp.element, 'width');
+              }
+            }),
+            run$1(changeSlideEvent, (comp, se) => {
+              const elem = comp.element;
+              remove$7(elem, 'width');
+              const currentWidth = get$d(elem);
+              remove$7(elem, 'left');
+              remove$7(elem, 'right');
+              remove$7(elem, 'max-width');
+              InlineView.setContent(comp, se.event.contents);
+              add$2(elem, resizingClass);
+              const newWidth = get$d(elem);
+              set$8(elem, 'transition', 'none');
+              InlineView.reposition(comp);
+              remove$7(elem, 'transition');
+              set$8(elem, 'width', currentWidth + 'px');
+              se.event.focus.fold(() => focusIn(comp), f => {
+                focus$3(f);
+                if (search(elem).isNone()) {
+                  focusIn(comp);
+                }
+              });
+              setTimeout(() => {
+                set$8(comp.element, 'width', newWidth + 'px');
+              }, 0);
+            }),
+            run$1(forwardSlideEvent, (comp, se) => {
+              InlineView.getContent(comp).each(oldContents => {
+                stack.set(stack.get().concat([{
+                    bar: oldContents,
+                    focus: active$1(getRootNode(comp.element))
+                  }]));
+              });
+              emitWith(comp, changeSlideEvent, {
+                contents: se.event.forwardContents,
+                focus: Optional.none()
+              });
+            }),
+            run$1(backSlideEvent, (comp, _se) => {
+              spec.onBack();
+              last$1(stack.get()).each(last => {
+                stack.set(stack.get().slice(0, stack.get().length - 1));
+                emitWith(comp, changeSlideEvent, {
+                  contents: premade(last.bar),
+                  focus: last.focus
+                });
+              });
+            })
+          ]),
+          Keying.config({
+            mode: 'special',
+            onEscape: comp => last$1(stack.get()).fold(() => spec.onEscape(), _ => {
+              emit(comp, backSlideEvent);
+              return Optional.some(true);
+            })
+          })
+        ]),
+        lazySink: () => Result.value(spec.sink)
+      });
+    };
+    const getFormApi = (input, focusfallbackElement) => {
+      const valueState = value$4();
+      return {
+        setInputEnabled: state => {
+          if (!state && focusfallbackElement) {
+            focus$3(focusfallbackElement);
+          }
+          Disabling.set(input, !state);
+        },
+        isInputEnabled: () => !Disabling.isDisabled(input),
+        hide: () => {
+          if (!valueState.isSet()) {
+            valueState.set(Representing.getValue(input));
+          }
+          emit(input, sandboxClose());
+        },
+        back: () => {
+          if (!valueState.isSet()) {
+            valueState.set(Representing.getValue(input));
+          }
+          emit(input, backSlideEvent);
+        },
+        getValue: () => {
+          return valueState.get().getOrThunk(() => Representing.getValue(input));
+        },
+        setValue: value => {
+          if (valueState.isSet()) {
+            valueState.set(value);
+          } else {
+            Representing.setValue(input, value);
+          }
+        }
+      };
-      getValue: () => Representing.getValue(input)
+    };
     });
     const runOnExecute = (memInput, original) => run$1(internalToolbarButtonExecute, (comp, se) => {
       const input = memInput.get(comp);
-      const formApi = getFormApi(input);
+      const formApi = getFormApi(input, comp.element);
       original.onAction(formApi, se.event.buttonApi);
     });
     const renderContextButton = (memInput, button, providers) => {
         asSpecs,
         findPrimary
       };
     };
+    const renderContextFormSizeInput = (ctx, providersBackstage, onEnter) => {
+      const {width, height} = ctx.initValue();
+      let converter = noSizeConversion;
+      const enabled = true;
+      const ratioEvent = generate$6('ratio-event');
+      const getApi = getFormApi;
+      const makeIcon = iconName => render$3(iconName, {
+        tag: 'span',
+        classes: [
+          'tox-icon',
+          'tox-lock-icon__' + iconName
+        ]
+      }, providersBackstage.icons);
+      const disabled = () => !enabled;
-    const buildInitGroups = (ctx, providers) => {
+      const label = ctx.label.getOr('Constrain proportions');
+      const translatedLabel = providersBackstage.translate(label);
+      const pLock = FormCoupledInputs.parts.lock({
+        dom: {
+          tag: 'button',
+          classes: [
+            'tox-lock',
+            'tox-button',
+            'tox-button--naked',
+            'tox-button--icon'
+          ],
+          attributes: {
+            'aria-label': translatedLabel,
+            'data-mce-name': label
+          }
+        },
+        components: [
+          makeIcon('lock'),
+          makeIcon('unlock')
+        ],
+        buttonBehaviours: derive$1([
+          Disabling.config({ disabled }),
+          Tabstopping.config({}),
+          Tooltipping.config(providersBackstage.tooltips.getConfig({ tooltipText: translatedLabel }))
+        ])
-      const inputAttributes = ctx.label.fold(() => ({}), label => ({ 'aria-label': label }));
+      });
+      const formGroup = components => ({
+        dom: {
+          tag: 'div',
+          classes: ['tox-context-form__group']
+        },
+        components
+      });
+      const goToParent = comp => {
+        const focussableWrapperOpt = ancestor(comp.element, 'div.tox-focusable-wrapper');
+        return focussableWrapperOpt.fold(Optional.none, focussableWrapper => {
+          focus$3(focussableWrapper);
+          return Optional.some(true);
+        });
+      };
+      const getFieldPart = isField1 => FormField.parts.field({
-      const memInput = record(Input.sketch({
+        factory: Input,
+        inputClasses: [
-        inputClasses: [
+          'tox-textfield',
           'tox-toolbar-textfield',
-          'tox-toolbar-nav-js'
+          'tox-textfield-size'
+        ],
+        data: isField1 ? width : height,
+        inputBehaviours: derive$1([
-        ],
+          Disabling.config({ disabled }),
+          Tabstopping.config({}),
+          config('size-input-toolbar-events', [run$1(focusin(), (component, _simulatedEvent) => {
+              emitWith(component, ratioEvent, { isField1 });
+            })]),
+          Keying.config({
-        data: ctx.initValue(),
+            mode: 'special',
+            onEnter,
+            onEscape: goToParent
+          })
-        inputAttributes,
+        ]),
+        selectOnFocus: false
+      });
+      const getLabel = label => ({
+        dom: {
+          tag: 'label',
+          classes: ['tox-label']
+        },
+        components: [text$2(providersBackstage.translate(label))]
+      });
+      const focusableWrapper = field => ({
+        dom: {
+          tag: 'div',
+          classes: [
+            'tox-focusable-wrapper',
+            'tox-toolbar-nav-item'
+          ]
+        },
-        selectOnFocus: true,
+        components: [field],
+        behaviours: derive$1([
+          Tabstopping.config({}),
+          Focusing.config({}),
-        inputBehaviours: derive$1([Keying.config({
+          Keying.config({
+            mode: 'special',
+            onEnter: comp => {
-            mode: 'special',
+              const focussableInputOpt = descendant(comp.element, 'input');
+              return focussableInputOpt.fold(Optional.none, focussableInput => {
-            onEnter: input => commands.findPrimary(input).map(primary => {
+                focus$3(focussableInput);
+                return Optional.some(true);
+              });
+            }
+          })
+        ])
+      });
+      const widthField = focusableWrapper(FormCoupledInputs.parts.field1(formGroup([
+        FormField.parts.label(getLabel('Width:')),
+        getFieldPart(true)
+      ])));
+      const heightField = focusableWrapper(FormCoupledInputs.parts.field2(formGroup([
+        FormField.parts.label(getLabel('Height:')),
+        getFieldPart(false)
+      ])));
+      const editorOffCell = Cell(noop);
+      const controlLifecycleHandlers = [
+        onControlAttached({
+          onSetup: ctx.onSetup,
+          getApi
+        }, editorOffCell),
+        onControlDetached({ getApi }, editorOffCell)
+      ];
+      return FormCoupledInputs.sketch({
+        dom: {
+          tag: 'div',
+          classes: ['tox-context-form__group']
+        },
+        components: [
+          widthField,
+          heightField,
+          formGroup([
+            getLabel(nbsp),
+            pLock
+          ])
+        ],
+        field1Name: 'width',
+        field2Name: 'height',
+        locked: true,
+        markers: { lockClass: 'tox-locked' },
+        onLockedChange: (current, other, _lock) => {
+          parseSize(Representing.getValue(current)).each(size => {
+            converter(size).each(newSize => {
+              Representing.setValue(other, formatSize(newSize));
+            });
+          });
+        },
+        onInput: current => emit(current, formInputEvent),
+        coupledFieldBehaviours: derive$1([
+          Focusing.config({}),
+          Keying.config({
+            mode: 'flow',
-              emitExecute(primary);
+            focusInside: FocusInsideModes.OnEnterOrSpaceMode,
+            cycles: false,
+            selector: 'button, .tox-focusable-wrapper'
+          }),
+          Disabling.config({
+            disabled,
+            onDisabled: comp => {
+              FormCoupledInputs.getField1(comp).bind(FormField.getField).each(Disabling.disable);
+              FormCoupledInputs.getField2(comp).bind(FormField.getField).each(Disabling.disable);
+              FormCoupledInputs.getLock(comp).each(Disabling.disable);
+            },
+            onEnabled: comp => {
+              FormCoupledInputs.getField1(comp).bind(FormField.getField).each(Disabling.enable);
+              FormCoupledInputs.getField2(comp).bind(FormField.getField).each(Disabling.enable);
+              FormCoupledInputs.getLock(comp).each(Disabling.enable);
+            }
+          }),
+          toggleOnReceive(() => providersBackstage.checkUiComponentContext('mode:design')),
+          config('size-input-toolbar-events2', [
+            run$1(ratioEvent, (component, simulatedEvent) => {
+              const isField1 = simulatedEvent.event.isField1;
+              const optCurrent = isField1 ? FormCoupledInputs.getField1(component) : FormCoupledInputs.getField2(component);
+              const optOther = isField1 ? FormCoupledInputs.getField2(component) : FormCoupledInputs.getField1(component);
+              const value1 = optCurrent.map(Representing.getValue).getOr('');
+              const value2 = optOther.map(Representing.getValue).getOr('');
-              return true;
+              converter = makeRatioConverter(value1, value2);
+            }),
+            run$1(formInputEvent, input => ctx.onInput(getFormApi(input))),
+            ...controlLifecycleHandlers
+          ])
+        ])
+      });
+    };
+    const createContextFormFieldFromParts = (pLabel, pField, providers) => FormField.sketch({
+      dom: {
+        tag: 'div',
+        classes: ['tox-context-form__group']
+      },
+      components: [
+        ...pLabel.toArray(),
+        pField
+      ],
+      fieldBehaviours: derive$1([Disabling.config({
+          disabled: () => providers.checkUiComponentContext('mode:design').shouldDisable,
+          onDisabled: comp => {
+            focusParent(comp);
+            FormField.getField(comp).each(Disabling.disable);
+          },
+          onEnabled: comp => {
+            FormField.getField(comp).each(Disabling.enable);
+          }
+        })])
+    });
+    const renderContextFormSliderInput = (ctx, providers, onEnter) => {
+      const editorOffCell = Cell(noop);
+      const pLabel = ctx.label.map(label => FormField.parts.label({
+        dom: {
+          tag: 'label',
+          classes: ['tox-label']
+        },
+        components: [text$2(providers.translate(label))]
+      }));
+      const pField = FormField.parts.field({
+        factory: Input,
+        type: 'range',
+        inputClasses: [
+          'tox-toolbar-slider__input',
+          'tox-toolbar-nav-item'
+        ],
+        inputAttributes: {
+          min: String(ctx.min()),
+          max: String(ctx.max())
+        },
+        data: ctx.initValue().toString(),
+        fromInputValue: value => toFloat(value).getOr(ctx.min()),
+        toInputValue: value => String(value),
+        inputBehaviours: derive$1([
+          Disabling.config({ disabled: () => providers.checkUiComponentContext('mode:design').shouldDisable }),
+          toggleOnReceive(() => providers.checkUiComponentContext('mode:design')),
+          Keying.config({
+            mode: 'special',
-            }),
+            onEnter,
             onLeft: (comp, se) => {
               se.cut();
               return Optional.none();
             },
             onRight: (comp, se) => {
               se.cut();
               return Optional.none();
             }
+          }),
+          config('slider-events', [
+            onControlAttached({
+              onSetup: ctx.onSetup,
+              getApi: getFormApi,
+              onBeforeSetup: Keying.focusIn
+            }, editorOffCell),
+            onControlDetached({ getApi: getFormApi }, editorOffCell),
+            run$1(input(), comp => {
+              ctx.onInput(getFormApi(comp));
+            })
+          ])
+        ])
+      });
+      return createContextFormFieldFromParts(pLabel, pField, providers);
+    };
+    const renderContextFormTextInput = (ctx, providers, onEnter) => {
+      const editorOffCell = Cell(noop);
+      const pLabel = ctx.label.map(label => FormField.parts.label({
+        dom: {
+          tag: 'label',
+          classes: ['tox-label']
+        },
-          })])
+        components: [text$2(providers.translate(label))]
+      }));
+      const placeholder = ctx.placeholder.map(p => ({ placeholder: providers.translate(p) })).getOr({});
+      const inputAttributes = { ...placeholder };
+      const pField = FormField.parts.field({
+        factory: Input,
+        inputClasses: [
+          'tox-toolbar-textfield',
+          'tox-toolbar-nav-item'
+        ],
+        inputAttributes,
+        data: ctx.initValue(),
+        selectOnFocus: true,
+        inputBehaviours: derive$1([
+          Disabling.config({ disabled: () => providers.checkUiComponentContext('mode:design').shouldDisable }),
+          toggleOnReceive(() => providers.checkUiComponentContext('mode:design')),
+          Keying.config({
+            mode: 'special',
+            onEnter,
+            onLeft: (comp, se) => {
+              se.cut();
+              return Optional.none();
+            },
+            onRight: (comp, se) => {
+              se.cut();
+              return Optional.none();
+            }
+          }),
+          config('input-events', [
+            onControlAttached({
+              onSetup: ctx.onSetup,
+              getApi: comp => {
+                const closestFocussableOpt = ancestor(comp.element, '.tox-toolbar').bind(toolbar => descendant(toolbar, 'button:enabled'));
+                return closestFocussableOpt.fold(() => getFormApi(comp), closestFocussable => getFormApi(comp, closestFocussable));
+              },
+              onBeforeSetup: Keying.focusIn
+            }, editorOffCell),
+            onControlDetached({ getApi: getFormApi }, editorOffCell),
+            run$1(input(), comp => {
+              ctx.onInput(getFormApi(comp));
+            })
+          ])
+        ])
+      });
+      return createContextFormFieldFromParts(pLabel, pField, providers);
+    };
+    const buildInitGroup = (f, ctx, providers) => {
+      const onEnter = input => {
+        return startCommands.findPrimary(input).orThunk(() => endCommands.findPrimary(input)).map(primary => {
+          emitExecute(primary);
+          return true;
+        });
+      };
+      const memInput = record(f(providers, onEnter));
+      const commandParts = partition$3(ctx.commands, command => command.align === 'start');
-      }));
+      const startCommands = generate(memInput, commandParts.pass, providers);
-      const commands = generate(memInput, ctx.commands, providers);
+      const endCommands = generate(memInput, commandParts.fail, providers);
+      return filter$2([
+        {
+          title: Optional.none(),
+          label: Optional.none(),
+          items: startCommands.asSpecs()
-      return [
+        },
+        {
+          title: Optional.none(),
-          title: Optional.none(),
+          label: Optional.none(),
           items: [memInput.asSpec()]
         },
+        {
+          title: Optional.none(),
-          title: Optional.none(),
+          label: Optional.none(),
-          items: commands.asSpecs()
+          items: endCommands.asSpecs()
+        }
+      ], group => group.items.length > 0);
+    };
+    const buildInitGroups = (ctx, providers) => {
+      switch (ctx.type) {
+      case 'contextform':
+        return buildInitGroup(curry(renderContextFormTextInput, ctx), ctx, providers);
+      case 'contextsliderform':
+        return buildInitGroup(curry(renderContextFormSliderInput, ctx), ctx, providers);
+      case 'contextsizeinputform':
-        }
+        return buildInitGroup(curry(renderContextFormSizeInput, ctx), ctx, providers);
       ];
     };
     const renderContextForm = (toolbarType, ctx, providers) => renderToolbar({
       type: toolbarType,
       uid: generate$6('context-toolbar'),
     };
     const getSelectionBounds = editor => {
       const rng = editor.selection.getRng();
       const rect = getRangeRect(rng);
       if (editor.inline) {
-        const scroll = get$b();
+        const scroll = get$c();
         return bounds(scroll.left + rect.left, scroll.top + rect.top, rect.width, rect.height);
       } else {
         const bodyPos = absolute$2(SugarElement.fromDom(editor.getBody()));
         return bounds(bodyPos.x + rect.left, bodyPos.y + rect.top, rect.width, rect.height);
+      }
         return preservePosition(contextbar, data.getMode(), () => {
           const isOverlapping = isVerticalOverlap(selectionBounds, box$1(contextbar), -20);
           return isOverlapping && !data.isReposition() ? flip : preserve;
         });
       } else {
-        const yBounds = data.getMode() === 'fixed' ? bounds.y + get$b().top : bounds.y;
+        const yBounds = data.getMode() === 'fixed' ? bounds.y + get$c().top : bounds.y;
-        const contextbarHeight = get$d(contextbar) + bubbleSize$1;
+        const contextbarHeight = get$e(contextbar) + bubbleSize$1;
         return yBounds + contextbarHeight <= selectionBounds.y ? north : south;
+      }
     };
     const getAnchorSpec$2 = (editor, mobile, data, position) => {
       const smartInsetLayout = elem => (anchor, element, bubbles, placee, bounds) => {
         });
       };
       const keys$1 = keys(contextToolbars);
       each$1(keys$1, key => {
         const toolbarApi = contextToolbars[key];
-        if (toolbarApi.type === 'contextform') {
+        if (toolbarApi.type === 'contextform' || toolbarApi.type === 'contextsliderform' || toolbarApi.type === 'contextsizeinputform') {
           registerForm(key, toolbarApi);
         } else if (toolbarApi.type === 'contexttoolbar') {
           registerToolbar(key, toolbarApi);
+        }
       });
         lookupTable,
         formNavigators
       };
     };
-    const forwardSlideEvent = generate$6('forward-slide');
-    const backSlideEvent = generate$6('backward-slide');
-    const changeSlideEvent = generate$6('change-slide-event');
-    const resizingClass = 'tox-pop--resizing';
-    const renderContextToolbar = spec => {
-      const stack = Cell([]);
-      return InlineView.sketch({
-        dom: {
-          tag: 'div',
-          classes: ['tox-pop']
-        },
-        fireDismissalEventInstead: { event: 'doNotDismissYet' },
-        onShow: comp => {
-          stack.set([]);
-          InlineView.getContent(comp).each(c => {
-            remove$6(c.element, 'visibility');
-          });
-          remove$2(comp.element, resizingClass);
-          remove$6(comp.element, 'width');
-        },
-        inlineBehaviours: derive$1([
-          config('context-toolbar-events', [
-            runOnSource(transitionend(), (comp, se) => {
-              if (se.event.raw.propertyName === 'width') {
-                remove$2(comp.element, resizingClass);
-                remove$6(comp.element, 'width');
-              }
-            }),
-            run$1(changeSlideEvent, (comp, se) => {
-              const elem = comp.element;
-              remove$6(elem, 'width');
-              const currentWidth = get$c(elem);
-              InlineView.setContent(comp, se.event.contents);
-              add$2(elem, resizingClass);
-              const newWidth = get$c(elem);
-              set$8(elem, 'width', currentWidth + 'px');
-              InlineView.getContent(comp).each(newContents => {
-                se.event.focus.bind(f => {
-                  focus$3(f);
-                  return search(elem);
-                }).orThunk(() => {
-                  Keying.focusIn(newContents);
-                  return active$1(getRootNode(elem));
-                });
-              });
-              setTimeout(() => {
-                set$8(comp.element, 'width', newWidth + 'px');
-              }, 0);
-            }),
-            run$1(forwardSlideEvent, (comp, se) => {
-              InlineView.getContent(comp).each(oldContents => {
-                stack.set(stack.get().concat([{
-                    bar: oldContents,
-                    focus: active$1(getRootNode(comp.element))
-                  }]));
-              });
-              emitWith(comp, changeSlideEvent, {
-                contents: se.event.forwardContents,
-                focus: Optional.none()
-              });
-            }),
-            run$1(backSlideEvent, (comp, _se) => {
-              last$1(stack.get()).each(last => {
-                stack.set(stack.get().slice(0, stack.get().length - 1));
-                emitWith(comp, changeSlideEvent, {
-                  contents: premade(last.bar),
-                  focus: last.focus
-                });
-              });
-            })
-          ]),
-          Keying.config({
-            mode: 'special',
-            onEscape: comp => last$1(stack.get()).fold(() => spec.onEscape(), _ => {
-              emit(comp, backSlideEvent);
-              return Optional.some(true);
-            })
-          })
-        ]),
-        lazySink: () => Result.value(spec.sink)
-      });
-    };
     const transitionClass = 'tox-pop--transition';
-    const register$9 = (editor, registryContextToolbars, sink, extras) => {
+    const register$a = (editor, registryContextToolbars, sink, extras) => {
       const backstage = extras.backstage;
       const sharedBackstage = backstage.shared;
-      const isTouch = detect$2().deviceType.isTouch;
+      const isTouch = detect$1().deviceType.isTouch;
-      const lastElement = value$2();
+      const lastElement = value$4();
-      const lastTrigger = value$2();
+      const lastTrigger = value$4();
-      const lastContextPosition = value$2();
+      const lastContextPosition = value$4();
       const contextbar = build$1(renderContextToolbar({
         sink,
         onEscape: () => {
+          editor.focus();
-          editor.focus();
+          fireContextToolbarClose(editor);
+          return Optional.some(true);
+        },
+        onHide: () => {
+          fireContextToolbarClose(editor);
+        },
+        onBack: () => {
-          return Optional.some(true);
+          fireContextFormSlideBack(editor);
+        }
       }));
       const getBounds = () => {
         const position = lastContextPosition.get().getOr('node');
         InlineView.hide(contextbar);
       };
       const hideOrRepositionIfNecessary = () => {
         if (InlineView.isOpen(contextbar)) {
           const contextBarEle = contextbar.element;
-          remove$6(contextBarEle, 'display');
+          remove$7(contextBarEle, 'display');
           if (shouldContextToolbarHide()) {
             set$8(contextBarEle, 'display', 'none');
           } else {
             lastTrigger.set(0);
             InlineView.reposition(contextbar);
       });
       const getScopes = cached(() => categorise(registryContextToolbars, toolbarApi => {
         const alloySpec = buildToolbar([toolbarApi]);
         emitWith(contextbar, forwardSlideEvent, { forwardContents: wrapInPopDialog(alloySpec) });
       }));
-      const buildContextToolbarGroups = (allButtons, ctx) => identifyButtons(editor, {
+      const buildContextToolbarGroups = (allButtons, ctx) => {
+        return identifyButtons(editor, {
-        buttons: allButtons,
+          buttons: allButtons,
-        toolbar: ctx.items,
+          toolbar: ctx.items,
-        allowToolbarGroups: false
+          allowToolbarGroups: false
-      }, extras.backstage, Optional.some(['form:']));
+        }, extras.backstage, Optional.some(['form:']));
+      };
       const buildContextFormGroups = (ctx, providers) => ContextForm.buildInitGroups(ctx, providers);
       const buildToolbar = toolbars => {
         const {buttons} = editor.ui.registry.getAll();
         const scopes = getScopes();
         const allButtons = {
           ...buttons,
           ...scopes.formNavigators
         };
         const toolbarType = getToolbarMode(editor) === ToolbarMode$1.scrolling ? ToolbarMode$1.scrolling : ToolbarMode$1.default;
-        const initGroups = flatten(map$2(toolbars, ctx => ctx.type === 'contexttoolbar' ? buildContextToolbarGroups(allButtons, ctx) : buildContextFormGroups(ctx, sharedBackstage.providers)));
+        const initGroups = flatten(map$2(toolbars, ctx => ctx.type === 'contexttoolbar' ? buildContextToolbarGroups(allButtons, contextToolbarToSpec(ctx)) : buildContextFormGroups(ctx, sharedBackstage.providers)));
         return renderToolbar({
           type: toolbarType,
           uid: generate$6('context-toolbar'),
           initGroups,
           onEscape: Optional.none,
         const position = toolbarApi[0].position;
         const anchor = getAnchor(position, elem);
         lastContextPosition.set(position);
         lastTrigger.set(1);
         const contextBarEle = contextbar.element;
-        remove$6(contextBarEle, 'display');
+        remove$7(contextBarEle, 'display');
         if (!isSameLaunchElement(elem)) {
-          remove$2(contextBarEle, transitionClass);
+          remove$3(contextBarEle, transitionClass);
           Positioning.reset(sink, contextbar);
+        }
         InlineView.showWithinBounds(contextbar, wrapInPopDialog(toolbarSpec), {
           anchor,
           transition: {
         editor.on('ScrollContent ScrollWindow ObjectResized ResizeEditor longpress', hideOrRepositionIfNecessary);
         editor.on('click keyup focus SetContent', launchContextToolbar.throttle);
         editor.on(hideContextToolbarEvent, close);
         editor.on(showContextToolbarEvent, e => {
           const scopes = getScopes();
-          get$g(scopes.lookupTable, e.toolbarKey).each(ctx => {
+          get$h(scopes.lookupTable, e.toolbarKey).each(ctx => {
             launchContext([ctx], someIf(e.target !== editor, e.target));
-            InlineView.getContent(contextbar).each(Keying.focusIn);
+            focusIn(contextbar);
           });
         });
         editor.on('focusout', _e => {
           global$9.setEditorTimeout(editor, () => {
             if (search(sink.element).isNone() && search(contextbar.element).isNone()) {
         editor.on('SwitchMode', () => {
           if (editor.mode.isReadOnly()) {
             close();
+          }
         });
+        editor.on('DisabledStateChange', e => {
+          if (e.state) {
+            close();
+          }
+        });
+        editor.on('ExecCommand', ({command}) => {
+          if (command.toLowerCase() === 'toggleview') {
+            close();
+          }
+        });
         editor.on('AfterProgressState', event => {
           if (event.state) {
             close();
           } else if (editor.hasFocus()) {
             launchContextToolbar.throttle();
           search(contextbar.element).fold(launchContextToolbar.throttle, noop);
         });
       });
     };
-    const register$8 = editor => {
+    const register$9 = editor => {
       const alignToolbarButtons = [
+        {
           name: 'alignleft',
           text: 'Align left',
     const registerController = (editor, spec) => {
       const getMenuItems = () => {
         const options = spec.getOptions(editor);
         const initial = spec.getCurrent(editor).map(spec.hash);
-        const current = value$2();
+        const current = value$4();
         return map$2(options, value => ({
           type: 'togglemenuitem',
           text: spec.display(value),
           onSetup: api => {
           return composeUnbinders(unbinder.clear, onSetupEditableToggle(editor)(api));
         },
         onMenuSetup: onSetupEditableToggle(editor)
       }));
     };
-    const register$7 = editor => {
+    const register$8 = editor => {
       registerController(editor, lineHeightSpec(editor));
       languageSpec(editor).each(spec => registerController(editor, spec));
     };
-    const register$6 = (editor, backstage) => {
+    const register$7 = (editor, backstage) => {
       createAlignMenu(editor, backstage);
       createFontFamilyMenu(editor, backstage);
       createStylesMenu(editor, backstage);
       createBlocksMenu(editor, backstage);
       createFontSizeMenu(editor, backstage);
+    };
+    const register$6 = editor => {
+      editor.ui.registry.addContext('editable', () => {
+        return editor.selection.isEditable();
+      });
+      editor.ui.registry.addContext('mode', mode => {
+        return editor.mode.get() === mode;
+      });
+      editor.ui.registry.addContext('any', always);
+      editor.ui.registry.addContext('formatting', format => {
+        return editor.formatter.canApply(format);
+      });
+      editor.ui.registry.addContext('insert', child => {
+        return editor.schema.isValidChild(editor.selection.getNode().tagName, child);
+      });
     };
     const onSetupOutdentState = editor => onSetupEvent(editor, 'NodeChange', api => {
       api.setEnabled(editor.queryCommandState('outdent') && editor.selection.isEditable());
     });
     const registerFormatButtons = editor => {
       global$1.each([
+        {
           name: 'bold',
           text: 'Bold',
-          icon: 'bold'
+          icon: 'bold',
+          shortcut: 'Meta+B'
         },
+        {
           name: 'italic',
           text: 'Italic',
-          icon: 'italic'
+          icon: 'italic',
+          shortcut: 'Meta+I'
         },
+        {
           name: 'underline',
           text: 'Underline',
-          icon: 'underline'
+          icon: 'underline',
+          shortcut: 'Meta+U'
         },
+        {
           name: 'strikethrough',
           text: 'Strikethrough',
           icon: 'strike-through'
       ], (btn, _idx) => {
         editor.ui.registry.addToggleButton(btn.name, {
           tooltip: btn.text,
           icon: btn.icon,
           onSetup: onSetupStateToggle(editor, btn.name),
-          onAction: onActionToggleFormat(editor, btn.name)
+          onAction: onActionToggleFormat(editor, btn.name),
+          shortcut: btn.shortcut
         });
       });
       for (let i = 1; i <= 6; i++) {
         const name = 'h' + i;
+        const shortcut = `Access+${ i }`;
         editor.ui.registry.addToggleButton(name, {
           text: name.toUpperCase(),
           tooltip: 'Heading ' + i,
           onSetup: onSetupStateToggle(editor, name),
-          onAction: onActionToggleFormat(editor, name)
+          onAction: onActionToggleFormat(editor, name),
+          shortcut
         });
+      }
     };
     const registerCommandButtons = editor => {
       global$1.each([
+        {
           name: 'copy',
           text: 'Copy',
           action: 'Copy',
-          icon: 'copy'
+          icon: 'copy',
+          context: 'any'
         },
+        {
           name: 'help',
           text: 'Help',
           action: 'mceHelp',
-          icon: 'help'
+          icon: 'help',
+          shortcut: 'Alt+0',
+          context: 'any'
         },
+        {
           name: 'selectall',
           text: 'Select all',
           action: 'SelectAll',
-          icon: 'select-all'
+          icon: 'select-all',
+          shortcut: 'Meta+A',
+          context: 'any'
         },
+        {
           name: 'newdocument',
           text: 'New document',
           action: 'mceNewDocument',
         },
+        {
           name: 'print',
           text: 'Print',
           action: 'mcePrint',
-          icon: 'print'
+          icon: 'print',
+          shortcut: 'Meta+P',
+          context: 'any'
+        }
       ], btn => {
         editor.ui.registry.addButton(btn.name, {
           tooltip: btn.text,
           icon: btn.icon,
-          onAction: onActionExecCommand(editor, btn.action)
+          onAction: onActionExecCommand(editor, btn.action),
+          shortcut: btn.shortcut,
+          context: btn.context
         });
       });
       global$1.each([
+        {
           name: 'cut',
+        {
           name: 'copy',
           text: 'Copy',
           action: 'Copy',
           icon: 'copy',
-          shortcut: 'Meta+C'
+          shortcut: 'Meta+C',
+          context: 'any'
         },
+        {
           name: 'selectall',
           text: 'Select all',
           action: 'SelectAll',
           icon: 'select-all',
-          shortcut: 'Meta+A'
+          shortcut: 'Meta+A',
+          context: 'any'
         },
+        {
           name: 'print',
           text: 'Print...',
           action: 'mcePrint',
           icon: 'print',
-          shortcut: 'Meta+P'
+          shortcut: 'Meta+P',
+          context: 'any'
+        }
       ], menuitem => {
         editor.ui.registry.addMenuItem(menuitem.name, {
           text: menuitem.text,
           icon: menuitem.icon,
           shortcut: menuitem.shortcut,
-          onAction: onActionExecCommand(editor, menuitem.action)
+          onAction: onActionExecCommand(editor, menuitem.action),
+          context: menuitem.context
         });
       });
       global$1.each([
+        {
           name: 'bold',
       editor.ui.registry.addButton('undo', {
         tooltip: 'Undo',
         icon: 'undo',
         enabled: false,
         onSetup: onSetupUndoRedoState(editor, 'hasUndo'),
-        onAction: onActionExecCommand(editor, 'undo')
+        onAction: onActionExecCommand(editor, 'undo'),
+        shortcut: 'Meta+Z'
       });
       editor.ui.registry.addButton('redo', {
         tooltip: 'Redo',
         icon: 'redo',
         enabled: false,
         onSetup: onSetupUndoRedoState(editor, 'hasRedo'),
-        onAction: onActionExecCommand(editor, 'redo')
+        onAction: onActionExecCommand(editor, 'redo'),
+        shortcut: 'Meta+Y'
       });
     };
     const register$2 = editor => {
       registerMenuItems$1(editor);
       registerButtons(editor);
     });
     const registerMenuItems = editor => {
       editor.ui.registry.addToggleMenuItem('visualaid', {
         text: 'Visual aids',
         onSetup: onSetupVisualAidState(editor),
-        onAction: onActionExecCommand(editor, 'mceToggleVisualAid')
+        onAction: onActionExecCommand(editor, 'mceToggleVisualAid'),
+        context: 'any'
       });
     };
     const registerToolbarButton = editor => {
       editor.ui.registry.addButton('visualaid', {
         tooltip: 'Visual aids',
         text: 'Visual aids',
-        onAction: onActionExecCommand(editor, 'mceToggleVisualAid')
+        onAction: onActionExecCommand(editor, 'mceToggleVisualAid'),
+        context: 'any'
       });
     };
     const register$1 = editor => {
       registerToolbarButton(editor);
       registerMenuItems(editor);
     };
     const setup$6 = (editor, backstage) => {
-      register$8(editor);
+      register$9(editor);
       register$3(editor);
-      register$6(editor, backstage);
+      register$7(editor, backstage);
       register$2(editor);
-      register$c(editor);
+      register$d(editor);
       register$1(editor);
       register$5(editor);
-      register$7(editor);
+      register$8(editor);
+      register$4(editor);
-      register$4(editor);
+      register$6(editor);
     };
     const patchPipeConfig = config => isString(config) ? config.split(/[ ,]/) : config;
       } else {
         return nu(e.clientX, e.clientY);
+      }
     };
     const transposeContentAreaContainer = (element, pos) => {
-      const containerPos = global$7.DOM.getPos(element);
+      const containerPos = global$8.DOM.getPos(element);
       return transpose(pos, containerPos.x, containerPos.y);
     };
     const getPointAnchor = (editor, e) => {
       if (e.type === 'contextmenu' || e.type === 'longpress') {
         if (editor.inline) {
         }, () => Optional.some(getContextToolbarBounds(editor, backstage.shared, anchorType === 'node' ? 'node' : 'selection')));
         editor.dispatch(hideContextToolbarEvent);
       });
     };
     const initAndShow = (editor, e, buildMenu, backstage, contextmenu, anchorType) => {
-      const detection = detect$2();
+      const detection = detect$1();
       const isiOS = detection.os.isiOS();
       const isMacOS = detection.os.isMacOS();
       const isAndroid = detection.os.isAndroid();
       const isTouch = detection.deviceType.isTouch();
       const shouldHighlightImmediately = () => !(isAndroid || isiOS || isMacOS && isTouch);
       const before = lastMenuItem.fold(() => [], _ => [separator]);
       return xs.concat(before).concat(groupItems).concat([separator]);
     };
     const generateContextMenu = (contextMenus, menuConfig, selectedElement) => {
       const sections = foldl(menuConfig, (acc, name) => {
-        return get$g(contextMenus, name.toLowerCase()).map(menu => {
+        return get$h(contextMenus, name.toLowerCase()).map(menu => {
           const items = menu.update(selectedElement);
           if (isString(items) && isNotEmpty(trim$1(items))) {
             return addContextMenuGroup(acc, items.split(' '));
           } else if (isArray(items) && items.length > 0) {
             const allItems = map$2(items, makeContextItem);
       } else {
         return anchorType;
+      }
     };
     const setup$5 = (editor, lazySink, backstage) => {
-      const detection = detect$2();
+      const detection = detect$1();
       const isTouch = detection.deviceType.isTouch;
       const contextmenu = build$1(InlineView.sketch({
         dom: { tag: 'div' },
         lazySink,
         onEscape: () => editor.focus(),
     const offset = adt.offset;
     const absolute = adt.absolute;
     const fixed = adt.fixed;
     const parseAttrToInt = (element, name) => {
-      const value = get$f(element, name);
+      const value = get$g(element, name);
       return isUndefined(value) ? NaN : parseInt(value, 10);
     };
-    const get = (component, snapsInfo) => {
+    const get$1 = (component, snapsInfo) => {
       const element = component.element;
       const x = parseAttrToInt(element, snapsInfo.leftAttr);
       const y = parseAttrToInt(element, snapsInfo.topAttr);
       return isNaN(x) || isNaN(y) ? Optional.none() : Optional.some(SugarPosition(x, y));
       set$9(element, snapsInfo.leftAttr, pt.left + 'px');
       set$9(element, snapsInfo.topAttr, pt.top + 'px');
     };
     const clear = (component, snapsInfo) => {
       const element = component.element;
-      remove$7(element, snapsInfo.leftAttr);
+      remove$8(element, snapsInfo.leftAttr);
-      remove$7(element, snapsInfo.topAttr);
+      remove$8(element, snapsInfo.topAttr);
     };
-    const getCoords = (component, snapInfo, coord, delta) => get(component, snapInfo).fold(() => coord, fixed$1 => fixed(fixed$1.left + delta.left, fixed$1.top + delta.top));
+    const getCoords = (component, snapInfo, coord, delta) => get$1(component, snapInfo).fold(() => coord, fixed$1 => fixed(fixed$1.left + delta.left, fixed$1.top + delta.top));
     const moveOrSnap = (component, snapInfo, coord, delta, scroll, origin) => {
       const newCoord = getCoords(component, snapInfo, coord, delta);
       const snap = snapInfo.mustSnap ? findClosestSnap(component, snapInfo, newCoord, scroll, origin) : findSnap(component, snapInfo, newCoord, scroll, origin);
       const fixedCoord = asFixed(newCoord, scroll, origin);
     const snapTo = (component, dragConfig, _state, snap) => {
       const target = dragConfig.getTarget(component.element);
       if (dragConfig.repositionTarget) {
         const doc = owner$4(component.element);
-        const scroll = get$b(doc);
+        const scroll = get$c(doc);
         const origin = getOrigin(target);
         const snapPin = snapTo$1(snap, scroll, origin);
         const styles = toStyles(snapPin.coord, scroll, origin);
         setOptions(target, styles);
     });
     const initialAttribute = 'data-initial-z-index';
     const resetZIndex = blocker => {
       parent(blocker.element).filter(isElement$1).each(root => {
-        getOpt(root, initialAttribute).fold(() => remove$6(root, 'z-index'), zIndex => set$8(root, 'z-index', zIndex));
+        getOpt(root, initialAttribute).fold(() => remove$7(root, 'z-index'), zIndex => set$8(root, 'z-index', zIndex));
-        remove$7(root, initialAttribute);
+        remove$8(root, initialAttribute);
       });
     };
     const changeZIndex = blocker => {
       parent(blocker.element).filter(isElement$1).each(root => {
         getRaw(root, 'z-index').each(zindex => {
           set$9(root, initialAttribute, zindex);
         });
-        set$8(root, 'z-index', get$e(blocker.element, 'z-index'));
+        set$8(root, 'z-index', get$f(blocker.element, 'z-index'));
       });
     };
     const instigate = (anyComponent, blocker) => {
       anyComponent.getSystem().addToGui(blocker);
     };
     const dragBy = (component, dragConfig, startData, delta) => {
       const target = dragConfig.getTarget(component.element);
       if (dragConfig.repositionTarget) {
         const doc = owner$4(component.element);
-        const scroll = get$b(doc);
+        const scroll = get$c(doc);
         const origin = getOrigin(target);
         const currentCoord = getCurrentCoord(target);
         const newCoord = calcNewCoord(component, dragConfig.snaps, currentCoord, scroll, origin, delta, startData);
         const styles = toStyles(newCoord, scroll, origin);
         setOptions(target, styles);
         getData: getData,
         getDelta: getDelta
     });
     const events$2 = (dragConfig, dragState, updateStartState) => {
-      const blockerSingleton = value$2();
+      const blockerSingleton = value$4();
       const stopBlocking = component => {
         stop(component, blockerSingleton.get(), dragConfig, dragState);
         blockerSingleton.clear();
       };
       const setStartData = data => {
         startData = Optional.some(data);
       };
       const getStartData = () => startData;
       const readState = constant$1({});
-      return nu$8({
+      return nu$7({
         readState,
         reset,
         update,
         getStartData,
         setStartData
     }));
     const setup$4 = (editor, sink) => {
       const tlTds = Cell([]);
       const brTds = Cell([]);
       const isVisible = Cell(false);
-      const startCell = value$2();
+      const startCell = value$4();
-      const finishCell = value$2();
+      const finishCell = value$4();
       const getTopLeftSnap = td => {
         const box = absolute$2(td);
         return calcSnap(memTopLeft.getOpt(sink), td, box.x, box.y, box.width, box.height);
       };
       const getTopLeftSnaps = () => map$2(tlTds.get(), td => getTopLeftSnap(td));
       const memBottomRight = createSelector(bottomRightSnaps);
       const topLeft = build$1(memTopLeft.asSpec());
       const bottomRight = build$1(memBottomRight.asSpec());
       const showOrHideHandle = (selector, cell, isAbove, isBelow) => {
         const cellRect = cell.dom.getBoundingClientRect();
-        remove$6(selector.element, 'display');
+        remove$7(selector.element, 'display');
         const viewportHeight = defaultView(SugarElement.fromDom(editor.getBody())).dom.innerHeight;
         const aboveViewport = isAbove(cellRect);
         const belowViewport = isBelow(cellRect, viewportHeight);
         if (aboveViewport || belowViewport) {
           set$8(selector.element, 'display', 'none');
       };
       const snapTopLeft = cell => snapTo(topLeft, cell, getTopLeftSnap, 'top');
       const snapLastTopLeft = () => startCell.get().each(snapTopLeft);
       const snapBottomRight = cell => snapTo(bottomRight, cell, getBottomRightSnap, 'bottom');
       const snapLastBottomRight = () => finishCell.get().each(snapBottomRight);
-      if (detect$2().deviceType.isTouch()) {
+      if (detect$1().deviceType.isTouch()) {
+        const domToSugar = arr => map$2(arr, SugarElement.fromDom);
         editor.on('TableSelectionChange', e => {
           if (!isVisible.get()) {
             attach(sink, topLeft);
             attach(sink, bottomRight);
             isVisible.set(true);
+          }
+          const start = SugarElement.fromDom(e.start);
+          const finish = SugarElement.fromDom(e.finish);
-          startCell.set(e.start);
+          startCell.set(start);
-          finishCell.set(e.finish);
+          finishCell.set(finish);
-          e.otherCells.each(otherCells => {
+          Optional.from(e.otherCells).each(otherCells => {
-            tlTds.set(otherCells.upOrLeftCells);
+            tlTds.set(domToSugar(otherCells.upOrLeftCells));
-            brTds.set(otherCells.downOrRightCells);
+            brTds.set(domToSugar(otherCells.downOrRightCells));
-            snapTopLeft(e.start);
+            snapTopLeft(start);
-            snapBottomRight(e.finish);
+            snapBottomRight(finish);
           });
         });
         editor.on('ResizeEditor ResizeWindow ScrollContent', () => {
           snapLastTopLeft();
           snapLastBottomRight();
           finishCell.clear();
         });
+      }
     };
+    var Logo = "<svg height=\"16\" viewBox=\"0 0 80 16\" width=\"80\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\".8\"><path d=\"m80 3.537v-2.202h-7.976v11.585h7.976v-2.25h-5.474v-2.621h4.812v-2.069h-4.812v-2.443zm-10.647 6.929c-.493.217-1.13.337-1.864.337s-1.276-.156-1.805-.47a3.732 3.732 0 0 1 -1.3-1.298c-.324-.554-.48-1.191-.48-1.877s.156-1.335.48-1.877a3.635 3.635 0 0 1 1.3-1.299 3.466 3.466 0 0 1 1.805-.481c.65 0 .914.06 1.263.18.36.12.698.277.986.47.289.192.578.384.842.6l.12.085v-2.586l-.023-.024c-.385-.35-.855-.614-1.384-.818-.53-.205-1.155-.313-1.877-.313-.721 0-1.6.144-2.333.445a5.773 5.773 0 0 0 -1.937 1.251 5.929 5.929 0 0 0 -1.324 1.9c-.324.735-.48 1.565-.48 2.455s.156 1.72.48 2.454c.325.734.758 1.383 1.324 1.913.553.53 1.215.938 1.937 1.25a6.286 6.286 0 0 0 2.333.434c.819 0 1.384-.108 1.961-.313.59-.216 1.083-.505 1.468-.866l.024-.024v-2.49l-.12.096c-.41.337-.878.626-1.396.866zm-14.869-4.15-4.8-5.04-.024-.025h-.902v11.67h2.502v-6.847l2.827 3.08.385.409.397-.41 2.791-3.067v6.845h2.502v-11.679h-.902l-4.788 5.052z\"/><path clip-rule=\"evenodd\" d=\"m15.543 5.137c0-3.032-2.466-5.113-4.957-5.137-.36 0-.745.024-1.094.096-.157.024-3.85.758-3.85.758-3.032.602-4.62 2.466-4.704 4.788-.024.89-.024 4.27-.024 4.27.036 3.165 2.406 5.138 5.017 5.126.337 0 1.119-.109 1.287-.145.144-.024.385-.084.746-.144.661-.12 1.684-.325 3.067-.602 2.37-.409 4.103-2.009 4.44-4.33.156-1.023.084-4.692.084-4.692zm-3.213 3.308-2.346.457v2.31l-5.859 1.143v-5.75l2.346-.458v3.441l3.513-.686v-3.44l-3.513.685v-2.297l5.859-1.143v5.75zm20.09-3.296-.083-1.023h-2.13v8.794h2.346v-4.884c0-1.107.95-1.985 2.057-1.997 1.095 0 1.901.89 1.901 1.997v4.884h2.346v-5.245c-.012-2.105-1.588-3.777-3.67-3.765a3.764 3.764 0 0 0 -2.778 1.25l.012-.011zm-6.014-4.102 2.346-.458v2.298l-2.346.457z\" fill-rule=\"evenodd\"/><path d=\"m28.752 4.126h-2.346v8.794h2.346z\"/><path clip-rule=\"evenodd\" d=\"m43.777 15.483 4.043-11.357h-2.418l-1.54 4.355-.445 1.324-.36-1.324-1.54-4.355h-2.418l3.151 8.794-1.083 3.08zm-21.028-5.51c0 .722.541 1.034.878 1.034s.638-.048.95-.144l.518 1.708c-.217.145-.879.518-2.13.518a2.565 2.565 0 0 1 -2.562-2.587c-.024-1.082-.024-2.49 0-4.21h-1.54v-2.142h1.54v-1.912l2.346-.458v2.37h2.201v2.142h-2.2v3.693-.012z\" fill-rule=\"evenodd\"/></g></svg>\n";
+    const describedBy = (describedElement, describeElement) => {
+      const describeId = Optional.from(get$g(describedElement, 'id')).getOrThunk(() => {
+        const id = generate$6('aria');
+        set$9(describeElement, 'id', id);
+        return id;
+      });
+      set$9(describedElement, 'aria-describedby', describeId);
+    };
+    const remove = describedElement => {
+      remove$8(describedElement, 'aria-describedby');
-    var Logo = "<svg width=\"50px\" height=\"16px\" viewBox=\"0 0 50 16\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.143 0c2.608.015 5.186 2.178 5.186 5.331 0 0 .077 3.812-.084 4.87-.361 2.41-2.164 4.074-4.65 4.496-1.453.284-2.523.49-3.212.623-.373.071-.634.122-.785.152-.184.038-.997.145-1.35.145-2.732 0-5.21-2.04-5.248-5.33 0 0 0-3.514.03-4.442.093-2.4 1.758-4.342 4.926-4.963 0 0 3.875-.752 4.036-.782.368-.07.775-.1 1.15-.1Zm1.826 2.8L5.83 3.989v2.393l-2.455.475v5.968l6.137-1.189V9.243l2.456-.476V2.8ZM5.83 6.382l3.682-.713v3.574l-3.682.713V6.382Zm27.173-1.64-.084-1.066h-2.226v9.132h2.456V7.743c-.008-1.151.998-2.064 2.149-2.072 1.15-.008 1.987.92 1.995 2.072v5.065h2.455V7.359c-.015-2.18-1.657-3.929-3.837-3.913a3.993 3.993 0 0 0-2.908 1.296Zm-6.3-4.266L29.16 0v2.387l-2.456.475V.476Zm0 3.2v9.132h2.456V3.676h-2.456Zm18.179 11.787L49.11 3.676H46.58l-1.612 4.527-.46 1.382-.384-1.382-1.611-4.527H39.98l3.3 9.132L42.15 16l2.732-.537ZM22.867 9.738c0 .752.568 1.075.921 1.075.353 0 .668-.047.998-.154l.537 1.765c-.23.154-.92.537-2.225.537-1.305 0-2.655-.997-2.686-2.686a136.877 136.877 0 0 1 0-4.374H18.8V3.676h1.612v-1.98l2.455-.476v2.456h2.302V5.9h-2.302v3.837Z\"/>\n</svg>\n";
+    };
     const isHidden = elm => elm.nodeName === 'BR' || !!elm.getAttribute('data-mce-bogus') || elm.getAttribute('data-mce-type') === 'bookmark';
     const renderElementPath = (editor, settings, providersBackstage) => {
       var _a;
       const delimiter = (_a = settings.delimiter) !== null && _a !== void 0 ? _a : '\u203A';
       const renderElement = (name, element, index) => Button.sketch({
         dom: {
-          tag: 'div',
-          classes: ['tox-statusbar__path-item'],
+          tag: 'div',
-          attributes: {
-            'data-index': index,
-            'aria-level': index + 1
+          classes: ['tox-statusbar__path-item'],
           attributes: { 'data-index': index }
         },
         components: [text$2(name)],
         action: _btn => {
           editor.focus();
           editor.selection.select(element);
           editor.nodeChanged();
+        },
+        buttonBehaviours: derive$1([
+          Tooltipping.config({
+            ...providersBackstage.tooltips.getConfig({
+              tooltipText: providersBackstage.translate([
+                'Select the {0} element',
+                element.nodeName.toLowerCase()
+              ]),
+              onShow: (comp, tooltip) => {
+                describedBy(comp.element, tooltip.element);
+              },
+              onHide: comp => {
+                remove(comp.element);
+              }
-        },
+            })
-        buttonBehaviours: derive$1([
+          }),
           DisablingConfigs.button(providersBackstage.isDisabled),
-          receivingConfig()
+          toggleOnReceive(() => providersBackstage.checkUiComponentContext('any'))
         ])
       });
       const renderDivider = () => ({
           Keying.config({
             mode: 'flow',
             selector: 'div[role=button]'
           }),
           Disabling.config({ disabled: providersBackstage.isDisabled }),
-          receivingConfig(),
+          toggleOnReceive(() => providersBackstage.checkUiComponentContext('any')),
           Tabstopping.config({}),
           Replacing.config({}),
           config('elementPathEvents', [runOnAttached((comp, _e) => {
               editor.shortcuts.add('alt+F11', 'focus statusbar elementpath', () => Keying.focusIn(comp));
               editor.on('NodeChange', e => {
+      }
       return dimensions;
     };
     const resize = (editor, deltas, resizeType) => {
       const container = SugarElement.fromDom(editor.getContainer());
-      const dimensions = getDimensions(editor, deltas, resizeType, get$d(container), get$c(container));
+      const dimensions = getDimensions(editor, deltas, resizeType, get$e(container), get$d(container));
       each(dimensions, (val, dim) => {
         if (isNumber(val)) {
           set$8(container, dim, numToPx(val));
+        }
       });
       const resizeLabel = resizeType === ResizeTypes.Both ? 'Press the arrow keys to resize the editor.' : 'Press the Up and Down arrow keys to resize the editor.';
       return Optional.some(render$3('resize-handle', {
         tag: 'div',
         classes: ['tox-statusbar__resize-handle'],
         attributes: {
-          'title': providersBackstage.translate('Resize'),
+          'aria-label': providersBackstage.translate(resizeLabel),
-          'aria-label': providersBackstage.translate(resizeLabel)
+          'data-mce-name': 'resize-handle'
         },
         behaviours: [
           Dragging.config({
             mode: 'mouse',
             repositionTarget: false,
             onRight: () => keyboardHandler(editor, resizeType, 1, 0),
             onUp: () => keyboardHandler(editor, resizeType, 0, -1),
             onDown: () => keyboardHandler(editor, resizeType, 0, 1)
           }),
           Tabstopping.config({}),
-          Focusing.config({})
+          Focusing.config({}),
+          Tooltipping.config(providersBackstage.tooltips.getConfig({ tooltipText: providersBackstage.translate('Resize') }))
+        ]
       }, providersBackstage.icons));
     };
           classes: ['tox-statusbar__wordcount']
         },
         components: [],
         buttonBehaviours: derive$1([
           DisablingConfigs.button(providersBackstage.isDisabled),
-          receivingConfig(),
+          toggleOnReceive(() => providersBackstage.checkUiComponentContext('any')),
           Tabstopping.config({}),
           Replacing.config({}),
           Representing.config({
             store: {
               mode: 'memory',
           },
           components: [{
               dom: {
                 tag: 'a',
                 attributes: {
-                  'href': 'https://www.tiny.cloud/powered-by-tiny?utm_campaign=poweredby&utm_source=tiny&utm_medium=referral&utm_content=v6',
+                  'href': 'https://www.tiny.cloud/powered-by-tiny?utm_campaign=poweredby&utm_source=tiny&utm_medium=referral&utm_content=v7',
                   'rel': 'noopener',
                   'target': '_blank',
-                  'aria-label': global$8.translate([
+                  'aria-label': editor.translate([
-                    'Powered by {0}',
+                    'Build with {0}',
-                    'Tiny'
+                    'TinyMCE'
                   ])
                 },
+                innerHtml: editor.translate([
+                  'Build with {0}',
-                innerHtml: Logo.trim()
+                  Logo.trim()
+                ])
               },
               behaviours: derive$1([Focusing.config({})])
             }]
         };
       };
         return {
           dom: {
             tag: 'div',
             classes: ['tox-statusbar__help-text']
           },
-          components: [text$2(global$8.translate([
+          components: [text$2(global$5.translate([
               text,
               shortcutText
             ]))]
         };
       };
     const setup$3 = (editor, setupForTheme) => {
       const isInline = editor.inline;
       const mode = isInline ? Inline : Iframe;
       const header = isStickyToolbar(editor) ? StickyHeader : StaticHeader;
       const lazyUiRefs = LazyUiReferences();
-      const lazyMothership = value$2();
+      const lazyMothership = value$4();
-      const lazyDialogMothership = value$2();
+      const lazyDialogMothership = value$4();
-      const lazyPopupMothership = value$2();
+      const lazyPopupMothership = value$4();
-      const platform = detect$2();
+      const platform = detect$1();
       const isTouch = platform.deviceType.isTouch();
       const touchPlatformClass = 'tox-platform-touch';
       const deviceClasses = isTouch ? [touchPlatformClass] : [];
       const isToolbarBottom = isToolbarLocationBottom(editor);
       const toolbarMode = getToolbarMode(editor);
       const lazyPopupSinkResult = () => Result.fromOption(lazyUiRefs.popupUi.get().map(ui => ui.sink), '(popup) UI has not been rendered');
       const lazyAnchorBar = lazyUiRefs.lazyGetInOuterOrDie('anchor bar', memAnchorBar.getOpt);
       const lazyBottomAnchorBar = lazyUiRefs.lazyGetInOuterOrDie('bottom anchor bar', memBottomAnchorBar.getOpt);
       const lazyToolbar = lazyUiRefs.lazyGetInOuterOrDie('toolbar', OuterContainer.getToolbar);
       const lazyThrobber = lazyUiRefs.lazyGetInOuterOrDie('throbber', OuterContainer.getThrobber);
-      const backstages = init$6({
+      const backstages = init$5({
         popup: lazyPopupSinkResult,
         dialog: lazyDialogSinkResult
       }, editor, lazyAnchorBar, lazyBottomAnchorBar);
       const makeHeaderPart = () => {
         const verticalDirAttributes = { attributes: { [Attribute]: isToolbarBottom ? AttributeValue.BottomToTop : AttributeValue.TopToBottom } };
+          ]
         };
       };
       const renderDialogUi = () => {
         const uiContainer = getUiContainer(editor);
-        const isGridUiContainer = eq(body(), uiContainer) && get$e(uiContainer, 'display') === 'grid';
+        const isGridUiContainer = eq(body(), uiContainer) && get$f(uiContainer, 'display') === 'grid';
         const sinkSpec = {
           dom: {
             tag: 'div',
             classes: [
               'tox',
               'tox-silver-sink',
               'tox-tinymce-aux'
             ].concat(deviceClasses),
-            attributes: { ...global$8.isRtl() ? { dir: 'rtl' } : {} }
+            attributes: { ...global$5.isRtl() ? { dir: 'rtl' } : {} }
           },
           behaviours: derive$1([Positioning.config({ useFixed: () => header.isDocked(lazyHeader) })])
         };
         const reactiveWidthSpec = {
           dom: { styles: { width: document.body.clientWidth + 'px' } },
               'tox',
               'tox-silver-sink',
               'tox-silver-popup-sink',
               'tox-tinymce-aux'
             ].concat(deviceClasses),
-            attributes: { ...global$8.isRtl() ? { dir: 'rtl' } : {} }
+            attributes: { ...global$5.isRtl() ? { dir: 'rtl' } : {} }
           },
           behaviours: derive$1([Positioning.config({
               useFixed: () => header.isDocked(lazyHeader),
               getBounds: () => setupForTheme.getPopupSinkBounds()
             })])
           isToolbarBottom ? [partHeader] : []
         ]);
         const editorContainer = OuterContainer.parts.editorContainer({
           components: flatten([
             editorComponents,
-            isInline ? [] : [
-              memBottomAnchorBar.asSpec(),
+            isInline ? [] : [memBottomAnchorBar.asSpec()]
-              ...statusbar.toArray()
-            ]
           ])
         });
         const isHidden = isDistractionFree(editor);
         const attributes = {
           role: 'application',
-          ...global$8.isRtl() ? { dir: 'rtl' } : {},
+          ...global$5.isRtl() ? { dir: 'rtl' } : {},
           ...isHidden ? { 'aria-hidden': 'true' } : {}
         };
         const outerContainer = build$1(OuterContainer.sketch({
           dom: {
             tag: 'div',
             },
             attributes
           },
           components: [
             editorContainer,
-            ...isInline ? [] : [partViewWrapper],
+            ...isInline ? [] : [
+              partViewWrapper,
+              ...statusbar.toArray()
+            ],
             partThrobber
           ],
           behaviours: derive$1([
-            receivingConfig(),
+            toggleOnReceive(() => backstages.popup.shared.providers.checkUiComponentContext('any')),
             Disabling.config({ disableClass: 'tox-tinymce--disabled' }),
             Keying.config({
               mode: 'cyclic',
               selector: '.tox-menubar, .tox-toolbar, .tox-toolbar__primary, .tox-toolbar__overflow--open, .tox-sidebar__overflow--open, .tox-statusbar__path, .tox-statusbar__wordcount, .tox-statusbar__branding a, .tox-statusbar__resize-handle'
             })
         header.setup(editor, backstages.popup.shared, lazyHeader);
         setup$6(editor, backstages.popup);
         setup$5(editor, backstages.popup.shared.getSink, backstages.popup);
         setup$8(editor);
         setup$7(editor, lazyThrobber, backstages.popup.shared);
-        register$9(editor, contextToolbars, popupUi.sink, { backstage: backstages.popup });
+        register$a(editor, contextToolbars, popupUi.sink, { backstage: backstages.popup });
         setup$4(editor, popupUi.sink);
         const elm = editor.getElement();
         const height = setEditorSize(mainUi.outerContainer);
         const args = {
           targetNode: elm,
         },
         renderUI
       };
     };
+    const get = element => element.dom.textContent;
     const labelledBy = (labelledElement, labelElement) => {
       const labelId = getOpt(labelledElement, 'id').fold(() => {
         const id = generate$6('dialog-label');
         set$9(labelElement, 'id', id);
         name: 'blocker'
       })
     ]);
     const factory$4 = (detail, components, spec, externals) => {
-      const dialogComp = value$2();
+      const dialogComp = value$4();
       const showDialog = dialog => {
         dialogComp.set(dialog);
         const sink = detail.lazySink(dialog).getOrDie();
         const externalBlocker = externals.blocker();
       const modalEventsId = generate$6('modal-events');
       const eventOrder = {
         ...detail.eventOrder,
         [attachedToDom()]: [modalEventsId].concat(detail.eventOrder['alloy.system.attached'] || [])
       };
+      const browser = detect$1();
       return {
         uid: detail.uid,
         dom: detail.dom,
         components,
         apis: {
             useTabstopAt: detail.useTabstopAt,
             firstTabstop: detail.firstTabstop
           }),
           Blocking.config({ getRoot: dialogComp.get }),
           config(modalEventsId, [runOnAttached(c => {
-              labelledBy(c.element, getPartOrDie(c, detail, 'title').element);
+              const titleElm = getPartOrDie(c, detail, 'title').element;
+              const title = get(titleElm);
+              if (browser.os.isMacOS() && isNonNullable(title)) {
+                set$9(c.element, 'aria-label', title);
+              } else {
+                labelledBy(c.element, titleElm);
+              }
             })])
         ])
       };
     };
     const ModalDialog = composite({
       primary,
       enabled,
       optionStringEnum('buttonType', [
         'primary',
         'secondary'
-      ])
+      ]),
+      defaultedString('context', 'mode:design')
     ];
     const dialogFooterButtonFields = [
       ...baseFooterButtonFields,
       text
     ];
       ...baseFooterButtonFields
     ];
     const toggleButtonSpecFields = [
       ...baseFooterButtonFields,
       requiredStringEnum('type', ['togglebutton']),
-      requiredString('tooltip'),
+      optionalTooltip,
       optionalIcon,
       optionalText,
       defaultedBoolean('active', false)
     ];
     const dialogFooterButtonSchema = choose$1('type', {
       optionStringEnum('buttonType', [
         'primary',
         'secondary',
         'toolbar'
       ]),
-      primary
+      primary,
+      defaultedString('context', 'mode:design')
     ];
     const buttonSchema = objOf(buttonFields);
     const formComponentFields = [
     ];
     const formComponentWithLabelFields = formComponentFields.concat([optionalLabel]);
     const checkboxFields = formComponentFields.concat([
       label,
+      enabled,
-      enabled
+      defaultedString('context', 'mode:design')
     ]);
     const checkboxSchema = objOf(checkboxFields);
     const checkboxDataProcessor = boolean;
+    const collectionFields = formComponentWithLabelFields.concat([
+      defaultedColumns('auto'),
       defaultedString('context', 'mode:design')
-    const collectionFields = formComponentWithLabelFields.concat([defaultedColumns('auto')]);
+    ]);
     const collectionSchema = objOf(collectionFields);
     const collectionDataProcessor = arrOfObj([
       value$1,
       text,
       icon
+    ]);
+    const colorInputFields = formComponentWithLabelFields.concat([
-    ]);
+      defaultedString('storageKey', 'default'),
       defaultedString('context', 'mode:design')
-    const colorInputFields = formComponentWithLabelFields.concat([defaultedString('storageKey', 'default')]);
+    ]);
     const colorInputSchema = objOf(colorInputFields);
     const customEditorFields = formComponentFields.concat([
       defaultedString('tag', 'textarea'),
       requiredString('scriptId'),
+      requiredString('scriptUrl'),
-      requiredString('scriptUrl'),
+      optionFunction('onFocus'),
       defaultedPostMsg('settings', undefined)
     ]);
     const customEditorFieldsOld = formComponentFields.concat([
       defaultedString('tag', 'textarea'),
       requiredFunction('init')
     ]);
     const customEditorSchema = valueOf(v => asRaw('customeditor.old', objOfOnly(customEditorFieldsOld), v).orThunk(() => asRaw('customeditor.new', objOfOnly(customEditorFields), v)));
     const customEditorDataProcessor = string;
-    const dropZoneFields = formComponentWithLabelFields;
+    const dropZoneFields = formComponentWithLabelFields.concat([defaultedString('context', 'mode:design')]);
     const dropZoneSchema = objOf(dropZoneFields);
     const dropZoneDataProcessor = arrOfVal();
       type,
       requiredString('html'),
       defaultedStringEnum('presets', 'presentation', [
         'presentation',
         'document'
-      ])
+      ]),
+      defaultedFunction('onInit', noop),
+      defaultedBoolean('stretched', false)
     ];
     const htmlPanelSchema = objOf(htmlPanelFields);
     const iframeFields = formComponentWithLabelFields.concat([
     const inputFields = formComponentWithLabelFields.concat([
       optionString('inputMode'),
       optionString('placeholder'),
       defaultedBoolean('maximized', false),
+      enabled,
-      enabled
+      defaultedString('context', 'mode:design')
     ]);
     const inputSchema = objOf(inputFields);
     const inputDataProcessor = string;
       itemsField,
       defaultedStringEnum('align', 'start', [
         'start',
         'center',
         'end'
-      ])
+      ]),
+      optionString('for')
     ];
     const listBoxSingleItemFields = [
       text,
       objOf(listBoxSingleItemFields),
       objOf(listBoxNestedItemFields)
     ]);
     const listBoxFields = formComponentWithLabelFields.concat([
       requiredArrayOf('items', listBoxItemSchema),
-      enabled
+      enabled,
+      defaultedString('context', 'mode:design')
     ]);
     const listBoxSchema = objOf(listBoxFields);
     const listBoxDataProcessor = string;
     const selectBoxFields = formComponentWithLabelFields.concat([
       requiredArrayOfObj('items', [
         text,
         value$1
       ]),
       defaultedNumber('size', 1),
+      enabled,
-      enabled
+      defaultedString('context', 'mode:design')
     ]);
     const selectBoxSchema = objOf(selectBoxFields);
     const selectBoxDataProcessor = string;
     const sizeInputFields = formComponentWithLabelFields.concat([
+      defaultedBoolean('constrain', true),
-      defaultedBoolean('constrain', true),
+      enabled,
-      enabled
+      defaultedString('context', 'mode:design')
     ]);
     const sizeInputSchema = objOf(sizeInputFields);
     const sizeInputDataProcessor = objOf([
     const tableSchema = objOf(tableFields);
     const textAreaFields = formComponentWithLabelFields.concat([
       optionString('placeholder'),
       defaultedBoolean('maximized', false),
+      enabled,
-      enabled
+      defaultedString('context', 'mode:design')
     ]);
     const textAreaSchema = objOf(textAreaFields);
     const textAreaDataProcessor = string;
         'directory',
         'leaf'
       ]),
       title,
       requiredString('id'),
-      optionOf('menu', MenuButtonSchema)
+      optionOf('menu', MenuButtonSchema),
+      optionString('customStateIcon'),
+      optionString('customStateIconTooltip')
     ];
     const treeItemLeafFields = baseTreeItemFields;
     const treeItemLeafSchema = objOf(treeItemLeafFields);
     const treeItemDirectoryFields = baseTreeItemFields.concat([requiredArrayOf('children', thunkOf('children', () => {
         return choose$2('type', {
         'image',
         'media',
         'file'
       ]),
       enabled,
-      optionString('picker_text')
+      optionString('picker_text'),
+      defaultedString('context', 'mode:design')
     ]);
     const urlInputSchema = objOf(urlInputFields);
     const urlInputDataProcessor = objOf([
       value$1,
       defaultedMeta
         });
       });
       return errors.length > 0 ? Result.error(errors) : Result.value(result);
     };
-    const renderBodyPanel = (spec, dialogData, backstage) => {
+    const renderBodyPanel = (spec, dialogData, backstage, getCompByName) => {
       const memForm = record(Form.sketch(parts => ({
         dom: {
           tag: 'div',
           classes: ['tox-form'].concat(spec.classes)
         },
-        components: map$2(spec.items, item => interpretInForm(parts, item, dialogData, backstage))
+        components: map$2(spec.items, item => interpretInForm(parts, item, dialogData, backstage, getCompByName))
       })));
       return {
         dom: {
           tag: 'div',
     const factory$3 = (detail, _spec) => ({
       uid: detail.uid,
       dom: detail.dom,
       components: detail.components,
-      events: events$a(detail.action),
+      events: events$9(detail.action),
       behaviours: augment(detail.tabButtonBehaviours, [
         Focusing.config({}),
         Keying.config({
           mode: 'execution',
       };
       return {
         uid: detail.uid,
         dom: detail.dom,
         components,
-        behaviours: get$3(detail.tabSectionBehaviours),
+        behaviours: get$4(detail.tabSectionBehaviours),
         events: derive$2(flatten([
           detail.selectFirst ? [runOnAttached((section, _simulatedEvent) => {
               changeTabBy(section, Highlighting.getFirst);
             })] : [],
+          [
+      }
     }));
     const getMaxTabviewHeight = (dialog, tabview, tablist) => {
       const documentElement$1 = documentElement(dialog).dom;
       const rootElm = ancestor(dialog, '.tox-dialog-wrap').getOr(dialog);
-      const isFixed = get$e(rootElm, 'position') === 'fixed';
+      const isFixed = get$f(rootElm, 'position') === 'fixed';
       let maxHeight;
       if (isFixed) {
         maxHeight = Math.max(documentElement$1.clientHeight, window.innerHeight);
       } else {
         maxHeight = Math.max(documentElement$1.offsetHeight, documentElement$1.scrollHeight);
+      }
-      const tabviewHeight = get$d(tabview);
+      const tabviewHeight = get$e(tabview);
-      const isTabListBeside = tabview.dom.offsetLeft >= tablist.dom.offsetLeft + get$c(tablist);
+      const isTabListBeside = tabview.dom.offsetLeft >= tablist.dom.offsetLeft + get$d(tablist);
-      const currentTabHeight = isTabListBeside ? Math.max(get$d(tablist), tabviewHeight) : tabviewHeight;
+      const currentTabHeight = isTabListBeside ? Math.max(get$e(tablist), tabviewHeight) : tabviewHeight;
-      const dialogTopMargin = parseInt(get$e(dialog, 'margin-top'), 10) || 0;
+      const dialogTopMargin = parseInt(get$f(dialog, 'margin-top'), 10) || 0;
-      const dialogBottomMargin = parseInt(get$e(dialog, 'margin-bottom'), 10) || 0;
+      const dialogBottomMargin = parseInt(get$f(dialog, 'margin-bottom'), 10) || 0;
-      const dialogHeight = get$d(dialog) + dialogTopMargin + dialogBottomMargin;
+      const dialogHeight = get$e(dialog) + dialogTopMargin + dialogBottomMargin;
       const chromeHeight = dialogHeight - currentTabHeight;
       return maxHeight - chromeHeight;
     };
     const showTab = (allTabs, comp) => {
       head(allTabs).each(tab => TabSection.showTab(comp, tab.value));
         });
       });
     };
     const getTabview = dialog => descendant(dialog, '[role="tabpanel"]');
     const smartMode = allTabs => {
-      const maxTabHeight = value$2();
+      const maxTabHeight = value$4();
       const extraEvents = [
         runOnAttached(comp => {
           const dialog = comp.element;
           getTabview(dialog).each(tabview => {
             set$8(tabview, 'visibility', 'hidden');
               const heights = measureHeights(allTabs, tabview, tabviewComp);
               const maxTabHeightOpt = getMaxHeight(heights);
               maxTabHeightOpt.fold(maxTabHeight.clear, maxTabHeight.set);
             });
             updateTabviewHeight(dialog, tabview, maxTabHeight);
-            remove$6(tabview, 'visibility');
+            remove$7(tabview, 'visibility');
             showTab(allTabs, comp);
             requestAnimationFrame(() => {
               updateTabviewHeight(dialog, tabview, maxTabHeight);
             });
           });
           const dialog = comp.element;
           getTabview(dialog).each(tabview => {
             const oldFocus = active$1(getRootNode(tabview));
             set$8(tabview, 'visibility', 'hidden');
             const oldHeight = getRaw(tabview, 'height').map(h => parseInt(h, 10));
-            remove$6(tabview, 'height');
+            remove$7(tabview, 'height');
-            remove$6(tabview, 'flex-basis');
+            remove$7(tabview, 'flex-basis');
             const newHeight = tabview.dom.getBoundingClientRect().height;
             const hasGrown = oldHeight.forall(h => newHeight > h);
             if (hasGrown) {
               maxTabHeight.set(newHeight);
               updateTabviewHeight(dialog, tabview, maxTabHeight);
             } else {
               oldHeight.each(h => {
                 setTabviewHeight(tabview, h);
               });
+            }
-            remove$6(tabview, 'visibility');
+            remove$7(tabview, 'visibility');
             oldFocus.each(focus$3);
           });
         })
       ];
       const selectFirst = false;
       };
     };
     const SendDataToSectionChannel = 'send-data-to-section';
     const SendDataToViewChannel = 'send-data-to-view';
-    const renderTabPanel = (spec, dialogData, backstage) => {
+    const renderTabPanel = (spec, dialogData, backstage, getCompByName) => {
       const storedValue = Cell({});
       const updateDataWithForm = form => {
         const formData = Representing.getValue(form);
         const validData = toValidValues(formData).getOr({});
             return [Form.sketch(parts => ({
                 dom: {
                   tag: 'div',
                   classes: ['tox-form']
                 },
-                components: map$2(tab.items, item => interpretInForm(parts, item, dialogData, backstage)),
+                components: map$2(tab.items, item => interpretInForm(parts, item, dialogData, backstage, getCompByName)),
                 formBehaviours: derive$1([
                   Keying.config({
                     mode: 'acyclic',
                     useTabstopAt: not(isPseudoStop)
                   }),
           })
         ])
       });
     };
-    const renderBody = (spec, dialogId, contentId, backstage, ariaAttrs) => {
+    const renderBody = (spec, dialogId, contentId, backstage, ariaAttrs, getCompByName) => {
       const renderComponents = incoming => {
         const body = incoming.body;
         switch (body.type) {
         case 'tabpanel': {
-            return [renderTabPanel(body, incoming.initialData, backstage)];
+            return [renderTabPanel(body, incoming.initialData, backstage, getCompByName)];
+          }
         default: {
-            return [renderBodyPanel(body, incoming.initialData, backstage)];
+            return [renderBodyPanel(body, incoming.initialData, backstage, getCompByName)];
+          }
+        }
       };
       const updateState = (_comp, incoming) => Optional.some({ isTabPanel: () => incoming.body.type === 'tabpanel' });
             initialData: spec
           })
         ])
       };
     };
-    const renderInlineBody = (spec, dialogId, contentId, backstage, ariaAttrs) => renderBody(spec, dialogId, Optional.some(contentId), backstage, ariaAttrs);
+    const renderInlineBody = (spec, dialogId, contentId, backstage, ariaAttrs, getCompByName) => renderBody(spec, dialogId, Optional.some(contentId), backstage, ariaAttrs, getCompByName);
-    const renderModalBody = (spec, dialogId, backstage) => {
+    const renderModalBody = (spec, dialogId, backstage, getCompByName) => {
-      const bodySpec = renderBody(spec, dialogId, Optional.none(), backstage, false);
+      const bodySpec = renderBody(spec, dialogId, Optional.none(), backstage, false, getCompByName);
       return ModalDialog.parts.body(bodySpec);
     };
     const renderIframeBody = spec => {
       const bodySpec = {
         dom: {
           })])
       };
       return ModalDialog.parts.body(bodySpec);
     };
-    const isTouch = global$5.deviceType.isTouch();
+    const isTouch = global$6.deviceType.isTouch();
     const hiddenHeader = (title, close) => ({
       dom: {
         tag: 'div',
         styles: { display: 'none' },
           config('scroll-lock', [
             runOnAttached(() => {
               add$2(body(), scrollLockClass);
             }),
             runOnDetached(() => {
-              remove$2(body(), scrollLockClass);
+              remove$3(body(), scrollLockClass);
             })
           ]),
           ...spec.extraBehaviours
         ]),
         eventOrder: {
           'tox-button--naked'
         ],
         attributes: {
           'type': 'button',
           'aria-label': providersBackstage.translate('Close'),
-          'title': providersBackstage.translate('Close')
+          'data-mce-name': 'close'
+        }
       },
-      buttonBehaviours: derive$1([Tabstopping.config({})]),
+      buttonBehaviours: derive$1([
+        Tabstopping.config({}),
+        Tooltipping.config(providersBackstage.tooltips.getConfig({ tooltipText: providersBackstage.translate('Close') }))
+      ]),
       components: [render$3('close', {
           tag: 'span',
           classes: ['tox-icon']
         }, providersBackstage.icons)],
       action: comp => {
     });
     const renderTitle = (spec, dialogId, titleId, providersBackstage) => {
       const renderComponents = data => [text$2(providersBackstage.translate(data.title))];
       return {
         dom: {
-          tag: 'div',
+          tag: 'h1',
           classes: ['tox-dialog__title'],
           attributes: { ...titleId.map(x => ({ id: x })).getOr({}) }
         },
         components: [],
         behaviours: derive$1([Reflecting.config({
       components: [{ dom: fromHtml('<div class="tox-spinner"><div></div><div></div><div></div></div>') }]
     });
     const getEventExtras = (lazyDialog, providers, extra) => ({
       onClose: () => extra.closeWindow(),
       onBlock: blockEvent => {
-        const headerHeight = descendant(lazyDialog().element, '.tox-dialog__header').map(header => get$d(header));
+        const headerHeight = descendant(lazyDialog().element, '.tox-dialog__header').map(header => get$e(header));
         ModalDialog.setBusy(lazyDialog(), (_comp, bs) => getBusySpec(blockEvent.message, bs, providers, headerHeight));
       },
       onUnblock: () => {
         ModalDialog.setIdle(lazyDialog());
+      }
+      }
     };
     const updateDialogSizeClass = (size, component) => {
       const dialogBody = SugarElement.fromDom(component.element.dom);
       if (!has(dialogBody, fullscreenClass)) {
-        remove$1(dialogBody, [
+        remove$2(dialogBody, [
           largeDialogClass,
           mediumDialogClass
         ]);
         getDialogSizeClass(size).each(dialogSizeClass => add$2(dialogBody, dialogSizeClass));
+      }
     };
     const toggleFullscreen = (comp, currentSize) => {
       const dialogBody = SugarElement.fromDom(comp.element.dom);
-      const classes = get$7(dialogBody);
+      const classes = get$9(dialogBody);
       const currentSizeClass = find$5(classes, c => c === largeDialogClass || c === mediumDialogClass).or(getDialogSizeClass(currentSize));
       toggle$3(dialogBody, [
         fullscreenClass,
         ...currentSizeClass.toArray()
       ]);
+      }
     }));
     const mapMenuButtons = (buttons, menuItemStates = {}) => {
       const mapItems = button => {
         const items = map$2(button.items, item => {
-          const cell = get$g(menuItemStates, item.name).getOr(Cell(false));
+          const cell = get$h(menuItemStates, item.name).getOr(Cell(false));
           return {
             ...item,
             storage: cell
           };
         });
     }, {});
     const initCommonEvents = (fireApiEvent, extras) => [
       runWithTarget(focusin(), onFocus),
+      fireApiEvent(formCloseEvent, (_api, spec, _event, self) => {
-      fireApiEvent(formCloseEvent, (_api, spec, _event, self) => {
+        if (hasFocus(self.element)) {
+          active$1(getRootNode(self.element)).each(blur$1);
         active$1(getRootNode(self.element)).fold(noop, blur$1);
         extras.onClose();
         spec.onClose();
       }),
       fireApiEvent(formCancelEvent, (api, spec, _event, self) => {
     const renderDialog = (dialogInit, extra, backstage) => {
       const dialogId = generate$6('dialog');
       const internalDialog = dialogInit.internalDialog;
       const header = getHeader(internalDialog.title, dialogId, backstage);
       const dialogSize = Cell(internalDialog.size);
+      const getCompByName$1 = name => getCompByName(modalAccess, name);
       const dialogSizeClasses = getDialogSizeClass(dialogSize.get()).toArray();
       const updateState = (comp, incoming) => {
         dialogSize.set(incoming.internalDialog.size);
         updateDialogSizeClass(incoming.internalDialog.size, comp);
         return Optional.some(incoming);
       };
       const body = renderModalBody({
         body: internalDialog.body,
         initialData: internalDialog.initialData
-      }, dialogId, backstage);
+      }, dialogId, backstage, getCompByName$1);
       const storedMenuButtons = mapMenuButtons(internalDialog.buttons);
       const objOfCells = extractCellsToObject(storedMenuButtons);
       const footer = someIf(storedMenuButtons.length !== 0, renderModalFooter({ buttons: storedMenuButtons }, dialogId, backstage));
       const dialogEvents = initDialog(() => instanceApi, getEventExtras(() => dialog, backstage.shared.providers, extra), backstage.shared.getSink);
       const spec = {
     const renderInlineDialog = (dialogInit, extra, backstage, ariaAttrs = false, refreshDocking) => {
       const dialogId = generate$6('dialog');
       const dialogLabelId = generate$6('dialog-label');
       const dialogContentId = generate$6('dialog-content');
       const internalDialog = dialogInit.internalDialog;
+      const getCompByName$1 = name => getCompByName(modalAccess, name);
       const dialogSize = Cell(internalDialog.size);
       const dialogSizeClass = getDialogSizeClass(dialogSize.get()).toArray();
       const updateState = (comp, incoming) => {
         dialogSize.set(incoming.internalDialog.size);
         updateDialogSizeClass(incoming.internalDialog.size, comp);
         draggable: true
       }, dialogId, dialogLabelId, backstage.shared.providers));
       const memBody = record(renderInlineBody({
         body: internalDialog.body,
         initialData: internalDialog.initialData
-      }, dialogId, dialogContentId, backstage, ariaAttrs));
+      }, dialogId, dialogContentId, backstage, ariaAttrs, getCompByName$1));
       const storagedMenuButtons = mapMenuButtons(internalDialog.buttons);
       const objOfCells = extractCellsToObject(storagedMenuButtons);
       const optMemFooter = someIf(storagedMenuButtons.length !== 0, record(renderInlineFooter({ buttons: storagedMenuButtons }, dialogId, backstage)));
       const dialogEvents = initDialog(() => instanceApi, {
         onBlock: event => {
           Blocking.block(dialog, (_comp, bs) => {
-            const headerHeight = memHeader.getOpt(dialog).map(dialog => get$d(dialog.element));
+            const headerHeight = memHeader.getOpt(dialog).map(dialog => get$e(dialog.element));
             return getBusySpec(event.message, bs, backstage.shared.providers, headerHeight);
           });
         },
         onUnblock: () => {
           Blocking.unblock(dialog);
         },
         onClose: () => extra.closeWindow()
       }, backstage.shared.getSink);
       const inlineClass = 'tox-dialog-inline';
+      const os = detect$1().os;
       const dialog = build$1({
         dom: {
           tag: 'div',
           classes: [
             'tox-dialog',
             inlineClass,
             ...dialogSizeClass
           ],
           attributes: {
             role: 'dialog',
-            ['aria-labelledby']: dialogLabelId
+            ...os.isMacOS() ? { 'aria-label': internalDialog.title } : { 'aria-labelledby': dialogLabelId }
+          }
         },
         eventOrder: {
           [receive()]: [
             Reflecting.name(),
             mode: 'cyclic',
             onEscape: c => {
               emit(c, formCloseEvent);
               return Optional.some(true);
             },
-            useTabstopAt: elem => !isPseudoStop(elem) && (name$3(elem) !== 'button' || get$f(elem, 'disabled') !== 'disabled'),
+            useTabstopAt: elem => !isPseudoStop(elem) && (name$3(elem) !== 'button' || get$g(elem, 'disabled') !== 'disabled'),
             firstTabstop: 1
           }),
           Reflecting.config({
             channel: `${ dialogChannel }-${ dialogId }`,
             updateState,
+        ]
       });
       const toggleFullscreen$1 = () => {
         toggleFullscreen(dialog, dialogSize.get());
       };
-      const instanceApi = getDialogApi({
+      const modalAccess = {
         getId: constant$1(dialogId),
         getRoot: constant$1(dialog),
         getFooter: () => optMemFooter.map(memFooter => memFooter.get(dialog)),
         getBody: () => memBody.get(dialog),
         getFormWrapper: () => {
           const body = memBody.get(dialog);
           return Composing.getCurrent(body).getOr(body);
         },
         toggleFullscreen: toggleFullscreen$1
+      };
-      }, extra.redial, objOfCells);
+      const instanceApi = getDialogApi(modalAccess, extra.redial, objOfCells);
       return {
         dialog,
         instanceApi
       };
     };
         const closeDialog = () => {
           ModalDialog.hide(alertDialog);
           callback();
         };
         const memFooterClose = record(renderFooterButton({
+          context: 'any',
           name: 'close-alert',
           text: 'OK',
           primary: true,
           buttonType: Optional.some('primary'),
           align: 'end',
         const closeDialog = state => {
           ModalDialog.hide(confirmDialog);
           callback(state);
         };
         const memFooterYes = record(renderFooterButton({
+          context: 'any',
           name: 'yes',
           text: 'Yes',
           primary: true,
           buttonType: Optional.some('primary'),
           align: 'end',
           enabled: true,
           icon: Optional.none()
         }, 'submit', backstage));
         const footerNo = renderFooterButton({
+          context: 'any',
           name: 'no',
           text: 'No',
           primary: false,
           buttonType: Optional.some('secondary'),
           align: 'end',
         return DialogManager.open(factory, config);
       };
       const openInlineDialog = (config$1, anchor, closeWindow, windowParams) => {
         const factory = (contents, internalInitialData, dataValidator) => {
           const initialData = validateData(internalInitialData, dataValidator);
-          const inlineDialog = value$2();
+          const inlineDialog = value$4();
           const isToolbarLocationTop = extras.backstages.popup.shared.header.isPositionedAtTop();
           const dialogInit = {
             dataValidator,
             initialData,
             internalDialog: contents
         return DialogManager.open(factory, config$1);
       };
       const openBottomInlineDialog = (config$1, anchor, closeWindow, windowParams) => {
         const factory = (contents, internalInitialData, dataValidator) => {
           const initialData = validateData(internalInitialData, dataValidator);
-          const inlineDialog = value$2();
+          const inlineDialog = value$4();
           const isToolbarLocationTop = extras.backstages.popup.shared.header.isPositionedAtTop();
           const dialogInit = {
             dataValidator,
             initialData,
             internalDialog: contents
         confirm
       };
     };
+    const registerOptions = editor => {
-    const registerOptions = editor => {
+      register$f(editor);
-      register$e(editor);
-      register$d(editor);
+      register$e(editor);
       register(editor);
     };
     var Theme = () => {
       global$a.add('silver', editor => {
           backstages: {
             popup: popups.backstage,
             dialog: dialogs.backstage
+          }
         });
+        const notificationRegion = value$4();
-        const getNotificationManagerImpl = () => NotificationManagerImpl(editor, { backstage: popups.backstage }, popups.getMothership());
+        const getNotificationManagerImpl = () => NotificationManagerImpl(editor, { backstage: popups.backstage }, popups.getMothership(), notificationRegion);
         return {
           renderUI,
           getWindowManagerImpl: constant$1(windowMgr),
           getNotificationManagerImpl
         };

Proyectos de Subversion Moodle

(root)/lib/editor/tiny/js/tinymce/themes/silver/theme.js – Rev 1 → 1441