@ni/nimble-components 32.9.2 → 32.10.0

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,9 +16321,9 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$M = html `<slot></slot>`;
+  const template$O = html `<slot></slot>`;
 
-  const styles$10 = css `
+  const styles$11 = css `
     ${display('contents')}
 `;
 
@@ -16589,8 +16438,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$10,
-      template: template$M
+      styles: styles$11,
+      template: template$O
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16814,7 +16663,7 @@
       }
   }
 
-  const styles$$ = css `
+  const styles$10 = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -16893,7 +16742,7 @@
 `;
 
   // prettier-ignore
-  const template$L = (_context, definition) => html `${
+  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.
 */ ''}<div
@@ -16996,8 +16845,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$L,
-      styles: styles$$,
+      template: template$N,
+      styles: styles$10,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17109,7 +16958,7 @@
     padding: 0;
 `;
 
-  const styles$_ = css `
+  const styles$$ = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17393,8 +17242,8 @@
             }
         `));
 
-  const styles$Z = css `
-    ${styles$_}
+  const styles$_ = css `
+    ${styles$$}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17414,7 +17263,7 @@
     }
 `;
 
-  const template$K = (context, definition) => html `
+  const template$M = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17496,8 +17345,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$K,
-      styles: styles$Z,
+      template: template$M,
+      styles: styles$_,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17505,7 +17354,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$Y = css `
+  const styles$Z = css `
     ${display('grid')}
 
     :host {
@@ -17588,7 +17437,7 @@
     }
 `;
 
-  const template$J = (context, definition) => html `
+  const template$L = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17689,8 +17538,8 @@
   // 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$J,
-      styles: styles$Y,
+      template: template$L,
+      styles: styles$Z,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17700,7 +17549,7 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
-  const styles$X = css `
+  const styles$Y = css `
     ${display('inline-flex')}
 
     :host {
@@ -17817,7 +17666,7 @@
     }
 `;
 
-  const template$I = (context, definition) => html `
+  const template$K = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17869,15 +17718,15 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$I,
-      styles: styles$X,
+      template: template$K,
+      styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$W = css `
+  const styles$X = css `
     ${display('flex')}
 
     :host {
@@ -17917,12 +17766,12 @@
     }
 `;
 
-  const styles$V = css `
-    ${styles$_}
+  const styles$W = css `
+    ${styles$$}
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$H = (context, definition) => html `
+  const template$J = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -18013,8 +17862,8 @@
   const nimbleButton = Button.compose({
       baseName: 'button',
       baseClass: Button$1,
-      template: template$H,
-      styles: styles$V,
+      template: template$J,
+      styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18853,7 +18702,7 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$G = html `<div
+  const template$I = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
@@ -18868,7 +18717,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$U = css `
+  const styles$V = css `
     ${display('inline-flex')}
 
     :host {
@@ -18879,8 +18728,7 @@
     }
 
     .icon {
-        width: 100%;
-        height: 100%;
+        display: contents;
     }
 
     :host([severity='error']) {
@@ -18900,6 +18748,7 @@
     }
 
     .icon svg {
+        display: inline-flex;
         fill: ${iconColor};
         width: 100%;
         height: 100%;
@@ -18921,8 +18770,8 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$G,
-          styles: styles$U
+          template: template$I,
+          styles: styles$V
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19013,7 +18862,7 @@
   }).withDefault(coreLabelDefaults.scrollForwardLabel);
 
   // prettier-ignore
-  const template$F = (context, definition) => html `
+  const template$H = (context, definition) => html `
     <div
         class="tab-bar"
     >
@@ -19312,15 +19161,15 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$F,
-      styles: styles$W,
+      template: template$H,
+      styles: styles$X,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$T = css `
+  const styles$U = css `
     ${display('block')}
 
     :host {
@@ -19425,7 +19274,7 @@
     }
 `;
 
-  const template$E = (context, definition) => html `
+  const template$G = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -19562,8 +19411,8 @@
   // 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$E,
-      styles: styles$T,
+      template: template$G,
+      styles: styles$U,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19579,7 +19428,7 @@
       zIndex1000: '1000'
   };
 
-  const styles$S = css `
+  const styles$T = css `
     ${display('block')}
 
     :host {
@@ -19610,7 +19459,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$S
+      styles: styles$T
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -19691,7 +19540,7 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
 
-  const styles$R = css `
+  const styles$S = css `
     ${display('flex')}
 
     :host {
@@ -19870,7 +19719,7 @@
   };
 
   // prettier-ignore
-  const template$D = html `
+  const template$F = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -19988,12 +19837,12 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$D,
-      styles: styles$R
+      template: template$F,
+      styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
-  const styles$Q = css `
+  const styles$R = css `
     ${display('inline-block')}
 
     .list {
@@ -20023,11 +19872,11 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$Q
+      styles: styles$R
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$P = css `
+  const styles$Q = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -20124,14 +19973,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$P,
+      styles: styles$Q,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$O = css `
+  const styles$P = css `
     ${display('flex')}
 
     :host {
@@ -20155,7 +20004,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$C = html `
+  const template$E = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -20170,12 +20019,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$C,
-      styles: styles$O
+      template: template$E,
+      styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$N = css `
+  const styles$O = css `
     ${display('inline-flex')}
 
     :host {
@@ -20333,14 +20182,14 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$N,
+      styles: styles$O,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$M = css `
+  const styles$N = css `
     .error-icon {
         display: none;
     }
@@ -20374,9 +20223,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$L = css `
+  const styles$M = css `
     ${display('inline-grid')}
-    ${styles$M}
+    ${styles$N}
 
     :host {
         font: ${bodyFont};
@@ -20570,7 +20419,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
 
-  const template$B = (_context, definition) => html `
+  const template$D = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -20655,16 +20504,16 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$B,
-      styles: styles$L,
+      template: template$D,
+      styles: styles$M,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$K = css `
-    ${styles$_}
+  const styles$L = css `
+    ${styles$$}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -20713,7 +20562,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 `
     <div
         role="button"
         part="control"
@@ -20809,8 +20658,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$A,
-      styles: styles$K,
+      template: template$C,
+      styles: styles$L,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20842,7 +20691,7 @@ so this becomes the fallback color for the slot */ ''}
   };
 
   // prettier-ignore
-  const styles$J = css `
+  const styles$K = css `
     ${display('inline-flex')}
 
     :host {
@@ -21111,6 +20960,21 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
+  const styles$J = css `
+    .annotated-label {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .required-icon {
+        flex: none;
+        width: 5px;
+        height: 5px;
+        margin-top: 3px;
+        margin-left: ${smallPadding};
+    }
+`;
+
   /**
    * Types of dropdown appearance.
    * @public
@@ -21126,8 +20990,9 @@ so this becomes the fallback color for the slot */ ''}
   };
 
   const styles$I = css `
+    ${styles$K}
+    ${styles$N}
     ${styles$J}
-    ${styles$M}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -21203,9 +21068,45 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'asterisk' icon
+   */
+  class IconAsterisk extends Icon {
+      constructor() {
+          super(asterisk5X5);
+      }
+  }
+  registerIcon('icon-asterisk', IconAsterisk);
+  const iconAsteriskTag = 'nimble-icon-asterisk';
+
+  /**
+   * Given the template for a control label, creates a new template that includes
+   * an icon next to the label to indicate whether or not the control is required.
+   *
+   * 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">
+            ${labelTemplate}
+            ${when(x => x.requiredVisible, html `
+                <${iconAsteriskTag} class="required-icon" severity="error"></${iconAsteriskTag}>
+            `)}
+        </div>
+    `;
+  }
+
+  const labelTemplate$3 = createRequiredVisibleLabelTemplate(html `
+    <label part="label" class="label">
+        <slot></slot>
+    </label>
+`);
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$z = (context, definition) => html `
+  const template$B = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -21216,9 +21117,7 @@ so this becomes the fallback color for the slot */ ''}
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
     >
-        <label part="label" class="label">
-            <slot></slot>
-        </label>
+        ${labelTemplate$3}
         <div class="control" part="control" ${ref('controlWrapper')}>
             ${startSlotTemplate(context, definition)}
             <slot name="control">
@@ -21228,6 +21127,7 @@ so this becomes the fallback color for the slot */ ''}
                     aria-controls="${x => x.ariaControls}"
                     aria-disabled="${x => x.ariaDisabled}"
                     aria-expanded="${x => x.ariaExpanded}"
+                    aria-required="${x => x.requiredVisible}"
                     aria-haspopup="listbox"
                     class="selected-value"
                     part="selected-value"
@@ -21309,10 +21209,30 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
+  // As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+  function mixinRequiredVisiblePattern(base) {
+      /**
+       * The Mixin that provides the requiredVisible property and required-visible attribute
+       * to a component.
+       */
+      class RequiredVisibleElement extends base {
+          constructor() {
+              super(...arguments);
+              /*
+               * Show the required appearance of the control
+               */
+              this.requiredVisible = false;
+          }
+      }
+      attr({ attribute: 'required-visible', mode: 'boolean' })(RequiredVisibleElement.prototype, 'requiredVisible');
+      return RequiredVisibleElement;
+  }
+
   /**
    * A nimble-styed HTML combobox
    */
-  class Combobox extends mixinErrorPattern(FormAssociatedCombobox) {
+  class Combobox extends mixinErrorPattern(mixinRequiredVisiblePattern(FormAssociatedCombobox)) {
       constructor() {
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
@@ -21953,7 +21873,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$z,
+      template: template$B,
       styles: styles$I,
       shadowOptions: {
           delegatesFocus: true
@@ -22091,7 +22011,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$y = html `
+  const template$A = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -22239,7 +22159,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$y,
+      template: template$A,
       styles: styles$H,
       baseClass: Dialog
   });
@@ -22388,7 +22308,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$x = html `
+  const template$z = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -22531,7 +22451,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$x,
+      template: template$z,
       styles: styles$G
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
@@ -22815,18 +22735,6 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIcon('icon-arrows-repeat', IconArrowsRepeat);
 
-  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-  // See generation source in nimble-components/build/generate-icons
-  /**
-   * The icon component for the 'asterisk' icon
-   */
-  class IconAsterisk extends Icon {
-      constructor() {
-          super(asterisk5X5);
-      }
-  }
-  registerIcon('icon-asterisk', IconAsterisk);
-
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -25312,7 +25220,7 @@ so this becomes the fallback color for the slot */ ''}
    * @public
    */
   // prettier-ignore
-  const template$w = (context, definition) => html `
+  const template$y = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -25425,7 +25333,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$w,
+      template: template$y,
       styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
@@ -25494,7 +25402,7 @@ so this becomes the fallback color for the slot */ ''}
       return n instanceof ListOption;
   };
   // prettier-ignore
-  const template$v = html `
+  const template$x = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -25636,7 +25544,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$v,
+      template: template$x,
       styles: styles$D
   });
   DesignSystem.getOrCreate()
@@ -25652,7 +25560,7 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$u = html `<template slot="mapping"></template>`;
+  const template$w = html `<template slot="mapping"></template>`;
 
   const styles$C = css `
     ${display('none')}
@@ -25670,7 +25578,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$u,
+      template: template$w,
       styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
@@ -25741,7 +25649,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$u,
+      template: template$w,
       styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
@@ -25765,7 +25673,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$u,
+      template: template$w,
       styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
@@ -25782,7 +25690,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$u,
+      template: template$w,
       styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
@@ -26088,7 +25996,7 @@ so this becomes the fallback color for the slot */ ''}
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$t = () => html `
+  const template$v = () => html `
     <template
         slot="${x => {
     if (x.slot) {
@@ -26177,7 +26085,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: template$t,
+      template: template$v,
       styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
@@ -26214,7 +26122,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   // prettier-ignore
-  const template$s = html `
+  const template$u = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -26464,7 +26372,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$s,
+      template: template$u,
       styles: styles$A,
       shadowOptions: {
           delegatesFocus: true
@@ -26586,7 +26494,7 @@ so this becomes the fallback color for the slot */ ''}
 
   const styles$y = css `
     ${display('inline-block')}
-    ${styles$M}
+    ${styles$N}
 
     :host {
         font: ${bodyFont};
@@ -26774,6 +26682,93 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
+  /**
+   * The template for the {@link @microsoft/fast-foundation#(NumberField:class)} component.
+   * @public
+   */
+  const template$t = (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 +26797,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleNumberField = NumberField.compose({
       baseName: 'number-field',
       baseClass: NumberField$1,
-      template: numberFieldTemplate,
+      template: template$t,
       styles: styles$y,
       shadowOptions: {
           delegatesFocus: true
@@ -26953,7 +26948,8 @@ so this becomes the fallback color for the slot */ ''}
 
   const styles$w = css `
     ${display('inline-block')}
-    ${styles$M}
+    ${styles$N}
+    ${styles$J}
 
     .positioning-region {
         display: flex;
@@ -26971,7 +26967,7 @@ so this becomes the fallback color for the slot */ ''}
 
     .label-container {
         display: flex;
-        height: ${controlLabelFontLineHeight};
+        min-height: ${controlLabelFontLineHeight};
         gap: ${smallPadding};
         margin-bottom: ${smallPadding};
     }
@@ -26991,18 +26987,20 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
+  const labelTemplate$2 = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
   /* eslint-disable @typescript-eslint/indent */
-  const template$r = html `
+  const template$s = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
         aria-readonly="${x => x.readOnly}"
+        aria-required="${x => x.requiredVisible}"
         @click="${(x, c) => x.clickHandler(c.event)}"
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
         @focusout="${(x, c) => x.focusOutHandler(c.event)}"
     >
         <div class="label-container">
-            <slot name="label"></slot>            
+            ${labelTemplate$2}
             <${iconExclamationMarkTag}
                 severity="error"
                 class="error-icon"
@@ -27026,12 +27024,12 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * A nimble-styled grouping element for radio buttons
    */
-  class RadioGroup extends mixinErrorPattern(RadioGroup$1) {
+  class RadioGroup extends mixinErrorPattern(mixinRequiredVisiblePattern(RadioGroup$1)) {
   }
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
-      template: template$r,
+      template: template$s,
       styles: styles$w,
       shadowOptions: {
           delegatesFocus: true
@@ -45379,7 +45377,7 @@ img.ProseMirror-separator {
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
   const styles$u = css `
-    ${styles$J}
+    ${styles$K}
 
     :host {
         height: auto;
@@ -45399,7 +45397,7 @@ img.ProseMirror-separator {
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$q = html `
+  const template$r = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -45687,7 +45685,7 @@ img.ProseMirror-separator {
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$q,
+      template: template$r,
       styles: styles$u
   });
   DesignSystem.getOrCreate()
@@ -45696,7 +45694,7 @@ img.ProseMirror-separator {
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
   // prettier-ignore
-  const template$p = html `
+  const template$q = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -45800,7 +45798,7 @@ img.ProseMirror-separator {
 
   const styles$t = css `
     ${display('inline-flex')}
-    ${styles$M}
+    ${styles$N}
 
     :host {
         font: ${bodyFont};
@@ -60492,7 +60490,7 @@ img.ProseMirror-separator {
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$p,
+      template: template$q,
       styles: styles$t,
       shadowOptions: {
           delegatesFocus: true
@@ -60502,7 +60500,7 @@ img.ProseMirror-separator {
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
 
-  const template$o = html `
+  const template$p = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
@@ -60619,7 +60617,7 @@ img.ProseMirror-separator {
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$o,
+      template: template$p,
       styles: styles$s
   });
   DesignSystem.getOrCreate()
@@ -60627,8 +60625,9 @@ img.ProseMirror-separator {
       .register(nimbleRichTextViewer());
 
   const styles$r = css `
+    ${styles$K}
+    ${styles$N}
     ${styles$J}
-    ${styles$M}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -60953,7 +60952,7 @@ img.ProseMirror-separator {
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$n = html `
+  const template$o = html `
     <template role="progressbar">
         ${''
 /**
@@ -61001,7 +61000,7 @@ img.ProseMirror-separator {
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$n,
+      template: template$o,
       styles: styles$q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
@@ -61013,9 +61012,14 @@ img.ProseMirror-separator {
   const isListOptionGroup = (n) => {
       return n instanceof ListOptionGroup;
   };
+  const labelTemplate$1 = createRequiredVisibleLabelTemplate(html `
+    <label part="label" class="label" aria-hidden="true">
+        <slot ${ref('labelSlot')}></slot>
+    </label>
+`);
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$m = (context, definition) => html `
+  const template$n = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -61030,6 +61034,7 @@ img.ProseMirror-separator {
         aria-haspopup="${x => (x.collapsible ? 'listbox' : null)}"
         aria-label="${x => x.labelContent}"
         aria-multiselectable="${x => x.ariaMultiSelectable}"
+        aria-required="${x => x.requiredVisible}"
         ?open="${x => x.open}"
         role="combobox"
         tabindex="${x => (!x.disabled ? '0' : null)}"
@@ -61040,9 +61045,7 @@ img.ProseMirror-separator {
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
         @mousedown="${(x, c) => x.mousedownHandler(c.event)}"
     >
-        <label part="label" class="label" aria-hidden="true">
-            <slot ${ref('labelSlot')}></slot>
-        </label>
+        ${labelTemplate$1}
         ${when(x => x.collapsible, html `
             <div
                 class="control"
@@ -61179,7 +61182,7 @@ img.ProseMirror-separator {
   /**
    * A nimble-styled HTML select.
    */
-  class Select extends mixinErrorPattern(FormAssociatedSelect) {
+  class Select extends mixinErrorPattern(mixinRequiredVisiblePattern(FormAssociatedSelect)) {
       constructor() {
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
@@ -62225,7 +62228,7 @@ img.ProseMirror-separator {
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$m,
+      template: template$n,
       styles: styles$r,
       indicator: arrowExpanderDown16X16.data,
       end: html `
@@ -62402,7 +62405,7 @@ img.ProseMirror-separator {
         `));
 
   // prettier-ignore
-  const template$l = html `
+  const template$m = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -62446,7 +62449,7 @@ img.ProseMirror-separator {
   const nimbleSwitch = Switch.compose({
       baseClass: Switch$1,
       baseName: 'switch',
-      template: template$l,
+      template: template$m,
       styles: styles$p
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
@@ -66562,7 +66565,7 @@ focus outline in that case.
 `;
 
   // prettier-ignore
-  const template$k = html `
+  const template$l = html `
     <template role="columnheader"
         class="${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}"
         aria-sort="${x => x.ariaSort}"
@@ -66648,7 +66651,7 @@ focus outline in that case.
   ], TableHeader.prototype, "isGrouped", void 0);
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
-      template: template$k,
+      template: template$l,
       styles: styles$l
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
@@ -66897,7 +66900,7 @@ focus outline in that case.
 `;
 
   // prettier-ignore
-  const template$j = html `
+  const template$k = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}"
         @focusin="${x => x.onCellFocusIn()}"
         @blur="${x => x.onCellBlur()}"
@@ -66994,14 +66997,14 @@ focus outline in that case.
   ], TableCell.prototype, "nestingLevel", void 0);
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
-      template: template$j,
+      template: template$k,
       styles: styles$i
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
 
   // prettier-ignore
-  const template$i = html `
+  const template$j = html `
     <template 
         role="row"
         aria-selected=${x => x.ariaSelected}
@@ -67395,7 +67398,7 @@ focus outline in that case.
   ], TableRow.prototype, "ariaSelected", null);
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
-      template: template$i,
+      template: template$j,
       styles: styles$j
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
@@ -67493,7 +67496,7 @@ focus outline in that case.
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$h = html `
+  const template$i = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -67651,14 +67654,14 @@ focus outline in that case.
   ], TableGroupRow.prototype, "allowHover", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
-      template: template$h,
+      template: template$i,
       styles: styles$h
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
 
   // prettier-ignore
-  const template$g = html `
+  const template$h = html `
     <template
         role="treegrid"
         ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
@@ -71719,7 +71722,7 @@ focus outline in that case.
   ], Table$1.prototype, "windowShiftKeyDown", void 0);
   const nimbleTable = Table$1.compose({
       baseName: 'table',
-      template: template$g,
+      template: template$h,
       styles: styles$m
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
@@ -71737,7 +71740,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$f = html `<span
+  const template$g = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -71845,7 +71848,7 @@ focus outline in that case.
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$e = html `
+  const template$f = html `
     <template
         @click="${(x, c) => {
     if (typeof x.cellRecord?.href === 'string') {
@@ -71938,7 +71941,7 @@ focus outline in that case.
   ], TableColumnAnchorCellView.prototype, "showAnchor", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
-      template: template$e,
+      template: template$f,
       styles: styles$f
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
@@ -72016,7 +72019,7 @@ focus outline in that case.
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
 
-  const template$d = html `
+  const template$e = html `
     <span
         ${overflow('hasOverflow')}
         title="${x => (x.hasOverflow && x.text ? x.text : null)}"
@@ -72049,7 +72052,7 @@ focus outline in that case.
   }
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
-      template: template$d,
+      template: template$e,
       styles: styles$e
   });
   DesignSystem.getOrCreate()
@@ -72302,7 +72305,7 @@ focus outline in that case.
   ], TableColumnAnchor.prototype, "download", void 0);
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
-      template: template$f,
+      template: template$g,
       styles: styles$g
   });
   DesignSystem.getOrCreate()
@@ -72355,7 +72358,7 @@ focus outline in that case.
   }
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
-      template: template$d,
+      template: template$e,
       styles: styles$e
   });
   DesignSystem.getOrCreate()
@@ -72364,7 +72367,7 @@ focus outline in that case.
   const tableColumnDateTextGroupHeaderViewTag = 'nimble-table-column-date-text-group-header-view';
 
   // prettier-ignore
-  const template$c = html `
+  const template$d = html `
     <template
         class="
             ${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}
@@ -72482,7 +72485,7 @@ focus outline in that case.
   }
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
-      template: template$c,
+      template: template$d,
       styles: styles$d
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
@@ -72743,7 +72746,7 @@ focus outline in that case.
   ], TableColumnDateText.prototype, "customHourCycle", void 0);
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
-      template: template$f,
+      template: template$g,
       styles: styles$g
   });
   DesignSystem.getOrCreate()
@@ -72760,7 +72763,7 @@ focus outline in that case.
   }
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
-      template: template$c,
+      template: template$d,
       styles: styles$d
   });
   DesignSystem.getOrCreate()
@@ -72862,7 +72865,7 @@ focus outline in that case.
   }
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
-      template: template$d,
+      template: template$e,
       styles: styles$e
   });
   DesignSystem.getOrCreate()
@@ -72915,7 +72918,7 @@ focus outline in that case.
   }
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
-      template: template$f,
+      template: template$g,
       styles: styles$g
   });
   DesignSystem.getOrCreate()
@@ -73032,7 +73035,7 @@ focus outline in that case.
     }
 `;
 
-  const template$b = html `${template$f}<slot ${slotted('mappings')} name="mapping"></slot>`;
+  const template$c = html `${template$g}<slot ${slotted('mappings')} name="mapping"></slot>`;
 
   const enumBaseValidityFlagNames = [
       'invalidMappingKeyValueForType',
@@ -73143,7 +73146,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}
@@ -73292,7 +73295,7 @@ focus outline in that case.
   ], TableColumnMappingGroupHeaderView.prototype, "visualizationTemplate", void 0);
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
-      template: template$a,
+      template: template$b,
       styles: styles$b
   });
   DesignSystem.getOrCreate()
@@ -73325,7 +73328,7 @@ focus outline in that case.
 `;
 
   // prettier-ignore
-  const template$9 = html `
+  const template$a = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -73412,7 +73415,7 @@ focus outline in that case.
   ], TableColumnMappingCellView.prototype, "hasOverflow", void 0);
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
-      template: template$9,
+      template: template$a,
       styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
@@ -73497,16 +73500,16 @@ focus outline in that case.
   ], TableColumnMapping.prototype, "widthMode", void 0);
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
-      template: template$b,
+      template: template$c,
       styles: styles$c
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnMapping());
 
-  const template$8 = html `
+  const template$9 = html `
     <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
-        >${template$f}</template
+        >${template$g}</template
     >
 `;
 
@@ -73514,7 +73517,7 @@ focus outline in that case.
   const cellViewMenuSlotName = 'menu-button-menu';
 
   // prettier-ignore
-  const template$7 = html `
+  const template$8 = html `
     ${when(x => x.showMenuButton, html `
         <${menuButtonTag}
             ${ref('menuButton')}
@@ -73608,7 +73611,7 @@ focus outline in that case.
   ], TableColumnMenuButtonCellView.prototype, "showMenuButton", null);
   const menuButtonCellView = TableColumnMenuButtonCellView.compose({
       baseName: 'table-column-menu-button-cell-view',
-      template: template$7,
+      template: template$8,
       styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
@@ -73664,7 +73667,7 @@ focus outline in that case.
   ], TableColumnMenuButton.prototype, "menuSlot", void 0);
   const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
       baseName: 'table-column-menu-button',
-      template: template$8,
+      template: template$9,
       styles: styles$g
   });
   DesignSystem.getOrCreate()
@@ -73674,7 +73677,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$6 = html `<span
+  const template$7 = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -73693,7 +73696,7 @@ focus outline in that case.
   }
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
-      template: template$d,
+      template: template$e,
       styles: styles$e
   });
   DesignSystem.getOrCreate()
@@ -73715,7 +73718,7 @@ focus outline in that case.
   }
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
-      template: template$c,
+      template: template$d,
       styles: styles$d
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
@@ -74257,7 +74260,7 @@ focus outline in that case.
   ], TableColumnNumberText.prototype, "unit", void 0);
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
-      template: template$6,
+      template: template$7,
       styles: styles$g
   });
   DesignSystem.getOrCreate()
@@ -74276,7 +74279,7 @@ focus outline in that case.
   }
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
-      template: template$c,
+      template: template$d,
       styles: styles$d
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
@@ -74331,7 +74334,7 @@ focus outline in that case.
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
-      template: template$f,
+      template: template$g,
       styles: styles$g
   });
   DesignSystem.getOrCreate()
@@ -74339,7 +74342,7 @@ focus outline in that case.
       .register(nimbleTableColumnText());
 
   const styles$8 = css `
-    ${styles$W}
+    ${styles$X}
 
     .tabpanel {
         overflow: auto;
@@ -74420,7 +74423,7 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$F,
+      template: template$H,
       styles: styles$8
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
@@ -74444,7 +74447,7 @@ focus outline in that case.
     }
 `;
 
-  const template$5 = html `
+  const template$6 = html `
     <template slot="end">
         <div class="separator"></div>
         <slot></slot>
@@ -74458,7 +74461,7 @@ focus outline in that case.
   }
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
-      template: template$5,
+      template: template$6,
       styles: styles$7
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
@@ -74470,7 +74473,8 @@ focus outline in that case.
 
   const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$M}
+    ${styles$N}
+    ${styles$J}
 
     :host {
         font: ${bodyFont};
@@ -74632,7 +74636,7 @@ focus outline in that case.
             }
         `));
 
-  const template$4 = () => html `
+  const labelTemplate = createRequiredVisibleLabelTemplate(html `
     <label
         part="label"
         for="control"
@@ -74640,6 +74644,9 @@ focus outline in that case.
     >
         <slot ${slotted('defaultSlottedNodes')}></slot>
     </label>
+`);
+  const template$5 = () => html `
+    ${labelTemplate}
     <div class="container">
         <textarea
             part="control"
@@ -74678,6 +74685,7 @@ focus outline in that case.
             aria-owns="${x => x.ariaOwns}"
             aria-relevant="${x => x.ariaRelevant}"
             aria-roledescription="${x => x.ariaRoledescription}"
+            aria-required="${x => x.requiredVisible}"
             @input="${x => x.onTextAreaInput()}"
             @change="${x => x.handleChange()}"
             ${ref('control')}
@@ -74694,7 +74702,7 @@ focus outline in that case.
   /**
    * A nimble-styed HTML text area
    */
-  class TextArea extends mixinErrorPattern(TextArea$1) {
+  class TextArea extends mixinErrorPattern(mixinRequiredVisiblePattern(TextArea$1)) {
       constructor() {
           super(...arguments);
           /**
@@ -74781,7 +74789,7 @@ focus outline in that case.
   const nimbleTextArea = TextArea.compose({
       baseName: 'text-area',
       baseClass: TextArea$1,
-      template: template$4,
+      template: template$5,
       styles: styles$6,
       shadowOptions: {
           delegatesFocus: true
@@ -74801,7 +74809,7 @@ focus outline in that case.
 
   const styles$5 = css `
     ${display('inline-block')}
-    ${styles$M}
+    ${styles$N}
 
     :host {
         font: ${bodyFont};
@@ -75038,6 +75046,77 @@ focus outline in that case.
             }
         `));
 
+  /**
+   * The template for the {@link @microsoft/fast-foundation#(TextField:class)} component.
+   * @public
+   */
+  const template$4 = (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
    */
@@ -75064,7 +75143,7 @@ focus outline in that case.
   const nimbleTextField = TextField.compose({
       baseName: 'text-field',
       baseClass: TextField$1,
-      template: textFieldTemplate,
+      template: template$4,
       styles: styles$5,
       shadowOptions: {
           delegatesFocus: true