@ni/ok-components 0.2.3 → 0.2.4

package/dist/all-components-bundle.js

@@ -14881,9 +14881,9 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-  const template$W = html `<slot></slot>`;
+  const template$Z = html `<slot></slot>`;
 
-  const styles$19 = css `
+  const styles$1c = css `
     ${display$2('contents')}
 `;
 
@@ -14998,8 +14998,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$19,
-      template: template$W
+      styles: styles$1c,
+      template: template$Z
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16572,7 +16572,7 @@
   }
   // #endregion
 
-  const styles$18 = css `
+  const styles$1b = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -16650,7 +16650,7 @@
     }
 `;
 
-  const template$V = (_context, definition) => html `${
+  const template$Y = (_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
@@ -16753,8 +16753,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$V,
-      styles: styles$18,
+      template: template$Y,
+      styles: styles$1b,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -16863,7 +16863,7 @@
     padding: 0;
 `;
 
-  const styles$17 = css `
+  const styles$1a = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17147,8 +17147,8 @@
             }
         `));
 
-  const styles$16 = css `
-    ${styles$17}
+  const styles$19 = css `
+    ${styles$1a}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17168,7 +17168,7 @@
     }
 `;
 
-  const template$U = (context, definition) => html `
+  const template$X = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17250,8 +17250,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$U,
-      styles: styles$16,
+      template: template$X,
+      styles: styles$19,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17259,7 +17259,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$15 = css `
+  const styles$18 = css `
     ${display$2('grid')}
 
     :host {
@@ -17342,7 +17342,7 @@
     }
 `;
 
-  const template$T = (context, definition) => html `
+  const template$W = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17443,8 +17443,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$T,
-      styles: styles$15,
+      template: template$W,
+      styles: styles$18,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17454,7 +17454,27 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
-  const styles$14 = css `
+  const styles$17 = css `
+    ${display$2('flex')}
+`;
+
+  const template$V = html `
+    <template>anchor step</template>
+`;
+
+  /**
+   * A nimble-styled anchor step for a stepper
+   */
+  class AnchorStep extends FoundationElement {
+  }
+  const nimbleAnchorStep = AnchorStep.compose({
+      baseName: 'anchor-step',
+      template: template$V,
+      styles: styles$17
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
+
+  const styles$16 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -17571,7 +17591,7 @@
     }
 `;
 
-  const template$S = (context, definition) => html `
+  const template$U = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17623,15 +17643,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$S,
-      styles: styles$14,
+      template: template$U,
+      styles: styles$16,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$13 = css `
+  const styles$15 = css `
     ${display$2('flex')}
 
     :host {
@@ -17671,12 +17691,12 @@
     }
 `;
 
-  const styles$12 = css `
-    ${styles$17}
+  const styles$14 = css `
+    ${styles$1a}
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$R = (context, definition) => html `
+  const template$T = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -17767,8 +17787,8 @@
   const nimbleButton = Button$1.compose({
       baseName: 'button',
       baseClass: Button$2,
-      template: template$R,
-      styles: styles$12,
+      template: template$T,
+      styles: styles$14,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18715,7 +18735,7 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$Q = html `<div
+  const template$S = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
@@ -18730,7 +18750,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$11 = css `
+  const styles$13 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -18793,8 +18813,8 @@
   const registerIconSvg = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$Q,
-          styles: styles$11
+          template: template$S,
+          styles: styles$13
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -18889,7 +18909,7 @@
       cssCustomPropertyName: null
   }).withDefault(coreLabelDefaults.itemRemoveLabel);
 
-  const template$P = (context, definition) => html `
+  const template$R = (context, definition) => html `
     <div
         class="tab-bar"
     >
@@ -19188,15 +19208,15 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$P,
-      styles: styles$13,
+      template: template$R,
+      styles: styles$15,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$10 = css `
+  const styles$12 = css `
     ${display$2('block')}
 
     :host {
@@ -19301,7 +19321,7 @@
     }
 `;
 
-  const template$O = (context, definition) => html `
+  const template$Q = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -19438,8 +19458,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$O,
-      styles: styles$10,
+      template: template$Q,
+      styles: styles$12,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19455,7 +19475,7 @@
       zIndex1000: '1000'
   };
 
-  const styles$$ = css `
+  const styles$11 = css `
     ${display$2('block')}
 
     :host {
@@ -19486,7 +19506,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$$
+      styles: styles$11
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -19567,7 +19587,7 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
 
-  const styles$_ = css `
+  const styles$10 = css `
     ${display$2('flex')}
 
     :host {
@@ -19745,7 +19765,7 @@
       information: 'information'
   };
 
-  const template$N = html `
+  const template$P = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -19863,8 +19883,8 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$N,
-      styles: styles$_
+      template: template$P,
+      styles: styles$10
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
@@ -19905,7 +19925,7 @@
     </template>
 `;
 
-  const styles$Z = css `
+  const styles$$ = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -20009,11 +20029,11 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$Z
+      styles: styles$$
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$Y = css `
+  const styles$_ = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -20110,14 +20130,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$Y,
+      styles: styles$_,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$X = css `
+  const styles$Z = css `
     ${display$2('flex')}
 
     :host {
@@ -20141,7 +20161,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$M = html `
+  const template$O = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -20156,12 +20176,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$M,
-      styles: styles$X
+      template: template$O,
+      styles: styles$Z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$W = css `
+  const styles$Y = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -20319,14 +20339,14 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$W,
+      styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$V = css `
+  const styles$X = css `
     .error-icon {
         display: none;
     }
@@ -20360,9 +20380,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$U = css `
+  const styles$W = css `
     ${display$2('inline-grid')}
-    ${styles$V}
+    ${styles$X}
 
     :host {
         font: ${bodyFont};
@@ -20556,7 +20576,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
 
-  const template$L = (_context, definition) => html `
+  const template$N = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -20641,16 +20661,16 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$L,
-      styles: styles$U,
+      template: template$N,
+      styles: styles$W,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$T = css `
-    ${styles$17}
+  const styles$V = css `
+    ${styles$1a}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -20697,7 +20717,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$K = (context, definition) => html `
+  const template$M = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20792,8 +20812,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$K,
-      styles: styles$T,
+      template: template$M,
+      styles: styles$V,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20823,7 +20843,7 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$S = css `
+  const styles$U = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21113,7 +21133,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const styles$R = css `
+  const styles$T = css `
     .annotated-label {
         display: flex;
         flex-direction: row;
@@ -21140,10 +21160,10 @@ so this becomes the fallback color for the slot */ ''}
       none: undefined,
       standard: 'standard'};
 
-  const styles$Q = css `
-    ${styles$S}
-    ${styles$V}
-    ${styles$R}
+  const styles$S = css `
+    ${styles$U}
+    ${styles$X}
+    ${styles$T}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -21264,7 +21284,7 @@ so this becomes the fallback color for the slot */ ''}
         <slot></slot>
     </label>
 `);
-  const template$J = (context, definition) => html `
+  const template$L = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -22039,8 +22059,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$J,
-      styles: styles$Q,
+      template: template$L,
+      styles: styles$S,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -22084,7 +22104,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$P = css `
+  const styles$R = css `
     ${display$2('grid')}
 
     dialog {
@@ -22177,7 +22197,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$I = html `
+  const template$K = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -22325,13 +22345,13 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$I,
-      styles: styles$P,
+      template: template$K,
+      styles: styles$R,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$O = css `
+  const styles$Q = css `
     ${display$2('block')}
 
     :host {
@@ -22474,7 +22494,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$H = html `
+  const template$J = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -22616,8 +22636,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$H,
-      styles: styles$O
+      template: template$J,
+      styles: styles$Q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -25399,7 +25419,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  const styles$N = css `
+  const styles$P = css `
     ${display$2('none')}
 `;
 
@@ -25464,7 +25484,7 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderCore.prototype, "itemRemove", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core',
-      styles: styles$N
+      styles: styles$P
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -25631,13 +25651,13 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table',
-      styles: styles$N
+      styles: styles$P
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$M = css `
+  const styles$O = css `
     ${display$2('flex')}
 
     :host {
@@ -25713,7 +25733,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(ListboxOption:class)} component.
    * @public
    */
-  const template$G = (context, definition) => html `
+  const template$I = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -25826,13 +25846,13 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$G,
-      styles: styles$M
+      template: template$I,
+      styles: styles$O
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
-  const styles$L = css `
+  const styles$N = css `
     ${display$2('flex')}
 
     :host {
@@ -25894,7 +25914,7 @@ so this becomes the fallback color for the slot */ ''}
   const isListOption$1 = (n) => {
       return n instanceof ListOption;
   };
-  const template$F = html `
+  const template$H = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -26036,8 +26056,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$F,
-      styles: styles$L
+      template: template$H,
+      styles: styles$N
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -26064,9 +26084,9 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$E = html `<template slot="mapping"></template>`;
+  const template$G = html `<template slot="mapping"></template>`;
 
-  const styles$K = css `
+  const styles$M = css `
     ${display$2('none')}
 `;
 
@@ -26082,8 +26102,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$E,
-      styles: styles$K
+      template: template$G,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -26153,8 +26173,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$E,
-      styles: styles$K
+      template: template$G,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -26177,8 +26197,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$E,
-      styles: styles$K
+      template: template$G,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -26194,8 +26214,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$E,
-      styles: styles$K
+      template: template$G,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
@@ -26497,7 +26517,7 @@ so this becomes the fallback color for the slot */ ''}
       observable
   ], Menu$1.prototype, "itemIcons", void 0);
 
-  const template$D = () => html `
+  const template$F = () => html `
     <template
         slot="${x => {
     if (x.slot) {
@@ -26514,7 +26534,7 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
-  const styles$J = css `
+  const styles$L = css `
     ${display$2('grid')}
 
     :host {
@@ -26585,8 +26605,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: template$D,
-      styles: styles$J
+      template: template$F,
+      styles: styles$L
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
@@ -26601,7 +26621,7 @@ so this becomes the fallback color for the slot */ ''}
       auto: 'auto'
   };
 
-  const styles$I = css `
+  const styles$K = css `
     ${display$2('inline-block')}
 
     :host {
@@ -26619,7 +26639,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$C = html `
+  const template$E = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -26869,8 +26889,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$C,
-      styles: styles$I,
+      template: template$E,
+      styles: styles$K,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -26878,7 +26898,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$H = css `
+  const styles$J = css `
     ${display$2('grid')}
 
     :host {
@@ -26975,7 +26995,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$H,
+      styles: styles$J,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -26990,10 +27010,10 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$G = css `
+  const styles$I = css `
     ${display$2('inline-block')}
-    ${styles$V}
-    ${styles$R}
+    ${styles$X}
+    ${styles$T}
 
     :host {
         font: ${bodyFont};
@@ -27216,7 +27236,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
    * @public
    */
-  const template$B = (context, definition) => html `
+  const template$D = (context, definition) => html `
     <template class="${x => (x.readOnly ? 'readonly' : '')}">
         ${labelTemplate$4}
         <div class="root" part="root">
@@ -27370,8 +27390,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleNumberField = NumberField.compose({
       baseName: 'number-field',
       baseClass: NumberField$1,
-      template: template$B,
-      styles: styles$G,
+      template: template$D,
+      styles: styles$I,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -27414,7 +27434,7 @@ so this becomes the fallback color for the slot */ ''}
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$F = css `
+  const styles$H = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -27514,15 +27534,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$F,
+      styles: styles$H,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$E = css `
+  const styles$G = css `
     ${display$2('inline-block')}
-    ${styles$V}
-    ${styles$R}
+    ${styles$X}
+    ${styles$T}
 
     .positioning-region {
         display: flex;
@@ -27561,7 +27581,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   const labelTemplate$3 = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
-  const template$A = html `
+  const template$C = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
@@ -27601,8 +27621,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
-      template: template$A,
-      styles: styles$E,
+      template: template$C,
+      styles: styles$G,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -31538,7 +31558,7 @@ so this becomes the fallback color for the slot */ ''}
   JSON-serialization identifier using
   [`Step.jsonID`](https://prosemirror.net/docs/ref/#transform.Step^jsonID).
   */
-  class Step {
+  let Step$1 = class Step {
       /**
       Get the step map that represents the changes made by this step,
       and which can be used to transform between positions in the old
@@ -31576,7 +31596,7 @@ so this becomes the fallback color for the slot */ ''}
           stepClass.prototype.jsonID = id;
           return stepClass;
       }
-  }
+  };
   /**
   The result of [applying](https://prosemirror.net/docs/ref/#transform.Step.apply) a step. Contains either a
   new document or a failure value.
@@ -31637,7 +31657,7 @@ so this becomes the fallback color for the slot */ ''}
   /**
   Add a mark to all inline content between two positions.
   */
-  class AddMarkStep extends Step {
+  class AddMarkStep extends Step$1 {
       /**
       Create a mark step.
       */
@@ -31698,11 +31718,11 @@ so this becomes the fallback color for the slot */ ''}
           return new AddMarkStep(json.from, json.to, schema.markFromJSON(json.mark));
       }
   }
-  Step.jsonID("addMark", AddMarkStep);
+  Step$1.jsonID("addMark", AddMarkStep);
   /**
   Remove a mark from all inline content between two positions.
   */
-  class RemoveMarkStep extends Step {
+  class RemoveMarkStep extends Step$1 {
       /**
       Create a mark-removing step.
       */
@@ -31760,11 +31780,11 @@ so this becomes the fallback color for the slot */ ''}
           return new RemoveMarkStep(json.from, json.to, schema.markFromJSON(json.mark));
       }
   }
-  Step.jsonID("removeMark", RemoveMarkStep);
+  Step$1.jsonID("removeMark", RemoveMarkStep);
   /**
   Add a mark to a specific node.
   */
-  class AddNodeMarkStep extends Step {
+  class AddNodeMarkStep extends Step$1 {
       /**
       Create a node mark step.
       */
@@ -31817,11 +31837,11 @@ so this becomes the fallback color for the slot */ ''}
           return new AddNodeMarkStep(json.pos, schema.markFromJSON(json.mark));
       }
   }
-  Step.jsonID("addNodeMark", AddNodeMarkStep);
+  Step$1.jsonID("addNodeMark", AddNodeMarkStep);
   /**
   Remove a mark from a specific node.
   */
-  class RemoveNodeMarkStep extends Step {
+  class RemoveNodeMarkStep extends Step$1 {
       /**
       Create a mark-removing step.
       */
@@ -31867,12 +31887,12 @@ so this becomes the fallback color for the slot */ ''}
           return new RemoveNodeMarkStep(json.pos, schema.markFromJSON(json.mark));
       }
   }
-  Step.jsonID("removeNodeMark", RemoveNodeMarkStep);
+  Step$1.jsonID("removeNodeMark", RemoveNodeMarkStep);
 
   /**
   Replace a part of the document with a slice of new content.
   */
-  class ReplaceStep extends Step {
+  class ReplaceStep extends Step$1 {
       /**
       The given `slice` should fit the 'gap' between `from` and
       `to`—the depths must line up, and the surrounding nodes must be
@@ -31956,13 +31976,13 @@ so this becomes the fallback color for the slot */ ''}
           return new ReplaceStep(json.from, json.to, Slice.fromJSON(schema, json.slice), !!json.structure);
       }
   }
-  Step.jsonID("replace", ReplaceStep);
+  Step$1.jsonID("replace", ReplaceStep);
   /**
   Replace a part of the document with a slice of content, but
   preserve a range of the replaced content by moving it into the
   slice.
   */
-  class ReplaceAroundStep extends Step {
+  class ReplaceAroundStep extends Step$1 {
       /**
       Create a replace-around step with the given range and gap.
       `insert` should be the point in the slice into which the content
@@ -32055,7 +32075,7 @@ so this becomes the fallback color for the slot */ ''}
           return new ReplaceAroundStep(json.from, json.to, json.gapFrom, json.gapTo, Slice.fromJSON(schema, json.slice), json.insert, !!json.structure);
       }
   }
-  Step.jsonID("replaceAround", ReplaceAroundStep);
+  Step$1.jsonID("replaceAround", ReplaceAroundStep);
   function contentBetween(doc, from, to) {
       let $from = doc.resolve(from), dist = to - from, depth = $from.depth;
       while (dist > 0 && depth > 0 && $from.indexAfter(depth) == $from.node(depth).childCount) {
@@ -32979,7 +32999,7 @@ so this becomes the fallback color for the slot */ ''}
   /**
   Update an attribute in a specific node.
   */
-  class AttrStep extends Step {
+  class AttrStep extends Step$1 {
       /**
       Construct an attribute step.
       */
@@ -33029,11 +33049,11 @@ so this becomes the fallback color for the slot */ ''}
           return new AttrStep(json.pos, json.attr, json.value);
       }
   }
-  Step.jsonID("attr", AttrStep);
+  Step$1.jsonID("attr", AttrStep);
   /**
   Update an attribute in the doc node.
   */
-  class DocAttrStep extends Step {
+  class DocAttrStep extends Step$1 {
       /**
       Construct an attribute step.
       */
@@ -33074,7 +33094,7 @@ so this becomes the fallback color for the slot */ ''}
           return new DocAttrStep(json.attr, json.value);
       }
   }
-  Step.jsonID("docAttr", DocAttrStep);
+  Step$1.jsonID("docAttr", DocAttrStep);
 
   /**
   @internal
@@ -46746,7 +46766,7 @@ ${renderedContent}
   // src/index.ts
   var index_default$7 = HardBreak;
 
-  const styles$D = css `
+  const styles$F = css `
     ${display$2('inline')}
 
     .positioning-region {
@@ -46783,7 +46803,7 @@ ${renderedContent}
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$D
+      styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
   const toolbarTag = 'nimble-toolbar';
@@ -46812,8 +46832,8 @@ ${renderedContent}
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$C = css `
-    ${styles$S}
+  const styles$E = css `
+    ${styles$U}
 
     :host {
         height: auto;
@@ -46831,7 +46851,7 @@ ${renderedContent}
     }
 `;
 
-  const template$z = html `
+  const template$B = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -47119,15 +47139,15 @@ ${renderedContent}
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$z,
-      styles: styles$C
+      template: template$B,
+      styles: styles$E
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextMentionListbox());
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
-  const template$y = html `
+  const template$A = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -47229,9 +47249,9 @@ ${renderedContent}
     </template>
 `;
 
-  const styles$B = css `
+  const styles$D = css `
     ${display$2('inline-flex')}
-    ${styles$V}
+    ${styles$X}
 
     :host {
         font: ${bodyFont};
@@ -63605,8 +63625,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$y,
-      styles: styles$B,
+      template: template$A,
+      styles: styles$D,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -63615,13 +63635,13 @@ ${nextLine.slice(indentLevel + 2)}`;
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
 
-  const template$x = html `
+  const template$z = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
 `;
 
-  const styles$A = css `
+  const styles$C = css `
     ${display$2('flex')}
 
     :host {
@@ -63734,17 +63754,17 @@ ${nextLine.slice(indentLevel + 2)}`;
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$x,
-      styles: styles$A
+      template: template$z,
+      styles: styles$C
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$z = css `
-    ${styles$S}
-    ${styles$V}
-    ${styles$R}
+  const styles$B = css `
+    ${styles$U}
+    ${styles$X}
+    ${styles$T}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -63907,7 +63927,7 @@ ${nextLine.slice(indentLevel + 2)}`;
             }
         `));
 
-  const styles$y = css `
+  const styles$A = css `
     ${display$2('inline-grid')}
 
     :host {
@@ -64077,7 +64097,7 @@ ${nextLine.slice(indentLevel + 2)}`;
             }
         `));
 
-  const template$w = html `
+  const template$y = html `
     <template role="progressbar">
         ${''
 /**
@@ -64124,8 +64144,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$w,
-      styles: styles$y
+      template: template$y,
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
@@ -64141,7 +64161,7 @@ ${nextLine.slice(indentLevel + 2)}`;
         <slot ${ref('labelSlot')}></slot>
     </label>
 `);
-  const template$v = (context, definition) => html `
+  const template$x = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -65357,8 +65377,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$v,
-      styles: styles$z,
+      template: template$x,
+      styles: styles$B,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -65371,6 +65391,46 @@ ${nextLine.slice(indentLevel + 2)}`;
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
+  const styles$z = css `
+    ${display$2('flex')}
+`;
+
+  const template$w = html `
+    <template>step</template>
+`;
+
+  /**
+   * A nimble-styled step for a stepper
+   */
+  class Step extends FoundationElement {
+  }
+  const nimbleStep = Step.compose({
+      baseName: 'step',
+      template: template$w,
+      styles: styles$z
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());
+
+  const styles$y = css `
+    ${display$2('flex')}
+`;
+
+  const template$v = html `
+    <template>stepper: <slot></slot></template>
+`;
+
+  /**
+   * A nimble-styled stepper
+   */
+  class Stepper extends FoundationElement {
+  }
+  const nimbleStepper = Stepper.compose({
+      baseName: 'stepper',
+      template: template$v,
+      styles: styles$y
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());
+
   const styles$x = css `
     ${display$2('inline-flex')}
 
@@ -77614,7 +77674,7 @@ focus outline in that case.
       .register(nimbleTableColumnText());
 
   const styles$g = css `
-    ${styles$13}
+    ${styles$15}
 
     .tabpanel {
         overflow: auto;
@@ -77695,7 +77755,7 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$P,
+      template: template$R,
       styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
@@ -77777,8 +77837,8 @@ focus outline in that case.
 
   const styles$e = css `
     ${display$2('inline-flex')}
-    ${styles$V}
-    ${styles$R}
+    ${styles$X}
+    ${styles$T}
 
     :host {
         font: ${bodyFont};
@@ -78138,8 +78198,8 @@ focus outline in that case.
 
   const styles$d = css `
     ${display$2('inline-block')}
-    ${styles$V}
-    ${styles$R}
+    ${styles$X}
+    ${styles$T}
 
     :host {
         font: ${bodyFont};