@ni/nimble-components 34.3.1 → 34.3.3

package/dist/all-components-bundle.js

@@ -358,9 +358,12 @@
        * If the value is true, the attribute is added; otherwise it is removed.
        */
       setBooleanAttribute(element, attributeName, value) {
-          value
-              ? element.setAttribute(attributeName, "")
-              : element.removeAttribute(attributeName);
+          if (value) {
+              element.setAttribute(attributeName, "");
+          }
+          else {
+              element.removeAttribute(attributeName);
+          }
       },
       /**
        * Removes all the child nodes of the provided parent node.
@@ -1809,7 +1812,7 @@
               }
           };
       }
-      catch (e) {
+      catch (_a) {
           // Do nothing if an error is thrown, the default
           // case handles FrozenArray.
       }
@@ -2395,9 +2398,14 @@
               const behavior = behaviors[i];
               if (targetBehaviors.has(behavior)) {
                   const count = targetBehaviors.get(behavior) - 1;
-                  count === 0 || force
-                      ? targetBehaviors.delete(behavior) && behaviorsToUnbind.push(behavior)
-                      : targetBehaviors.set(behavior, count);
+                  if (count === 0 || force) {
+                      if (targetBehaviors.delete(behavior)) {
+                          behaviorsToUnbind.push(behavior);
+                      }
+                  }
+                  else {
+                      targetBehaviors.set(behavior, count);
+                  }
               }
           }
           if (this._isConnected) {
@@ -5311,7 +5319,7 @@
           styleElement.sheet.insertRule("foo:focus-visible {color:inherit}", 0);
           _canUseFocusVisible = true;
       }
-      catch (e) {
+      catch (_a) {
           _canUseFocusVisible = false;
       }
       finally {
@@ -6833,14 +6841,20 @@
           if (childNodeWithHref === null &&
               item.hasAttribute("href") &&
               item instanceof BreadcrumbItem$1) {
-              isLastNode
-                  ? item.setAttribute("aria-current", "page")
-                  : item.removeAttribute("aria-current");
+              if (isLastNode) {
+                  item.setAttribute("aria-current", "page");
+              }
+              else {
+                  item.removeAttribute("aria-current");
+              }
           }
           else if (childNodeWithHref !== null) {
-              isLastNode
-                  ? childNodeWithHref.setAttribute("aria-current", "page")
-                  : childNodeWithHref.removeAttribute("aria-current");
+              if (isLastNode) {
+                  childNodeWithHref.setAttribute("aria-current", "page");
+              }
+              else {
+                  childNodeWithHref.removeAttribute("aria-current");
+              }
           }
       }
   };
@@ -7413,9 +7427,12 @@
               }
               // Browser support for requestSubmit is not comprehensive
               // so click the proxy if it isn't supported
-              typeof this.form.requestSubmit === "function"
-                  ? this.form.requestSubmit(this.proxy)
-                  : this.proxy.click();
+              if (typeof this.form.requestSubmit === "function") {
+                  this.form.requestSubmit(this.proxy);
+              }
+              else {
+                  this.proxy.click();
+              }
               if (!attached) {
                   this.detachProxy();
               }
@@ -7473,10 +7490,14 @@
           if (this.proxy instanceof HTMLInputElement) {
               this.proxy.type = this.type;
           }
-          next === "submit" && this.addEventListener("click", this.handleSubmission);
-          previous === "submit" && this.removeEventListener("click", this.handleSubmission);
-          next === "reset" && this.addEventListener("click", this.handleFormReset);
-          previous === "reset" && this.removeEventListener("click", this.handleFormReset);
+          if (next === "submit")
+              this.addEventListener("click", this.handleSubmission);
+          if (previous === "submit")
+              this.removeEventListener("click", this.handleSubmission);
+          if (next === "reset")
+              this.addEventListener("click", this.handleFormReset);
+          if (previous === "reset")
+              this.removeEventListener("click", this.handleFormReset);
       }
       /** {@inheritDoc (FormAssociated:interface).validate} */
       validate() {
@@ -12749,9 +12770,12 @@
           if (this.proxy instanceof HTMLInputElement) {
               this.proxy.readOnly = this.readOnly;
           }
-          this.readOnly
-              ? this.classList.add("readonly")
-              : this.classList.remove("readonly");
+          if (this.readOnly) {
+              this.classList.add("readonly");
+          }
+          else {
+              this.classList.remove("readonly");
+          }
       }
       constructor() {
           super();
@@ -12794,7 +12818,12 @@
           /**
            * @deprecated - this behavior already exists in the template and should not exist in the class.
            */
-          this.checked ? this.classList.add("checked") : this.classList.remove("checked");
+          if (this.checked) {
+              this.classList.add("checked");
+          }
+          else {
+              this.classList.remove("checked");
+          }
       }
   };
   __decorate([
@@ -12938,9 +12967,12 @@
                   tab.style[gridHorizontalProperty] = "";
                   tab.style[gridVerticalProperty] = "";
                   tab.style[gridProperty] = `${index + 1}`;
-                  !this.isHorizontal()
-                      ? tab.classList.add("vertical")
-                      : tab.classList.remove("vertical");
+                  if (!this.isHorizontal()) {
+                      tab.classList.add("vertical");
+                  }
+                  else {
+                      tab.classList.remove("vertical");
+                  }
               });
           };
           this.setTabPanels = () => {
@@ -12949,9 +12981,12 @@
                   const tabpanelId = this.tabpanelIds[index];
                   tabpanel.setAttribute("id", tabpanelId);
                   tabpanel.setAttribute("aria-labelledby", tabId);
-                  this.activeTabIndex !== index
-                      ? tabpanel.setAttribute("hidden", "")
-                      : tabpanel.removeAttribute("hidden");
+                  if (this.activeTabIndex !== index) {
+                      tabpanel.setAttribute("hidden", "");
+                  }
+                  else {
+                      tabpanel.removeAttribute("hidden");
+                  }
               });
           };
           this.handleTabClick = (event) => {
@@ -14768,6 +14803,258 @@
    */
   const focusVisible = `:${focusVisible$1}`;
 
+  const Theme = {
+      light: 'light',
+      dark: 'dark',
+      color: 'color'
+  };
+
+  /**
+   * Design token names should follow the token naming convention:
+   * See: https://github.com/ni/nimble/blob/main/packages/nimble-components/CONTRIBUTING.md#token-naming
+   */
+  const tokenNames = {
+      actionRgbPartialColor: 'action-rgb-partial-color',
+      applicationBackgroundColor: 'application-background-color',
+      dividerBackgroundColor: 'divider-background-color',
+      headerBackgroundColor: 'header-background-color',
+      sectionBackgroundColor: 'section-background-color',
+      sectionBackgroundImage: 'section-background-image',
+      buttonFillPrimaryColor: 'button-fill-primary-color',
+      buttonPrimaryFontColor: 'button-primary-font-color',
+      buttonFillAccentColor: 'button-fill-accent-color',
+      buttonAccentBlockFontColor: 'button-accent-block-font-color',
+      buttonAccentOutlineFontColor: 'button-accent-outline-font-color',
+      buttonBorderAccentOutlineColor: 'button-border-accent-outline-color',
+      fillSelectedColor: 'fill-selected-color',
+      fillSelectedRgbPartialColor: 'fill-selected-rgb-partial-color',
+      fillHoverSelectedColor: 'fill-hover-selected-color',
+      fillHoverColor: 'fill-hover-color',
+      fillHoverRgbPartialColor: 'fill-hover-rgb-partial-color',
+      fillDownColor: 'fill-down-color',
+      borderColor: 'border-color',
+      borderRgbPartialColor: 'border-rgb-partial-color',
+      failColor: 'fail-color',
+      warningColor: 'warning-color',
+      passColor: 'pass-color',
+      informationColor: 'information-color',
+      borderHoverColor: 'border-hover-color',
+      iconColor: 'icon-color',
+      modalBackdropColor: 'modal-backdrop-color',
+      popupBorderColor: 'popup-border-color',
+      cardBorderColor: 'card-border-color',
+      tagFillColor: 'tag-fill-color',
+      controlHeight: 'control-height',
+      controlSlimHeight: 'control-slim-height',
+      smallPadding: 'small-padding',
+      mediumPadding: 'medium-padding',
+      standardPadding: 'standard-padding',
+      largePadding: 'large-padding',
+      labelHeight: 'label-height',
+      borderWidth: 'border-width',
+      dividerWidth: 'divider-width',
+      iconSize: 'icon-size',
+      groupHeaderTextTransform: 'group-header-text-transform',
+      drawerWidth: 'drawer-width',
+      dialogSmallWidth: 'dialog-small-width',
+      dialogSmallHeight: 'dialog-small-height',
+      dialogSmallMaxHeight: 'dialog-small-max-height',
+      dialogLargeWidth: 'dialog-large-width',
+      dialogLargeHeight: 'dialog-large-height',
+      dialogLargeMaxHeight: 'dialog-large-max-height',
+      menuMinWidth: 'menu-min-width',
+      bannerGapSize: 'banner-gap-size',
+      spinnerSmallHeight: 'spinner-small-height',
+      spinnerMediumHeight: 'spinner-medium-height',
+      spinnerLargeHeight: 'spinner-large-height',
+      tableFitRowsHeight: 'table-fit-rows-height',
+      smallDelay: 'small-delay',
+      mediumDelay: 'medium-delay',
+      largeDelay: 'large-delay',
+      headlinePlus1Font: 'headline-plus-1-font',
+      headlineFont: 'headline-font',
+      tableHeaderFont: 'table-header-font',
+      titlePlus2Font: 'title-plus-2-font',
+      titlePlus1Font: 'title-plus-1-font',
+      titleFont: 'title-font',
+      subtitlePlus1Font: 'subtitle-plus-1-font',
+      subtitleFont: 'subtitle-font',
+      linkFont: 'link-font',
+      linkActiveFont: 'link-active-font',
+      linkProminentFont: 'link-prominent-font',
+      linkActiveProminentFont: 'link-active-prominent-font',
+      placeholderFont: 'placeholder-font',
+      bodyFont: 'body-font',
+      bodyEmphasizedFont: 'body-emphasized-font',
+      bodyPlus1Font: 'body-plus-1-font',
+      bodyPlus1EmphasizedFont: 'body-plus-1-emphasized-font',
+      groupHeaderFont: 'group-header-font',
+      controlLabelFont: 'control-label-font',
+      buttonLabelFont: 'button-label-font',
+      tooltipCaptionFont: 'tooltip-caption-font',
+      tooltipBackgroundColor: 'tooltip-background-color',
+      errorTextFont: 'error-text-font',
+      tableRowBorderColor: 'table-row-border-color',
+      elevation1BoxShadow: 'elevation-1-box-shadow',
+      elevation2BoxShadow: 'elevation-2-box-shadow',
+      elevation3BoxShadow: 'elevation-3-box-shadow',
+      graphGridlineColor: 'graph-gridline-color',
+      graphTrace1Color: 'graph-trace-1-color',
+      graphTrace2Color: 'graph-trace-2-color',
+      graphTrace3Color: 'graph-trace-3-color',
+      graphTrace4Color: 'graph-trace-4-color',
+      graphTrace5Color: 'graph-trace-5-color',
+      graphTrace6Color: 'graph-trace-6-color',
+      graphTrace7Color: 'graph-trace-7-color',
+      graphTrace8Color: 'graph-trace-8-color',
+      mentionFont: 'mention-font',
+      calendarEventBackgroundStaticColor: 'calendar-event-background-static-color',
+      calendarEventBackgroundDynamicColor: 'calendar-event-background-dynamic-color',
+      calendarEventBackgroundTransientColor: 'calendar-event-background-transient-color',
+      calendarEventBorderStaticColor: 'calendar-event-border-static-color',
+      calendarEventBorderTransientColor: 'calendar-event-border-transient-color',
+      calendarEventStaticFontColor: 'calendar-event-static-font-color',
+      calendarEventDynamicFontColor: 'calendar-event-dynamic-font-color',
+      calendarEventTransientFontColor: 'calendar-event-transient-font-color',
+      calendarEventBackgroundHoverStaticColor: 'calendar-event-background-hover-static-color',
+      calendarEventBackgroundHoverDynamicColor: 'calendar-event-background-hover-dynamic-color',
+      calendarEventBackgroundHoverTransientColor: 'calendar-event-background-hover-transient-color',
+      calendarEventOuterBorderHighlightedColor: 'calendar-event-outer-border-highlighted-color',
+      calendarRowBackgroundSelectedColor: 'calendar-row-background-selected-color',
+      calendarRowBackgroundConflictColor: 'calendar-row-background-conflict-color',
+      calendarEventFillBlockedColor: 'calendar-event-fill-blocked-color',
+      calendarGrabHandleBackgroundColor: 'calendar-grab-handle-background-color',
+      calendarGridBorderColor: 'calendar-grid-border-color',
+      calendarGroupHeaderBackgroundColor: 'calendar-group-header-background-color'
+  };
+  const prefix = 'ni-nimble';
+  const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
+
+  const template$O = html `<slot></slot>`;
+
+  const styles$11 = css `
+    ${display('contents')}
+`;
+
+  /**
+   * Observable class to subscribe to changes in the page's lang attribute
+   */
+  class DocumentElementLang {
+      constructor() {
+          this.lang = document.documentElement.lang;
+          const observer = new MutationObserver(mutations => {
+              for (const mutation of mutations) {
+                  if (mutation.type === 'attributes'
+                      && mutation.attributeName === 'lang') {
+                      this.lang = mutation.target.lang;
+                  }
+              }
+          });
+          observer.observe(document.documentElement, {
+              attributeFilter: ['lang']
+          });
+      }
+  }
+  __decorate([
+      observable
+  ], DocumentElementLang.prototype, "lang", void 0);
+  const documentElementLang = new DocumentElementLang();
+
+  function isValidLang(value) {
+      try {
+          // We are relying on the Locale constructor to validate the value
+          // eslint-disable-next-line no-new
+          new Intl.Locale(value);
+          return true;
+      }
+      catch (e) {
+          return false;
+      }
+  }
+  const lang = DesignToken.create({
+      name: 'lang',
+      cssCustomPropertyName: null
+  }).withDefault(() => (isValidLang(documentElementLang.lang) ? documentElementLang.lang : 'en-US'));
+  // Not represented as a CSS Custom Property, instead available
+  // as an attribute of theme provider.
+  const direction = DesignToken.create({
+      name: 'direction',
+      cssCustomPropertyName: null
+  }).withDefault(Direction.ltr);
+  const theme = DesignToken.create({
+      name: 'theme',
+      cssCustomPropertyName: null
+  }).withDefault(Theme.light);
+  /**
+   * The ThemeProvider implementation. Add this component to the page and set its `theme` attribute to control
+   * the values of design tokens that provide colors and fonts as CSS custom properties to any descendant components.
+   * @internal
+   */
+  class ThemeProvider extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          this.theme = Theme.light;
+          this.langIsInvalid = false;
+      }
+      get validity() {
+          return {
+              invalidLang: this.langIsInvalid
+          };
+      }
+      checkValidity() {
+          return !this.langIsInvalid;
+      }
+      langChanged(_prev, next) {
+          if (next === null || next === undefined) {
+              lang.deleteValueFor(this);
+              this.langIsInvalid = false;
+              return;
+          }
+          if (isValidLang(next)) {
+              lang.setValueFor(this, next);
+              this.langIsInvalid = false;
+          }
+          else {
+              lang.deleteValueFor(this);
+              this.langIsInvalid = true;
+          }
+      }
+      directionChanged(_prev, next) {
+          if (next !== undefined && next !== null) {
+              direction.setValueFor(this, next);
+          }
+          else {
+              direction.deleteValueFor(this);
+          }
+      }
+      themeChanged(_prev, next) {
+          if (next !== undefined && next !== null) {
+              theme.setValueFor(this, next);
+          }
+          else {
+              theme.deleteValueFor(this);
+          }
+      }
+  }
+  __decorate([
+      attr()
+  ], ThemeProvider.prototype, "lang", void 0);
+  __decorate([
+      attr()
+  ], ThemeProvider.prototype, "direction", void 0);
+  __decorate([
+      attr()
+  ], ThemeProvider.prototype, "theme", void 0);
+  const nimbleDesignSystemProvider = ThemeProvider.compose({
+      baseName: 'theme-provider',
+      styles: styles$11,
+      template: template$O
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleDesignSystemProvider());
+  const themeProviderTag = 'nimble-theme-provider';
+
   /**
    * Ensures that an input number does not exceed a max value and is not less than a min value.
    * @param i - the number to clamp
@@ -15994,258 +16281,6 @@
   const MediumDelay = "0.15s"; // Medium animation delay for control state change animation
   const LargeDelay = "0.25s"; // Long animation delay used for control state change animation
 
-  const Theme = {
-      light: 'light',
-      dark: 'dark',
-      color: 'color'
-  };
-
-  /**
-   * Design token names should follow the token naming convention:
-   * See: https://github.com/ni/nimble/blob/main/packages/nimble-components/CONTRIBUTING.md#token-naming
-   */
-  const tokenNames = {
-      actionRgbPartialColor: 'action-rgb-partial-color',
-      applicationBackgroundColor: 'application-background-color',
-      dividerBackgroundColor: 'divider-background-color',
-      headerBackgroundColor: 'header-background-color',
-      sectionBackgroundColor: 'section-background-color',
-      sectionBackgroundImage: 'section-background-image',
-      buttonFillPrimaryColor: 'button-fill-primary-color',
-      buttonPrimaryFontColor: 'button-primary-font-color',
-      buttonFillAccentColor: 'button-fill-accent-color',
-      buttonAccentBlockFontColor: 'button-accent-block-font-color',
-      buttonAccentOutlineFontColor: 'button-accent-outline-font-color',
-      buttonBorderAccentOutlineColor: 'button-border-accent-outline-color',
-      fillSelectedColor: 'fill-selected-color',
-      fillSelectedRgbPartialColor: 'fill-selected-rgb-partial-color',
-      fillHoverSelectedColor: 'fill-hover-selected-color',
-      fillHoverColor: 'fill-hover-color',
-      fillHoverRgbPartialColor: 'fill-hover-rgb-partial-color',
-      fillDownColor: 'fill-down-color',
-      borderColor: 'border-color',
-      borderRgbPartialColor: 'border-rgb-partial-color',
-      failColor: 'fail-color',
-      warningColor: 'warning-color',
-      passColor: 'pass-color',
-      informationColor: 'information-color',
-      borderHoverColor: 'border-hover-color',
-      iconColor: 'icon-color',
-      modalBackdropColor: 'modal-backdrop-color',
-      popupBorderColor: 'popup-border-color',
-      cardBorderColor: 'card-border-color',
-      tagFillColor: 'tag-fill-color',
-      controlHeight: 'control-height',
-      controlSlimHeight: 'control-slim-height',
-      smallPadding: 'small-padding',
-      mediumPadding: 'medium-padding',
-      standardPadding: 'standard-padding',
-      largePadding: 'large-padding',
-      labelHeight: 'label-height',
-      borderWidth: 'border-width',
-      dividerWidth: 'divider-width',
-      iconSize: 'icon-size',
-      groupHeaderTextTransform: 'group-header-text-transform',
-      drawerWidth: 'drawer-width',
-      dialogSmallWidth: 'dialog-small-width',
-      dialogSmallHeight: 'dialog-small-height',
-      dialogSmallMaxHeight: 'dialog-small-max-height',
-      dialogLargeWidth: 'dialog-large-width',
-      dialogLargeHeight: 'dialog-large-height',
-      dialogLargeMaxHeight: 'dialog-large-max-height',
-      menuMinWidth: 'menu-min-width',
-      bannerGapSize: 'banner-gap-size',
-      spinnerSmallHeight: 'spinner-small-height',
-      spinnerMediumHeight: 'spinner-medium-height',
-      spinnerLargeHeight: 'spinner-large-height',
-      tableFitRowsHeight: 'table-fit-rows-height',
-      smallDelay: 'small-delay',
-      mediumDelay: 'medium-delay',
-      largeDelay: 'large-delay',
-      headlinePlus1Font: 'headline-plus-1-font',
-      headlineFont: 'headline-font',
-      tableHeaderFont: 'table-header-font',
-      titlePlus2Font: 'title-plus-2-font',
-      titlePlus1Font: 'title-plus-1-font',
-      titleFont: 'title-font',
-      subtitlePlus1Font: 'subtitle-plus-1-font',
-      subtitleFont: 'subtitle-font',
-      linkFont: 'link-font',
-      linkActiveFont: 'link-active-font',
-      linkProminentFont: 'link-prominent-font',
-      linkActiveProminentFont: 'link-active-prominent-font',
-      placeholderFont: 'placeholder-font',
-      bodyFont: 'body-font',
-      bodyEmphasizedFont: 'body-emphasized-font',
-      bodyPlus1Font: 'body-plus-1-font',
-      bodyPlus1EmphasizedFont: 'body-plus-1-emphasized-font',
-      groupHeaderFont: 'group-header-font',
-      controlLabelFont: 'control-label-font',
-      buttonLabelFont: 'button-label-font',
-      tooltipCaptionFont: 'tooltip-caption-font',
-      tooltipBackgroundColor: 'tooltip-background-color',
-      errorTextFont: 'error-text-font',
-      tableRowBorderColor: 'table-row-border-color',
-      elevation1BoxShadow: 'elevation-1-box-shadow',
-      elevation2BoxShadow: 'elevation-2-box-shadow',
-      elevation3BoxShadow: 'elevation-3-box-shadow',
-      graphGridlineColor: 'graph-gridline-color',
-      graphTrace1Color: 'graph-trace-1-color',
-      graphTrace2Color: 'graph-trace-2-color',
-      graphTrace3Color: 'graph-trace-3-color',
-      graphTrace4Color: 'graph-trace-4-color',
-      graphTrace5Color: 'graph-trace-5-color',
-      graphTrace6Color: 'graph-trace-6-color',
-      graphTrace7Color: 'graph-trace-7-color',
-      graphTrace8Color: 'graph-trace-8-color',
-      mentionFont: 'mention-font',
-      calendarEventBackgroundStaticColor: 'calendar-event-background-static-color',
-      calendarEventBackgroundDynamicColor: 'calendar-event-background-dynamic-color',
-      calendarEventBackgroundTransientColor: 'calendar-event-background-transient-color',
-      calendarEventBorderStaticColor: 'calendar-event-border-static-color',
-      calendarEventBorderTransientColor: 'calendar-event-border-transient-color',
-      calendarEventStaticFontColor: 'calendar-event-static-font-color',
-      calendarEventDynamicFontColor: 'calendar-event-dynamic-font-color',
-      calendarEventTransientFontColor: 'calendar-event-transient-font-color',
-      calendarEventBackgroundHoverStaticColor: 'calendar-event-background-hover-static-color',
-      calendarEventBackgroundHoverDynamicColor: 'calendar-event-background-hover-dynamic-color',
-      calendarEventBackgroundHoverTransientColor: 'calendar-event-background-hover-transient-color',
-      calendarEventOuterBorderHighlightedColor: 'calendar-event-outer-border-highlighted-color',
-      calendarRowBackgroundSelectedColor: 'calendar-row-background-selected-color',
-      calendarRowBackgroundConflictColor: 'calendar-row-background-conflict-color',
-      calendarEventFillBlockedColor: 'calendar-event-fill-blocked-color',
-      calendarGrabHandleBackgroundColor: 'calendar-grab-handle-background-color',
-      calendarGridBorderColor: 'calendar-grid-border-color',
-      calendarGroupHeaderBackgroundColor: 'calendar-group-header-background-color'
-  };
-  const prefix = 'ni-nimble';
-  const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
-
-  const template$O = html `<slot></slot>`;
-
-  const styles$11 = css `
-    ${display('contents')}
-`;
-
-  /**
-   * Observable class to subscribe to changes in the page's lang attribute
-   */
-  class DocumentElementLang {
-      constructor() {
-          this.lang = document.documentElement.lang;
-          const observer = new MutationObserver(mutations => {
-              for (const mutation of mutations) {
-                  if (mutation.type === 'attributes'
-                      && mutation.attributeName === 'lang') {
-                      this.lang = mutation.target.lang;
-                  }
-              }
-          });
-          observer.observe(document.documentElement, {
-              attributeFilter: ['lang']
-          });
-      }
-  }
-  __decorate([
-      observable
-  ], DocumentElementLang.prototype, "lang", void 0);
-  const documentElementLang = new DocumentElementLang();
-
-  function isValidLang(value) {
-      try {
-          // We are relying on the Locale constructor to validate the value
-          // eslint-disable-next-line no-new
-          new Intl.Locale(value);
-          return true;
-      }
-      catch (e) {
-          return false;
-      }
-  }
-  const lang = DesignToken.create({
-      name: 'lang',
-      cssCustomPropertyName: null
-  }).withDefault(() => (isValidLang(documentElementLang.lang) ? documentElementLang.lang : 'en-US'));
-  // Not represented as a CSS Custom Property, instead available
-  // as an attribute of theme provider.
-  const direction = DesignToken.create({
-      name: 'direction',
-      cssCustomPropertyName: null
-  }).withDefault(Direction.ltr);
-  const theme = DesignToken.create({
-      name: 'theme',
-      cssCustomPropertyName: null
-  }).withDefault(Theme.light);
-  /**
-   * The ThemeProvider implementation. Add this component to the page and set its `theme` attribute to control
-   * the values of design tokens that provide colors and fonts as CSS custom properties to any descendant components.
-   * @internal
-   */
-  class ThemeProvider extends FoundationElement {
-      constructor() {
-          super(...arguments);
-          this.theme = Theme.light;
-          this.langIsInvalid = false;
-      }
-      get validity() {
-          return {
-              invalidLang: this.langIsInvalid
-          };
-      }
-      checkValidity() {
-          return !this.langIsInvalid;
-      }
-      langChanged(_prev, next) {
-          if (next === null || next === undefined) {
-              lang.deleteValueFor(this);
-              this.langIsInvalid = false;
-              return;
-          }
-          if (isValidLang(next)) {
-              lang.setValueFor(this, next);
-              this.langIsInvalid = false;
-          }
-          else {
-              lang.deleteValueFor(this);
-              this.langIsInvalid = true;
-          }
-      }
-      directionChanged(_prev, next) {
-          if (next !== undefined && next !== null) {
-              direction.setValueFor(this, next);
-          }
-          else {
-              direction.deleteValueFor(this);
-          }
-      }
-      themeChanged(_prev, next) {
-          if (next !== undefined && next !== null) {
-              theme.setValueFor(this, next);
-          }
-          else {
-              theme.deleteValueFor(this);
-          }
-      }
-  }
-  __decorate([
-      attr()
-  ], ThemeProvider.prototype, "lang", void 0);
-  __decorate([
-      attr()
-  ], ThemeProvider.prototype, "direction", void 0);
-  __decorate([
-      attr()
-  ], ThemeProvider.prototype, "theme", void 0);
-  const nimbleDesignSystemProvider = ThemeProvider.compose({
-      baseName: 'theme-provider',
-      styles: styles$11,
-      template: template$O
-  });
-  DesignSystem.getOrCreate()
-      .withPrefix('nimble')
-      .register(nimbleDesignSystemProvider());
-  const themeProviderTag = 'nimble-theme-provider';
-
   /**
    * Convert a hexadecimal color string to an RGBA CSS color string
    * Example: '#ff0102' to 'rgba(255, 1, 2, 1)'
@@ -16258,157 +16293,305 @@
       return `rgba(${r * 255}, ${g * 255}, ${b * 255}, ${alpha})`;
   }
 
-  // Color Tokens
-  const actionRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.actionRgbPartialColor)).withDefault((element) => hexToRgbPartial(getColorForTheme(element, Black91, Black15, White)));
-  const applicationBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.applicationBackgroundColor)).withDefault((element) => getColorForTheme(element, White, Black85, ForestGreen));
-  DesignToken.create(styleNameFromTokenName(tokenNames.headerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, Black88, ForestGreen));
-  DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
-  DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundImage)).withDefault((element) => {
-      const start = getColorForTheme(element, Black15, Black82, ForestGreen);
-      const end = getColorForTheme(element, hexToRgbaCssColor(Black15, 0), hexToRgbaCssColor(Black82, 0), hexToRgbaCssColor(ForestGreen, 0));
-      return `linear-gradient(${start}, ${end})`;
-  });
-  DesignToken.create(styleNameFromTokenName(tokenNames.dividerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
-  const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.2));
-  const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
-  const fillHoverSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.15));
-  const fillHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverColor)).withDefault((element) => hexToRgbaCssColor(getFillHoverColorForTheme(element), 0.1));
-  DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillHoverColorForTheme(element)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.fillDownColor)).withDefault((element) => hexToRgbaCssColor(getFillDownColorForTheme(element), 0.15));
-  const borderColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderColor)).withDefault((element) => getDefaultLineColorForTheme(element));
-  const borderRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderRgbPartialColor)).withDefault((element) => hexToRgbPartial(getDefaultLineColorForTheme(element)));
-  const failColor = DesignToken.create(styleNameFromTokenName(tokenNames.failColor)).withDefault((element) => getFailColorForTheme(element));
-  const warningColor = DesignToken.create(styleNameFromTokenName(tokenNames.warningColor)).withDefault((element) => getWarningColorForTheme(element));
-  const passColor = DesignToken.create(styleNameFromTokenName(tokenNames.passColor)).withDefault((element) => getPassColorForTheme(element));
-  const informationColor = DesignToken.create(styleNameFromTokenName(tokenNames.informationColor)).withDefault((element) => getInformationColorForTheme(element));
-  const borderHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderHoverColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, White));
-  // Component Color Tokens
-  const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.iconColor)).withDefault((element) => getColorForTheme(element, Black91, Black15, White));
-  const modalBackdropColor = DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
-  const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
-  const cardBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.cardBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.1));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphGridlineColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.2));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace1Color)).withDefault((element) => getColorForTheme(element, NiIndigoDark2, NiSky, White));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace2Color)).withDefault((element) => getColorForTheme(element, NiScarletDark1, NiScarlet, hexToRgbaCssColor(White, 0.7)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace3Color)).withDefault((element) => getColorForTheme(element, NiFernDark1, NiFern, hexToRgbaCssColor(White, 0.4)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace4Color)).withDefault((element) => getColorForTheme(element, NiPlumDark1, NiSeaLight, hexToRgbaCssColor(White, 0.25)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace5Color)).withDefault((element) => getColorForTheme(element, NiSeaDark2, NiSea, hexToRgbaCssColor(White, 0.55)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace6Color)).withDefault((element) => getColorForTheme(element, NiTulip, NiTulip, hexToRgbaCssColor(White, 0.85)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace7Color)).withDefault((element) => getColorForTheme(element, NiScarletDark3, NiHoneyLight, hexToRgbaCssColor(White, 0.325)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.graphTrace8Color)).withDefault((element) => getColorForTheme(element, NiIndigo, NiIndigo, hexToRgbaCssColor(White, 0.625)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
-  const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
-  DesignToken.create(styleNameFromTokenName(tokenNames.tagFillColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.1));
-  const buttonFillPrimaryColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonFillPrimaryColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.75), hexToRgbaCssColor(Black15, 0.3), hexToRgbaCssColor(White, 0.3)));
-  const buttonPrimaryFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonPrimaryFontColor)).withDefault((element) => getColorForTheme(element, Black15, Black15, White));
-  const buttonFillAccentColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonFillAccentColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark, DigitalGreenLight, hexToRgbaCssColor(White, 0.1)));
-  const buttonAccentBlockFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonAccentBlockFontColor)).withDefault((element) => getColorForTheme(element, White, Black15, White));
-  const buttonAccentOutlineFontColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonAccentOutlineFontColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, White));
-  const buttonBorderAccentOutlineColor = DesignToken.create(styleNameFromTokenName(tokenNames.buttonBorderAccentOutlineColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, hexToRgbaCssColor(White, 0.3)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight10, PowerGreen10, PowerGreen10));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundDynamicColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, DigitalGreenDark, DigitalGreenDark));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark105, DigitalGreenDark, DigitalGreenDark));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBorderStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, DigitalGreenLight));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBorderTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, hexToRgbaCssColor(PowerGreen, 0.85), hexToRgbaCssColor(PowerGreen, 0.85)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventStaticFontColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, PowerGreenDark50, PowerGreenDark50));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventDynamicFontColor)).withDefault((element) => getColorForTheme(element, White, White, White));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventTransientFontColor)).withDefault((element) => getColorForTheme(element, White, White, White));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight30, PowerGreen30, PowerGreen30));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverDynamicColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventOuterBorderHighlightedColor)).withDefault((element) => getColorForTheme(element, Black88, hexToRgbaCssColor(White, 0.85), hexToRgbaCssColor(White, 0.85)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarRowBackgroundSelectedColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(DigitalGreenLight, 0.2), hexToRgbaCssColor(PowerGreen, 0.2), hexToRgbaCssColor(PowerGreen, 0.2)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarRowBackgroundConflictColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Fail100LightUi, 0.2), hexToRgbaCssColor(Fail100DarkUi, 0.2), hexToRgbaCssColor(Fail100DarkUi, 0.2)));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventFillBlockedColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.07), Black82, Black82));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarGrabHandleBackgroundColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, PowerGreen));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarGridBorderColor)).withDefault((element) => getColorForTheme(element, Black22, Black80, Black80));
-  DesignToken.create(styleNameFromTokenName(tokenNames.calendarGroupHeaderBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, hexToRgbaCssColor(Black91, 0.1), hexToRgbaCssColor(Black91, 0.1)));
-  // Component Sizing Tokens
-  const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
-  const controlSlimHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlSlimHeight)).withDefault('24px');
-  const smallPadding = DesignToken.create(styleNameFromTokenName(tokenNames.smallPadding)).withDefault('4px');
-  const mediumPadding = DesignToken.create(styleNameFromTokenName(tokenNames.mediumPadding)).withDefault('8px');
-  const standardPadding = DesignToken.create(styleNameFromTokenName(tokenNames.standardPadding)).withDefault('16px');
-  const largePadding = DesignToken.create(styleNameFromTokenName(tokenNames.largePadding)).withDefault('24px');
-  DesignToken.create(styleNameFromTokenName(tokenNames.labelHeight)).withDefault('16px');
-  const borderWidth = DesignToken.create(styleNameFromTokenName(tokenNames.borderWidth)).withDefault('1px');
-  DesignToken.create(styleNameFromTokenName(tokenNames.dividerWidth)).withDefault('2px');
-  const iconSize = DesignToken.create(styleNameFromTokenName(tokenNames.iconSize)).withDefault('16px');
-  const drawerWidth = DesignToken.create(styleNameFromTokenName(tokenNames.drawerWidth)).withDefault('784px');
-  const dialogSmallWidth = DesignToken.create(styleNameFromTokenName(tokenNames.dialogSmallWidth)).withDefault('400px');
-  const dialogSmallHeight = DesignToken.create(styleNameFromTokenName(tokenNames.dialogSmallHeight)).withDefault('fit-content');
-  const dialogSmallMaxHeight = DesignToken.create(styleNameFromTokenName(tokenNames.dialogSmallMaxHeight)).withDefault('600px');
-  DesignToken.create(styleNameFromTokenName(tokenNames.dialogLargeWidth)).withDefault('1024px');
-  DesignToken.create(styleNameFromTokenName(tokenNames.dialogLargeHeight)).withDefault('680px');
-  DesignToken.create(styleNameFromTokenName(tokenNames.dialogLargeMaxHeight)).withDefault('680px');
-  const menuMinWidth = DesignToken.create(styleNameFromTokenName(tokenNames.menuMinWidth)).withDefault('176px');
-  DesignToken.create(styleNameFromTokenName(tokenNames.bannerGapSize)).withDefault('1px');
-  const spinnerSmallHeight = DesignToken.create(styleNameFromTokenName(tokenNames.spinnerSmallHeight)).withDefault('16px');
-  DesignToken.create(styleNameFromTokenName(tokenNames.spinnerMediumHeight)).withDefault('32px');
-  DesignToken.create(styleNameFromTokenName(tokenNames.spinnerLargeHeight)).withDefault('64px');
-  // The token gets a default value of the table's default height (480px)
-  // but is given a calculated value in the table styles.
-  const tableFitRowsHeight = DesignToken.create(styleNameFromTokenName(tokenNames.tableFitRowsHeight)).withDefault('480px');
-  // Drop Shadow Tokens
-  DesignToken.create(styleNameFromTokenName(tokenNames.elevation1BoxShadow)).withDefault((element) => `0px 1px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
-  const elevation2BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation2BoxShadow)).withDefault((element) => `0px 2px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
-  const elevation3BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation3BoxShadow)).withDefault((element) => `0px 4px 8px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.3)}`);
-  // Font Tokens
-  createFontTokens(tokenNames.headlineFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline1Family, Headline1Weight, Headline1Size, Headline1LineHeight);
-  createFontTokens(tokenNames.headlinePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline2Family, Headline2Weight, Headline2Size, Headline2LineHeight);
-  createFontTokens(tokenNames.titlePlus2Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title3Family, Title3Weight, Title3Size, Title3LineHeight);
-  const [titlePlus1Font, titlePlus1FontColor, titlePlus1DisabledFontColor, titlePlus1FontFamily, titlePlus1FontWeight, titlePlus1FontSize, titlePlus1FontLineHeight] = createFontTokens(tokenNames.titlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title2Family, Title2Weight, Title2Size, Title2LineHeight);
-  createFontTokens(tokenNames.titleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title1Family, Title1Weight, Title1Size, Title1LineHeight);
-  const [subtitlePlus1Font, subtitlePlus1FontColor, subtitlePlus1DisabledFontColor, subtitlePlus1FontFamily, subtitlePlus1FontWeight, subtitlePlus1FontSize, subtitlePlus1FontLineHeight] = createFontTokens(tokenNames.subtitlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle2Family, Subtitle2Weight, Subtitle2Size, Subtitle2LineHeight);
-  const [subtitleFont, subtitleFontColor, subtitleDisabledFontColor, subtitleFontFamily, subtitleFontWeight, subtitleFontSize, subtitleFontLineHeight] = createFontTokens(tokenNames.subtitleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight);
-  const [linkFont, linkFontColor, linkDisabledFontColor, linkFontFamily, linkFontWeight, linkFontSize, linkFontLineHeight] = createFontTokens(tokenNames.linkFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-  const [linkActiveFont, linkActiveFontColor, linkActiveDisabledFontColor, linkActiveFontFamily, linkActiveFontWeight, linkActiveFontSize, linkActiveFontLineHeight] = createFontTokens(tokenNames.linkActiveFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.75)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-  const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, White), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-  const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.75)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight);
-  const [placeholderFont, placeholderFontColor, placeholderDisabledFontColor, placeholderFontFamily, placeholderFontWeight, placeholderFontSize, placeholderFontLineHeight] = createFontTokens(tokenNames.placeholderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight);
-  const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight] = createFontTokens(tokenNames.bodyFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyWeight, BodySize, BodyLineHeight);
-  const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight, bodyEmphasizedFontSize, bodyEmphasizedFontLineHeight] = createFontTokens(tokenNames.bodyEmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight);
-  createFontTokens(tokenNames.bodyPlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Body2Family, Body2Weight, Body2Size, Body2LineHeight);
-  createFontTokens(tokenNames.bodyPlus1EmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasized2Family, BodyEmphasized2Weight, BodyEmphasized2Size, BodyEmphasized2LineHeight);
-  const [groupHeaderFont, groupHeaderFontColor, groupHeaderDisabledFontColor, groupHeaderFontFamily, groupHeaderFontWeight, groupHeaderFontSize, groupHeaderFontLineHeight] = createFontTokens(tokenNames.groupHeaderFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), GroupLabel1Family, GroupLabel1Weight, GroupLabel1Size, GroupLabel1LineHeight);
-  const [controlLabelFont, controlLabelFontColor, controlLabelDisabledFontColor, controlLabelFontFamily, controlLabelFontWeight, controlLabelFontSize, controlLabelFontLineHeight] = createFontTokens(tokenNames.controlLabelFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), ControlLabel1Family, ControlLabel1Weight, ControlLabel1Size, ControlLabel1LineHeight);
-  const [buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, buttonLabelFontFamily, buttonLabelFontWeight, buttonLabelFontSize, buttonLabelFontLineHeight] = createFontTokens(tokenNames.buttonLabelFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), ButtonLabel1Family, ButtonLabel1Weight, ButtonLabel1Size, ButtonLabel1LineHeight);
-  const [tooltipCaptionFont, tooltipCaptionFontColor, tooltipCaptionDisabledFontColor, tooltipCaptionFontFamily, tooltipCaptionFontWeight, tooltipCaptionFontSize, tooltipCaptionFontLineHeight] = createFontTokens(tokenNames.tooltipCaptionFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), TooltipCaptionFamily, TooltipCaptionWeight, TooltipCaptionSize, TooltipCaptionLineHeight);
-  const [errorTextFont, errorTextFontColor, errorTextDisabledFontColor, errorTextFontFamily, errorTextFontWeight, errorTextFontSize, errorTextFontLineHeight] = createFontTokens(tokenNames.errorTextFont, (element) => getFailColorForTheme(element), (element) => hexToRgbaCssColor(getFailColorForTheme(element), 0.3), ErrorLightUiFamily, ErrorLightUiWeight, ErrorLightUiSize, TooltipCaptionLineHeight);
-  const [tableHeaderFont, tableHeaderFontColor, tableHeaderDisabledFontColor, tableHeaderFontFamily, tableHeaderFontWeight, tableHeaderFontSize, tableHeaderFontLineHeight] = createFontTokens(tokenNames.tableHeaderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), GridHeaderFamily, GridHeaderWeight, GridHeaderSize, TooltipCaptionLineHeight);
-  createFontTokens(tokenNames.mentionFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyEmphasizedWeight, BodySize, BodyLineHeight);
-  // Font Transform Tokens
-  const groupHeaderTextTransform = DesignToken.create(styleNameFromTokenName(tokenNames.groupHeaderTextTransform)).withDefault('uppercase');
-  // Animation Tokens
-  const smallDelay = DesignToken.create(styleNameFromTokenName(tokenNames.smallDelay)).withDefault(SmallDelay);
-  const mediumDelay = DesignToken.create(styleNameFromTokenName(tokenNames.mediumDelay)).withDefault(MediumDelay);
-  const largeDelay = DesignToken.create(styleNameFromTokenName(tokenNames.largeDelay)).withDefault(LargeDelay);
-  // Private helpers functions
+  // #region token values
+  const alias = {
+      failColor: createThemeColor(Fail100LightUi, Fail100DarkUi, White),
+      lineColor: createThemeColor(Black91, Black15, White),
+      fillSelectedColor: createThemeColor(DigitalGreenLight, PowerGreen, White),
+      fillHoverColor: createThemeColor(Black91, Black15, White),
+      defaultFontColor: createThemeColor(Black91, Black15, White)
+  };
+  const tokenValues = {
+      actionRgbPartialColor: hexToRgbPartialThemeColor(createThemeColor(Black91, Black15, White)),
+      applicationBackgroundColor: createThemeColor(White, Black85, ForestGreen),
+      headerBackgroundColor: createThemeColor(Black7, Black88, ForestGreen),
+      sectionBackgroundColor: createThemeColor(Black15, Black80, ForestGreen),
+      sectionBackgroundImage: createThemeColor(`linear-gradient(${Black15}, ${hexToRgbaCssColor(Black15, 0)})`, `linear-gradient(${Black82}, ${hexToRgbaCssColor(Black82, 0)})`, `linear-gradient(${ForestGreen}, ${hexToRgbaCssColor(ForestGreen, 0)})`),
+      dividerBackgroundColor: createThemeColor(Black15, Black80, ForestGreen),
+      fillSelectedColor: hexToRgbaCssThemeColor(alias.fillSelectedColor, 0.2, 0.2, 0.2),
+      fillSelectedRgbPartialColor: hexToRgbPartialThemeColor(alias.fillSelectedColor),
+      fillHoverSelectedColor: hexToRgbaCssThemeColor(alias.fillSelectedColor, 0.15, 0.15, 0.15),
+      fillHoverColor: hexToRgbaCssThemeColor(alias.fillHoverColor, 0.1, 0.1, 0.1),
+      fillHoverRgbPartialColor: hexToRgbPartialThemeColor(alias.fillHoverColor),
+      fillDownColor: hexToRgbaCssThemeColor(alias.fillHoverColor, 0.15, 0.15, 0.15),
+      borderColor: alias.lineColor,
+      borderRgbPartialColor: hexToRgbPartialThemeColor(alias.lineColor),
+      failColor: alias.failColor,
+      warningColor: createThemeColor(Warning100LightUi, Warning100DarkUi, White),
+      passColor: createThemeColor(Pass100LightUi, Pass100DarkUi, White),
+      informationColor: createThemeColor(Information100LightUi, Information100DarkUi, White),
+      borderHoverColor: createThemeColor(DigitalGreenLight, PowerGreen, White),
+      iconColor: createThemeColor(Black91, Black15, White),
+      modalBackdropColor: hexToRgbaCssThemeColor(createThemeColor(Black, Black, Black), 0.3, 0.6, 0.6),
+      popupBorderColor: hexToRgbaCssThemeColor(alias.lineColor, 0.3, 0.3, 0.3),
+      cardBorderColor: hexToRgbaCssThemeColor(alias.lineColor, 0.1, 0.1, 0.1),
+      graphGridlineColor: hexToRgbaCssThemeColor(alias.lineColor, 0.2, 0.2, 0.2),
+      graphTrace1Color: createThemeColor(NiIndigoDark2, NiSky, White),
+      graphTrace2Color: createThemeColor(NiScarletDark1, NiScarlet, hexToRgbaCssColor(White, 0.7)),
+      graphTrace3Color: createThemeColor(NiFernDark1, NiFern, hexToRgbaCssColor(White, 0.4)),
+      graphTrace4Color: createThemeColor(NiPlumDark1, NiSeaLight, hexToRgbaCssColor(White, 0.25)),
+      graphTrace5Color: createThemeColor(NiSeaDark2, NiSea, hexToRgbaCssColor(White, 0.55)),
+      graphTrace6Color: createThemeColor(NiTulip, NiTulip, hexToRgbaCssColor(White, 0.85)),
+      graphTrace7Color: createThemeColor(NiScarletDark3, NiHoneyLight, hexToRgbaCssColor(White, 0.325)),
+      graphTrace8Color: createThemeColor(NiIndigo, NiIndigo, hexToRgbaCssColor(White, 0.625)),
+      tooltipBackgroundColor: createThemeColor(Black15, Black85, ForestGreen),
+      tableRowBorderColor: createThemeColor(Black15, Black80, ForestGreen),
+      tagFillColor: hexToRgbaCssThemeColor(alias.lineColor, 0.1, 0.1, 0.1),
+      buttonFillPrimaryColor: hexToRgbaCssThemeColor(createThemeColor(Black91, Black15, White), 0.75, 0.3, 0.3),
+      buttonPrimaryFontColor: createThemeColor(Black15, Black15, White),
+      buttonFillAccentColor: createThemeColor(DigitalGreenDark, DigitalGreenLight, hexToRgbaCssColor(White, 0.1)),
+      buttonAccentBlockFontColor: createThemeColor(White, Black15, White),
+      buttonAccentOutlineFontColor: createThemeColor(DigitalGreenDark105, PowerGreen, White),
+      buttonBorderAccentOutlineColor: createThemeColor(DigitalGreenLight, PowerGreen, hexToRgbaCssColor(White, 0.3)),
+      calendarEventBackgroundStaticColor: createThemeColor(DigitalGreenLight10, PowerGreen10, PowerGreen10),
+      calendarEventBackgroundDynamicColor: createThemeColor(DigitalGreenDark105, DigitalGreenDark, DigitalGreenDark),
+      calendarEventBackgroundTransientColor: createThemeColor(DigitalGreenDark105, DigitalGreenDark, DigitalGreenDark),
+      calendarEventBorderStaticColor: createThemeColor(DigitalGreenLight, DigitalGreenLight, DigitalGreenLight),
+      calendarEventBorderTransientColor: createThemeColor(DigitalGreenLight, hexToRgbaCssColor(PowerGreen, 0.85), hexToRgbaCssColor(PowerGreen, 0.85)),
+      calendarEventStaticFontColor: createThemeColor(DigitalGreenDark110, PowerGreenDark50, PowerGreenDark50),
+      calendarEventDynamicFontColor: createThemeColor(White, White, White),
+      calendarEventTransientFontColor: createThemeColor(White, White, White),
+      calendarEventBackgroundHoverStaticColor: createThemeColor(DigitalGreenLight30, PowerGreen30, PowerGreen30),
+      calendarEventBackgroundHoverDynamicColor: createThemeColor(DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105),
+      calendarEventBackgroundHoverTransientColor: createThemeColor(DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105),
+      calendarEventOuterBorderHighlightedColor: createThemeColor(Black88, hexToRgbaCssColor(White, 0.85), hexToRgbaCssColor(White, 0.85)),
+      calendarRowBackgroundSelectedColor: hexToRgbaCssThemeColor(createThemeColor(DigitalGreenLight, PowerGreen, PowerGreen), 0.2, 0.2, 0.2),
+      calendarRowBackgroundConflictColor: hexToRgbaCssThemeColor(createThemeColor(Fail100LightUi, Fail100DarkUi, Fail100DarkUi), 0.2, 0.2, 0.2),
+      calendarEventFillBlockedColor: createThemeColor(hexToRgbaCssColor(Black91, 0.07), Black82, Black82),
+      calendarGrabHandleBackgroundColor: createThemeColor(DigitalGreenLight, PowerGreen, PowerGreen),
+      calendarGridBorderColor: createThemeColor(Black22, Black80, Black80),
+      calendarGroupHeaderBackgroundColor: createThemeColor(Black7, hexToRgbaCssColor(Black91, 0.1), hexToRgbaCssColor(Black91, 0.1)),
+      controlHeight: '32px',
+      controlSlimHeight: '24px',
+      smallPadding: '4px',
+      mediumPadding: '8px',
+      standardPadding: '16px',
+      largePadding: '24px',
+      labelHeight: '16px',
+      borderWidth: '1px',
+      dividerWidth: '2px',
+      iconSize: '16px',
+      drawerWidth: '784px',
+      dialogSmallWidth: '400px',
+      dialogSmallHeight: 'fit-content',
+      dialogSmallMaxHeight: '600px',
+      dialogLargeWidth: '1024px',
+      dialogLargeHeight: '680px',
+      dialogLargeMaxHeight: '680px',
+      menuMinWidth: '176px',
+      bannerGapSize: '1px',
+      spinnerSmallHeight: '16px',
+      spinnerMediumHeight: '32px',
+      spinnerLargeHeight: '64px',
+      tableFitRowsHeight: '480px',
+      elevation1BoxShadow: createThemeColor(`0px 1px 4px ${hexToRgbaCssColor(Black, 0.16)}`, `0px 1px 4px ${hexToRgbaCssColor(Black, 0.16)}`, `0px 1px 4px ${hexToRgbaCssColor(Black, 0.16)}`),
+      elevation2BoxShadow: createThemeColor(`0px 2px 4px ${hexToRgbaCssColor(Black, 0.16)}`, `0px 2px 4px ${hexToRgbaCssColor(Black, 0.16)}`, `0px 2px 4px ${hexToRgbaCssColor(Black, 0.16)}`),
+      elevation3BoxShadow: createThemeColor(`0px 4px 8px ${hexToRgbaCssColor(Black, 0.3)}`, `0px 4px 8px ${hexToRgbaCssColor(Black, 0.3)}`, `0px 4px 8px ${hexToRgbaCssColor(Black, 0.3)}`),
+      ...createFont('headline', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Headline1Family, Headline1Weight, Headline1Size, Headline1LineHeight),
+      ...createFont('headlinePlus1', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Headline2Family, Headline2Weight, Headline2Size, Headline2LineHeight),
+      ...createFont('titlePlus2', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Title3Family, Title3Weight, Title3Size, Title3LineHeight),
+      ...createFont('titlePlus1', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Title2Family, Title2Weight, Title2Size, Title2LineHeight),
+      ...createFont('title', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Title1Family, Title1Weight, Title1Size, Title1LineHeight),
+      ...createFont('subtitlePlus1', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Subtitle2Family, Subtitle2Weight, Subtitle2Size, Subtitle2LineHeight),
+      ...createFont('subtitle', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight),
+      ...createFont('link', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight),
+      ...createFont('linkActive', createThemeColor(DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.75)), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight),
+      ...createFont('linkProminent', createThemeColor(DigitalGreenDark105, PowerGreen, White), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight),
+      ...createFont('linkActiveProminent', createThemeColor(DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.75)), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight),
+      ...createFont('placeholder', hexToRgbaCssThemeColor(alias.defaultFontColor, 0.6, 0.6, 0.6), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight),
+      ...createFont('body', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), BodyFamily, BodyWeight, BodySize, BodyLineHeight),
+      ...createFont('bodyEmphasized', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight),
+      ...createFont('bodyPlus1', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Body2Family, Body2Weight, Body2Size, Body2LineHeight),
+      ...createFont('bodyPlus1Emphasized', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), BodyEmphasized2Family, BodyEmphasized2Weight, BodyEmphasized2Size, BodyEmphasized2LineHeight),
+      ...createFont('groupHeader', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), GroupLabel1Family, GroupLabel1Weight, GroupLabel1Size, GroupLabel1LineHeight),
+      ...createFont('controlLabel', hexToRgbaCssThemeColor(alias.defaultFontColor, 0.6, 0.6, 0.6), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), ControlLabel1Family, ControlLabel1Weight, ControlLabel1Size, ControlLabel1LineHeight),
+      ...createFont('buttonLabel', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), ButtonLabel1Family, ButtonLabel1Weight, ButtonLabel1Size, ButtonLabel1LineHeight),
+      ...createFont('tooltipCaption', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), TooltipCaptionFamily, TooltipCaptionWeight, TooltipCaptionSize, TooltipCaptionLineHeight),
+      ...createFont('errorText', alias.failColor, hexToRgbaCssThemeColor(alias.failColor, 0.3, 0.3, 0.3), ErrorLightUiFamily, ErrorLightUiWeight, ErrorLightUiSize, TooltipCaptionLineHeight),
+      ...createFont('tableHeader', hexToRgbaCssThemeColor(alias.defaultFontColor, 0.6, 0.6, 0.6), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), GridHeaderFamily, GridHeaderWeight, GridHeaderSize, TooltipCaptionLineHeight),
+      ...createFont('mention', createThemeColor(DigitalGreenDark, PowerGreen, PowerGreen), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), BodyFamily, BodyEmphasizedWeight, BodySize, BodyLineHeight),
+      groupHeaderTextTransform: 'uppercase',
+      smallDelay: SmallDelay,
+      mediumDelay: MediumDelay,
+      largeDelay: LargeDelay
+  };
+  // #endregion
+  function hexToRgbaCssThemeColor(themeColor, lightAlpha, darkAlpha, colorAlpha) {
+      return {
+          light: hexToRgbaCssColor(themeColor.light, lightAlpha),
+          dark: hexToRgbaCssColor(themeColor.dark, darkAlpha),
+          color: hexToRgbaCssColor(themeColor.color, colorAlpha),
+      };
+  }
   function hexToRgbPartial(hexValue) {
       const { r, g, b } = parseColorHexRGB(hexValue);
       return `${r * 255}, ${g * 255}, ${b * 255}`;
   }
-  function createFontTokens(fontTokenName, colorFunction, disabledColorFunction, family, weight, size, lineHeight) {
-      if (fontTokenName === ''
-          || family === ''
-          || weight === ''
-          || size === ''
-          || lineHeight === '') {
-          throw new Error('createFontTokens parameter unexpectedly set to empty string');
-      }
+  function hexToRgbPartialThemeColor(themeColor) {
+      return {
+          light: hexToRgbPartial(themeColor.light),
+          dark: hexToRgbPartial(themeColor.dark),
+          color: hexToRgbPartial(themeColor.color),
+      };
+  }
+  function createThemeColor(light, dark, color) {
+      return {
+          light,
+          dark,
+          color
+      };
+  }
+  function createFont(token, color, disabledColor, family, weight, size, lineHeight) {
       const familyWithFallback = `${family}, ${family} Fallback`;
-      const fontToken = DesignToken.create(styleNameFromTokenName(fontTokenName)).withDefault(`${weight} ${size}/${lineHeight} ${familyWithFallback}`);
+      return {
+          [`${token}Font`]: `${weight} ${size}/${lineHeight} ${familyWithFallback}`,
+          [`${token}FontColor`]: color,
+          [`${token}DisabledFontColor`]: disabledColor,
+          [`${token}FontFamily`]: family,
+          [`${token}FontWeight`]: weight,
+          [`${token}FontSize`]: size,
+          [`${token}FontLineHeight`]: lineHeight,
+      };
+  }
+
+  // #region color tokens
+  const actionRgbPartialColor = createThemeColorToken(tokenNames.actionRgbPartialColor, tokenValues.actionRgbPartialColor);
+  const applicationBackgroundColor = createThemeColorToken(tokenNames.applicationBackgroundColor, tokenValues.applicationBackgroundColor);
+  createThemeColorToken(tokenNames.headerBackgroundColor, tokenValues.headerBackgroundColor);
+  createThemeColorToken(tokenNames.sectionBackgroundColor, tokenValues.sectionBackgroundColor);
+  createThemeColorToken(tokenNames.sectionBackgroundImage, tokenValues.sectionBackgroundImage);
+  createThemeColorToken(tokenNames.dividerBackgroundColor, tokenValues.dividerBackgroundColor);
+  const fillSelectedColor = createThemeColorToken(tokenNames.fillSelectedColor, tokenValues.fillSelectedColor);
+  const fillSelectedRgbPartialColor = createThemeColorToken(tokenNames.fillSelectedRgbPartialColor, tokenValues.fillSelectedRgbPartialColor);
+  const fillHoverSelectedColor = createThemeColorToken(tokenNames.fillHoverSelectedColor, tokenValues.fillHoverSelectedColor);
+  const fillHoverColor = createThemeColorToken(tokenNames.fillHoverColor, tokenValues.fillHoverColor);
+  createThemeColorToken(tokenNames.fillHoverRgbPartialColor, tokenValues.fillHoverRgbPartialColor);
+  createThemeColorToken(tokenNames.fillDownColor, tokenValues.fillDownColor);
+  const borderColor = createThemeColorToken(tokenNames.borderColor, tokenValues.borderColor);
+  const borderRgbPartialColor = createThemeColorToken(tokenNames.borderRgbPartialColor, tokenValues.borderRgbPartialColor);
+  const failColor = createThemeColorToken(tokenNames.failColor, tokenValues.failColor);
+  const warningColor = createThemeColorToken(tokenNames.warningColor, tokenValues.warningColor);
+  const passColor = createThemeColorToken(tokenNames.passColor, tokenValues.passColor);
+  const informationColor = createThemeColorToken(tokenNames.informationColor, tokenValues.informationColor);
+  const borderHoverColor = createThemeColorToken(tokenNames.borderHoverColor, tokenValues.borderHoverColor);
+  // #endregion
+  // #region component color tokens
+  const iconColor = createThemeColorToken(tokenNames.iconColor, tokenValues.iconColor);
+  const modalBackdropColor = createThemeColorToken(tokenNames.modalBackdropColor, tokenValues.modalBackdropColor);
+  const popupBorderColor = createThemeColorToken(tokenNames.popupBorderColor, tokenValues.popupBorderColor);
+  const cardBorderColor = createThemeColorToken(tokenNames.cardBorderColor, tokenValues.cardBorderColor);
+  createThemeColorToken(tokenNames.graphGridlineColor, tokenValues.graphGridlineColor);
+  createThemeColorToken(tokenNames.graphTrace1Color, tokenValues.graphTrace1Color);
+  createThemeColorToken(tokenNames.graphTrace2Color, tokenValues.graphTrace2Color);
+  createThemeColorToken(tokenNames.graphTrace3Color, tokenValues.graphTrace3Color);
+  createThemeColorToken(tokenNames.graphTrace4Color, tokenValues.graphTrace4Color);
+  createThemeColorToken(tokenNames.graphTrace5Color, tokenValues.graphTrace5Color);
+  createThemeColorToken(tokenNames.graphTrace6Color, tokenValues.graphTrace6Color);
+  createThemeColorToken(tokenNames.graphTrace7Color, tokenValues.graphTrace7Color);
+  createThemeColorToken(tokenNames.graphTrace8Color, tokenValues.graphTrace8Color);
+  createThemeColorToken(tokenNames.tooltipBackgroundColor, tokenValues.tooltipBackgroundColor);
+  const tableRowBorderColor = createThemeColorToken(tokenNames.tableRowBorderColor, tokenValues.tableRowBorderColor);
+  createThemeColorToken(tokenNames.tagFillColor, tokenValues.tagFillColor);
+  const buttonFillPrimaryColor = createThemeColorToken(tokenNames.buttonFillPrimaryColor, tokenValues.buttonFillPrimaryColor);
+  const buttonPrimaryFontColor = createThemeColorToken(tokenNames.buttonPrimaryFontColor, tokenValues.buttonPrimaryFontColor);
+  const buttonFillAccentColor = createThemeColorToken(tokenNames.buttonFillAccentColor, tokenValues.buttonFillAccentColor);
+  const buttonAccentBlockFontColor = createThemeColorToken(tokenNames.buttonAccentBlockFontColor, tokenValues.buttonAccentBlockFontColor);
+  const buttonAccentOutlineFontColor = createThemeColorToken(tokenNames.buttonAccentOutlineFontColor, tokenValues.buttonAccentOutlineFontColor);
+  const buttonBorderAccentOutlineColor = createThemeColorToken(tokenNames.buttonBorderAccentOutlineColor, tokenValues.buttonBorderAccentOutlineColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundStaticColor, tokenValues.calendarEventBackgroundStaticColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundDynamicColor, tokenValues.calendarEventBackgroundDynamicColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundTransientColor, tokenValues.calendarEventBackgroundTransientColor);
+  createThemeColorToken(tokenNames.calendarEventBorderStaticColor, tokenValues.calendarEventBorderStaticColor);
+  createThemeColorToken(tokenNames.calendarEventBorderTransientColor, tokenValues.calendarEventBorderTransientColor);
+  createThemeColorToken(tokenNames.calendarEventStaticFontColor, tokenValues.calendarEventStaticFontColor);
+  createThemeColorToken(tokenNames.calendarEventDynamicFontColor, tokenValues.calendarEventDynamicFontColor);
+  createThemeColorToken(tokenNames.calendarEventTransientFontColor, tokenValues.calendarEventTransientFontColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverStaticColor, tokenValues.calendarEventBackgroundHoverStaticColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverDynamicColor, tokenValues.calendarEventBackgroundHoverDynamicColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverTransientColor, tokenValues.calendarEventBackgroundHoverTransientColor);
+  createThemeColorToken(tokenNames.calendarEventOuterBorderHighlightedColor, tokenValues.calendarEventOuterBorderHighlightedColor);
+  createThemeColorToken(tokenNames.calendarRowBackgroundSelectedColor, tokenValues.calendarRowBackgroundSelectedColor);
+  createThemeColorToken(tokenNames.calendarRowBackgroundConflictColor, tokenValues.calendarRowBackgroundConflictColor);
+  createThemeColorToken(tokenNames.calendarEventFillBlockedColor, tokenValues.calendarEventFillBlockedColor);
+  createThemeColorToken(tokenNames.calendarGrabHandleBackgroundColor, tokenValues.calendarGrabHandleBackgroundColor);
+  createThemeColorToken(tokenNames.calendarGridBorderColor, tokenValues.calendarGridBorderColor);
+  createThemeColorToken(tokenNames.calendarGroupHeaderBackgroundColor, tokenValues.calendarGroupHeaderBackgroundColor);
+  // #endregion
+  // #region size tokens
+  const controlHeight = createStringToken(tokenNames.controlHeight, tokenValues.controlHeight);
+  const controlSlimHeight = createStringToken(tokenNames.controlSlimHeight, tokenValues.controlSlimHeight);
+  const smallPadding = createStringToken(tokenNames.smallPadding, tokenValues.smallPadding);
+  const mediumPadding = createStringToken(tokenNames.mediumPadding, tokenValues.mediumPadding);
+  const standardPadding = createStringToken(tokenNames.standardPadding, tokenValues.standardPadding);
+  const largePadding = createStringToken(tokenNames.largePadding, tokenValues.largePadding);
+  createStringToken(tokenNames.labelHeight, tokenValues.labelHeight);
+  const borderWidth = createStringToken(tokenNames.borderWidth, tokenValues.borderWidth);
+  createStringToken(tokenNames.dividerWidth, tokenValues.dividerWidth);
+  const iconSize = createStringToken(tokenNames.iconSize, tokenValues.iconSize);
+  const drawerWidth = createStringToken(tokenNames.drawerWidth, tokenValues.drawerWidth);
+  const dialogSmallWidth = createStringToken(tokenNames.dialogSmallWidth, tokenValues.dialogSmallWidth);
+  const dialogSmallHeight = createStringToken(tokenNames.dialogSmallHeight, tokenValues.dialogSmallHeight);
+  const dialogSmallMaxHeight = createStringToken(tokenNames.dialogSmallMaxHeight, tokenValues.dialogSmallMaxHeight);
+  createStringToken(tokenNames.dialogLargeWidth, tokenValues.dialogLargeWidth);
+  createStringToken(tokenNames.dialogLargeHeight, tokenValues.dialogLargeHeight);
+  createStringToken(tokenNames.dialogLargeMaxHeight, tokenValues.dialogLargeMaxHeight);
+  const menuMinWidth = createStringToken(tokenNames.menuMinWidth, tokenValues.menuMinWidth);
+  createStringToken(tokenNames.bannerGapSize, tokenValues.bannerGapSize);
+  const spinnerSmallHeight = createStringToken(tokenNames.spinnerSmallHeight, tokenValues.spinnerSmallHeight);
+  createStringToken(tokenNames.spinnerMediumHeight, tokenValues.spinnerMediumHeight);
+  createStringToken(tokenNames.spinnerLargeHeight, tokenValues.spinnerLargeHeight);
+  const tableFitRowsHeight = createStringToken(tokenNames.tableFitRowsHeight, tokenValues.tableFitRowsHeight);
+  // #endregion
+  // #region drop shadow tokens
+  createThemeColorToken(tokenNames.elevation1BoxShadow, tokenValues.elevation1BoxShadow);
+  const elevation2BoxShadow = createThemeColorToken(tokenNames.elevation2BoxShadow, tokenValues.elevation2BoxShadow);
+  const elevation3BoxShadow = createThemeColorToken(tokenNames.elevation3BoxShadow, tokenValues.elevation3BoxShadow);
+  // #endregion
+  // #region font tokens
+  createFontTokens(tokenNames.headlineFont, tokenValues.headlineFont, tokenValues.headlineFontColor, tokenValues.headlineDisabledFontColor, tokenValues.headlineFontFamily, tokenValues.headlineFontWeight, tokenValues.headlineFontSize, tokenValues.headlineFontLineHeight);
+  createFontTokens(tokenNames.headlinePlus1Font, tokenValues.headlinePlus1Font, tokenValues.headlinePlus1FontColor, tokenValues.headlinePlus1DisabledFontColor, tokenValues.headlinePlus1FontFamily, tokenValues.headlinePlus1FontWeight, tokenValues.headlinePlus1FontSize, tokenValues.headlinePlus1FontLineHeight);
+  createFontTokens(tokenNames.titlePlus2Font, tokenValues.titlePlus2Font, tokenValues.titlePlus2FontColor, tokenValues.titlePlus2DisabledFontColor, tokenValues.titlePlus2FontFamily, tokenValues.titlePlus2FontWeight, tokenValues.titlePlus2FontSize, tokenValues.titlePlus2FontLineHeight);
+  const [titlePlus1Font, titlePlus1FontColor] = createFontTokens(tokenNames.titlePlus1Font, tokenValues.titlePlus1Font, tokenValues.titlePlus1FontColor, tokenValues.titlePlus1DisabledFontColor, tokenValues.titlePlus1FontFamily, tokenValues.titlePlus1FontWeight, tokenValues.titlePlus1FontSize, tokenValues.titlePlus1FontLineHeight);
+  createFontTokens(tokenNames.titleFont, tokenValues.titleFont, tokenValues.titleFontColor, tokenValues.titleDisabledFontColor, tokenValues.titleFontFamily, tokenValues.titleFontWeight, tokenValues.titleFontSize, tokenValues.titleFontLineHeight);
+  const [subtitlePlus1Font] = createFontTokens(tokenNames.subtitlePlus1Font, tokenValues.subtitlePlus1Font, tokenValues.subtitlePlus1FontColor, tokenValues.subtitlePlus1DisabledFontColor, tokenValues.subtitlePlus1FontFamily, tokenValues.subtitlePlus1FontWeight, tokenValues.subtitlePlus1FontSize, tokenValues.subtitlePlus1FontLineHeight);
+  const [subtitleFont, subtitleFontColor] = createFontTokens(tokenNames.subtitleFont, tokenValues.subtitleFont, tokenValues.subtitleFontColor, tokenValues.subtitleDisabledFontColor, tokenValues.subtitleFontFamily, tokenValues.subtitleFontWeight, tokenValues.subtitleFontSize, tokenValues.subtitleFontLineHeight);
+  const [linkFont, linkFontColor, linkDisabledFontColor] = createFontTokens(tokenNames.linkFont, tokenValues.linkFont, tokenValues.linkFontColor, tokenValues.linkDisabledFontColor, tokenValues.linkFontFamily, tokenValues.linkFontWeight, tokenValues.linkFontSize, tokenValues.linkFontLineHeight);
+  const [linkActiveFont, linkActiveFontColor] = createFontTokens(tokenNames.linkActiveFont, tokenValues.linkActiveFont, tokenValues.linkActiveFontColor, tokenValues.linkActiveDisabledFontColor, tokenValues.linkActiveFontFamily, tokenValues.linkActiveFontWeight, tokenValues.linkActiveFontSize, tokenValues.linkActiveFontLineHeight);
+  const [linkProminentFont, linkProminentFontColor] = createFontTokens(tokenNames.linkProminentFont, tokenValues.linkProminentFont, tokenValues.linkProminentFontColor, tokenValues.linkProminentDisabledFontColor, tokenValues.linkProminentFontFamily, tokenValues.linkProminentFontWeight, tokenValues.linkProminentFontSize, tokenValues.linkProminentFontLineHeight);
+  const [linkActiveProminentFont, linkActiveProminentFontColor] = createFontTokens(tokenNames.linkActiveProminentFont, tokenValues.linkActiveProminentFont, tokenValues.linkActiveProminentFontColor, tokenValues.linkActiveProminentDisabledFontColor, tokenValues.linkActiveProminentFontFamily, tokenValues.linkActiveProminentFontWeight, tokenValues.linkActiveProminentFontSize, tokenValues.linkActiveProminentFontLineHeight);
+  const [placeholderFont, placeholderFontColor] = createFontTokens(tokenNames.placeholderFont, tokenValues.placeholderFont, tokenValues.placeholderFontColor, tokenValues.placeholderDisabledFontColor, tokenValues.placeholderFontFamily, tokenValues.placeholderFontWeight, tokenValues.placeholderFontSize, tokenValues.placeholderFontLineHeight);
+  const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight] = createFontTokens(tokenNames.bodyFont, tokenValues.bodyFont, tokenValues.bodyFontColor, tokenValues.bodyDisabledFontColor, tokenValues.bodyFontFamily, tokenValues.bodyFontWeight, tokenValues.bodyFontSize, tokenValues.bodyFontLineHeight);
+  const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight] = createFontTokens(tokenNames.bodyEmphasizedFont, tokenValues.bodyEmphasizedFont, tokenValues.bodyEmphasizedFontColor, tokenValues.bodyEmphasizedDisabledFontColor, tokenValues.bodyEmphasizedFontFamily, tokenValues.bodyEmphasizedFontWeight, tokenValues.bodyEmphasizedFontSize, tokenValues.bodyEmphasizedFontLineHeight);
+  createFontTokens(tokenNames.bodyPlus1Font, tokenValues.bodyPlus1Font, tokenValues.bodyPlus1FontColor, tokenValues.bodyPlus1DisabledFontColor, tokenValues.bodyPlus1FontFamily, tokenValues.bodyPlus1FontWeight, tokenValues.bodyPlus1FontSize, tokenValues.bodyPlus1FontLineHeight);
+  createFontTokens(tokenNames.bodyPlus1EmphasizedFont, tokenValues.bodyPlus1EmphasizedFont, tokenValues.bodyPlus1EmphasizedFontColor, tokenValues.bodyPlus1EmphasizedDisabledFontColor, tokenValues.bodyPlus1EmphasizedFontFamily, tokenValues.bodyPlus1EmphasizedFontWeight, tokenValues.bodyPlus1EmphasizedFontSize, tokenValues.bodyPlus1EmphasizedFontLineHeight);
+  const [groupHeaderFont, groupHeaderFontColor] = createFontTokens(tokenNames.groupHeaderFont, tokenValues.groupHeaderFont, tokenValues.groupHeaderFontColor, tokenValues.groupHeaderDisabledFontColor, tokenValues.groupHeaderFontFamily, tokenValues.groupHeaderFontWeight, tokenValues.groupHeaderFontSize, tokenValues.groupHeaderFontLineHeight);
+  const [controlLabelFont, controlLabelFontColor, controlLabelDisabledFontColor, controlLabelFontFamily, controlLabelFontWeight, controlLabelFontSize, controlLabelFontLineHeight] = createFontTokens(tokenNames.controlLabelFont, tokenValues.controlLabelFont, tokenValues.controlLabelFontColor, tokenValues.controlLabelDisabledFontColor, tokenValues.controlLabelFontFamily, tokenValues.controlLabelFontWeight, tokenValues.controlLabelFontSize, tokenValues.controlLabelFontLineHeight);
+  const [buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor] = createFontTokens(tokenNames.buttonLabelFont, tokenValues.buttonLabelFont, tokenValues.buttonLabelFontColor, tokenValues.buttonLabelDisabledFontColor, tokenValues.buttonLabelFontFamily, tokenValues.buttonLabelFontWeight, tokenValues.buttonLabelFontSize, tokenValues.buttonLabelFontLineHeight);
+  const [tooltipCaptionFont, tooltipCaptionFontColor] = createFontTokens(tokenNames.tooltipCaptionFont, tokenValues.tooltipCaptionFont, tokenValues.tooltipCaptionFontColor, tokenValues.tooltipCaptionDisabledFontColor, tokenValues.tooltipCaptionFontFamily, tokenValues.tooltipCaptionFontWeight, tokenValues.tooltipCaptionFontSize, tokenValues.tooltipCaptionFontLineHeight);
+  const [errorTextFont, errorTextFontColor, errorTextDisabledFontColor, errorTextFontFamily, errorTextFontWeight, errorTextFontSize, errorTextFontLineHeight] = createFontTokens(tokenNames.errorTextFont, tokenValues.errorTextFont, tokenValues.errorTextFontColor, tokenValues.errorTextDisabledFontColor, tokenValues.errorTextFontFamily, tokenValues.errorTextFontWeight, tokenValues.errorTextFontSize, tokenValues.errorTextFontLineHeight);
+  const [tableHeaderFont, tableHeaderFontColor] = createFontTokens(tokenNames.tableHeaderFont, tokenValues.tableHeaderFont, tokenValues.tableHeaderFontColor, tokenValues.tableHeaderDisabledFontColor, tokenValues.tableHeaderFontFamily, tokenValues.tableHeaderFontWeight, tokenValues.tableHeaderFontSize, tokenValues.tableHeaderFontLineHeight);
+  createFontTokens(tokenNames.mentionFont, tokenValues.mentionFont, tokenValues.mentionFontColor, tokenValues.mentionDisabledFontColor, tokenValues.mentionFontFamily, tokenValues.mentionFontWeight, tokenValues.mentionFontSize, tokenValues.mentionFontLineHeight);
+  // #endregion
+  // #region text transform tokens
+  const groupHeaderTextTransform = createStringToken(tokenNames.groupHeaderTextTransform, tokenValues.groupHeaderTextTransform);
+  // #endregion
+  // #region animation tokens
+  const smallDelay = createStringToken(tokenNames.smallDelay, tokenValues.smallDelay);
+  const mediumDelay = createStringToken(tokenNames.mediumDelay, tokenValues.mediumDelay);
+  const largeDelay = createStringToken(tokenNames.largeDelay, tokenValues.largeDelay);
+  // #endregion
+  // #region helpers
+  function createFontTokens(fontTokenName, font, fontColor, disabledFontColor, fontFamily, fontWeight, fontSize, fontLineHeight) {
       const fontNameParts = fontTokenName.split('-font');
       const tokenPrefixWithoutFont = fontNameParts[0];
-      if (tokenPrefixWithoutFont === undefined || fontNameParts[1] !== '') {
-          throw new Error(`fontTokenName value of ${fontTokenName} did not have the expected '-font' suffix`);
-      }
-      const fontColorToken = DesignToken.create(styleNameFromTokenName(`${tokenPrefixWithoutFont}-font-color`)).withDefault((element) => colorFunction(element));
-      const fontDisabledColorToken = DesignToken.create(styleNameFromTokenName(`${tokenPrefixWithoutFont}-disabled-font-color`)).withDefault((element) => disabledColorFunction(element));
-      const fontFamilyToken = DesignToken.create(styleNameFromTokenName(`${tokenPrefixWithoutFont}-font-family`)).withDefault(familyWithFallback);
-      const fontWeightToken = DesignToken.create(styleNameFromTokenName(`${tokenPrefixWithoutFont}-font-weight`)).withDefault(weight);
-      const fontSizeToken = DesignToken.create(styleNameFromTokenName(`${tokenPrefixWithoutFont}-font-size`)).withDefault(size);
-      const fontLineHeightToken = DesignToken.create(styleNameFromTokenName(`${tokenPrefixWithoutFont}-font-line-height`)).withDefault(lineHeight);
+      const fontFamilyWithFallback = `${fontFamily}, ${fontFamily} Fallback`;
+      const fontToken = createStringToken(fontTokenName, font);
+      const fontColorToken = createThemeColorToken(`${tokenPrefixWithoutFont}-font-color`, fontColor);
+      const fontDisabledColorToken = createThemeColorToken(`${tokenPrefixWithoutFont}-disabled-font-color`, disabledFontColor);
+      const fontFamilyToken = createStringToken(`${tokenPrefixWithoutFont}-font-family`, fontFamilyWithFallback);
+      const fontWeightToken = createStringToken(`${tokenPrefixWithoutFont}-font-weight`, fontWeight);
+      const fontSizeToken = createStringToken(`${tokenPrefixWithoutFont}-font-size`, fontSize);
+      const fontLineHeightToken = createStringToken(`${tokenPrefixWithoutFont}-font-line-height`, fontLineHeight);
       return [
           fontToken,
           fontColorToken,
@@ -16419,57 +16602,24 @@
           fontLineHeightToken
       ];
   }
-  function getColorForTheme(element, lightThemeColor, darkThemeColor, colorThemeColor) {
-      switch (theme.getValueFor(element)) {
-          case Theme.light:
-              return lightThemeColor;
-          case Theme.dark:
-              return darkThemeColor;
-          case Theme.color:
-              return colorThemeColor;
-          default:
-              return lightThemeColor;
-      }
-  }
-  function getWarningColorForTheme(element) {
-      return getColorForTheme(element, Warning100LightUi, Warning100DarkUi, White);
-  }
-  function getFailColorForTheme(element) {
-      return getColorForTheme(element, Fail100LightUi, Fail100DarkUi, White);
-  }
-  function getPassColorForTheme(element) {
-      return getColorForTheme(element, Pass100LightUi, Pass100DarkUi, White);
-  }
-  function getInformationColorForTheme(element) {
-      return getColorForTheme(element, Information100LightUi, Information100DarkUi, White);
-  }
-  function getDefaultLineColorForTheme(element) {
-      return getColorForTheme(element, Black91, Black15, White);
-  }
-  function getDefaultFontColorForTheme(element) {
-      return getColorForTheme(element, Black91, Black15, White);
-  }
-  function getFillSelectedColorForTheme(element) {
-      return getColorForTheme(element, DigitalGreenLight, PowerGreen, White);
-  }
-  function getFillHoverColorForTheme(element) {
-      return getColorForTheme(element, Black91, Black15, White);
-  }
-  function getFillDownColorForTheme(element) {
-      return getColorForTheme(element, Black91, Black15, White);
-  }
-  function getModalBackdropForTheme(element) {
-      switch (theme.getValueFor(element)) {
-          case Theme.light:
-              return hexToRgbaCssColor(Black, 0.3);
-          case Theme.dark:
-              return hexToRgbaCssColor(Black, 0.6);
-          case Theme.color:
-              return hexToRgbaCssColor(Black, 0.6);
-          default:
-              return hexToRgbaCssColor(Black, 0.3);
-      }
+  function createStringToken(tokenName, tokenValue) {
+      return DesignToken.create(styleNameFromTokenName(tokenName)).withDefault(tokenValue);
+  }
+  function createThemeColorToken(tokenName, themeColor) {
+      return DesignToken.create(styleNameFromTokenName(tokenName)).withDefault((element) => {
+          switch (theme.getValueFor(element)) {
+              case Theme.light:
+                  return themeColor.light;
+              case Theme.dark:
+                  return themeColor.dark;
+              case Theme.color:
+                  return themeColor.color;
+              default:
+                  return themeColor.light;
+          }
+      });
   }
+  // #endregion
 
   const styles$10 = css `
     @layer base, hover, focusVisible, active, disabled;
@@ -16549,7 +16699,6 @@
     }
 `;
 
-  // prettier-ignore
   const template$N = (_context, definition) => html `${
 /* top-container div is necessary because setting contenteditable directly on the native anchor instead
    leaves it focusable, unlike the behavior you get when the anchor is _within_ a contenteditable element.
@@ -18754,7 +18903,6 @@
       cssCustomPropertyName: null
   }).withDefault(coreLabelDefaults.scrollForwardLabel);
 
-  // prettier-ignore
   const template$H = (context, definition) => html `
     <div
         class="tab-bar"
@@ -19611,7 +19759,6 @@
       information: 'information'
   };
 
-  // prettier-ignore
   const template$F = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
@@ -19739,7 +19886,6 @@
    * The template for the {@link @ni/fast-foundation#Breadcrumb} component.
    * @public
    */
-  // prettier-ignore
   const breadcrumbTemplate = (_context, _definition) => html `
     <template role="navigation">
         ${when(x => x.showScrollButtons, html `
@@ -20565,8 +20711,6 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  /* eslint-disable @typescript-eslint/indent */
-  // prettier-ignore
   const template$C = (context, definition) => html `
     <div
         role="button"
@@ -20619,7 +20763,6 @@ so this becomes the fallback color for the slot */ ''}
         ${endSlotTemplate(context, definition)}
     </div>
 `;
-  /* eslint-enable @typescript-eslint/indent */
 
   /**
    * A nimble-styled toggle button control.
@@ -21120,7 +21263,6 @@ so this becomes the fallback color for the slot */ ''}
    *
    * This function is intended to be used with components leveraging `mixinRequiredVisiblePattern`.
    */
-  /* eslint-disable @typescript-eslint/indent */
   function createRequiredVisibleLabelTemplate(labelTemplate) {
       return html `
         <div class="annotated-label">
@@ -21137,8 +21279,6 @@ so this becomes the fallback color for the slot */ ''}
         <slot></slot>
     </label>
 `);
-  /* eslint-disable @typescript-eslint/indent */
-  // prettier-ignore
   const template$B = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
@@ -25523,7 +25663,6 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(ListboxOption:class)} component.
    * @public
    */
-  // prettier-ignore
   const template$y = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
@@ -25705,7 +25844,6 @@ so this becomes the fallback color for the slot */ ''}
   const isListOption$1 = (n) => {
       return n instanceof ListOption;
   };
-  // prettier-ignore
   const template$x = html `
 <template
     role="group"
@@ -26297,8 +26435,6 @@ so this becomes the fallback color for the slot */ ''}
       observable
   ], Menu$1.prototype, "itemIcons", void 0);
 
-  /* eslint-disable @typescript-eslint/indent */
-  // prettier-ignore
   const template$v = () => html `
     <template
         slot="${x => {
@@ -26315,7 +26451,6 @@ so this becomes the fallback color for the slot */ ''}
         <slot ${slotted('items')}></slot>
     </template>
 `;
-  /* eslint-enable @typescript-eslint/indent */
 
   const styles$B = css `
     ${display('grid')}
@@ -26422,7 +26557,6 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  // prettier-ignore
   const template$u = html `
     <template
         ?open="${x => x.open}"
@@ -27365,7 +27499,6 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   const labelTemplate$3 = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
-  /* eslint-disable @typescript-eslint/indent */
   const template$s = html `
     <template
         role="radiogroup"
@@ -34564,7 +34697,7 @@ so this becomes the fallback color for the slot */ ''}
           if (desc.dom.nodeType == 1 && (desc.node.isBlock && desc.parent || !desc.contentDOM) &&
               // Ignore elements with zero-size bounding rectangles
               ((rect = desc.dom.getBoundingClientRect()).width || rect.height)) {
-              if (desc.node.isBlock && desc.parent) {
+              if (desc.node.isBlock && desc.parent && !/^T(R|BODY|HEAD|FOOT)$/.test(desc.dom.nodeName)) {
                   // Only apply the horizontal test to the innermost block. Vertical for any parent.
                   if (!sawBlock && rect.left > coords.left || rect.top > coords.top)
                       outsideBlock = desc.posBefore;
@@ -35222,7 +35355,7 @@ so this becomes the fallback color for the slot */ ''}
           // (one where the focus is before the anchor), but not all
           // browsers support it yet.
           let domSelExtended = false;
-          if ((domSel.extend || anchor == head) && !brKludge) {
+          if ((domSel.extend || anchor == head) && !(brKludge && gecko)) {
               domSel.collapse(anchorDOM.node, anchorDOM.offset);
               try {
                   if (anchor != head)
@@ -35634,17 +35767,18 @@ so this becomes the fallback color for the slot */ ''}
       }
       // Mark this node as being the selected node.
       selectNode() {
-          if (this.nodeDOM.nodeType == 1)
+          if (this.nodeDOM.nodeType == 1) {
               this.nodeDOM.classList.add("ProseMirror-selectednode");
-          if (this.contentDOM || !this.node.type.spec.draggable)
-              this.dom.draggable = true;
+              if (this.contentDOM || !this.node.type.spec.draggable)
+                  this.nodeDOM.draggable = true;
+          }
       }
       // Remove selected node marking from this node.
       deselectNode() {
           if (this.nodeDOM.nodeType == 1) {
               this.nodeDOM.classList.remove("ProseMirror-selectednode");
               if (this.contentDOM || !this.node.type.spec.draggable)
-                  this.dom.removeAttribute("draggable");
+                  this.nodeDOM.removeAttribute("draggable");
           }
       }
       get domAtom() { return this.node.isAtom; }
@@ -36483,17 +36617,14 @@ so this becomes the fallback color for the slot */ ''}
       });
   }
   function selectCursorWrapper(view) {
-      let domSel = view.domSelection(), range = document.createRange();
+      let domSel = view.domSelection();
       if (!domSel)
           return;
       let node = view.cursorWrapper.dom, img = node.nodeName == "IMG";
       if (img)
-          range.setStart(node.parentNode, domIndex(node) + 1);
+          domSel.collapse(node.parentNode, domIndex(node) + 1);
       else
-          range.setStart(node, 0);
-      range.collapse(true);
-      domSel.removeAllRanges();
-      domSel.addRange(range);
+          domSel.collapse(node, 0);
       // Kludge to kill 'control selection' in IE11 when selecting an
       // invisible cursor wrapper, since that would result in those weird
       // resize handles and a selection that considers the absolutely
@@ -36971,11 +37102,14 @@ so this becomes the fallback color for the slot */ ''}
       let dom, slice;
       if (!html && !text)
           return null;
-      let asText = text && (plainText || inCode || !html);
+      let asText = !!text && (plainText || inCode || !html);
       if (asText) {
           view.someProp("transformPastedText", f => { text = f(text, inCode || plainText, view); });
-          if (inCode)
-              return text ? new Slice(Fragment.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0) : Slice.empty;
+          if (inCode) {
+              slice = new Slice(Fragment.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0);
+              view.someProp("transformPasted", f => { slice = f(slice, view, true); });
+              return slice;
+          }
           let parsed = view.someProp("clipboardTextParser", f => f(text, $context, plainText, view));
           if (parsed) {
               slice = parsed;
@@ -37033,7 +37167,7 @@ so this becomes the fallback color for the slot */ ''}
               slice = closeSlice(slice, openStart, openEnd);
           }
       }
-      view.someProp("transformPasted", f => { slice = f(slice, view); });
+      view.someProp("transformPasted", f => { slice = f(slice, view, asText); });
       return slice;
   }
   const inlineParents = /^(a|abbr|acronym|b|cite|code|del|em|i|ins|kbd|label|output|q|ruby|s|samp|span|strong|sub|sup|time|u|tt|var)$/i;
@@ -37495,7 +37629,7 @@ so this becomes the fallback color for the slot */ ''}
           }
           const target = flushed ? null : event.target;
           const targetDesc = target ? view.docView.nearestDesc(target, true) : null;
-          this.target = targetDesc && targetDesc.dom.nodeType == 1 ? targetDesc.dom : null;
+          this.target = targetDesc && targetDesc.nodeDOM.nodeType == 1 ? targetDesc.nodeDOM : null;
           let { selection } = view.state;
           if (event.button == 0 &&
               targetNode.type.spec.draggable && targetNode.type.spec.selectable !== false ||
@@ -37892,7 +38026,7 @@ so this becomes the fallback color for the slot */ ''}
       let $mouse = view.state.doc.resolve(eventPos.pos);
       let slice = dragging && dragging.slice;
       if (slice) {
-          view.someProp("transformPasted", f => { slice = f(slice, view); });
+          view.someProp("transformPasted", f => { slice = f(slice, view, false); });
       }
       else {
           slice = parseFromClipboard(view, getText$1(event.dataTransfer), brokenClipboardAPI ? null : event.dataTransfer.getData("text/html"), false, $mouse);
@@ -39078,7 +39212,7 @@ so this becomes the fallback color for the slot */ ''}
       }
       return null;
   }
-  const isInline = /^(a|abbr|acronym|b|bd[io]|big|br|button|cite|code|data(list)?|del|dfn|em|i|ins|kbd|label|map|mark|meter|output|q|ruby|s|samp|small|span|strong|su[bp]|time|u|tt|var)$/i;
+  const isInline = /^(a|abbr|acronym|b|bd[io]|big|br|button|cite|code|data(list)?|del|dfn|em|i|img|ins|kbd|label|map|mark|meter|output|q|ruby|s|samp|small|span|strong|su[bp]|time|u|tt|var)$/i;
   function readDOMChange(view, from, to, typeOver, addedNodes) {
       let compositionID = view.input.compositionPendingChanges || (view.composing ? view.input.compositionID : 0);
       view.input.compositionPendingChanges = 0;
@@ -39177,16 +39311,13 @@ so this becomes the fallback color for the slot */ ''}
       let $to = parse.doc.resolveNoCache(change.endB - parse.from);
       let $fromA = doc.resolve(change.start);
       let inlineChange = $from.sameParent($to) && $from.parent.inlineContent && $fromA.end() >= change.endA;
-      let nextSel;
       // If this looks like the effect of pressing Enter (or was recorded
       // as being an iOS enter press), just dispatch an Enter key instead.
       if (((ios && view.input.lastIOSEnter > Date.now() - 225 &&
           (!inlineChange || addedNodes.some(n => n.nodeName == "DIV" || n.nodeName == "P"))) ||
           (!inlineChange && $from.pos < parse.doc.content.size &&
               (!$from.sameParent($to) || !$from.parent.inlineContent) &&
-              !/\S/.test(parse.doc.textBetween($from.pos, $to.pos, "", "")) &&
-              (nextSel = Selection$2.findFrom(parse.doc.resolve($from.pos + 1), 1, true)) &&
-              nextSel.head > $from.pos)) &&
+              $from.pos < $to.pos && !/\S/.test(parse.doc.textBetween($from.pos, $to.pos, "", "")))) &&
           view.someProp("handleKeyDown", f => f(view, keyEvent(13, "Enter")))) {
           view.input.lastIOSEnter = 0;
           return;
@@ -45934,8 +46065,6 @@ img.ProseMirror-separator {
     }
 `;
 
-  /* eslint-disable @typescript-eslint/indent */
-  // prettier-ignore
   const template$r = html `
     <template>
         <${anchoredRegionTag}
@@ -46232,7 +46361,6 @@ img.ProseMirror-separator {
       .register(nimbleRichTextMentionListbox());
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
-  // prettier-ignore
   const template$q = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
@@ -47722,7 +47850,7 @@ img.ProseMirror-separator {
 
   // Merge objects
   //
-  function assign$2 (obj /* from1, from2, from3, ... */) {
+  function assign$1 (obj /* from1, from2, from3, ... */) {
     const sources = Array.prototype.slice.call(arguments, 1);
 
     sources.forEach(function (source) {
@@ -47992,7 +48120,7 @@ img.ProseMirror-separator {
   var utils = /*#__PURE__*/Object.freeze({
     __proto__: null,
     arrayReplaceAt: arrayReplaceAt,
-    assign: assign$2,
+    assign: assign$1,
     escapeHtml: escapeHtml,
     escapeRE: escapeRE$1,
     fromCodePoint: fromCodePoint,
@@ -48352,7 +48480,7 @@ img.ProseMirror-separator {
      * See [source code](https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.mjs)
      * for more details and examples.
      **/
-    this.rules = assign$2({}, default_rules);
+    this.rules = assign$1({}, default_rules);
   }
 
   /**
@@ -53134,7 +53262,7 @@ img.ProseMirror-separator {
 
   // Merge objects
   //
-  function assign$1 (obj /* from1, from2, from3, ... */) {
+  function assign (obj /* from1, from2, from3, ... */) {
     const sources = Array.prototype.slice.call(arguments, 1);
 
     sources.forEach(function (source) {
@@ -53495,7 +53623,7 @@ img.ProseMirror-separator {
       }
     }
 
-    this.__opts__ = assign$1({}, defaultOptions, options);
+    this.__opts__ = assign({}, defaultOptions, options);
 
     // Cache last tested result. Used to skip repeating steps on next `match` call.
     this.__index__ = -1;
@@ -53503,7 +53631,7 @@ img.ProseMirror-separator {
     this.__schema__ = '';
     this.__text_cache__ = '';
 
-    this.__schemas__ = assign$1({}, defaultSchemas, schemas);
+    this.__schemas__ = assign({}, defaultSchemas, schemas);
     this.__compiled__ = {};
 
     this.__tlds__ = tlds_default;
@@ -53534,7 +53662,7 @@ img.ProseMirror-separator {
    * Set recognition options for links without schema.
    **/
   LinkifyIt.prototype.set = function set (options) {
-    this.__opts__ = assign$1(this.__opts__, options);
+    this.__opts__ = assign(this.__opts__, options);
     return this
   };
 
@@ -54737,7 +54865,7 @@ img.ProseMirror-separator {
      * Link components parser functions, useful to write plugins. See details
      * [here](https://github.com/markdown-it/markdown-it/blob/master/lib/helpers).
      **/
-    this.helpers = assign$2({}, helpers);
+    this.helpers = assign$1({}, helpers);
 
     this.options = {};
     this.configure(presetName);
@@ -54765,7 +54893,7 @@ img.ProseMirror-separator {
    * config.
    **/
   MarkdownIt.prototype.set = function (options) {
-    assign$2(this.options, options);
+    assign$1(this.options, options);
     return this
   };
 
@@ -57398,24 +57526,10 @@ img.ProseMirror-separator {
   // THIS FILE IS AUTOMATICALLY GENERATED DO NOT EDIT DIRECTLY
   // See update-tlds.js for encoding/decoding format
   // https://data.iana.org/TLD/tlds-alpha-by-domain.txt
-  const encodedTlds = 'aaa1rp3bb0ott3vie4c1le2ogado5udhabi7c0ademy5centure6ountant0s9o1tor4d0s1ult4e0g1ro2tna4f0l1rica5g0akhan5ency5i0g1rbus3force5tel5kdn3l0ibaba4pay4lfinanz6state5y2sace3tom5m0azon4ericanexpress7family11x2fam3ica3sterdam8nalytics7droid5quan4z2o0l2partments8p0le4q0uarelle8r0ab1mco4chi3my2pa2t0e3s0da2ia2sociates9t0hleta5torney7u0ction5di0ble3o3spost5thor3o0s4w0s2x0a2z0ure5ba0by2idu3namex4d1k2r0celona5laycard4s5efoot5gains6seball5ketball8uhaus5yern5b0c1t1va3cg1n2d1e0ats2uty4er2rlin4st0buy5t2f1g1h0arti5i0ble3d1ke2ng0o3o1z2j1lack0friday9ockbuster8g1omberg7ue3m0s1w2n0pparibas9o0ats3ehringer8fa2m1nd2o0k0ing5sch2tik2on4t1utique6x2r0adesco6idgestone9oadway5ker3ther5ussels7s1t1uild0ers6siness6y1zz3v1w1y1z0h3ca0b1fe2l0l1vinklein9m0era3p2non3petown5ital0one8r0avan4ds2e0er0s4s2sa1e1h1ino4t0ering5holic7ba1n1re3c1d1enter4o1rn3f0a1d2g1h0anel2nel4rity4se2t2eap3intai5ristmas6ome4urch5i0priani6rcle4sco3tadel4i0c2y3k1l0aims4eaning6ick2nic1que6othing5ud3ub0med6m1n1o0ach3des3ffee4llege4ogne5m0mbank4unity6pany2re3uter5sec4ndos3struction8ulting7tact3ractors9oking4l1p2rsica5untry4pon0s4rses6pa2r0edit0card4union9icket5own3s1uise0s6u0isinella9v1w1x1y0mru3ou3z2dad1nce3ta1e1ing3sun4y2clk3ds2e0al0er2s3gree4livery5l1oitte5ta3mocrat6ntal2ist5si0gn4v2hl2iamonds6et2gital5rect0ory7scount3ver5h2y2j1k1m1np2o0cs1tor4g1mains5t1wnload7rive4tv2ubai3nlop4pont4rban5vag2r2z2earth3t2c0o2deka3u0cation8e1g1mail3erck5nergy4gineer0ing9terprises10pson4quipment8r0icsson6ni3s0q1tate5t1u0rovision8s2vents5xchange6pert3osed4ress5traspace10fage2il1rwinds6th3mily4n0s2rm0ers5shion4t3edex3edback6rrari3ero6i0delity5o2lm2nal1nce1ial7re0stone6mdale6sh0ing5t0ness6j1k1lickr3ghts4r2orist4wers5y2m1o0o0d1tball6rd1ex2sale4um3undation8x2r0ee1senius7l1ogans4ntier7tr2ujitsu5n0d2rniture7tbol5yi3ga0l0lery3o1up4me0s3p1rden4y2b0iz3d0n2e0a1nt0ing5orge5f1g0ee3h1i0ft0s3ves2ing5l0ass3e1obal2o4m0ail3bh2o1x2n1odaddy5ld0point6f2o0dyear5g0le4p1t1v2p1q1r0ainger5phics5tis4een3ipe3ocery4up4s1t1u0cci3ge2ide2tars5ru3w1y2hair2mburg5ngout5us3bo2dfc0bank7ealth0care8lp1sinki6re1mes5iphop4samitsu7tachi5v2k0t2m1n1ockey4ldings5iday5medepot5goods5s0ense7nda3rse3spital5t0ing5t0els3mail5use3w2r1sbc3t1u0ghes5yatt3undai7ibm2cbc2e1u2d1e0ee3fm2kano4l1m0amat4db2mo0bilien9n0c1dustries8finiti5o2g1k1stitute6urance4e4t0ernational10uit4vestments10o1piranga7q1r0ish4s0maili5t0anbul7t0au2v3jaguar4va3cb2e0ep2tzt3welry6io2ll2m0p2nj2o0bs1urg4t1y2p0morgan6rs3uegos4niper7kaufen5ddi3e0rryhotels6properties14fh2g1h1i0a1ds2m1ndle4tchen5wi3m1n1oeln3matsu5sher5p0mg2n2r0d1ed3uokgroup8w1y0oto4z2la0caixa5mborghini8er3nd0rover6xess5salle5t0ino3robe5w0yer5b1c1ds2ease3clerc5frak4gal2o2xus4gbt3i0dl2fe0insurance9style7ghting6ke2lly3mited4o2ncoln4k2ve1ing5k1lc1p2oan0s3cker3us3l1ndon4tte1o3ve3pl0financial11r1s1t0d0a3u0ndbeck6xe1ury5v1y2ma0drid4if1son4keup4n0agement7go3p1rket0ing3s4riott5shalls7ttel5ba2c0kinsey7d1e0d0ia3et2lbourne7me1orial6n0u2rckmsd7g1h1iami3crosoft7l1ni1t2t0subishi9k1l0b1s2m0a2n1o0bi0le4da2e1i1m1nash3ey2ster5rmon3tgage6scow4to0rcycles9v0ie4p1q1r1s0d2t0n1r2u0seum3ic4v1w1x1y1z2na0b1goya4me2vy3ba2c1e0c1t0bank4flix4work5ustar5w0s2xt0direct7us4f0l2g0o2hk2i0co2ke1on3nja3ssan1y5l1o0kia3rton4w0ruz3tv4p1r0a1w2tt2u1yc2z2obi1server7ffice5kinawa6layan0group9lo3m0ega4ne1g1l0ine5oo2pen3racle3nge4g0anic5igins6saka4tsuka4t2vh3pa0ge2nasonic7ris2s1tners4s1y3y2ccw3e0t2f0izer5g1h0armacy6d1ilips5one2to0graphy6s4ysio5ics1tet2ures6d1n0g1k2oneer5zza4k1l0ace2y0station9umbing5s3m1n0c2ohl2ker3litie5rn2st3r0america6xi3ess3ime3o0d0uctions8f1gressive8mo2perties3y5tection8u0dential9s1t1ub2w0c2y2qa1pon3uebec3st5racing4dio4e0ad1lestate6tor2y4cipes5d0stone5umbrella9hab3ise0n3t2liance6n0t0als5pair3ort3ublican8st0aurant8view0s5xroth6ich0ardli6oh3l1o1p2o0cks3deo3gers4om3s0vp3u0gby3hr2n2w0e2yukyu6sa0arland6fe0ty4kura4le1on3msclub4ung5ndvik0coromant12ofi4p1rl2s1ve2xo3b0i1s2c0b1haeffler7midt4olarships8ol3ule3warz5ience5ot3d1e0arch3t2cure1ity6ek2lect4ner3rvices6ven3w1x0y3fr2g1h0angrila6rp3ell3ia1ksha5oes2p0ping5uji3w3i0lk2na1gles5te3j1k0i0n2y0pe4l0ing4m0art3ile4n0cf3o0ccer3ial4ftbank4ware6hu2lar2utions7ng1y2y2pa0ce3ort2t3r0l2s1t0ada2ples4r1tebank4farm7c0group6ockholm6rage3e3ream4udio2y3yle4u0cks3pplies3y2ort5rf1gery5zuki5v1watch4iss4x1y0dney4stems6z2tab1ipei4lk2obao4rget4tamotors6r2too4x0i3c0i2d0k2eam2ch0nology8l1masek5nnis4va3f1g1h0d1eater2re6iaa2ckets5enda4ps2res2ol4j0maxx4x2k0maxx5l1m0all4n1o0day3kyo3ols3p1ray3shiba5tal3urs3wn2yota3s3r0ade1ing4ining5vel0ers0insurance16ust3v2t1ube2i1nes3shu4v0s2w1z2ua1bank3s2g1k1nicom3versity8o2ol2ps2s1y1z2va0cations7na1guard7c1e0gas3ntures6risign5mögensberater2ung14sicherung10t2g1i0ajes4deo3g1king4llas4n1p1rgin4sa1ion4va1o3laanderen9n1odka3lvo3te1ing3o2yage5u2wales2mart4ter4ng0gou5tch0es6eather0channel12bcam3er2site5d0ding5ibo2r3f1hoswho6ien2ki2lliamhill9n0dows4e1ners6me2olterskluwer11odside6rk0s2ld3w2s1tc1f3xbox3erox4ihuan4n2xx2yz3yachts4hoo3maxun5ndex5e1odobashi7ga2kohama6u0tube6t1un3za0ppos4ra3ero3ip2m1one3uerich6w2';
+  const encodedTlds = 'aaa1rp3bb0ott3vie4c1le2ogado5udhabi7c0ademy5centure6ountant0s9o1tor4d0s1ult4e0g1ro2tna4f0l1rica5g0akhan5ency5i0g1rbus3force5tel5kdn3l0ibaba4pay4lfinanz6state5y2sace3tom5m0azon4ericanexpress7family11x2fam3ica3sterdam8nalytics7droid5quan4z2o0l2partments8p0le4q0uarelle8r0ab1mco4chi3my2pa2t0e3s0da2ia2sociates9t0hleta5torney7u0ction5di0ble3o3spost5thor3o0s4w0s2x0a2z0ure5ba0by2idu3namex4d1k2r0celona5laycard4s5efoot5gains6seball5ketball8uhaus5yern5b0c1t1va3cg1n2d1e0ats2uty4er2rlin4st0buy5t2f1g1h0arti5i0ble3d1ke2ng0o3o1z2j1lack0friday9ockbuster8g1omberg7ue3m0s1w2n0pparibas9o0ats3ehringer8fa2m1nd2o0k0ing5sch2tik2on4t1utique6x2r0adesco6idgestone9oadway5ker3ther5ussels7s1t1uild0ers6siness6y1zz3v1w1y1z0h3ca0b1fe2l0l1vinklein9m0era3p2non3petown5ital0one8r0avan4ds2e0er0s4s2sa1e1h1ino4t0ering5holic7ba1n1re3c1d1enter4o1rn3f0a1d2g1h0anel2nel4rity4se2t2eap3intai5ristmas6ome4urch5i0priani6rcle4sco3tadel4i0c2y3k1l0aims4eaning6ick2nic1que6othing5ud3ub0med6m1n1o0ach3des3ffee4llege4ogne5m0mbank4unity6pany2re3uter5sec4ndos3struction8ulting7tact3ractors9oking4l1p2rsica5untry4pon0s4rses6pa2r0edit0card4union9icket5own3s1uise0s6u0isinella9v1w1x1y0mru3ou3z2dad1nce3ta1e1ing3sun4y2clk3ds2e0al0er2s3gree4livery5l1oitte5ta3mocrat6ntal2ist5si0gn4v2hl2iamonds6et2gital5rect0ory7scount3ver5h2y2j1k1m1np2o0cs1tor4g1mains5t1wnload7rive4tv2ubai3nlop4pont4rban5vag2r2z2earth3t2c0o2deka3u0cation8e1g1mail3erck5nergy4gineer0ing9terprises10pson4quipment8r0icsson6ni3s0q1tate5t1u0rovision8s2vents5xchange6pert3osed4ress5traspace10fage2il1rwinds6th3mily4n0s2rm0ers5shion4t3edex3edback6rrari3ero6i0delity5o2lm2nal1nce1ial7re0stone6mdale6sh0ing5t0ness6j1k1lickr3ghts4r2orist4wers5y2m1o0o0d1tball6rd1ex2sale4um3undation8x2r0ee1senius7l1ogans4ntier7tr2ujitsu5n0d2rniture7tbol5yi3ga0l0lery3o1up4me0s3p1rden4y2b0iz3d0n2e0a1nt0ing5orge5f1g0ee3h1i0ft0s3ves2ing5l0ass3e1obal2o4m0ail3bh2o1x2n1odaddy5ld0point6f2o0dyear5g0le4p1t1v2p1q1r0ainger5phics5tis4een3ipe3ocery4up4s1t1u0cci3ge2ide2tars5ru3w1y2hair2mburg5ngout5us3bo2dfc0bank7ealth0care8lp1sinki6re1mes5iphop4samitsu7tachi5v2k0t2m1n1ockey4ldings5iday5medepot5goods5s0ense7nda3rse3spital5t0ing5t0els3mail5use3w2r1sbc3t1u0ghes5yatt3undai7ibm2cbc2e1u2d1e0ee3fm2kano4l1m0amat4db2mo0bilien9n0c1dustries8finiti5o2g1k1stitute6urance4e4t0ernational10uit4vestments10o1piranga7q1r0ish4s0maili5t0anbul7t0au2v3jaguar4va3cb2e0ep2tzt3welry6io2ll2m0p2nj2o0bs1urg4t1y2p0morgan6rs3uegos4niper7kaufen5ddi3e0rryhotels6properties14fh2g1h1i0a1ds2m1ndle4tchen5wi3m1n1oeln3matsu5sher5p0mg2n2r0d1ed3uokgroup8w1y0oto4z2la0caixa5mborghini8er3nd0rover6xess5salle5t0ino3robe5w0yer5b1c1ds2ease3clerc5frak4gal2o2xus4gbt3i0dl2fe0insurance9style7ghting6ke2lly3mited4o2ncoln4k2ve1ing5k1lc1p2oan0s3cker3us3l1ndon4tte1o3ve3pl0financial11r1s1t0d0a3u0ndbeck6xe1ury5v1y2ma0drid4if1son4keup4n0agement7go3p1rket0ing3s4riott5shalls7ttel5ba2c0kinsey7d1e0d0ia3et2lbourne7me1orial6n0u2rckmsd7g1h1iami3crosoft7l1ni1t2t0subishi9k1l0b1s2m0a2n1o0bi0le4da2e1i1m1nash3ey2ster5rmon3tgage6scow4to0rcycles9v0ie4p1q1r1s0d2t0n1r2u0seum3ic4v1w1x1y1z2na0b1goya4me2vy3ba2c1e0c1t0bank4flix4work5ustar5w0s2xt0direct7us4f0l2g0o2hk2i0co2ke1on3nja3ssan1y5l1o0kia3rton4w0ruz3tv4p1r0a1w2tt2u1yc2z2obi1server7ffice5kinawa6layan0group9lo3m0ega4ne1g1l0ine5oo2pen3racle3nge4g0anic5igins6saka4tsuka4t2vh3pa0ge2nasonic7ris2s1tners4s1y3y2ccw3e0t2f0izer5g1h0armacy6d1ilips5one2to0graphy6s4ysio5ics1tet2ures6d1n0g1k2oneer5zza4k1l0ace2y0station9umbing5s3m1n0c2ohl2ker3litie5rn2st3r0axi3ess3ime3o0d0uctions8f1gressive8mo2perties3y5tection8u0dential9s1t1ub2w0c2y2qa1pon3uebec3st5racing4dio4e0ad1lestate6tor2y4cipes5d0stone5umbrella9hab3ise0n3t2liance6n0t0als5pair3ort3ublican8st0aurant8view0s5xroth6ich0ardli6oh3l1o1p2o0cks3deo3gers4om3s0vp3u0gby3hr2n2w0e2yukyu6sa0arland6fe0ty4kura4le1on3msclub4ung5ndvik0coromant12ofi4p1rl2s1ve2xo3b0i1s2c0b1haeffler7midt4olarships8ol3ule3warz5ience5ot3d1e0arch3t2cure1ity6ek2lect4ner3rvices6ven3w1x0y3fr2g1h0angrila6rp3ell3ia1ksha5oes2p0ping5uji3w3i0lk2na1gles5te3j1k0i0n2y0pe4l0ing4m0art3ile4n0cf3o0ccer3ial4ftbank4ware6hu2lar2utions7ng1y2y2pa0ce3ort2t3r0l2s1t0ada2ples4r1tebank4farm7c0group6ockholm6rage3e3ream4udio2y3yle4u0cks3pplies3y2ort5rf1gery5zuki5v1watch4iss4x1y0dney4stems6z2tab1ipei4lk2obao4rget4tamotors6r2too4x0i3c0i2d0k2eam2ch0nology8l1masek5nnis4va3f1g1h0d1eater2re6iaa2ckets5enda4ps2res2ol4j0maxx4x2k0maxx5l1m0all4n1o0day3kyo3ols3p1ray3shiba5tal3urs3wn2yota3s3r0ade1ing4ining5vel0ers0insurance16ust3v2t1ube2i1nes3shu4v0s2w1z2ua1bank3s2g1k1nicom3versity8o2ol2ps2s1y1z2va0cations7na1guard7c1e0gas3ntures6risign5mögensberater2ung14sicherung10t2g1i0ajes4deo3g1king4llas4n1p1rgin4sa1ion4va1o3laanderen9n1odka3lvo3te1ing3o2yage5u2wales2mart4ter4ng0gou5tch0es6eather0channel12bcam3er2site5d0ding5ibo2r3f1hoswho6ien2ki2lliamhill9n0dows4e1ners6me2olterskluwer11odside6rk0s2ld3w2s1tc1f3xbox3erox4ihuan4n2xx2yz3yachts4hoo3maxun5ndex5e1odobashi7ga2kohama6u0tube6t1un3za0ppos4ra3ero3ip2m1one3uerich6w2';
   // Internationalized domain names containing non-ASCII
   const encodedUtlds = 'ελ1υ2бг1ел3дети4ею2католик6ом3мкд2он1сква6онлайн5рг3рус2ф2сайт3рб3укр3қаз3հայ3ישראל5קום3ابوظبي5رامكو5لاردن4بحرين5جزائر5سعودية6عليان5مغرب5مارات5یران5بارت2زار4يتك3ھارت5تونس4سودان3رية5شبكة4عراق2ب2مان4فلسطين6قطر3كاثوليك6وم3مصر2ليسيا5وريتانيا7قع4همراه5پاکستان7ڀارت4कॉम3नेट3भारत0म्3ोत5संगठन5বাংলা5ভারত2ৰত4ਭਾਰਤ4ભારત4ଭାରତ4இந்தியா6லங்கை6சிங்கப்பூர்11భారత్5ಭಾರತ4ഭാരതം5ලංකා4คอม3ไทย3ລາວ3გე2みんな3アマゾン4クラウド4グーグル4コム2ストア3セール3ファッション6ポイント4世界2中信1国1國1文网3亚马逊3企业2佛山2信息2健康2八卦2公司1益2台湾1灣2商城1店1标2嘉里0大酒店5在线2大拿2天主教3娱乐2家電2广东2微博2慈善2我爱你3手机2招聘2政务1府2新加坡2闻2时尚2書籍2机构2淡马锡3游戏2澳門2点看2移动2组织机构4网址1店1站1络2联通2谷歌2购物2通販2集团2電訊盈科4飞利浦3食品2餐厅2香格里拉3港2닷넷1컴2삼성2한국2';
 
-  /**
-   * @template A
-   * @template B
-   * @param {A} target
-   * @param {B} properties
-   * @return {A & B}
-   */
-  const assign = (target, properties) => {
-    for (const key in properties) {
-      target[key] = properties[key];
-    }
-    return target;
-  };
-
   /**
    * Finite State Machine generation utilities
    */
@@ -57678,7 +57792,7 @@ img.ProseMirror-separator {
         templateState = state.go(input);
       if (templateState) {
         nextState = new State();
-        assign(nextState.j, templateState.j);
+        Object.assign(nextState.j, templateState.j);
         nextState.jr.push.apply(nextState.jr, templateState.jr);
         nextState.jd = templateState.jd;
         nextState.t = templateState.t;
@@ -57689,7 +57803,7 @@ img.ProseMirror-separator {
         // Ensure newly token is in the same groups as the old token
         if (groups) {
           if (nextState.t && typeof nextState.t === 'string') {
-            const allFlags = assign(flagsForToken(nextState.t, groups), flags);
+            const allFlags = Object.assign(flagsForToken(nextState.t, groups), flags);
             addToGroups(t, allFlags, groups);
           } else if (flags) {
             addToGroups(t, flags, groups);
@@ -58128,7 +58242,7 @@ img.ProseMirror-separator {
     Start.jd = new State(SYM);
     return {
       start: Start,
-      tokens: assign({
+      tokens: Object.assign({
         groups
       }, tk)
     };
@@ -58397,9 +58511,9 @@ img.ProseMirror-separator {
    *   Similar to render option
    */
   function Options(opts, defaultRender = null) {
-    let o = assign({}, defaults);
+    let o = Object.assign({}, defaults);
     if (opts) {
-      o = assign(o, opts instanceof Options ? opts.o : opts);
+      o = Object.assign(o, opts instanceof Options ? opts.o : opts);
     }
 
     // Ensure all ignored tags are uppercase
@@ -58644,7 +58758,7 @@ img.ProseMirror-separator {
         attributes.rel = rel;
       }
       if (attrs) {
-        assign(attributes, attrs);
+        Object.assign(attributes, attrs);
       }
       return {
         tagName,
@@ -61590,8 +61704,6 @@ img.ProseMirror-separator {
             }
         `));
 
-  /* eslint-disable @typescript-eslint/indent */
-  // prettier-ignore
   const template$o = html `
     <template role="progressbar">
         ${''
@@ -61609,7 +61721,6 @@ img.ProseMirror-separator {
         </div>
     </template>
 `;
-  /* eslint-enable @typescript-eslint/indent */
 
   /**
    * Types of spinner appearance.
@@ -61657,8 +61768,6 @@ img.ProseMirror-separator {
         <slot ${ref('labelSlot')}></slot>
     </label>
 `);
-  /* eslint-disable @typescript-eslint/indent */
-  // prettier-ignore
   const template$n = (context, definition) => html `
     <template
         class="${x => [
@@ -61789,7 +61898,6 @@ img.ProseMirror-separator {
         </${anchoredRegionTag}>
     </template>
 `;
-  /* eslint-enable @typescript-eslint/indent */
 
   // Based on: https://github.com/microsoft/fast/blob/%40microsoft/fast-foundation_v2.49.5/packages/web-components/fast-foundation/src/select/select.form-associated.ts
   /* eslint-disable max-classes-per-file */
@@ -63052,7 +63160,6 @@ img.ProseMirror-separator {
             }
         `));
 
-  // prettier-ignore
   const template$m = html `
     <template
         role="switch"
@@ -66631,7 +66738,6 @@ img.ProseMirror-separator {
           throw new Error(`Cell view tag name (${cellViewTag}) must evaluate to an element extending TableCellView`);
       }
   };
-  // prettier-ignore
   const createCellViewTemplate = (cellViewTag) => {
       validateCellViewTemplate(cellViewTag);
       return html `
@@ -67216,7 +67322,6 @@ focus outline in that case.
     }
 `;
 
-  // prettier-ignore
   const template$l = html `
     <template role="columnheader"
         class="${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}"
@@ -67551,7 +67656,6 @@ focus outline in that case.
     }
 `;
 
-  // prettier-ignore
   const template$k = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}"
         @focusin="${x => x.onCellFocusIn()}"
@@ -67655,7 +67759,6 @@ focus outline in that case.
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
 
-  // prettier-ignore
   const template$j = html `
     <template 
         role="row"
@@ -68146,8 +68249,6 @@ focus outline in that case.
             }
         `));
 
-  /* eslint-disable @typescript-eslint/indent */
-  // prettier-ignore
   const template$i = html `
     <template
         role="row"
@@ -68188,7 +68289,6 @@ focus outline in that case.
         </div>
     </template>
 `;
-  /* eslint-enable @typescript-eslint/indent */
 
   /**
    * A styled cell that is used within the nimble-table-row.
@@ -68312,7 +68412,6 @@ focus outline in that case.
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
 
-  // prettier-ignore
   const template$h = html `
     <template
         role="treegrid"
@@ -71292,8 +71391,7 @@ focus outline in that case.
           return { headerActions, columnHeaders };
       }
       canFocusColumnHeaders() {
-          return (this.table.columns.find(c => !c.columnInternals.sortingDisabled)
-              !== undefined);
+          return (this.table.columns.find(c => !c.columnInternals.sortingDisabled) !== undefined);
       }
       getCurrentRow() {
           return this.table.rowElements[this.getCurrentRowVisibleIndex()];
@@ -72448,7 +72546,6 @@ focus outline in that case.
 
   // Avoiding a wrapping <template> and be careful about starting and ending whitspace
   // so the template can be composed into other column header templates
-  // prettier-ignore
   const template$g = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
@@ -72555,8 +72652,6 @@ focus outline in that case.
     }
 `;
 
-  /* eslint-disable @typescript-eslint/indent */
-  // prettier-ignore
   const template$f = html `
     <template
         @click="${(x, c) => {
@@ -72596,7 +72691,6 @@ focus outline in that case.
             </span>`)}
     </template>
 `;
-  /* eslint-enable @typescript-eslint/indent */
 
   /**
    * A cell view for displaying links
@@ -73075,7 +73169,6 @@ focus outline in that case.
       .register(tableColumnDateTextGroupHeaderView());
   const tableColumnDateTextGroupHeaderViewTag = 'nimble-table-column-date-text-group-header-view';
 
-  // prettier-ignore
   const template$d = html `
     <template
         class="
@@ -73852,7 +73945,6 @@ focus outline in that case.
     }
 `;
 
-  // prettier-ignore
   const template$b = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
@@ -74029,7 +74121,6 @@ focus outline in that case.
     }
 `;
 
-  // prettier-ignore
   const template$a = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
@@ -74377,7 +74468,6 @@ focus outline in that case.
 
   // Avoiding a wrapping <template> and be careful about starting and ending whitespace
   // so the template can be composed into other column header templates
-  // prettier-ignore
   const template$7 = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
@@ -75160,8 +75250,6 @@ focus outline in that case.
     }
 `;
 
-  /* eslint-disable @typescript-eslint/indent */
-  // prettier-ignore
   const template$6 = (context, definition) => html `
     <template slot="end">
         ${when(x => x.defaultSlottedElements.length > 0, html `
@@ -76033,7 +76121,6 @@ focus outline in that case.
             }
         `));
 
-  // prettier-ignore
   const template$3 = html `
             ${when(x => x.tooltipVisible, html `
             <${anchoredRegionTag}
@@ -76411,7 +76498,6 @@ focus outline in that case.
     }
 `;
 
-  // prettier-ignore
   const template$2 = html `
     <template
         role="tree"