@ni/spright-components 4.3.1 → 4.3.3

package/dist/all-components-bundle.js

@@ -11120,89 +11120,6 @@
     </template>
 `;
 
-  /**
-   * The template for the {@link @microsoft/fast-foundation#(NumberField:class)} component.
-   * @public
-   */
-  const numberFieldTemplate = (context, definition) => html `
-    <template class="${x => (x.readOnly ? "readonly" : "")}">
-        <label
-            part="label"
-            for="control"
-            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length
-    ? "label"
-    : "label label__hidden"}"
-        >
-            <slot ${slotted("defaultSlottedNodes")}></slot>
-        </label>
-        <div class="root" part="root">
-            ${startSlotTemplate(context, definition)}
-            <input
-                class="control"
-                part="control"
-                id="control"
-                @input="${x => x.handleTextInput()}"
-                @change="${x => x.handleChange()}"
-                @keydown="${(x, c) => x.handleKeyDown(c.event)}"
-                @blur="${(x, c) => x.handleBlur()}"
-                ?autofocus="${x => x.autofocus}"
-                ?disabled="${x => x.disabled}"
-                list="${x => x.list}"
-                maxlength="${x => x.maxlength}"
-                minlength="${x => x.minlength}"
-                placeholder="${x => x.placeholder}"
-                ?readonly="${x => x.readOnly}"
-                ?required="${x => x.required}"
-                size="${x => x.size}"
-                type="text"
-                inputmode="numeric"
-                min="${x => x.min}"
-                max="${x => x.max}"
-                step="${x => x.step}"
-                aria-atomic="${x => x.ariaAtomic}"
-                aria-busy="${x => x.ariaBusy}"
-                aria-controls="${x => x.ariaControls}"
-                aria-current="${x => x.ariaCurrent}"
-                aria-describedby="${x => x.ariaDescribedby}"
-                aria-details="${x => x.ariaDetails}"
-                aria-disabled="${x => x.ariaDisabled}"
-                aria-errormessage="${x => x.ariaErrormessage}"
-                aria-flowto="${x => x.ariaFlowto}"
-                aria-haspopup="${x => x.ariaHaspopup}"
-                aria-hidden="${x => x.ariaHidden}"
-                aria-invalid="${x => x.ariaInvalid}"
-                aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-                aria-label="${x => x.ariaLabel}"
-                aria-labelledby="${x => x.ariaLabelledby}"
-                aria-live="${x => x.ariaLive}"
-                aria-owns="${x => x.ariaOwns}"
-                aria-relevant="${x => x.ariaRelevant}"
-                aria-roledescription="${x => x.ariaRoledescription}"
-                ${ref("control")}
-            />
-            ${when(x => !x.hideStep && !x.readOnly && !x.disabled, html `
-                    <div class="controls" part="controls">
-                        <div class="step-up" part="step-up" @click="${x => x.stepUp()}">
-                            <slot name="step-up-glyph">
-                                ${definition.stepUpGlyph || ""}
-                            </slot>
-                        </div>
-                        <div
-                            class="step-down"
-                            part="step-down"
-                            @click="${x => x.stepDown()}"
-                        >
-                            <slot name="step-down-glyph">
-                                ${definition.stepDownGlyph || ""}
-                            </slot>
-                        </div>
-                    </div>
-                `)}
-            ${endSlotTemplate(context, definition)}
-        </div>
-    </template>
-`;
-
   class _TextField extends FoundationElement {
   }
   /**
@@ -13444,74 +13361,6 @@
   ], TextArea$1.prototype, "defaultSlottedNodes", void 0);
   applyMixins(TextArea$1, DelegatesARIATextbox);
 
-  /**
-   * The template for the {@link @microsoft/fast-foundation#(TextField:class)} component.
-   * @public
-   */
-  const textFieldTemplate = (context, definition) => html `
-    <template
-        class="
-            ${x => (x.readOnly ? "readonly" : "")}
-        "
-    >
-        <label
-            part="label"
-            for="control"
-            class="${x => x.defaultSlottedNodes && x.defaultSlottedNodes.length
-    ? "label"
-    : "label label__hidden"}"
-        >
-            <slot
-                ${slotted({ property: "defaultSlottedNodes", filter: whitespaceFilter })}
-            ></slot>
-        </label>
-        <div class="root" part="root">
-            ${startSlotTemplate(context, definition)}
-            <input
-                class="control"
-                part="control"
-                id="control"
-                @input="${x => x.handleTextInput()}"
-                @change="${x => x.handleChange()}"
-                ?autofocus="${x => x.autofocus}"
-                ?disabled="${x => x.disabled}"
-                list="${x => x.list}"
-                maxlength="${x => x.maxlength}"
-                minlength="${x => x.minlength}"
-                pattern="${x => x.pattern}"
-                placeholder="${x => x.placeholder}"
-                ?readonly="${x => x.readOnly}"
-                ?required="${x => x.required}"
-                size="${x => x.size}"
-                ?spellcheck="${x => x.spellcheck}"
-                :value="${x => x.value}"
-                type="${x => x.type}"
-                aria-atomic="${x => x.ariaAtomic}"
-                aria-busy="${x => x.ariaBusy}"
-                aria-controls="${x => x.ariaControls}"
-                aria-current="${x => x.ariaCurrent}"
-                aria-describedby="${x => x.ariaDescribedby}"
-                aria-details="${x => x.ariaDetails}"
-                aria-disabled="${x => x.ariaDisabled}"
-                aria-errormessage="${x => x.ariaErrormessage}"
-                aria-flowto="${x => x.ariaFlowto}"
-                aria-haspopup="${x => x.ariaHaspopup}"
-                aria-hidden="${x => x.ariaHidden}"
-                aria-invalid="${x => x.ariaInvalid}"
-                aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-                aria-label="${x => x.ariaLabel}"
-                aria-labelledby="${x => x.ariaLabelledby}"
-                aria-live="${x => x.ariaLive}"
-                aria-owns="${x => x.ariaOwns}"
-                aria-relevant="${x => x.ariaRelevant}"
-                aria-roledescription="${x => x.ariaRoledescription}"
-                ${ref("control")}
-            />
-            ${endSlotTemplate(context, definition)}
-        </div>
-    </template>
-`;
-
   /**
    * The template for the {@link @microsoft/fast-foundation#(Toolbar:class)} component.
    *
@@ -16472,7 +16321,7 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$N = html `<slot></slot>`;
+  const template$P = html `<slot></slot>`;
 
   const styles$11 = css `
     ${display$1('contents')}
@@ -16590,7 +16439,7 @@
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
       styles: styles$11,
-      template: template$N
+      template: template$P
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16893,7 +16742,7 @@
 `;
 
   // prettier-ignore
-  const template$M = (_context, definition) => html `${
+  const template$O = (_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.
 */ ''}<div
@@ -16996,7 +16845,7 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$M,
+      template: template$O,
       styles: styles$10,
       shadowOptions: {
           delegatesFocus: true
@@ -17414,7 +17263,7 @@
     }
 `;
 
-  const template$L = (context, definition) => html `
+  const template$N = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17496,7 +17345,7 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$L,
+      template: template$N,
       styles: styles$_,
       shadowOptions: {
           delegatesFocus: true
@@ -17588,7 +17437,7 @@
     }
 `;
 
-  const template$K = (context, definition) => html `
+  const template$M = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17689,7 +17538,7 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
-      template: template$K,
+      template: template$M,
       styles: styles$Z,
       shadowOptions: {
           delegatesFocus: true
@@ -17817,7 +17666,7 @@
     }
 `;
 
-  const template$J = (context, definition) => html `
+  const template$L = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17869,7 +17718,7 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$J,
+      template: template$L,
       styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
@@ -17922,7 +17771,7 @@
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$I = (context, definition) => html `
+  const template$K = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -18013,7 +17862,7 @@
   const nimbleButton = Button.compose({
       baseName: 'button',
       baseClass: Button$1,
-      template: template$I,
+      template: template$K,
       styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
@@ -18853,7 +18702,7 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$H = html `<div
+  const template$J = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
@@ -18921,7 +18770,7 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$H,
+          template: template$J,
           styles: styles$V
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19013,7 +18862,7 @@
   }).withDefault(coreLabelDefaults.scrollForwardLabel);
 
   // prettier-ignore
-  const template$G = (context, definition) => html `
+  const template$I = (context, definition) => html `
     <div
         class="tab-bar"
     >
@@ -19312,7 +19161,7 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$G,
+      template: template$I,
       styles: styles$X,
       shadowOptions: {
           delegatesFocus: false
@@ -19425,7 +19274,7 @@
     }
 `;
 
-  const template$F = (context, definition) => html `
+  const template$H = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -19562,7 +19411,7 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
-      template: template$F,
+      template: template$H,
       styles: styles$U,
       shadowOptions: {
           delegatesFocus: true
@@ -19870,7 +19719,7 @@
   };
 
   // prettier-ignore
-  const template$E = html `
+  const template$G = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -19988,7 +19837,7 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$E,
+      template: template$G,
       styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
@@ -20155,7 +20004,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$D = html `
+  const template$F = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -20170,7 +20019,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$D,
+      template: template$F,
       styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
@@ -20570,7 +20419,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
 
-  const template$C = (_context, definition) => html `
+  const template$E = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -20655,7 +20504,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$C,
+      template: template$E,
       styles: styles$M,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
@@ -20713,7 +20562,7 @@ so this becomes the fallback color for the slot */ ''}
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$B = (context, definition) => html `
+  const template$D = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20809,7 +20658,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$B,
+      template: template$D,
       styles: styles$L,
       shadowOptions: {
           delegatesFocus: true
@@ -21205,7 +21054,7 @@ so this becomes the fallback color for the slot */ ''}
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$A = (context, definition) => html `
+  const template$C = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -21953,7 +21802,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$A,
+      template: template$C,
       styles: styles$J,
       shadowOptions: {
           delegatesFocus: true
@@ -22091,7 +21940,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$z = html `
+  const template$B = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -22239,7 +22088,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$z,
+      template: template$B,
       styles: styles$I,
       baseClass: Dialog
   });
@@ -22388,7 +22237,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$y = html `
+  const template$A = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -22531,7 +22380,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$y,
+      template: template$A,
       styles: styles$H
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
@@ -25312,7 +25161,7 @@ so this becomes the fallback color for the slot */ ''}
    * @public
    */
   // prettier-ignore
-  const template$x = (context, definition) => html `
+  const template$z = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -25425,7 +25274,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$x,
+      template: template$z,
       styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
@@ -25494,7 +25343,7 @@ so this becomes the fallback color for the slot */ ''}
       return n instanceof ListOption;
   };
   // prettier-ignore
-  const template$w = html `
+  const template$y = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -25636,7 +25485,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$w,
+      template: template$y,
       styles: styles$E
   });
   DesignSystem.getOrCreate()
@@ -25652,7 +25501,7 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$v = html `<template slot="mapping"></template>`;
+  const template$x = html `<template slot="mapping"></template>`;
 
   const styles$D = css `
     ${display$1('none')}
@@ -25670,7 +25519,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$v,
+      template: template$x,
       styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
@@ -25741,7 +25590,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$v,
+      template: template$x,
       styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
@@ -25765,7 +25614,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$v,
+      template: template$x,
       styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
@@ -25782,7 +25631,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$v,
+      template: template$x,
       styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
@@ -26088,7 +25937,7 @@ so this becomes the fallback color for the slot */ ''}
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$u = () => html `
+  const template$w = () => html `
     <template
         slot="${x => {
     if (x.slot) {
@@ -26177,7 +26026,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: template$u,
+      template: template$w,
       styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
@@ -26214,7 +26063,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   // prettier-ignore
-  const template$t = html `
+  const template$v = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -26464,7 +26313,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$t,
+      template: template$v,
       styles: styles$B,
       shadowOptions: {
           delegatesFocus: true
@@ -26774,6 +26623,93 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
+  /**
+   * The template for the {@link @microsoft/fast-foundation#(NumberField:class)} component.
+   * @public
+   */
+  const template$u = (context, definition) => html `
+    <template class="${x => (x.readOnly ? 'readonly' : '')}">
+        <label
+            part="label"
+            for="control"
+            class="${x => (x.defaultSlottedNodes?.length
+    ? 'label'
+    : 'label label__hidden')}"
+        >
+            <slot ${slotted('defaultSlottedNodes')}></slot>
+        </label>
+        <div class="root" part="root">
+            ${startSlotTemplate(context, definition)}
+            <input
+                class="control"
+                part="control"
+                id="control"
+                @input="${x => x.handleTextInput()}"
+                @change="${x => x.handleChange()}"
+                @keydown="${(x, c) => x.handleKeyDown(c.event)}"
+                @blur="${x => x.handleBlur()}"
+                ?autofocus="${x => x.autofocus}"
+                ?disabled="${x => x.disabled}"
+                list="${x => x.list}"
+                maxlength="${x => x.maxlength}"
+                minlength="${x => x.minlength}"
+                placeholder="${x => x.placeholder}"
+                ?readonly="${x => x.readOnly}"
+                ?required="${x => x.required}"
+                size="${x => x.size}"
+                type="text"
+                inputmode="numeric"
+                min="${x => x.min}"
+                max="${x => x.max}"
+                step="${x => x.step}"
+                aria-atomic="${x => x.ariaAtomic}"
+                aria-busy="${x => x.ariaBusy}"
+                aria-controls="${x => x.ariaControls}"
+                aria-current="${x => x.ariaCurrent}"
+                aria-describedby="${x => x.ariaDescribedby}"
+                aria-details="${x => x.ariaDetails}"
+                aria-disabled="${x => x.ariaDisabled}"
+                aria-errormessage="${x => x.ariaErrormessage}"
+                aria-flowto="${x => x.ariaFlowto}"
+                aria-haspopup="${x => x.ariaHaspopup}"
+                aria-hidden="${x => x.ariaHidden}"
+                aria-invalid="${x => x.ariaInvalid}"
+                aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+                aria-label="${x => x.ariaLabel}"
+                aria-labelledby="${x => x.ariaLabelledby}"
+                aria-live="${x => x.ariaLive}"
+                aria-owns="${x => x.ariaOwns}"
+                aria-relevant="${x => x.ariaRelevant}"
+                aria-roledescription="${x => x.ariaRoledescription}"
+                ${ref('control')}
+            />
+            ${when(x => !x.hideStep && !x.readOnly && !x.disabled, html `
+                    <div class="controls" part="controls">
+                        <div
+                            class="step-up"
+                            part="step-up"
+                            @click="${x => x.stepUp()}"
+                        >
+                            <slot name="step-up-glyph">
+                                ${definition.stepUpGlyph || ''}
+                            </slot>
+                        </div>
+                        <div
+                            class="step-down"
+                            part="step-down"
+                            @click="${x => x.stepDown()}"
+                        >
+                            <slot name="step-down-glyph">
+                                ${definition.stepDownGlyph || ''}
+                            </slot>
+                        </div>
+                    </div>
+                `)}
+            ${endSlotTemplate(context, definition)}
+        </div>
+    </template>
+`;
+
   /**
    * A nimble-styled HTML number input
    */
@@ -26802,7 +26738,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleNumberField = NumberField.compose({
       baseName: 'number-field',
       baseClass: NumberField$1,
-      template: numberFieldTemplate,
+      template: template$u,
       styles: styles$z,
       shadowOptions: {
           delegatesFocus: true
@@ -26992,7 +26928,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   /* eslint-disable @typescript-eslint/indent */
-  const template$s = html `
+  const template$t = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
@@ -27031,7 +26967,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
-      template: template$s,
+      template: template$t,
       styles: styles$x,
       shadowOptions: {
           delegatesFocus: true
@@ -29953,6 +29889,7 @@ so this becomes the fallback color for the slot */ ''}
           this.options = options;
           this.isOpen = isOpen;
           this.open = 0;
+          this.localPreserveWS = false;
           let topNode = options.topNode, topContext;
           let topOptions = wsOptionsFor(null, options.preserveWhitespace, 0) | (isOpen ? OPT_OPEN_LEFT : 0);
           if (topNode)
@@ -29979,11 +29916,12 @@ so this becomes the fallback color for the slot */ ''}
       }
       addTextNode(dom, marks) {
           let value = dom.nodeValue;
-          let top = this.top;
-          if (top.options & OPT_PRESERVE_WS_FULL ||
+          let top = this.top, preserveWS = (top.options & OPT_PRESERVE_WS_FULL) ? "full"
+              : this.localPreserveWS || (top.options & OPT_PRESERVE_WS) > 0;
+          if (preserveWS === "full" ||
               top.inlineContext(dom) ||
               /[^ \t\r\n\u000c]/.test(value)) {
-              if (!(top.options & OPT_PRESERVE_WS)) {
+              if (!preserveWS) {
                   value = value.replace(/[ \t\r\n\u000c]+/g, " ");
                   // If this starts with whitespace, and there is no node before it, or
                   // a hard break, or a text node that ends with whitespace, strip the
@@ -29997,7 +29935,7 @@ so this becomes the fallback color for the slot */ ''}
                           value = value.slice(1);
                   }
               }
-              else if (!(top.options & OPT_PRESERVE_WS_FULL)) {
+              else if (preserveWS !== "full") {
                   value = value.replace(/\r?\n|\r/g, " ");
               }
               else {
@@ -30014,12 +29952,15 @@ so this becomes the fallback color for the slot */ ''}
       // Try to find a handler for the given tag and use that to parse. If
       // none is found, the element's content nodes are added directly.
       addElement(dom, marks, matchAfter) {
+          let outerWS = this.localPreserveWS, top = this.top;
+          if (dom.tagName == "PRE" || /pre/.test(dom.style && dom.style.whiteSpace))
+              this.localPreserveWS = true;
           let name = dom.nodeName.toLowerCase(), ruleID;
           if (listTags.hasOwnProperty(name) && this.parser.normalizeLists)
               normalizeList(dom);
           let rule = (this.options.ruleFromNode && this.options.ruleFromNode(dom)) ||
               (ruleID = this.parser.matchTag(dom, this, matchAfter));
-          if (rule ? rule.ignore : ignoreTags.hasOwnProperty(name)) {
+          out: if (rule ? rule.ignore : ignoreTags.hasOwnProperty(name)) {
               this.findInside(dom);
               this.ignoreFallback(dom, marks);
           }
@@ -30028,7 +29969,7 @@ so this becomes the fallback color for the slot */ ''}
                   this.open = Math.max(0, this.open - 1);
               else if (rule && rule.skip.nodeType)
                   dom = rule.skip;
-              let sync, top = this.top, oldNeedsBlock = this.needsBlock;
+              let sync, oldNeedsBlock = this.needsBlock;
               if (blockTags.hasOwnProperty(name)) {
                   if (top.content.length && top.content[0].isInline && this.open) {
                       this.open--;
@@ -30040,7 +29981,7 @@ so this becomes the fallback color for the slot */ ''}
               }
               else if (!dom.firstChild) {
                   this.leafFallback(dom, marks);
-                  return;
+                  break out;
               }
               let innerMarks = rule && rule.skip ? marks : this.readStyles(dom, marks);
               if (innerMarks)
@@ -30054,6 +29995,7 @@ so this becomes the fallback color for the slot */ ''}
               if (innerMarks)
                   this.addElementByRule(dom, rule, innerMarks, rule.consuming === false ? ruleID : undefined);
           }
+          this.localPreserveWS = outerWS;
       }
       // Called for leaf DOM nodes that would otherwise be ignored
       leafFallback(dom, marks) {
@@ -30244,14 +30186,18 @@ so this becomes the fallback color for the slot */ ''}
       finish() {
           this.open = 0;
           this.closeExtra(this.isOpen);
-          return this.nodes[0].finish(this.isOpen || this.options.topOpen);
+          return this.nodes[0].finish(!!(this.isOpen || this.options.topOpen));
       }
       sync(to) {
-          for (let i = this.open; i >= 0; i--)
+          for (let i = this.open; i >= 0; i--) {
               if (this.nodes[i] == to) {
                   this.open = i;
                   return true;
               }
+              else if (this.localPreserveWS) {
+                  this.nodes[i].options |= OPT_PRESERVE_WS;
+              }
+          }
           return false;
       }
       get currentPos() {
@@ -34161,11 +34107,12 @@ so this becomes the fallback color for the slot */ ''}
       for (let cur = node, sawBlock = false;;) {
           if (cur == view.dom)
               break;
-          let desc = view.docView.nearestDesc(cur, true);
+          let desc = view.docView.nearestDesc(cur, true), rect;
           if (!desc)
               return null;
-          if (desc.dom.nodeType == 1 && (desc.node.isBlock && desc.parent || !desc.contentDOM)) {
-              let rect = desc.dom.getBoundingClientRect();
+          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) {
                   // Only apply the horizontal test to the innermost block. Vertical for any parent.
                   if (!sawBlock && rect.left > coords.left || rect.top > coords.top)
@@ -36807,7 +36754,7 @@ so this becomes the fallback color for the slot */ ''}
           this.lastIOSEnterFallbackTimeout = -1;
           this.lastFocus = 0;
           this.lastTouch = 0;
-          this.lastAndroidDelete = 0;
+          this.lastChromeDelete = 0;
           this.composing = false;
           this.compositionNode = null;
           this.composingTimeout = -1;
@@ -38784,11 +38731,11 @@ so this becomes the fallback color for the slot */ ''}
               view.domObserver.suppressSelectionUpdates(); // #820
           return;
       }
-      // Chrome Android will occasionally, during composition, delete the
+      // Chrome will occasionally, during composition, delete the
       // entire composition and then immediately insert it again. This is
       // used to detect that situation.
-      if (chrome && android && change.endB == change.start)
-          view.input.lastAndroidDelete = Date.now();
+      if (chrome && change.endB == change.start)
+          view.input.lastChromeDelete = Date.now();
       // This tries to detect Android virtual keyboard
       // enter-and-pick-suggestion action. That sometimes (see issue
       // #1059) first fires a DOM mutation, before moving the selection to
@@ -38839,13 +38786,13 @@ so this becomes the fallback color for the slot */ ''}
           tr = view.state.tr.replace(chFrom, chTo, parse.doc.slice(change.start - parse.from, change.endB - parse.from));
       if (parse.sel) {
           let sel = resolveSelection(view, tr.doc, parse.sel);
-          // Chrome Android will sometimes, during composition, report the
+          // Chrome will sometimes, during composition, report the
           // selection in the wrong place. If it looks like that is
           // happening, don't update the selection.
           // Edge just doesn't move the cursor forward when you start typing
           // in an empty block or between br nodes.
-          if (sel && !(chrome && android && view.composing && sel.empty &&
-              (change.start != change.endB || view.input.lastAndroidDelete < Date.now() - 100) &&
+          if (sel && !(chrome && view.composing && sel.empty &&
+              (change.start != change.endB || view.input.lastChromeDelete < Date.now() - 100) &&
               (sel.head == chFrom || sel.head == tr.mapping.map(chTo) - 1) ||
               ie$1 && sel.empty && sel.head == chFrom))
               tr.setSelection(sel);
@@ -40341,28 +40288,44 @@ so this becomes the fallback color for the slot */ ''}
   function wrapInList$1(listType, attrs = null) {
       return function (state, dispatch) {
           let { $from, $to } = state.selection;
-          let range = $from.blockRange($to), doJoin = false, outerRange = range;
+          let range = $from.blockRange($to);
           if (!range)
               return false;
-          // This is at the top of an existing list item
-          if (range.depth >= 2 && $from.node(range.depth - 1).type.compatibleContent(listType) && range.startIndex == 0) {
-              // Don't do anything if this is the top of the list
-              if ($from.index(range.depth - 1) == 0)
-                  return false;
-              let $insert = state.doc.resolve(range.start - 2);
-              outerRange = new NodeRange($insert, $insert, range.depth);
-              if (range.endIndex < range.parent.childCount)
-                  range = new NodeRange($from, state.doc.resolve($to.end(range.depth)), range.depth);
-              doJoin = true;
-          }
-          let wrap = findWrapping(outerRange, listType, attrs, range);
-          if (!wrap)
+          let tr = dispatch ? state.tr : null;
+          if (!wrapRangeInList(tr, range, listType, attrs))
               return false;
           if (dispatch)
-              dispatch(doWrapInList(state.tr, range, wrap, doJoin, listType).scrollIntoView());
+              dispatch(tr.scrollIntoView());
           return true;
       };
   }
+  /**
+  Try to wrap the given node range in a list of the given type.
+  Return `true` when this is possible, `false` otherwise. When `tr`
+  is non-null, the wrapping is added to that transaction. When it is
+  `null`, the function only queries whether the wrapping is
+  possible.
+  */
+  function wrapRangeInList(tr, range, listType, attrs = null) {
+      let doJoin = false, outerRange = range, doc = range.$from.doc;
+      // This is at the top of an existing list item
+      if (range.depth >= 2 && range.$from.node(range.depth - 1).type.compatibleContent(listType) && range.startIndex == 0) {
+          // Don't do anything if this is the top of the list
+          if (range.$from.index(range.depth - 1) == 0)
+              return false;
+          let $insert = doc.resolve(range.start - 2);
+          outerRange = new NodeRange($insert, $insert, range.depth);
+          if (range.endIndex < range.parent.childCount)
+              range = new NodeRange(range.$from, doc.resolve(range.$to.end(range.depth)), range.depth);
+          doJoin = true;
+      }
+      let wrap = findWrapping(outerRange, listType, attrs, range);
+      if (!wrap)
+          return false;
+      if (tr)
+          doWrapInList(tr, range, wrap, doJoin, listType);
+      return true;
+  }
   function doWrapInList(tr, range, wrappers, joinBefore, listType) {
       let content = Fragment.empty;
       for (let i = wrappers.length - 1; i >= 0; i--)
@@ -41460,6 +41423,8 @@ so this becomes the fallback color for the slot */ ''}
       const success = handlers.every(handler => handler !== null);
       return success;
   }
+  // When dragging across editors, must get another editor instance to delete selection content.
+  let tiptapDragFromOtherEditor = null;
   const createClipboardPasteEvent = (text) => {
       var _a;
       const event = new ClipboardEvent('paste', {
@@ -41522,11 +41487,21 @@ so this becomes the fallback color for the slot */ ''}
                       dragSourceElement = ((_a = view.dom.parentElement) === null || _a === void 0 ? void 0 : _a.contains(event.target))
                           ? view.dom.parentElement
                           : null;
+                      if (dragSourceElement) {
+                          tiptapDragFromOtherEditor = editor;
+                      }
+                  };
+                  const handleDragend = () => {
+                      if (tiptapDragFromOtherEditor) {
+                          tiptapDragFromOtherEditor = null;
+                      }
                   };
                   window.addEventListener('dragstart', handleDragstart);
+                  window.addEventListener('dragend', handleDragend);
                   return {
                       destroy() {
                           window.removeEventListener('dragstart', handleDragstart);
+                          window.removeEventListener('dragend', handleDragend);
                       },
                   };
               },
@@ -41535,6 +41510,18 @@ so this becomes the fallback color for the slot */ ''}
                       drop: (view, event) => {
                           isDroppedFromProseMirror = dragSourceElement === view.dom.parentElement;
                           dropEvent = event;
+                          if (!isDroppedFromProseMirror) {
+                              const dragFromOtherEditor = tiptapDragFromOtherEditor;
+                              if (dragFromOtherEditor) {
+                                  // setTimeout to avoid the wrong content after drop, timeout arg can't be empty or 0
+                                  setTimeout(() => {
+                                      const selection = dragFromOtherEditor.state.selection;
+                                      if (selection) {
+                                          dragFromOtherEditor.commands.deleteRange({ from: selection.from, to: selection.to });
+                                      }
+                                  }, 10);
+                              }
+                          }
                           return false;
                       },
                       paste: (_view, event) => {
@@ -42293,30 +42280,13 @@ so this becomes the fallback color for the slot */ ''}
       return TextSelection.create(doc, minMax(position, minPos, maxPos), minMax(position, minPos, maxPos));
   }
 
-  function isiOS() {
-      return [
-          'iPad Simulator',
-          'iPhone Simulator',
-          'iPod Simulator',
-          'iPad',
-          'iPhone',
-          'iPod',
-      ].includes(navigator.platform)
-          // iPad on iOS 13 detection
-          || (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
-  }
-
   const focus = (position = null, options = {}) => ({ editor, view, tr, dispatch, }) => {
       options = {
           scrollIntoView: true,
           ...options,
       };
       const delayedFocus = () => {
-          // focus within `requestAnimationFrame` breaks focus on iOS
-          // so we have to call this
-          if (isiOS()) {
-              view.dom.focus();
-          }
+          view.dom.focus();
           // For React we have to focus asynchronously. Otherwise wild things happen.
           // see: https://github.com/ueberdosis/tiptap/issues/1520
           requestAnimationFrame(() => {
@@ -42647,6 +42617,19 @@ so this becomes the fallback color for the slot */ ''}
       return joinTextblockForward$1(state, dispatch);
   };
 
+  function isiOS() {
+      return [
+          'iPad Simulator',
+          'iPhone Simulator',
+          'iPod Simulator',
+          'iPad',
+          'iPhone',
+          'iPod',
+      ].includes(navigator.platform)
+          // iPad on iOS 13 detection
+          || (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
+  }
+
   function isMacOS() {
       return typeof navigator !== 'undefined'
           ? /Mac/.test(navigator.platform)
@@ -42857,11 +42840,12 @@ so this becomes the fallback color for the slot */ ''}
       return true;
   };
 
-  const selectAll = () => ({ tr, commands }) => {
-      return commands.setTextSelection({
-          from: 0,
-          to: tr.doc.content.size,
-      });
+  const selectAll = () => ({ tr, dispatch }) => {
+      if (dispatch) {
+          const selection = new AllSelection(tr.doc);
+          tr.setSelection(selection);
+      }
+      return true;
   };
 
   const selectNodeBackward = () => ({ state, dispatch }) => {
@@ -45351,7 +45335,7 @@ img.ProseMirror-separator {
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$r = html `
+  const template$s = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -45639,7 +45623,7 @@ img.ProseMirror-separator {
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$r,
+      template: template$s,
       styles: styles$v
   });
   DesignSystem.getOrCreate()
@@ -45648,7 +45632,7 @@ img.ProseMirror-separator {
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
   // prettier-ignore
-  const template$q = html `
+  const template$r = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -56143,8 +56127,8 @@ img.ProseMirror-separator {
       this.values = values;
     }
 
-    if ( RopeSequence ) Leaf.__proto__ = RopeSequence;
-    Leaf.prototype = Object.create( RopeSequence && RopeSequence.prototype );
+    Leaf.__proto__ = RopeSequence;
+    Leaf.prototype = Object.create( RopeSequence.prototype );
     Leaf.prototype.constructor = Leaf;
 
     var prototypeAccessors = { length: { configurable: true },depth: { configurable: true } };
@@ -56204,8 +56188,8 @@ img.ProseMirror-separator {
       this.depth = Math.max(left.depth, right.depth) + 1;
     }
 
-    if ( RopeSequence ) Append.__proto__ = RopeSequence;
-    Append.prototype = Object.create( RopeSequence && RopeSequence.prototype );
+    Append.__proto__ = RopeSequence;
+    Append.prototype = Object.create( RopeSequence.prototype );
     Append.prototype.constructor = Append;
 
     Append.prototype.flatten = function flatten () {
@@ -57165,6 +57149,8 @@ img.ProseMirror-separator {
   // A valid web domain token
   const WORD = 'WORD'; // only contains a-z
   const UWORD = 'UWORD'; // contains letters other than a-z, used for IDN
+  const ASCIINUMERICAL = 'ASCIINUMERICAL'; // contains a-z, 0-9
+  const ALPHANUMERICAL = 'ALPHANUMERICAL'; // contains numbers and letters other than a-z, used for IDN
 
   // Special case of word
   const LOCALHOST = 'LOCALHOST';
@@ -57192,7 +57178,7 @@ img.ProseMirror-separator {
   const WS = 'WS';
 
   // New line (unix style)
-  const NL$1 = 'NL'; // \n
+  const NL = 'NL'; // \n
 
   // Opening/closing bracket classes
   // TODO: Rename OPEN -> LEFT and CLOSE -> RIGHT in v5 to fit with Unicode names
@@ -57252,6 +57238,8 @@ img.ProseMirror-separator {
   	__proto__: null,
   	WORD: WORD,
   	UWORD: UWORD,
+  	ASCIINUMERICAL: ASCIINUMERICAL,
+  	ALPHANUMERICAL: ALPHANUMERICAL,
   	LOCALHOST: LOCALHOST,
   	TLD: TLD,
   	UTLD: UTLD,
@@ -57259,7 +57247,7 @@ img.ProseMirror-separator {
   	SLASH_SCHEME: SLASH_SCHEME,
   	NUM: NUM,
   	WS: WS,
-  	NL: NL$1,
+  	NL: NL,
   	OPENBRACE: OPENBRACE,
   	CLOSEBRACE: CLOSEBRACE,
   	OPENBRACKET: OPENBRACKET,
@@ -57316,9 +57304,11 @@ img.ProseMirror-separator {
   	The scanner provides an interface that takes a string of text as input, and
   	outputs an array of tokens instances that can be used for easy URL parsing.
   */
-  const NL = '\n'; // New line character
+  const CR = '\r'; // carriage-return character
+  const LF = '\n'; // line-feed character
   const EMOJI_VARIATION = '\ufe0f'; // Variation selector, follows heart and others
   const EMOJI_JOINER = '\u200d'; // zero-width joiner
+  const OBJECT_REPLACEMENT = '\ufffc'; // whitespace placeholder that sometimes appears in rich text editors
 
   let tlds = null,
     utlds = null; // don't change so only have to be computed once
@@ -57404,49 +57394,73 @@ img.ProseMirror-separator {
       [numeric]: true
     });
     tr(Num, DIGIT, Num);
+    const Asciinumeric = tr(Num, ASCII_LETTER, ASCIINUMERICAL, {
+      [asciinumeric]: true
+    });
+    const Alphanumeric = tr(Num, LETTER, ALPHANUMERICAL, {
+      [alphanumeric$1]: true
+    });
 
     // State which emits a word token
     const Word = tr(Start, ASCII_LETTER, WORD, {
       [ascii]: true
     });
+    tr(Word, DIGIT, Asciinumeric);
     tr(Word, ASCII_LETTER, Word);
+    tr(Asciinumeric, DIGIT, Asciinumeric);
+    tr(Asciinumeric, ASCII_LETTER, Asciinumeric);
 
     // Same as previous, but specific to non-fsm.ascii alphabet words
     const UWord = tr(Start, LETTER, UWORD, {
       [alpha]: true
     });
     tr(UWord, ASCII_LETTER); // Non-accepting
+    tr(UWord, DIGIT, Alphanumeric);
     tr(UWord, LETTER, UWord);
+    tr(Alphanumeric, DIGIT, Alphanumeric);
+    tr(Alphanumeric, ASCII_LETTER); // Non-accepting
+    tr(Alphanumeric, LETTER, Alphanumeric); // Non-accepting
 
     // Whitespace jumps
     // Tokens of only non-newline whitespace are arbitrarily long
     // If any whitespace except newline, more whitespace!
-    const Ws = tr(Start, SPACE, WS, {
+    const Nl = tt(Start, LF, NL, {
+      [whitespace]: true
+    });
+    const Cr = tt(Start, CR, WS, {
       [whitespace]: true
     });
-    tt(Start, NL, NL$1, {
+    const Ws = tr(Start, SPACE, WS, {
       [whitespace]: true
     });
-    tt(Ws, NL); // non-accepting state to avoid mixing whitespaces
+    tt(Start, OBJECT_REPLACEMENT, Ws);
+    tt(Cr, LF, Nl); // \r\n
+    tt(Cr, OBJECT_REPLACEMENT, Ws);
+    tr(Cr, SPACE, Ws);
+    tt(Ws, CR); // non-accepting state to avoid mixing whitespaces
+    tt(Ws, LF); // non-accepting state to avoid mixing whitespaces
     tr(Ws, SPACE, Ws);
+    tt(Ws, OBJECT_REPLACEMENT, Ws);
 
     // Emoji tokens. They are not grouped by the scanner except in cases where a
     // zero-width joiner is present
     const Emoji = tr(Start, EMOJI, EMOJI$1, {
       [emoji]: true
     });
+    tt(Emoji, '#'); // no transition, emoji regex seems to match #
     tr(Emoji, EMOJI, Emoji);
     tt(Emoji, EMOJI_VARIATION, Emoji);
     // tt(Start, EMOJI_VARIATION, Emoji); // This one is sketchy
 
     const EmojiJoiner = tt(Emoji, EMOJI_JOINER);
+    tt(EmojiJoiner, '#');
     tr(EmojiJoiner, EMOJI, Emoji);
     // tt(EmojiJoiner, EMOJI_VARIATION, Emoji); // also sketchy
 
     // Generates states for top-level domains
     // Note that this is most accurate when tlds are in alphabetical order
-    const wordjr = [[ASCII_LETTER, Word]];
-    const uwordjr = [[ASCII_LETTER, null], [LETTER, UWord]];
+    const wordjr = [[ASCII_LETTER, Word], [DIGIT, Asciinumeric]];
+    const uwordjr = [[ASCII_LETTER, null], [LETTER, UWord], [DIGIT, Alphanumeric]];
     for (let i = 0; i < tlds.length; i++) {
       fastts(Start, tlds[i], TLD, WORD, wordjr);
     }
@@ -58135,7 +58149,7 @@ img.ProseMirror-separator {
     // Types of tokens that can follow a URL and be part of the query string
     // but cannot be the very last characters
     // Characters that cannot appear in the URL at all should be excluded
-    const qsNonAccepting = [APOSTROPHE, COLON, COMMA, DOT, EXCLAMATION, QUERY, QUOTE, SEMI, OPENANGLEBRACKET, CLOSEANGLEBRACKET, OPENBRACE, CLOSEBRACE, CLOSEBRACKET, OPENBRACKET, OPENPAREN, CLOSEPAREN, FULLWIDTHLEFTPAREN, FULLWIDTHRIGHTPAREN, LEFTCORNERBRACKET, RIGHTCORNERBRACKET, LEFTWHITECORNERBRACKET, RIGHTWHITECORNERBRACKET, FULLWIDTHLESSTHAN, FULLWIDTHGREATERTHAN];
+    const qsNonAccepting = [COLON, COMMA, DOT, EXCLAMATION, PERCENT, QUERY, QUOTE, SEMI, OPENANGLEBRACKET, CLOSEANGLEBRACKET, OPENBRACE, CLOSEBRACE, CLOSEBRACKET, OPENBRACKET, OPENPAREN, CLOSEPAREN, FULLWIDTHLEFTPAREN, FULLWIDTHRIGHTPAREN, LEFTCORNERBRACKET, RIGHTCORNERBRACKET, LEFTWHITECORNERBRACKET, RIGHTWHITECORNERBRACKET, FULLWIDTHLESSTHAN, FULLWIDTHGREATERTHAN];
 
     // For addresses without the mailto prefix
     // Tokens allowed in the localpart of the email
@@ -58180,6 +58194,7 @@ img.ProseMirror-separator {
 
     // Hyphen can jump back to a domain name
     const EmailDomainHyphen = tt(EmailDomain, HYPHEN); // parsed string starts with local email info + @ with a potential domain name
+    tt(EmailDomainHyphen, HYPHEN, EmailDomainHyphen);
     ta(EmailDomainHyphen, groups.domain, EmailDomain);
     ta(Email$1, groups.domain, EmailDomain);
     tt(Email$1, DOT, EmailDomainDot);
@@ -58194,6 +58209,7 @@ img.ProseMirror-separator {
     // (but not TLDs)
     const DomainHyphen = tt(Domain, HYPHEN); // domain followed by hyphen
     const DomainDot = tt(Domain, DOT); // domain followed by DOT
+    tt(DomainHyphen, HYPHEN, DomainHyphen);
     ta(DomainHyphen, groups.domain, Domain);
     ta(DomainDot, localpartAccepting, Localpart);
     ta(DomainDot, groups.domain, Domain);
@@ -58244,6 +58260,7 @@ img.ProseMirror-separator {
     // Force URL with scheme prefix followed by anything sane
     ta(SchemeColon, groups.domain, Url$1);
     tt(SchemeColon, SLASH, Url$1);
+    tt(SchemeColon, QUERY, Url$1);
     ta(UriPrefix, groups.domain, Url$1);
     ta(UriPrefix, qsAccepting, Url$1);
     tt(UriPrefix, SLASH, Url$1);
@@ -58292,7 +58309,7 @@ img.ProseMirror-separator {
       tt(UrlOpenSyms, CLOSE, Url$1);
     }
     tt(Start, LOCALHOST, DomainDotTld); // localhost is a valid URL state
-    tt(Start, NL$1, Nl); // single new line
+    tt(Start, NL, Nl); // single new line
 
     return {
       start: Start,
@@ -58447,7 +58464,7 @@ img.ProseMirror-separator {
    * Detect URLs with the following additional protocol. Anything with format
    * "protocol://..." will be considered a link. If `optionalSlashSlash` is set to
    * `true`, anything with format "protocol:..." will be considered a link.
-   * @param {string} protocol
+   * @param {string} scheme
    * @param {boolean} [optionalSlashSlash]
    */
   function registerCustomProtocol(scheme, optionalSlashSlash = false) {
@@ -58841,9 +58858,25 @@ img.ProseMirror-separator {
       addCommands() {
           return {
               setLink: attributes => ({ chain }) => {
+                  const { href } = attributes;
+                  if (!this.options.isAllowedUri(href, {
+                      defaultValidate: url => !!isAllowedUri(url, this.options.protocols),
+                      protocols: this.options.protocols,
+                      defaultProtocol: this.options.defaultProtocol,
+                  })) {
+                      return false;
+                  }
                   return chain().setMark(this.name, attributes).setMeta('preventAutolink', true).run();
               },
               toggleLink: attributes => ({ chain }) => {
+                  const { href } = attributes;
+                  if (!this.options.isAllowedUri(href, {
+                      defaultValidate: url => !!isAllowedUri(url, this.options.protocols),
+                      protocols: this.options.protocols,
+                      defaultProtocol: this.options.defaultProtocol,
+                  })) {
+                      return false;
+                  }
                   return chain()
                       .toggleMark(this.name, attributes, { extendEmptyMarkRange: true })
                       .setMeta('preventAutolink', true)
@@ -58959,13 +58992,15 @@ img.ProseMirror-separator {
 
   function findSuggestionMatch(config) {
       var _a;
-      const { char, allowSpaces, allowedPrefixes, startOfLine, $position, } = config;
+      const { char, allowSpaces: allowSpacesOption, allowToIncludeChar, allowedPrefixes, startOfLine, $position, } = config;
+      const allowSpaces = allowSpacesOption && !allowToIncludeChar;
       const escapedChar = escapeForRegEx(char);
       const suffix = new RegExp(`\\s${escapedChar}$`);
       const prefix = startOfLine ? '^' : '';
+      const finalEscapedChar = allowToIncludeChar ? '' : escapedChar;
       const regexp = allowSpaces
-          ? new RegExp(`${prefix}${escapedChar}.*?(?=\\s${escapedChar}|$)`, 'gm')
-          : new RegExp(`${prefix}(?:^)?${escapedChar}[^\\s${escapedChar}]*`, 'gm');
+          ? new RegExp(`${prefix}${escapedChar}.*?(?=\\s${finalEscapedChar}|$)`, 'gm')
+          : new RegExp(`${prefix}(?:^)?${escapedChar}[^\\s${finalEscapedChar}]*`, 'gm');
       const text = ((_a = $position.nodeBefore) === null || _a === void 0 ? void 0 : _a.isText) && $position.nodeBefore.text;
       if (!text) {
           return null;
@@ -59010,7 +59045,7 @@ img.ProseMirror-separator {
    * This utility allows you to create suggestions.
    * @see https://tiptap.dev/api/utilities/suggestion
    */
-  function Suggestion({ pluginKey = SuggestionPluginKey, editor, char = '@', allowSpaces = false, allowedPrefixes = [' '], startOfLine = false, decorationTag = 'span', decorationClass = 'suggestion', command = () => null, items = () => [], render = () => ({}), allow = () => true, findSuggestionMatch: findSuggestionMatch$1 = findSuggestionMatch, }) {
+  function Suggestion({ pluginKey = SuggestionPluginKey, editor, char = '@', allowSpaces = false, allowToIncludeChar = false, allowedPrefixes = [' '], startOfLine = false, decorationTag = 'span', decorationClass = 'suggestion', command = () => null, items = () => [], render = () => ({}), allow = () => true, findSuggestionMatch: findSuggestionMatch$1 = findSuggestionMatch, }) {
       let props;
       const renderer = render === null || render === void 0 ? void 0 : render();
       const plugin = new Plugin({
@@ -59127,6 +59162,7 @@ img.ProseMirror-separator {
                       const match = findSuggestionMatch$1({
                           char,
                           allowSpaces,
+                          allowToIncludeChar,
                           allowedPrefixes,
                           startOfLine,
                           $position: selection.$from,
@@ -60392,7 +60428,7 @@ img.ProseMirror-separator {
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$q,
+      template: template$r,
       styles: styles$u,
       shadowOptions: {
           delegatesFocus: true
@@ -60402,7 +60438,7 @@ img.ProseMirror-separator {
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
 
-  const template$p = html `
+  const template$q = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
@@ -60519,7 +60555,7 @@ img.ProseMirror-separator {
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$p,
+      template: template$q,
       styles: styles$t
   });
   DesignSystem.getOrCreate()
@@ -60853,7 +60889,7 @@ img.ProseMirror-separator {
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$o = html `
+  const template$p = html `
     <template role="progressbar">
         ${''
 /**
@@ -60901,7 +60937,7 @@ img.ProseMirror-separator {
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$o,
+      template: template$p,
       styles: styles$r
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
@@ -60915,7 +60951,7 @@ img.ProseMirror-separator {
   };
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$n = (context, definition) => html `
+  const template$o = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -62125,7 +62161,7 @@ img.ProseMirror-separator {
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$n,
+      template: template$o,
       styles: styles$s,
       indicator: arrowExpanderDown16X16.data,
       end: html `
@@ -62302,7 +62338,7 @@ img.ProseMirror-separator {
         `));
 
   // prettier-ignore
-  const template$m = html `
+  const template$n = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -62346,7 +62382,7 @@ img.ProseMirror-separator {
   const nimbleSwitch = Switch.compose({
       baseClass: Switch$1,
       baseName: 'switch',
-      template: template$m,
+      template: template$n,
       styles: styles$q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
@@ -66462,7 +66498,7 @@ focus outline in that case.
 `;
 
   // prettier-ignore
-  const template$l = html `
+  const template$m = html `
     <template role="columnheader"
         class="${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}"
         aria-sort="${x => x.ariaSort}"
@@ -66548,7 +66584,7 @@ focus outline in that case.
   ], TableHeader.prototype, "isGrouped", void 0);
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
-      template: template$l,
+      template: template$m,
       styles: styles$m
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
@@ -66797,7 +66833,7 @@ focus outline in that case.
 `;
 
   // prettier-ignore
-  const template$k = html `
+  const template$l = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}"
         @focusin="${x => x.onCellFocusIn()}"
         @blur="${x => x.onCellBlur()}"
@@ -66894,14 +66930,14 @@ focus outline in that case.
   ], TableCell.prototype, "nestingLevel", void 0);
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
-      template: template$k,
+      template: template$l,
       styles: styles$j
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
 
   // prettier-ignore
-  const template$j = html `
+  const template$k = html `
     <template 
         role="row"
         aria-selected=${x => x.ariaSelected}
@@ -67295,7 +67331,7 @@ focus outline in that case.
   ], TableRow.prototype, "ariaSelected", null);
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
-      template: template$j,
+      template: template$k,
       styles: styles$k
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
@@ -67393,7 +67429,7 @@ focus outline in that case.
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$i = html `
+  const template$j = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -67551,14 +67587,14 @@ focus outline in that case.
   ], TableGroupRow.prototype, "allowHover", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
-      template: template$i,
+      template: template$j,
       styles: styles$i
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
 
   // prettier-ignore
-  const template$h = html `
+  const template$i = html `
     <template
         role="treegrid"
         ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
@@ -68290,20 +68326,12 @@ focus outline in that case.
         const size = this.getSize();
         const scrollOffset = this.getScrollOffset();
         if (align === "auto") {
-          if (toOffset <= scrollOffset) {
-            align = "start";
-          } else if (toOffset >= scrollOffset + size) {
+          if (toOffset >= scrollOffset + size) {
             align = "end";
-          } else {
-            align = "start";
           }
         }
-        if (align === "start") {
-          toOffset = toOffset;
-        } else if (align === "end") {
-          toOffset = toOffset - size;
-        } else if (align === "center") {
-          toOffset = toOffset - size / 2;
+        if (align === "end") {
+          toOffset -= size;
         }
         const scrollSizeProp = this.options.horizontal ? "scrollWidth" : "scrollHeight";
         const scrollSize = this.scrollElement ? "document" in this.scrollElement ? this.scrollElement.document.documentElement[scrollSizeProp] : this.scrollElement[scrollSizeProp] : 0;
@@ -68327,8 +68355,27 @@ focus outline in that case.
             return [scrollOffset, align];
           }
         }
-        const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
-        return [this.getOffsetForAlignment(toOffset, align), align];
+        const centerOffset = item.start - this.options.scrollPaddingStart + (item.size - size) / 2;
+        switch (align) {
+          case "center":
+            return [this.getOffsetForAlignment(centerOffset, align), align];
+          case "end":
+            return [
+              this.getOffsetForAlignment(
+                item.end + this.options.scrollPaddingEnd,
+                align
+              ),
+              align
+            ];
+          default:
+            return [
+              this.getOffsetForAlignment(
+                item.start - this.options.scrollPaddingStart,
+                align
+              ),
+              align
+            ];
+        }
       };
       this.isDynamicMode = () => this.elementsCache.size > 0;
       this.cancelScrollToIndex = () => {
@@ -71608,7 +71655,7 @@ focus outline in that case.
   ], Table$1.prototype, "windowShiftKeyDown", void 0);
   const nimbleTable = Table$1.compose({
       baseName: 'table',
-      template: template$h,
+      template: template$i,
       styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
@@ -71626,7 +71673,7 @@ 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
+  const template$h = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -71734,7 +71781,7 @@ focus outline in that case.
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$f = html `
+  const template$g = html `
     <template
         @click="${(x, c) => {
     if (typeof x.cellRecord?.href === 'string') {
@@ -71827,7 +71874,7 @@ focus outline in that case.
   ], TableColumnAnchorCellView.prototype, "showAnchor", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
-      template: template$f,
+      template: template$g,
       styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
@@ -71905,7 +71952,7 @@ focus outline in that case.
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
 
-  const template$e = html `
+  const template$f = html `
     <span
         ${overflow('hasOverflow')}
         title="${x => (x.hasOverflow && x.text ? x.text : null)}"
@@ -71938,7 +71985,7 @@ focus outline in that case.
   }
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
-      template: template$e,
+      template: template$f,
       styles: styles$f
   });
   DesignSystem.getOrCreate()
@@ -72191,7 +72238,7 @@ focus outline in that case.
   ], TableColumnAnchor.prototype, "download", void 0);
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
-      template: template$g,
+      template: template$h,
       styles: styles$h
   });
   DesignSystem.getOrCreate()
@@ -72244,7 +72291,7 @@ focus outline in that case.
   }
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
-      template: template$e,
+      template: template$f,
       styles: styles$f
   });
   DesignSystem.getOrCreate()
@@ -72253,7 +72300,7 @@ focus outline in that case.
   const tableColumnDateTextGroupHeaderViewTag = 'nimble-table-column-date-text-group-header-view';
 
   // prettier-ignore
-  const template$d = html `
+  const template$e = html `
     <template
         class="
             ${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}
@@ -72371,7 +72418,7 @@ focus outline in that case.
   }
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
-      template: template$d,
+      template: template$e,
       styles: styles$e
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
@@ -72632,7 +72679,7 @@ focus outline in that case.
   ], TableColumnDateText.prototype, "customHourCycle", void 0);
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
-      template: template$g,
+      template: template$h,
       styles: styles$h
   });
   DesignSystem.getOrCreate()
@@ -72649,7 +72696,7 @@ focus outline in that case.
   }
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
-      template: template$d,
+      template: template$e,
       styles: styles$e
   });
   DesignSystem.getOrCreate()
@@ -72751,7 +72798,7 @@ focus outline in that case.
   }
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
-      template: template$e,
+      template: template$f,
       styles: styles$f
   });
   DesignSystem.getOrCreate()
@@ -72804,7 +72851,7 @@ focus outline in that case.
   }
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
-      template: template$g,
+      template: template$h,
       styles: styles$h
   });
   DesignSystem.getOrCreate()
@@ -72921,7 +72968,7 @@ focus outline in that case.
     }
 `;
 
-  const template$c = html `${template$g}<slot ${slotted('mappings')} name="mapping"></slot>`;
+  const template$d = html `${template$h}<slot ${slotted('mappings')} name="mapping"></slot>`;
 
   const enumBaseValidityFlagNames = [
       'invalidMappingKeyValueForType',
@@ -73032,7 +73079,7 @@ focus outline in that case.
 `;
 
   // prettier-ignore
-  const template$b = html `
+  const template$c = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -73181,7 +73228,7 @@ focus outline in that case.
   ], TableColumnMappingGroupHeaderView.prototype, "visualizationTemplate", void 0);
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
-      template: template$b,
+      template: template$c,
       styles: styles$c
   });
   DesignSystem.getOrCreate()
@@ -73214,7 +73261,7 @@ focus outline in that case.
 `;
 
   // prettier-ignore
-  const template$a = html `
+  const template$b = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -73301,7 +73348,7 @@ focus outline in that case.
   ], TableColumnMappingCellView.prototype, "hasOverflow", void 0);
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
-      template: template$a,
+      template: template$b,
       styles: styles$b
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
@@ -73386,16 +73433,16 @@ focus outline in that case.
   ], TableColumnMapping.prototype, "widthMode", void 0);
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
-      template: template$c,
+      template: template$d,
       styles: styles$d
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnMapping());
 
-  const template$9 = html `
+  const template$a = html `
     <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
-        >${template$g}</template
+        >${template$h}</template
     >
 `;
 
@@ -73403,7 +73450,7 @@ focus outline in that case.
   const cellViewMenuSlotName = 'menu-button-menu';
 
   // prettier-ignore
-  const template$8 = html `
+  const template$9 = html `
     ${when(x => x.showMenuButton, html `
         <${menuButtonTag}
             ${ref('menuButton')}
@@ -73497,7 +73544,7 @@ focus outline in that case.
   ], TableColumnMenuButtonCellView.prototype, "showMenuButton", null);
   const menuButtonCellView = TableColumnMenuButtonCellView.compose({
       baseName: 'table-column-menu-button-cell-view',
-      template: template$8,
+      template: template$9,
       styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
@@ -73553,7 +73600,7 @@ focus outline in that case.
   ], TableColumnMenuButton.prototype, "menuSlot", void 0);
   const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
       baseName: 'table-column-menu-button',
-      template: template$9,
+      template: template$a,
       styles: styles$h
   });
   DesignSystem.getOrCreate()
@@ -73563,7 +73610,7 @@ 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
+  const template$8 = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -73582,7 +73629,7 @@ focus outline in that case.
   }
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
-      template: template$e,
+      template: template$f,
       styles: styles$f
   });
   DesignSystem.getOrCreate()
@@ -73604,7 +73651,7 @@ focus outline in that case.
   }
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
-      template: template$d,
+      template: template$e,
       styles: styles$e
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
@@ -74146,7 +74193,7 @@ focus outline in that case.
   ], TableColumnNumberText.prototype, "unit", void 0);
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
-      template: template$7,
+      template: template$8,
       styles: styles$h
   });
   DesignSystem.getOrCreate()
@@ -74165,7 +74212,7 @@ focus outline in that case.
   }
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
-      template: template$d,
+      template: template$e,
       styles: styles$e
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
@@ -74220,7 +74267,7 @@ focus outline in that case.
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
-      template: template$g,
+      template: template$h,
       styles: styles$h
   });
   DesignSystem.getOrCreate()
@@ -74309,7 +74356,7 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$G,
+      template: template$I,
       styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
@@ -74333,7 +74380,7 @@ focus outline in that case.
     }
 `;
 
-  const template$6 = html `
+  const template$7 = html `
     <template slot="end">
         <div class="separator"></div>
         <slot></slot>
@@ -74347,7 +74394,7 @@ focus outline in that case.
   }
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
-      template: template$6,
+      template: template$7,
       styles: styles$8
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
@@ -74521,7 +74568,7 @@ focus outline in that case.
             }
         `));
 
-  const template$5 = () => html `
+  const template$6 = () => html `
     <label
         part="label"
         for="control"
@@ -74670,7 +74717,7 @@ focus outline in that case.
   const nimbleTextArea = TextArea.compose({
       baseName: 'text-area',
       baseClass: TextArea$1,
-      template: template$5,
+      template: template$6,
       styles: styles$7,
       shadowOptions: {
           delegatesFocus: true
@@ -74927,6 +74974,77 @@ focus outline in that case.
             }
         `));
 
+  /**
+   * The template for the {@link @microsoft/fast-foundation#(TextField:class)} component.
+   * @public
+   */
+  const template$5 = (context, definition) => html `
+    <template
+        class="
+            ${x => (x.readOnly ? 'readonly' : '')}
+        "
+    >
+        <label
+            part="label"
+            for="control"
+            class="${x => (x.defaultSlottedNodes?.length
+    ? 'label'
+    : 'label label__hidden')}"
+        >
+            <slot
+                ${slotted({
+    property: 'defaultSlottedNodes',
+    filter: whitespaceFilter
+})}
+            ></slot>
+        </label>
+        <div class="root" part="root">
+            ${startSlotTemplate(context, definition)}
+            <input
+                class="control"
+                part="control"
+                id="control"
+                @input="${x => x.handleTextInput()}"
+                @change="${x => x.handleChange()}"
+                ?autofocus="${x => x.autofocus}"
+                ?disabled="${x => x.disabled}"
+                list="${x => x.list}"
+                maxlength="${x => x.maxlength}"
+                minlength="${x => x.minlength}"
+                pattern="${x => x.pattern}"
+                placeholder="${x => x.placeholder}"
+                ?readonly="${x => x.readOnly}"
+                ?required="${x => x.required}"
+                size="${x => x.size}"
+                ?spellcheck="${x => x.spellcheck}"
+                :value="${x => x.value}"
+                type="${x => x.type}"
+                aria-atomic="${x => x.ariaAtomic}"
+                aria-busy="${x => x.ariaBusy}"
+                aria-controls="${x => x.ariaControls}"
+                aria-current="${x => x.ariaCurrent}"
+                aria-describedby="${x => x.ariaDescribedby}"
+                aria-details="${x => x.ariaDetails}"
+                aria-disabled="${x => x.ariaDisabled}"
+                aria-errormessage="${x => x.ariaErrormessage}"
+                aria-flowto="${x => x.ariaFlowto}"
+                aria-haspopup="${x => x.ariaHaspopup}"
+                aria-hidden="${x => x.ariaHidden}"
+                aria-invalid="${x => x.ariaInvalid}"
+                aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+                aria-label="${x => x.ariaLabel}"
+                aria-labelledby="${x => x.ariaLabelledby}"
+                aria-live="${x => x.ariaLive}"
+                aria-owns="${x => x.ariaOwns}"
+                aria-relevant="${x => x.ariaRelevant}"
+                aria-roledescription="${x => x.ariaRoledescription}"
+                ${ref('control')}
+            />
+            ${endSlotTemplate(context, definition)}
+        </div>
+    </template>
+`;
+
   /**
    * A nimble-styed HTML text input
    */
@@ -74953,7 +75071,7 @@ focus outline in that case.
   const nimbleTextField = TextField.compose({
       baseName: 'text-field',
       baseClass: TextField$1,
-      template: textFieldTemplate,
+      template: template$5,
       styles: styles$6,
       shadowOptions: {
           delegatesFocus: true