@fluentui/web-components 1.6.2 → 1.6.3

package/dist/web-components.js

@@ -7038,7 +7038,9 @@ class AnchoredRegion extends FoundationElement {
       if (this.horizontalPositioningMode !== "uncontrolled") {
         const horizontalOptions = this.getPositioningOptions(this.horizontalInset);
 
-        if (this.horizontalDefaultPosition !== "unset") {
+        if (this.horizontalDefaultPosition === "center") {
+          desiredHorizontalPosition = "center";
+        } else if (this.horizontalDefaultPosition !== "unset") {
           let dirCorrectedHorizontalDefaultPosition = this.horizontalDefaultPosition;
 
           if (dirCorrectedHorizontalDefaultPosition === "start" || dirCorrectedHorizontalDefaultPosition === "end") {
@@ -7084,7 +7086,9 @@ class AnchoredRegion extends FoundationElement {
       if (this.verticalPositioningMode !== "uncontrolled") {
         const verticalOptions = this.getPositioningOptions(this.verticalInset);
 
-        if (this.verticalDefaultPosition !== "unset") {
+        if (this.verticalDefaultPosition === "center") {
+          desiredVerticalPosition = "center";
+        } else if (this.verticalDefaultPosition !== "unset") {
           switch (this.verticalDefaultPosition) {
             case "top":
               desiredVerticalPosition = this.verticalInset ? "insetStart" : "start";
@@ -7160,10 +7164,12 @@ class AnchoredRegion extends FoundationElement {
       this.classList.toggle("bottom", this.verticalPosition === "end");
       this.classList.toggle("inset-top", this.verticalPosition === "insetStart");
       this.classList.toggle("inset-bottom", this.verticalPosition === "insetEnd");
+      this.classList.toggle("vertical-center", this.verticalPosition === "center");
       this.classList.toggle("left", this.horizontalPosition === "start");
       this.classList.toggle("right", this.horizontalPosition === "end");
       this.classList.toggle("inset-left", this.horizontalPosition === "insetStart");
       this.classList.toggle("inset-right", this.horizontalPosition === "insetEnd");
+      this.classList.toggle("horizontal-center", this.horizontalPosition === "center");
     };
     /**
      * Get horizontal positioning state based on desired position
@@ -7190,6 +7196,8 @@ class AnchoredRegion extends FoundationElement {
           break;
       }
 
+      let sizeDelta = 0;
+
       switch (desiredHorizontalPosition) {
         case "start":
           this.translateX = this.baseHorizontalOffset - nextRegionWidth;
@@ -7225,6 +7233,23 @@ class AnchoredRegion extends FoundationElement {
             this.translateX = this.translateX - (this.anchorRect.right - this.viewportRect.left);
           }
 
+          break;
+
+        case "center":
+          sizeDelta = (this.anchorRect.width - nextRegionWidth) / 2;
+          this.translateX = this.baseHorizontalOffset + sizeDelta;
+
+          if (this.horizontalViewportLock) {
+            const regionLeft = this.anchorRect.left + sizeDelta;
+            const regionRight = this.anchorRect.right - sizeDelta;
+
+            if (regionLeft < this.viewportRect.left && !(regionRight > this.viewportRect.right)) {
+              this.translateX = this.translateX - (regionLeft - this.viewportRect.left);
+            } else if (regionRight > this.viewportRect.right && !(regionLeft < this.viewportRect.left)) {
+              this.translateX = this.translateX - (regionRight - this.viewportRect.right);
+            }
+          }
+
           break;
       }
 
@@ -7255,6 +7280,8 @@ class AnchoredRegion extends FoundationElement {
           break;
       }
 
+      let sizeDelta = 0;
+
       switch (desiredVerticalPosition) {
         case "start":
           this.translateY = this.baseVerticalOffset - nextRegionHeight;
@@ -7291,6 +7318,22 @@ class AnchoredRegion extends FoundationElement {
           }
 
           break;
+
+        case "center":
+          sizeDelta = (this.anchorRect.height - nextRegionHeight) / 2;
+          this.translateY = this.baseVerticalOffset + sizeDelta;
+
+          if (this.verticalViewportLock) {
+            const regionTop = this.anchorRect.top + sizeDelta;
+            const regionBottom = this.anchorRect.bottom - sizeDelta;
+
+            if (regionTop < this.viewportRect.top && !(regionBottom > this.viewportRect.bottom)) {
+              this.translateY = this.translateY - (regionTop - this.viewportRect.top);
+            } else if (regionBottom > this.viewportRect.bottom && !(regionTop < this.viewportRect.top)) {
+              this.translateY = this.translateY - (regionBottom - this.viewportRect.bottom);
+            }
+          }
+
       }
 
       this.verticalPosition = desiredVerticalPosition;
@@ -7328,6 +7371,9 @@ class AnchoredRegion extends FoundationElement {
 
         case "end":
           return spaceEnd;
+
+        case "center":
+          return Math.min(spaceStart, spaceEnd) * 2 + anchorSpan;
       }
     };
     /**
@@ -7977,9 +8023,14 @@ function FormAssociated(BaseCtor) {
         this.proxy.value = this.value;
       }
 
+      this.currentValue = this.value;
       this.setFormValue(this.value);
       this.validate();
     }
+
+    currentValueChanged() {
+      this.value = this.currentValue;
+    }
     /**
      * Invoked when the `initialValue` property changes
      *
@@ -8249,6 +8300,9 @@ function FormAssociated(BaseCtor) {
     mode: "fromView",
     attribute: "value"
   })(C.prototype, "initialValue");
+  attr({
+    attribute: "current-value"
+  })(C.prototype, "currentValue");
   attr(C.prototype, "name");
   attr({
     mode: "boolean"
@@ -10893,242 +10947,6 @@ const comboboxTemplate = (context, definition) => html`<template autocomplete="$
   property: "slottedOptions"
 })}></slot></div></template>`;
 
-/**
- * Indicates what to do with an ambiguous (duplicate) element.
- * @public
- */
-
-const ElementDisambiguation = Object.freeze({
-  /**
-   * Skip defining the element but still call the provided callback passed
-   * to DesignSystemRegistrationContext.tryDefineElement
-   */
-  definitionCallbackOnly: null,
-
-  /**
-   * Ignore the duplicate element entirely.
-   */
-  ignoreDuplicate: Symbol()
-});
-const elementTypesByTag = new Map();
-const elementTagsByType = new Map();
-let rootDesignSystem = null;
-const designSystemKey = DI.createInterface(x => x.cachedCallback(handler => {
-  if (rootDesignSystem === null) {
-    rootDesignSystem = new DefaultDesignSystem(null, handler);
-  }
-
-  return rootDesignSystem;
-}));
-/**
- * An API gateway to design system features.
- * @public
- */
-
-const DesignSystem = Object.freeze({
-  /**
-   * Returns the HTML element name that the type is defined as.
-   * @param type - The type to lookup.
-   * @public
-   */
-  tagFor(type) {
-    return elementTagsByType.get(type);
-  },
-
-  /**
-   * Searches the DOM hierarchy for the design system that is responsible
-   * for the provided element.
-   * @param element - The element to locate the design system for.
-   * @returns The located design system.
-   * @public
-   */
-  responsibleFor(element) {
-    const owned = element.$$designSystem$$;
-
-    if (owned) {
-      return owned;
-    }
-
-    const container = DI.findResponsibleContainer(element);
-    return container.get(designSystemKey);
-  },
-
-  /**
-   * Gets the DesignSystem if one is explicitly defined on the provided element;
-   * otherwise creates a design system defined directly on the element.
-   * @param element - The element to get or create a design system for.
-   * @returns The design system.
-   * @public
-   */
-  getOrCreate(node) {
-    if (!node) {
-      if (rootDesignSystem === null) {
-        rootDesignSystem = DI.getOrCreateDOMContainer().get(designSystemKey);
-      }
-
-      return rootDesignSystem;
-    }
-
-    const owned = node.$$designSystem$$;
-
-    if (owned) {
-      return owned;
-    }
-
-    const container = DI.getOrCreateDOMContainer(node);
-
-    if (container.has(designSystemKey, false)) {
-      return container.get(designSystemKey);
-    } else {
-      const system = new DefaultDesignSystem(node, container);
-      container.register(Registration.instance(designSystemKey, system));
-      return system;
-    }
-  }
-
-});
-
-function extractTryDefineElementParams(params, elementDefinitionType, elementDefinitionCallback) {
-  if (typeof params === "string") {
-    return {
-      name: params,
-      type: elementDefinitionType,
-      callback: elementDefinitionCallback
-    };
-  } else {
-    return params;
-  }
-}
-
-class DefaultDesignSystem {
-  constructor(owner, container) {
-    this.owner = owner;
-    this.container = container;
-    this.prefix = "fast";
-    this.shadowRootMode = undefined;
-
-    this.disambiguate = () => ElementDisambiguation.definitionCallbackOnly;
-
-    if (owner !== null) {
-      owner.$$designSystem$$ = this;
-    }
-  }
-
-  withPrefix(prefix) {
-    this.prefix = prefix;
-    return this;
-  }
-
-  withShadowRootMode(mode) {
-    this.shadowRootMode = mode;
-    return this;
-  }
-
-  withElementDisambiguation(callback) {
-    this.disambiguate = callback;
-    return this;
-  }
-
-  register(...registrations) {
-    const container = this.container;
-    const elementDefinitionEntries = [];
-    const disambiguate = this.disambiguate;
-    const shadowRootMode = this.shadowRootMode;
-    const context = {
-      elementPrefix: this.prefix,
-
-      tryDefineElement(params, elementDefinitionType, elementDefinitionCallback) {
-        const extractedParams = extractTryDefineElementParams(params, elementDefinitionType, elementDefinitionCallback);
-        const {
-          name,
-          callback,
-          baseClass
-        } = extractedParams;
-        let {
-          type
-        } = extractedParams;
-        let elementName = name;
-        let typeFoundByName = elementTypesByTag.get(elementName);
-        let needsDefine = true;
-
-        while (typeFoundByName) {
-          const result = disambiguate(elementName, type, typeFoundByName);
-
-          switch (result) {
-            case ElementDisambiguation.ignoreDuplicate:
-              return;
-
-            case ElementDisambiguation.definitionCallbackOnly:
-              needsDefine = false;
-              typeFoundByName = void 0;
-              break;
-
-            default:
-              elementName = result;
-              typeFoundByName = elementTypesByTag.get(elementName);
-              break;
-          }
-        }
-
-        if (needsDefine) {
-          if (elementTagsByType.has(type) || type === FoundationElement) {
-            type = class extends type {};
-          }
-
-          elementTypesByTag.set(elementName, type);
-          elementTagsByType.set(type, elementName);
-
-          if (baseClass) {
-            elementTagsByType.set(baseClass, elementName);
-          }
-        }
-
-        elementDefinitionEntries.push(new ElementDefinitionEntry(container, elementName, type, shadowRootMode, callback, needsDefine));
-      }
-
-    };
-    container.registerWithContext(context, ...registrations);
-
-    for (const entry of elementDefinitionEntries) {
-      entry.callback(entry);
-
-      if (entry.willDefine && entry.definition !== null) {
-        entry.definition.define();
-      }
-    }
-
-    return this;
-  }
-
-}
-
-class ElementDefinitionEntry {
-  constructor(container, name, type, shadowRootMode, callback, willDefine) {
-    this.container = container;
-    this.name = name;
-    this.type = type;
-    this.shadowRootMode = shadowRootMode;
-    this.callback = callback;
-    this.willDefine = willDefine;
-    this.definition = null;
-  }
-
-  definePresentation(presentation) {
-    ComponentPresentation.define(this.name, presentation, this.container);
-  }
-
-  defineElement(definition) {
-    this.definition = new FASTElementDefinition(this.type, Object.assign(Object.assign({}, definition), {
-      name: this.name
-    }));
-  }
-
-  tagFor(type) {
-    return DesignSystem.tagFor(type);
-  }
-
-}
-
 /**
  * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
  * When the parent of a node is a shadow-root, it will return the host
@@ -11498,8 +11316,10 @@ class HeadStyleElementStyleSheetTarget extends QueuedStyleSheetTarget {
     // but if-check it just in case.
 
     if (sheet) {
-      const index = sheet.insertRule(":root{}");
-      this.target = sheet.rules[index].style;
+      // https://github.com/jsdom/jsdom uses https://github.com/NV/CSSOM for it's CSSOM implementation,
+      // which implements the DOM Level 2 spec for CSSStyleSheet where insertRule() requires an index argument.
+      const index = sheet.insertRule(":root{}", sheet.cssRules.length);
+      this.target = sheet.cssRules[index].style;
     }
   }
 
@@ -11560,8 +11380,10 @@ class StyleElementStyleSheetTarget {
     if (sheet) {
       // Safari will throw if we try to use the return result of insertRule()
       // to index the rule inline, so store as a const prior to indexing.
-      const index = sheet.insertRule(":host{}");
-      this.target = sheet.rules[index].style;
+      // https://github.com/jsdom/jsdom uses https://github.com/NV/CSSOM for it's CSSOM implementation,
+      // which implements the DOM Level 2 spec for CSSStyleSheet where insertRule() requires an index argument.
+      const index = sheet.insertRule(":root{}", sheet.cssRules.length);
+      this.target = sheet.cssRules[index].style;
     } else {
       this.target = null;
     }
@@ -11588,8 +11410,76 @@ class ElementStyleSheetTarget {
     DOM.queueUpdate(() => this.target.removeProperty(name));
   }
 
-} // Caches PropertyTarget instances
-
+}
+/**
+ * Controls emission for default values. This control is capable
+ * of emitting to multiple {@link PropertyTarget | PropertyTargets},
+ * and only emits if it has at least one root.
+ *
+ * @internal
+ */
+
+
+class RootStyleSheetTarget {
+  setProperty(name, value) {
+    RootStyleSheetTarget.properties[name] = value;
+
+    for (const target of RootStyleSheetTarget.roots.values()) {
+      PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(target)).setProperty(name, value);
+    }
+  }
+
+  removeProperty(name) {
+    delete RootStyleSheetTarget.properties[name];
+
+    for (const target of RootStyleSheetTarget.roots.values()) {
+      PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(target)).removeProperty(name);
+    }
+  }
+
+  static registerRoot(root) {
+    const {
+      roots
+    } = RootStyleSheetTarget;
+
+    if (!roots.has(root)) {
+      roots.add(root);
+      const target = PropertyTargetManager.getOrCreate(this.normalizeRoot(root));
+
+      for (const key in RootStyleSheetTarget.properties) {
+        target.setProperty(key, RootStyleSheetTarget.properties[key]);
+      }
+    }
+  }
+
+  static unregisterRoot(root) {
+    const {
+      roots
+    } = RootStyleSheetTarget;
+
+    if (roots.has(root)) {
+      roots.delete(root);
+      const target = PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(root));
+
+      for (const key in RootStyleSheetTarget.properties) {
+        target.removeProperty(key);
+      }
+    }
+  }
+  /**
+   * Returns the document when provided the default element,
+   * otherwise is a no-op
+   * @param root - the root to normalize
+   */
+
+
+  static normalizeRoot(root) {
+    return root === defaultElement ? document : root;
+  }
+
+}
+RootStyleSheetTarget.roots = new Set();
+RootStyleSheetTarget.properties = {}; // Caches PropertyTarget instances
 
 const propertyTargetCache = new WeakMap(); // Use Constructable StyleSheets for FAST elements when supported, otherwise use
 // HTMLStyleElement instances
@@ -11610,6 +11500,8 @@ const PropertyTargetManager = Object.freeze({
     let target;
 
     if (source === defaultElement) {
+      target = new RootStyleSheetTarget();
+    } else if (source instanceof Document) {
       target = DOM.supportsAdoptedStyleSheets ? new DocumentStyleSheetTarget() : new HeadStyleElementStyleSheetTarget();
     } else if (isFastElement(source)) {
       target = new propertyTargetCtor(source);
@@ -12218,160 +12110,430 @@ class DesignTokenNode {
       DesignTokenNode.cssCustomPropertyReflector.stopReflection(token, this.target);
     }
   }
-  /**
-   * Determines if a token is being reflected to CSS for a node.
-   * @param token - The token to check for reflection
-   * @returns
-   */
+  /**
+   * Determines if a token is being reflected to CSS for a node.
+   * @param token - The token to check for reflection
+   * @returns
+   */
+
+
+  isReflecting(token) {
+    return this.reflecting.has(token);
+  }
+  /**
+   * Handle changes to upstream tokens
+   * @param source - The parent DesignTokenNode
+   * @param property - The token ID that changed
+   */
+
+
+  handleChange(source, property) {
+    const token = DesignTokenImpl.getTokenById(property);
+
+    if (!token) {
+      return;
+    }
+
+    this.hydrate(token, this.getRaw(token));
+  }
+  /**
+   * Hydrates a token with a DesignTokenValue, making retrieval available.
+   * @param token - The token to hydrate
+   * @param value - The value to hydrate
+   */
+
+
+  hydrate(token, value) {
+    if (!this.has(token)) {
+      const observer = this.bindingObservers.get(token);
+
+      if (DesignTokenImpl.isDerivedDesignTokenValue(value)) {
+        if (observer) {
+          // If the binding source doesn't match, we need
+          // to update the binding
+          if (observer.source !== value) {
+            this.tearDownBindingObserver(token);
+            this.setupBindingObserver(token, value);
+          }
+        } else {
+          this.setupBindingObserver(token, value);
+        }
+      } else {
+        if (observer) {
+          this.tearDownBindingObserver(token);
+        }
+
+        this.store.set(token, value);
+      }
+    }
+  }
+  /**
+   * Sets up a binding observer for a derived token value that notifies token
+   * subscribers on change.
+   *
+   * @param token - The token to notify when the binding updates
+   * @param source - The binding source
+   */
+
+
+  setupBindingObserver(token, source) {
+    const binding = new DesignTokenBindingObserver(source, token, this);
+    this.bindingObservers.set(token, binding);
+    return binding;
+  }
+  /**
+   * Tear down a binding observer for a token.
+   */
+
+
+  tearDownBindingObserver(token) {
+    if (this.bindingObservers.has(token)) {
+      this.bindingObservers.get(token).disconnect();
+      this.bindingObservers.delete(token);
+      return true;
+    }
+
+    return false;
+  }
+
+}
+/**
+ * Responsible for reflecting tokens to CSS custom properties
+ */
+
+
+DesignTokenNode.cssCustomPropertyReflector = new CustomPropertyReflector();
+
+__decorate$1([observable], DesignTokenNode.prototype, "children", void 0);
+
+function create$1(nameOrConfig) {
+  return DesignTokenImpl.from(nameOrConfig);
+}
+/**
+ * Factory object for creating {@link (DesignToken:interface)} instances.
+ * @public
+ */
+
+
+const DesignToken = Object.freeze({
+  create: create$1,
+
+  /**
+   * Informs DesignToken that an HTMLElement for which tokens have
+   * been set has been connected to the document.
+   *
+   * The browser does not provide a reliable mechanism to observe an HTMLElement's connectedness
+   * in all scenarios, so invoking this method manually is necessary when:
+   *
+   * 1. Token values are set for an HTMLElement.
+   * 2. The HTMLElement does not inherit from FASTElement.
+   * 3. The HTMLElement is not connected to the document when token values are set.
+   *
+   * @param element - The element to notify
+   * @returns - true if notification was successful, otherwise false.
+   */
+  notifyConnection(element) {
+    if (!element.isConnected || !DesignTokenNode.existsFor(element)) {
+      return false;
+    }
+
+    DesignTokenNode.getOrCreate(element).bind();
+    return true;
+  },
+
+  /**
+   * Informs DesignToken that an HTMLElement for which tokens have
+   * been set has been disconnected to the document.
+   *
+   * The browser does not provide a reliable mechanism to observe an HTMLElement's connectedness
+   * in all scenarios, so invoking this method manually is necessary when:
+   *
+   * 1. Token values are set for an HTMLElement.
+   * 2. The HTMLElement does not inherit from FASTElement.
+   *
+   * @param element - The element to notify
+   * @returns - true if notification was successful, otherwise false.
+   */
+  notifyDisconnection(element) {
+    if (element.isConnected || !DesignTokenNode.existsFor(element)) {
+      return false;
+    }
+
+    DesignTokenNode.getOrCreate(element).unbind();
+    return true;
+  },
+
+  /**
+   * Registers and element or document as a DesignToken root.
+   * {@link CSSDesignToken | CSSDesignTokens} with default values assigned via
+   * {@link (DesignToken:interface).withDefault} will emit CSS custom properties to all
+   * registered roots.
+   * @param target - The root to register
+   */
+  registerRoot(target = defaultElement) {
+    RootStyleSheetTarget.registerRoot(target);
+  },
+
+  /**
+   * Unregister an element or document as a DesignToken root.
+   * @param target - The root to deregister
+   */
+  unregisterRoot(target = defaultElement) {
+    RootStyleSheetTarget.unregisterRoot(target);
+  }
+
+});
+
+/**
+ * Indicates what to do with an ambiguous (duplicate) element.
+ * @public
+ */
+
+const ElementDisambiguation = Object.freeze({
+  /**
+   * Skip defining the element but still call the provided callback passed
+   * to DesignSystemRegistrationContext.tryDefineElement
+   */
+  definitionCallbackOnly: null,
+
+  /**
+   * Ignore the duplicate element entirely.
+   */
+  ignoreDuplicate: Symbol()
+});
+const elementTypesByTag = new Map();
+const elementTagsByType = new Map();
+let rootDesignSystem = null;
+const designSystemKey = DI.createInterface(x => x.cachedCallback(handler => {
+  if (rootDesignSystem === null) {
+    rootDesignSystem = new DefaultDesignSystem(null, handler);
+  }
+
+  return rootDesignSystem;
+}));
+/**
+ * An API gateway to design system features.
+ * @public
+ */
+
+const DesignSystem = Object.freeze({
+  /**
+   * Returns the HTML element name that the type is defined as.
+   * @param type - The type to lookup.
+   * @public
+   */
+  tagFor(type) {
+    return elementTagsByType.get(type);
+  },
+
+  /**
+   * Searches the DOM hierarchy for the design system that is responsible
+   * for the provided element.
+   * @param element - The element to locate the design system for.
+   * @returns The located design system.
+   * @public
+   */
+  responsibleFor(element) {
+    const owned = element.$$designSystem$$;
+
+    if (owned) {
+      return owned;
+    }
+
+    const container = DI.findResponsibleContainer(element);
+    return container.get(designSystemKey);
+  },
+
+  /**
+   * Gets the DesignSystem if one is explicitly defined on the provided element;
+   * otherwise creates a design system defined directly on the element.
+   * @param element - The element to get or create a design system for.
+   * @returns The design system.
+   * @public
+   */
+  getOrCreate(node) {
+    if (!node) {
+      if (rootDesignSystem === null) {
+        rootDesignSystem = DI.getOrCreateDOMContainer().get(designSystemKey);
+      }
+
+      return rootDesignSystem;
+    }
+
+    const owned = node.$$designSystem$$;
+
+    if (owned) {
+      return owned;
+    }
+
+    const container = DI.getOrCreateDOMContainer(node);
+
+    if (container.has(designSystemKey, false)) {
+      return container.get(designSystemKey);
+    } else {
+      const system = new DefaultDesignSystem(node, container);
+      container.register(Registration.instance(designSystemKey, system));
+      return system;
+    }
+  }
+
+});
+
+function extractTryDefineElementParams(params, elementDefinitionType, elementDefinitionCallback) {
+  if (typeof params === "string") {
+    return {
+      name: params,
+      type: elementDefinitionType,
+      callback: elementDefinitionCallback
+    };
+  } else {
+    return params;
+  }
+}
+
+class DefaultDesignSystem {
+  constructor(owner, container) {
+    this.owner = owner;
+    this.container = container;
+    this.designTokensInitialized = false;
+    this.prefix = "fast";
+    this.shadowRootMode = undefined;
+
+    this.disambiguate = () => ElementDisambiguation.definitionCallbackOnly;
+
+    if (owner !== null) {
+      owner.$$designSystem$$ = this;
+    }
+  }
 
+  withPrefix(prefix) {
+    this.prefix = prefix;
+    return this;
+  }
 
-  isReflecting(token) {
-    return this.reflecting.has(token);
+  withShadowRootMode(mode) {
+    this.shadowRootMode = mode;
+    return this;
   }
-  /**
-   * Handle changes to upstream tokens
-   * @param source - The parent DesignTokenNode
-   * @param property - The token ID that changed
-   */
 
+  withElementDisambiguation(callback) {
+    this.disambiguate = callback;
+    return this;
+  }
 
-  handleChange(source, property) {
-    const token = DesignTokenImpl.getTokenById(property);
+  withDesignTokenRoot(root) {
+    this.designTokenRoot = root;
+    return this;
+  }
 
-    if (!token) {
-      return;
-    }
+  register(...registrations) {
+    const container = this.container;
+    const elementDefinitionEntries = [];
+    const disambiguate = this.disambiguate;
+    const shadowRootMode = this.shadowRootMode;
+    const context = {
+      elementPrefix: this.prefix,
 
-    this.hydrate(token, this.getRaw(token));
-  }
-  /**
-   * Hydrates a token with a DesignTokenValue, making retrieval available.
-   * @param token - The token to hydrate
-   * @param value - The value to hydrate
-   */
+      tryDefineElement(params, elementDefinitionType, elementDefinitionCallback) {
+        const extractedParams = extractTryDefineElementParams(params, elementDefinitionType, elementDefinitionCallback);
+        const {
+          name,
+          callback,
+          baseClass
+        } = extractedParams;
+        let {
+          type
+        } = extractedParams;
+        let elementName = name;
+        let typeFoundByName = elementTypesByTag.get(elementName);
+        let needsDefine = true;
 
+        while (typeFoundByName) {
+          const result = disambiguate(elementName, type, typeFoundByName);
 
-  hydrate(token, value) {
-    if (!this.has(token)) {
-      const observer = this.bindingObservers.get(token);
+          switch (result) {
+            case ElementDisambiguation.ignoreDuplicate:
+              return;
 
-      if (DesignTokenImpl.isDerivedDesignTokenValue(value)) {
-        if (observer) {
-          // If the binding source doesn't match, we need
-          // to update the binding
-          if (observer.source !== value) {
-            this.tearDownBindingObserver(token);
-            this.setupBindingObserver(token, value);
+            case ElementDisambiguation.definitionCallbackOnly:
+              needsDefine = false;
+              typeFoundByName = void 0;
+              break;
+
+            default:
+              elementName = result;
+              typeFoundByName = elementTypesByTag.get(elementName);
+              break;
           }
-        } else {
-          this.setupBindingObserver(token, value);
         }
-      } else {
-        if (observer) {
-          this.tearDownBindingObserver(token);
+
+        if (needsDefine) {
+          if (elementTagsByType.has(type) || type === FoundationElement) {
+            type = class extends type {};
+          }
+
+          elementTypesByTag.set(elementName, type);
+          elementTagsByType.set(type, elementName);
+
+          if (baseClass) {
+            elementTagsByType.set(baseClass, elementName);
+          }
         }
 
-        this.store.set(token, value);
+        elementDefinitionEntries.push(new ElementDefinitionEntry(container, elementName, type, shadowRootMode, callback, needsDefine));
       }
-    }
-  }
-  /**
-   * Sets up a binding observer for a derived token value that notifies token
-   * subscribers on change.
-   *
-   * @param token - The token to notify when the binding updates
-   * @param source - The binding source
-   */
-
 
-  setupBindingObserver(token, source) {
-    const binding = new DesignTokenBindingObserver(source, token, this);
-    this.bindingObservers.set(token, binding);
-    return binding;
-  }
-  /**
-   * Tear down a binding observer for a token.
-   */
+    };
 
+    if (!this.designTokensInitialized) {
+      this.designTokensInitialized = true;
 
-  tearDownBindingObserver(token) {
-    if (this.bindingObservers.has(token)) {
-      this.bindingObservers.get(token).disconnect();
-      this.bindingObservers.delete(token);
-      return true;
+      if (this.designTokenRoot !== null) {
+        DesignToken.registerRoot(this.designTokenRoot);
+      }
     }
 
-    return false;
-  }
-
-}
-/**
- * Responsible for reflecting tokens to CSS custom properties
- */
+    container.registerWithContext(context, ...registrations);
 
+    for (const entry of elementDefinitionEntries) {
+      entry.callback(entry);
 
-DesignTokenNode.cssCustomPropertyReflector = new CustomPropertyReflector();
+      if (entry.willDefine && entry.definition !== null) {
+        entry.definition.define();
+      }
+    }
 
-__decorate$1([observable], DesignTokenNode.prototype, "children", void 0);
+    return this;
+  }
 
-function create$1(nameOrConfig) {
-  return DesignTokenImpl.from(nameOrConfig);
 }
-/**
- * Factory object for creating {@link (DesignToken:interface)} instances.
- * @public
- */
-
-
-const DesignToken = Object.freeze({
-  create: create$1,
 
-  /**
-   * Informs DesignToken that an HTMLElement for which tokens have
-   * been set has been connected to the document.
-   *
-   * The browser does not provide a reliable mechanism to observe an HTMLElement's connectedness
-   * in all scenarios, so invoking this method manually is necessary when:
-   *
-   * 1. Token values are set for an HTMLElement.
-   * 2. The HTMLElement does not inherit from FASTElement.
-   * 3. The HTMLElement is not connected to the document when token values are set.
-   *
-   * @param element - The element to notify
-   * @returns - true if notification was successful, otherwise false.
-   */
-  notifyConnection(element) {
-    if (!element.isConnected || !DesignTokenNode.existsFor(element)) {
-      return false;
-    }
+class ElementDefinitionEntry {
+  constructor(container, name, type, shadowRootMode, callback, willDefine) {
+    this.container = container;
+    this.name = name;
+    this.type = type;
+    this.shadowRootMode = shadowRootMode;
+    this.callback = callback;
+    this.willDefine = willDefine;
+    this.definition = null;
+  }
 
-    DesignTokenNode.getOrCreate(element).bind();
-    return true;
-  },
+  definePresentation(presentation) {
+    ComponentPresentation.define(this.name, presentation, this.container);
+  }
 
-  /**
-   * Informs DesignToken that an HTMLElement for which tokens have
-   * been set has been disconnected to the document.
-   *
-   * The browser does not provide a reliable mechanism to observe an HTMLElement's connectedness
-   * in all scenarios, so invoking this method manually is necessary when:
-   *
-   * 1. Token values are set for an HTMLElement.
-   * 2. The HTMLElement does not inherit from FASTElement.
-   *
-   * @param element - The element to notify
-   * @returns - true if notification was successful, otherwise false.
-   */
-  notifyDisconnection(element) {
-    if (element.isConnected || !DesignTokenNode.existsFor(element)) {
-      return false;
-    }
+  defineElement(definition) {
+    this.definition = new FASTElementDefinition(this.type, Object.assign(Object.assign({}, definition), {
+      name: this.name
+    }));
+  }
 
-    DesignTokenNode.getOrCreate(element).unbind();
-    return true;
+  tagFor(type) {
+    return DesignSystem.tagFor(type);
   }
 
-});
+}
 
 /**
  * The template for the {@link @microsoft/fast-foundation#Dialog} component.
@@ -13663,7 +13825,7 @@ __decorate$1([observable], Menu.prototype, "items", void 0);
  * @public
  */
 
-const numberFieldTemplate = (context, definition) => html`<template class="${x => x.readOnly ? "readonly" : ""}"><label part="label" for="control" class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"><slot ${slotted("defaultSlottedNodes")}></slot></label><div class="root" part="root">${startSlotTemplate(context, definition)}<input class="control" part="control" id="control" @input="${x => x.handleTextInput()}" @change="${x => x.handleChange()}" @keydown="${(x, c) => x.handleKeyDown(c.event)}" ?autofocus="${x => x.autofocus}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" minlength="${x => x.minlength}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readOnly}" ?required="${x => x.required}" size="${x => x.size}" :value="${x => x.displayText}" type="text" inputmode="numeric" min="${x => x.min}" max="${x => x.max}" step="${x => x.step}" aria-atomic="${x => x.ariaAtomic}" aria-busy="${x => x.ariaBusy}" aria-controls="${x => x.ariaControls}" aria-current="${x => x.ariaCurrent}" aria-describedby="${x => x.ariaDescribedby}" aria-details="${x => x.ariaDetails}" aria-disabled="${x => x.ariaDisabled}" aria-errormessage="${x => x.ariaErrormessage}" aria-flowto="${x => x.ariaFlowto}" aria-haspopup="${x => x.ariaHaspopup}" aria-hidden="${x => x.ariaHidden}" aria-invalid="${x => x.ariaInvalid}" aria-keyshortcuts="${x => x.ariaKeyshortcuts}" aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-live="${x => x.ariaLive}" aria-owns="${x => x.ariaOwns}" aria-relevant="${x => x.ariaRelevant}" aria-roledescription="${x => x.ariaRoledescription}" ${ref("control")} />${when(x => !x.hideStep && !x.readOnly && !x.disabled, html`<div class="controls" part="controls"><div class="step-up" part="step-up" @click="${x => x.stepUp()}"><slot name="step-up-glyph">${definition.stepUpGlyph || ""}</slot></div><div class="step-down" part="step-down" @click="${x => x.stepDown()}"><slot name="step-down-glyph">${definition.stepDownGlyph || ""}</slot></div></div>`)} ${endSlotTemplate(context, definition)}</div></template>`;
+const numberFieldTemplate = (context, definition) => html`<template class="${x => x.readOnly ? "readonly" : ""}"><label part="label" for="control" class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length ? "label" : "label label__hidden"}"><slot ${slotted("defaultSlottedNodes")}></slot></label><div class="root" part="root">${startSlotTemplate(context, definition)}<input class="control" part="control" id="control" @input="${x => x.handleTextInput()}" @change="${x => x.handleChange()}" @keydown="${(x, c) => x.handleKeyDown(c.event)}" @blur="${(x, c) => x.handleBlur()}" ?autofocus="${x => x.autofocus}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" minlength="${x => x.minlength}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readOnly}" ?required="${x => x.required}" size="${x => x.size}" type="text" inputmode="numeric" min="${x => x.min}" max="${x => x.max}" step="${x => x.step}" aria-atomic="${x => x.ariaAtomic}" aria-busy="${x => x.ariaBusy}" aria-controls="${x => x.ariaControls}" aria-current="${x => x.ariaCurrent}" aria-describedby="${x => x.ariaDescribedby}" aria-details="${x => x.ariaDetails}" aria-disabled="${x => x.ariaDisabled}" aria-errormessage="${x => x.ariaErrormessage}" aria-flowto="${x => x.ariaFlowto}" aria-haspopup="${x => x.ariaHaspopup}" aria-hidden="${x => x.ariaHidden}" aria-invalid="${x => x.ariaInvalid}" aria-keyshortcuts="${x => x.ariaKeyshortcuts}" aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-live="${x => x.ariaLive}" aria-owns="${x => x.ariaOwns}" aria-relevant="${x => x.ariaRelevant}" aria-roledescription="${x => x.ariaRoledescription}" ${ref("control")} />${when(x => !x.hideStep && !x.readOnly && !x.disabled, html`<div class="controls" part="controls"><div class="step-up" part="step-up" @click="${x => x.stepUp()}"><slot name="step-up-glyph">${definition.stepUpGlyph || ""}</slot></div><div class="step-down" part="step-down" @click="${x => x.stepDown()}"><slot name="step-down-glyph">${definition.stepDownGlyph || ""}</slot></div></div>`)} ${endSlotTemplate(context, definition)}</div></template>`;
 
 /**
  * The template for the {@link @microsoft/fast-foundation#(TextField:class)} component.
@@ -13939,42 +14101,32 @@ class NumberField$1 extends FormAssociatedNumberField {
      */
 
     this.step = 1;
-    /**
-     * Display text used in the input field
-     * @public
-     */
-
-    this.displayText = "";
   }
 
   maxChanged(previousValue, nextValue) {
-    const numb = parseFloat(nextValue);
+    var _a;
 
-    if (numb !== undefined) {
-      if (this.min !== undefined && numb < this.min) {
-        this.max = this.min;
-        this.min = numb;
-      } else {
-        this.max = numb;
-      }
+    this.max = Math.max(nextValue, (_a = this.min) !== null && _a !== void 0 ? _a : nextValue);
+    const min = Math.min(this.min, this.max);
+
+    if (this.min !== undefined && this.min !== min) {
+      this.min = min;
     }
 
-    this.updateValue(this.value);
+    this.valueChanged(this.value, this.value);
   }
 
   minChanged(previousValue, nextValue) {
-    const numb = parseFloat(nextValue);
+    var _a;
 
-    if (numb !== undefined) {
-      if (this.max !== undefined && numb > this.max) {
-        this.min = this.max;
-        this.max = numb;
-      } else {
-        this.min = numb;
-      }
+    this.min = Math.min(nextValue, (_a = this.max) !== null && _a !== void 0 ? _a : nextValue);
+    const max = Math.max(this.min, this.max);
+
+    if (this.max !== undefined && this.max !== max) {
+      this.max = max;
     }
 
-    this.updateValue(this.value);
+    this.valueChanged(this.value, this.value);
   }
   /**
    *
@@ -13984,39 +14136,24 @@ class NumberField$1 extends FormAssociatedNumberField {
 
 
   valueChanged(previousValue, nextValue) {
-    super.valueChanged(previousValue, nextValue);
-    this.updateValue(nextValue);
-  }
-  /**
-   * Updates the value. Validates that it's a number, between the min
-   *  and max, updates the proxy and emits events.
-   *
-   * @param value - value to be validated
-   * @internal
-   */
+    var _a, _b;
 
+    let value = parseFloat(nextValue);
 
-  updateValue(value) {
-    if (value === "" || isNaN(parseFloat(value))) {
+    if (isNaN(value)) {
       value = "";
     } else {
-      value = parseFloat(value);
-
-      if (this.min !== undefined && value < this.min) {
-        value = this.min;
-      } else if (this.max !== undefined && value > this.max) {
-        value = this.max;
-      }
-
-      value = parseFloat(value.toPrecision(12));
+      value = Math.min(value, (_a = this.max) !== null && _a !== void 0 ? _a : value);
+      value = Math.max(value, (_b = this.min) !== null && _b !== void 0 ? _b : value);
     }
 
+    this.value = value.toString();
+
     if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.value = value;
+      this.proxy.value = this.value;
     }
 
-    if (value != this.value) {
-      this.value = value.toString();
+    if (previousValue !== undefined) {
       this.$emit("input");
       this.$emit("change");
     }
@@ -14029,8 +14166,12 @@ class NumberField$1 extends FormAssociatedNumberField {
 
 
   stepUp() {
-    const stepUpValue = this.step + (parseFloat(this.value) || 0);
-    this.updateValue(stepUpValue);
+    var _a;
+
+    const value = parseFloat(this.value);
+    const stepUpValue = isNaN(value) ? (_a = this.min) !== null && _a !== void 0 ? _a : this.step : value + this.step;
+    this.value = stepUpValue.toString();
+    this.control.value = this.value;
   }
   /**
    * Decrements the value using the step value
@@ -14040,8 +14181,12 @@ class NumberField$1 extends FormAssociatedNumberField {
 
 
   stepDown() {
-    const stepDownValue = (parseFloat(this.value) || 0) - this.step;
-    this.updateValue(stepDownValue);
+    var _a;
+
+    const value = parseFloat(this.value);
+    const stepDownValue = isNaN(value) ? (_a = this.max) !== null && _a !== void 0 ? _a : 0 - this.step : value - this.step;
+    this.value = stepDownValue.toString();
+    this.control.value = this.value;
   }
   /**
    * @internal
@@ -14050,9 +14195,9 @@ class NumberField$1 extends FormAssociatedNumberField {
 
   connectedCallback() {
     super.connectedCallback();
-    this.displayText = this.value;
     this.proxy.setAttribute("type", "number");
     this.validate();
+    this.control.value = this.value;
 
     if (this.autofocus) {
       DOM.queueUpdate(() => {
@@ -14067,6 +14212,7 @@ class NumberField$1 extends FormAssociatedNumberField {
 
 
   handleTextInput() {
+    this.control.value = this.control.value.replace(/[^0-9\-+e.]/g, "");
     this.value = this.control.value;
   }
   /**
@@ -14104,6 +14250,16 @@ class NumberField$1 extends FormAssociatedNumberField {
 
     return true;
   }
+  /**
+   * Handles populating the input field with a validated value when
+   *  leaving the input field.
+   * @internal
+   */
+
+
+  handleBlur() {
+    this.control.value = this.value;
+  }
 
 }
 
@@ -14149,8 +14305,6 @@ __decorate$1([attr({
   converter: nullableNumberConverter
 })], NumberField$1.prototype, "min", void 0);
 
-__decorate$1([observable], NumberField$1.prototype, "displayText", void 0);
-
 __decorate$1([observable], NumberField$1.prototype, "defaultSlottedNodes", void 0);
 
 applyMixins(NumberField$1, StartEnd, DelegatesARIATextbox);
@@ -17716,6 +17870,11 @@ class Tooltip$1 extends FoundationElement {
         this.showTooltip();
         return;
       } else {
+        if (this.isAnchorHoveredFocused) {
+          this.showTooltip();
+          return;
+        }
+
         this.hideTooltip();
       }
     };