@ni/ok-components 0.2.15 → 0.2.17

package/dist/all-components-bundle.js

@@ -14787,6 +14787,7 @@
       borderRgbPartialColor: 'border-rgb-partial-color',
       failColor: 'fail-color',
       warningColor: 'warning-color',
+      warningFontColor: 'warning-font-color',
       passColor: 'pass-color',
       informationColor: 'information-color',
       borderHoverColor: 'border-hover-color',
@@ -14901,7 +14902,7 @@
 
   const template$_ = html `<slot></slot>`;
 
-  const styles$1d = css `
+  const styles$1f = css `
     ${display$2('contents')}
 `;
 
@@ -15016,7 +15017,7 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$1d,
+      styles: styles$1f,
       template: template$_
   });
   DesignSystem.getOrCreate()
@@ -16141,6 +16142,7 @@
   const WarningDark20 = "#5e4635";
   const Pass100LightUi = "#009921";
   const Pass100DarkUi = "#00c12b";
+  const WarningTypographyLightUi = "#d3440d";
   const Fail100LightUi = "#c4000c";
   const Fail100DarkUi = "#ff4663";
   const Black75 = "#818386";
@@ -16313,6 +16315,7 @@
       borderRgbPartialColor: hexToRgbPartialThemeColor(alias.lineColor),
       failColor: alias.failColor,
       warningColor: createThemeColor(Warning100LightUi, Warning100DarkUi, White),
+      warningFontColor: createThemeColor(WarningTypographyLightUi, Warning100DarkUi, White),
       passColor: createThemeColor(Pass100LightUi, Pass100DarkUi, White),
       informationColor: createThemeColor(Information100LightUi, Information100DarkUi, White),
       borderHoverColor: createThemeColor(DigitalGreenLight, PowerGreen, White),
@@ -16484,6 +16487,7 @@
   const borderRgbPartialColor = createThemeColorToken(tokenNames.borderRgbPartialColor, tokenValues.borderRgbPartialColor);
   const failColor = createThemeColorToken(tokenNames.failColor, tokenValues.failColor);
   const warningColor = createThemeColorToken(tokenNames.warningColor, tokenValues.warningColor);
+  const warningFontColor = createThemeColorToken(tokenNames.warningFontColor, tokenValues.warningFontColor);
   const passColor = createThemeColorToken(tokenNames.passColor, tokenValues.passColor);
   const informationColor = createThemeColorToken(tokenNames.informationColor, tokenValues.informationColor);
   const borderHoverColor = createThemeColorToken(tokenNames.borderHoverColor, tokenValues.borderHoverColor);
@@ -16652,8 +16656,8 @@
   }
   // #endregion
 
-  const styles$1c = css `
-    @layer base, hover, focusVisible, active, disabled;
+  const styles$1e = css `
+    @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display$2('inline')}
@@ -16834,7 +16838,7 @@
       baseName: 'anchor',
       baseClass: Anchor$1,
       template: template$Z,
-      styles: styles$1c,
+      styles: styles$1e,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -16943,7 +16947,7 @@
     padding: 0;
 `;
 
-  const styles$1b = css `
+  const styles$1d = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17227,8 +17231,8 @@
             }
         `));
 
-  const styles$1a = css `
-    ${styles$1b}
+  const styles$1c = css `
+    ${styles$1d}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17331,7 +17335,7 @@
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
       template: template$Y,
-      styles: styles$1a,
+      styles: styles$1c,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17339,7 +17343,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$19 = css `
+  const styles$1b = css `
     ${display$2('grid')}
 
     :host {
@@ -17524,7 +17528,7 @@
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
       template: template$X,
-      styles: styles$19,
+      styles: styles$1b,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17534,347 +17538,639 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
-  const styles$18 = css `
-    ${display$2('flex')}
+  // These styles end up inside a @layer block so must use the
+  // cssPartial tag instead of the css tag
+  const styles$1a = cssPartial `
+    .severity-text {
+        display: none;
+        font: ${errorTextFont};
+        color: ${buttonLabelFontColor};
+        width: 100%;
+        position: absolute;
+        ${'' /* The -2px modifier of the bottom position is to intentionally have the severity text slightly overlap the control by 2px */}
+        bottom: calc(-1 * (${errorTextFontLineHeight} - 2px));
+        left: 0px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    
+    :host([severity="error"]) .severity-text {
+        display: block;
+        color: ${failColor};
+    }
+
+    :host([severity="warning"]) .severity-text {
+        display: block;
+        color: ${warningFontColor};
+    }
+    .severity-text:empty {
+        display: none;
+    }
 `;
 
-  const template$W = html `
-    <template>anchor step</template>
+  /**
+   * Set user-select: none in a way that works across all supported browsers.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#browser_compatibility
+   */
+  const userSelectNone$1 = cssPartial `
+    user-select: none;
+    -webkit-user-select: none;
 `;
 
   /**
-   * A nimble-styled anchor step for a stepper
+   * Subscription for {@link ThemeStyleSheetBehavior}
    */
-  class AnchorStep extends FoundationElement {
+  class ThemeStyleSheetBehaviorSubscription {
+      constructor(value, styles, source) {
+          this.value = value;
+          this.styles = styles;
+          this.source = source;
+      }
+      handleChange() {
+          const theme$1 = theme.getValueFor(this.source);
+          if (Array.isArray(this.value)
+              ? this.value.includes(theme$1)
+              : this.value === theme$1) {
+              this.source.$fastController.addStyles(this.styles);
+          }
+          else {
+              this.source.$fastController.removeStyles(this.styles);
+          }
+      }
   }
-  const nimbleAnchorStep = AnchorStep.compose({
-      baseName: 'anchor-step',
-      template: template$W,
-      styles: styles$18
-  });
-  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
+  /**
+   * Behavior to conditionally apply theme-based stylesheets.
+   */
+  class ThemeStyleSheetBehavior {
+      constructor(theme, styles) {
+          this.theme = theme;
+          this.styles = styles;
+          this.cache = new WeakMap();
+      }
+      /**
+       * @internal
+       */
+      bind(source) {
+          const subscriber = this.cache.get(source)
+              || new ThemeStyleSheetBehaviorSubscription(this.theme, this.styles, source);
+          // Currently subscriber from cache may have gone through unbind
+          // but still be in cache so always resubscribe
+          // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
+          theme.subscribe(subscriber, source);
+          subscriber.handleChange();
+          this.cache.set(source, subscriber);
+      }
+      /**
+       * @internal
+       */
+      unbind(source) {
+          const subscriber = this.cache.get(source);
+          if (subscriber) {
+              theme.unsubscribe(subscriber);
+          }
+          // Currently does not evict subscriber from cache
+          // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
+      }
+  }
+  /**
+   * Behavior to conditionally apply theme-based stylesheets. To determine which to apply,
+   * the behavior will use the nearest ThemeProvider's 'theme' design system value.
+   *
+   * @public
+   * @example
+   * ```ts
+   * css`
+   *     // ...
+   * `.withBehaviors(
+   *     themeBehavior(Theme.light, css` ... `),
+   *     // Apply style for both dark and color theme
+   *     themeBehavior([Theme.dark, Theme.color], css` ... `)
+   * )
+   * ```
+   */
+  const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
+  /* eslint-enable max-classes-per-file */
 
-  const styles$17 = css `
-    ${display$2('inline-flex')}
+  const styles$19 = css `
+    @layer base, hover, focusVisible, active, disabled, top;
 
-    :host {
-        position: relative;
-        font: ${buttonLabelFont};
-        height: ${controlHeight};
-        color: ${bodyFontColor};
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        text-wrap: nowrap;
-        --ni-private-active-indicator-width: 2px;
-        --ni-private-focus-indicator-width: 1px;
-        --ni-private-indicator-lines-gap: 1px;
-        --ni-private-focus-indicator-inset-width: 3px;
-    }
+    @layer base {
+        ${display$2('inline-flex')}
+        ${styles$1a}
+        :host {
+            ${'' /* Based on text layout: Top padding + title height + subtitle height + bottom padding */}
+            height: calc(${smallPadding} + ${controlSlimHeight} + ${errorTextFontLineHeight} + ${smallPadding});
+            width: ${menuMinWidth};
+            color: ${buttonLabelFontColor};
+            font: ${buttonLabelFont};
+            white-space: nowrap;
+            outline: none;
+            border: none;
+        }
 
-    :host(:hover) {
-        background-color: ${fillHoverColor};
-    }
+        ${'' /* Container wrapper for severity text to position against */}
+        .container {
+            display: inline-flex;
+            width: 100%;
+            height: 100%;
+            position: relative;
+        }
 
-    :host(:hover[aria-current]) {
-        background-color: ${fillHoverSelectedColor};
-    }
+        .control { 
+            display: inline-flex;
+            align-items: start;
+            justify-content: flex-start;
+            height: 100%;
+            width: 100%;
+            color: inherit;
+            background-color: transparent;
+            gap: ${smallPadding};
+            cursor: pointer;
+            outline: none;
+            margin: 0; 
+            padding: 0 ${smallPadding} 0 0;
+            --ni-private-step-icon-background-full-size: 100% 100%;
+            ${'' /* 6px = (2px icon border + 1px inset) * 2 sides */}
+            --ni-private-step-icon-background-inset-size: calc(100% - 6px) calc(100% - 6px);
+            --ni-private-step-icon-background-none-size: 0% 0%;
+
+            --ni-private-step-icon-color: ${buttonLabelFontColor};
+            --ni-private-step-icon-border-color: transparent;
+            --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
+            --ni-private-step-icon-outline-inset-color: transparent;
+            --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);
+        }
+
+        :host([severity="error"]) .control {
+            --ni-private-step-icon-color: ${failColor};
+            --ni-private-step-icon-border-color: ${failColor};
+            --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-line-color: ${failColor};
+        }
+
+        :host([severity="warning"]) .control {
+            --ni-private-step-icon-color: ${warningColor};
+            --ni-private-step-icon-border-color: ${warningColor};
+            --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-line-color: ${warningColor};
+        }
+
+        :host([severity="success"]) .control {
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
+            --ni-private-step-icon-border-color: ${passColor};
+            --ni-private-step-icon-background-color: ${passColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
+            --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);
+        }
+
+        :host([selected]) .control {
+            --ni-private-step-icon-color: ${borderHoverColor};
+            --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-line-color: ${borderHoverColor};
+        }
+
+        .icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex: none;
+            height: ${controlHeight};
+            width: ${controlHeight};
+            ${userSelectNone$1};
+            font: ${buttonLabelFont};
+            color: var(--ni-private-step-icon-color);
+            ${iconColor.cssCustomProperty}: var(--ni-private-step-icon-color);
+            border-style: solid;
+            border-radius: 100%;
+            border-color: var(--ni-private-step-icon-border-color);
+            border-width: 1px;
+            background-image: radial-gradient(
+                closest-side,
+                ${'' /* Workaround to prevent aliasing on radial-gradient boundaries, see:
+        https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges
+    */}
+                var(--ni-private-step-icon-background-color) calc(100% - 1px/var(--ni-private-device-resolution)),
+                transparent 100%
+            );
+            background-origin: border-box;
+            background-size: var(--ni-private-step-icon-background-size);
+            background-repeat: no-repeat;
+            background-position: center center;
+            position: relative;
+            transition:
+                border-color ${smallDelay} ease-in-out,
+                border-width ${smallDelay} ease-in-out,
+                background-size ${smallDelay} ease-out;
+        }
 
-    :host(:active) {
-        background: none;
-    }
+        :host([selected]) .icon {
+            border-width: 2px;
+        }
 
-    :host([disabled]) {
-        cursor: default;
-        color: ${bodyDisabledFontColor};
-        background: none;
-    }
+        .icon::before {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            outline-color: var(--ni-private-step-icon-outline-inset-color);
+            outline-style: solid;
+            outline-width: 0px;
+            outline-offset: 0px;
+            border: 1px solid transparent;
+            border-radius: 100%;
+            color: transparent;
+            background-clip: border-box;
+            transition:
+                outline-color ${smallDelay} ease-in-out,
+                outline-width ${smallDelay} ease-in-out,
+                outline-offset ${smallDelay} ease-in-out;
+        }
 
-    slot:not([name]) {
-        pointer-events: none;
-        display: block;
-        padding: ${mediumPadding} ${standardPadding}
-            calc(${mediumPadding} - ${borderWidth});
-    }
+        .icon-slot {
+            display: contents;
+        }
 
-    a::before {
-        content: '';
-        position: absolute;
-        bottom: calc(
-            var(--ni-private-active-indicator-width) +
-                var(--ni-private-indicator-lines-gap)
-        );
-        width: 0px;
-        height: 0px;
-        border-bottom: ${borderHoverColor}
-            var(--ni-private-focus-indicator-width) solid;
-        transition: width ${smallDelay} ease-in;
-    }
+        :host([severity="error"]) .icon-slot,
+        :host([severity="warning"]) .icon-slot,
+        :host([severity="success"]) .icon-slot {
+            display: none;
+        }
 
-    @media (prefers-reduced-motion) {
-        a::before {
-            transition-duration: 0s;
+        :host([selected]) .icon-slot,
+        :host([disabled]) .icon-slot {
+            display: contents;
         }
-    }
 
-    a${focusVisible}::before {
-        width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));
-    }
+        .icon-severity {
+            display: none;
+        }
 
-    a {
-        display: inline-flex;
-        text-decoration: none;
-        color: inherit;
-        cursor: inherit;
-        outline: none;
-        align-items: center;
-        justify-content: center;
-    }
+        :host([severity="error"]) .icon-severity,
+        :host([severity="warning"]) .icon-severity,
+        :host([severity="success"]) .icon-severity {
+            display: contents;
+        }
 
-    a::after {
-        content: '';
-        position: absolute;
-        bottom: 0px;
-        width: 0px;
-        height: 0px;
-        border-bottom: ${borderHoverColor}
-            var(--ni-private-active-indicator-width) solid;
-        transition: width ${smallDelay} ease-in;
-    }
+        :host([selected]) .icon-severity,
+        :host([disabled]) .icon-severity {
+            display: none;
+        }
 
-    @media (prefers-reduced-motion) {
-        a::after {
-            transition-duration: 0s;
+        .content {
+            display: inline-flex;
+            ${'' /* Control width - icon size */}
+            width: calc(100% - 32px);
+            flex-direction: column;
+            padding-top: ${smallPadding};
+            padding-bottom: ${smallPadding};
         }
-    }
 
-    a${focusVisible}::after {
-        width: 100%;
-        border-bottom-width: var(--ni-private-focus-indicator-width);
-    }
+        .title-wrapper {
+            display: inline-flex;
+            height: ${controlSlimHeight};
+            flex-direction: row;
+            align-items: center;
+            justify-content: start;
+            gap: ${smallPadding};
+            font: ${bodyFont};
+        }
 
-    :host([aria-current]) a::after {
-        width: 100%;
-        border-bottom-width: var(--ni-private-active-indicator-width);
-    }
+        [part='start'] {
+            display: none;
+        }
 
-    :host([disabled][aria-current]) a::after {
-        border-bottom-color: rgba(${borderHoverColor}, 0.3);
-    }
+        .title {
+            display: inline-block;
+            flex: none;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            ${'' /* Content width - (gap + line min width) */}
+            max-width: calc(100% - (${smallPadding} + ${standardPadding}));
+        }
 
-    [part='start'] {
-        display: none;
-    }
+        [part='end'] {
+            display: none;
+        }
+        
+        .line {
+            display: inline-block;
+            flex: 1;
+            min-width: ${standardPadding};
+            height: 1px;
+            background: var(--ni-private-step-line-color);
+            transform: scale(1, 1);
+            transition:
+                background-color ${smallDelay} ease-in-out,
+                transform ${smallDelay} ease-in-out;
+        }
 
-    [part='end'] {
-        display: none;
+        .subtitle {
+            font: ${errorTextFont};
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            ${'' /* Content width */}
+            max-width: 100%;
+        }
     }
-`;
 
-  const template$V = (context, definition) => html `
-    <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
-        <a
-            download="${x => x.download}"
-            href=${x => (x.disabled ? null : x.href)}
-            hreflang="${x => x.hreflang}"
-            ping="${x => x.ping}"
-            referrerpolicy="${x => x.referrerpolicy}"
-            rel="${x => x.rel}"
-            target="${x => x.target}"
-            type="${x => x.type}"
-        >
-            ${startSlotTemplate(context, definition)}
-            <slot></slot>
-            ${endSlotTemplate(context, definition)}
-        </a>
-    </template>
-`;
+    @layer hover {
+        .control:hover {
+            --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
+            --ni-private-step-line-color: ${borderHoverColor};
+        }
 
-  /**
-   * A nimble-styled link tab
-   */
-  class AnchorTab extends AnchorBase {
-      constructor() {
-          super(...arguments);
-          /**
-           * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
-           * @public
-           * @remarks
-           * HTML Attribute: disabled
-           */
-          this.disabled = false;
-          /**
-           * Indicates the current "selected" state of various widgets.
-           * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-selected}
-           *
-           * @public
-           * @remarks
-           * HTML Attribute: aria-selected
-           */
-          this.ariaSelected = 'false';
-      }
-  }
-  __decorate([
-      attr({ mode: 'boolean' })
-  ], AnchorTab.prototype, "disabled", void 0);
-  __decorate([
-      attr({ attribute: 'aria-selected' })
-  ], AnchorTab.prototype, "ariaSelected", void 0);
-  // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
-  const nimbleAnchorTab = AnchorTab.compose({
-      baseName: 'anchor-tab',
-      template: template$V,
-      styles: styles$17,
-      shadowOptions: {
-          delegatesFocus: true
-      }
-  });
-  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
+        :host([severity="error"]) .control:hover {
+            --ni-private-step-icon-border-color: ${failColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-line-color: ${failColor};
+        }
 
-  const styles$16 = css `
-    ${display$2('flex')}
+        :host([severity="warning"]) .control:hover {
+            --ni-private-step-icon-border-color: ${warningColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-line-color: ${warningColor};
+        }
 
-    :host {
-        flex-direction: column;
-    }
+        :host([severity="success"]) .control:hover {
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
+            --ni-private-step-icon-border-color: ${passColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
+            --ni-private-step-line-color: ${passColor};
+        }
 
-    .tab-bar {
-        display: flex;
-    }
+        :host([selected]) .control:hover {
+            --ni-private-step-icon-color: ${buttonLabelFontColor};
+            --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
+            --ni-private-step-line-color: ${borderHoverColor};
+        }
 
-    [part='start'] {
-        display: none;
-    }
+        .control:hover .icon {
+            border-width: 2px;
+        }
 
-    .scroll-button.left {
-        margin-right: ${smallPadding};
+        .control:hover .line {
+            transform: scale(1, 2);
+        }
     }
 
-    .tablist {
-        display: flex;
-        width: max-content;
-        align-self: end;
-        overflow-x: scroll;
-        scrollbar-width: none;
+    @layer focusVisible {
+        .control${focusVisible} {
+            --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-outline-inset-color: ${borderHoverColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
+            --ni-private-step-line-color: ${borderHoverColor};
+        }
+
+        :host([severity="error"]) .control${focusVisible} {
+            --ni-private-step-icon-border-color: ${failColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-icon-outline-inset-color: ${failColor};
+            --ni-private-step-line-color: ${failColor};
+        }
+
+        :host([severity="warning"]) .control${focusVisible} {
+            --ni-private-step-icon-border-color: ${warningColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-icon-outline-inset-color: ${warningColor};
+            --ni-private-step-line-color: ${warningColor};
+        }
+
+        :host([severity="success"]) .control${focusVisible} {
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
+            --ni-private-step-icon-border-color: ${passColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
+            --ni-private-step-icon-outline-inset-color: transparent;
+            --ni-private-step-line-color: ${passColor};
+        }
+
+        :host([selected]) .control${focusVisible} {
+            --ni-private-step-icon-color: ${borderHoverColor};
+            --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-icon-outline-inset-color: ${borderHoverColor};
+            --ni-private-step-line-color: ${borderHoverColor};
+        }
+    
+        .control${focusVisible} .icon {
+            border-width: 2px;
+        }
+
+        .control${focusVisible} .icon::before {
+            outline-width: ${borderWidth};
+            outline-offset: -2px;
+        }
+
+        .control${focusVisible} .line {
+            transform: scale(1, 2);
+        }
     }
 
-    .scroll-button.right {
-        margin-left: ${smallPadding};
+    @layer active {
+        .control:active {
+            --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-background-color: ${fillSelectedColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
+            --ni-private-step-line-color: ${borderHoverColor};
+        }
+
+        :host([severity="error"]) .control:active {
+            --ni-private-step-icon-border-color: ${failColor};
+            --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
+            --ni-private-step-line-color: ${failColor};
+        }
+
+        :host([severity="warning"]) .control:active {
+            --ni-private-step-icon-border-color: ${warningColor};
+            --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
+            --ni-private-step-line-color: ${warningColor};
+        }
+
+        :host([severity="success"]) .control:active {
+            --ni-private-step-icon-color: ${buttonLabelFontColor};
+            --ni-private-step-icon-border-color: ${passColor};
+            --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);
+            --ni-private-step-line-color: ${passColor};
+        }
+
+        :host([selected]) .control:active {
+            --ni-private-step-icon-color: ${buttonLabelFontColor};
+            --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);
+            --ni-private-step-line-color: ${borderHoverColor};
+        }
+
+        .control:active .icon {
+            border-width: 2px;
+        }
+
+        .control:active .icon::before {
+            outline-width: 0px;
+            outline-offset: 0px;
+        }
+
+        .control:active .line {
+            transform: scale(1, 1);
+        }
     }
 
-    [part='end'] {
-        flex: 1;
+    @layer disabled {
+        :host([disabled]) .control {
+            cursor: default;
+            color: ${buttonLabelDisabledFontColor};
+            --ni-private-step-icon-color: rgb(from ${buttonLabelFontColor} r g b / 30%);
+            --ni-private-step-icon-border-color: transparent;
+            --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
+            --ni-private-step-icon-outline-inset-color: transparent;
+            --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);
+        }
+
+        :host([disabled]) .line {
+            transform: scale(1, 1);
+        }
     }
 
-    [part='tabpanel'] {
-        flex: 1;
+    @layer top {
+        @media (prefers-reduced-motion) {
+            .control {
+                transition-duration: 0s;
+            }
+        }
     }
-`;
+`.withBehaviors(themeBehavior(Theme.light, css `
+            @layer base {
+                .control {
+                    --ni-private-step-icon-inverse-color: ${White};
+                }
+            }
+        `), themeBehavior(Theme.dark, css `
+            @layer base {
+                .control {
+                    --ni-private-step-icon-inverse-color: ${Black91};
+                }
+            }
+        `), themeBehavior(Theme.color, css `
+            @layer base {
+                .control {
+                    --ni-private-step-icon-inverse-color: ${Black15};
+                }
 
-  const styles$15 = css `
-    ${styles$1b}
-    ${buttonAppearanceVariantStyles}
-`;
+                :host([severity="success"]) .control {
+                    --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);
+                }
+            }
+        `));
 
-  const template$U = (context, definition) => html `
-    <button
-        class="control"
-        part="control"
-        ?autofocus="${x => x.autofocus}"
-        ?disabled="${x => x.disabled}"
-        form="${x => x.formId}"
-        formaction="${x => x.formaction}"
-        formenctype="${x => x.formenctype}"
-        formmethod="${x => x.formmethod}"
-        formnovalidate="${x => x.formnovalidate}"
-        formtarget="${x => x.formtarget}"
-        name="${x => x.name}"
-        type="${x => x.type}"
-        value="${x => x.value}"
-        tabindex="${x => x.tabIndex}"
-        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-expanded="${x => x.ariaExpanded}"
-        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-pressed="${x => x.ariaPressed}"
-        aria-relevant="${x => x.ariaRelevant}"
-        aria-roledescription="${x => x.ariaRoledescription}"
-        ${ref('control')}
-    >
-        ${startSlotTemplate(context, definition)}
-        <span class="content" part="content">
-            <slot ${slotted('defaultSlottedContent')}></slot>
-        </span>
-        ${endSlotTemplate(context, definition)}
-    </button>
+  const styles$18 = css `
+    ${styles$19}
+    ${'' /* Anchor specific styles */}
+    @layer base {
+        .control {
+            text-decoration: none;
+        }
+    }
 `;
 
   /**
-   * A nimble-styled HTML button
+   * The runtime behavior for template overflow detection.
+   * @public
    */
-  let Button$1 = class Button extends Button$2 {
-      constructor() {
-          super(...arguments);
-          /**
-           * @public
-           * @remarks
-           * HTML Attribute: appearance
-           */
-          this.appearance = ButtonAppearance.outline;
-          /**
-           * @public
-           * @remarks
-           * HTML Attribute: content-hidden
-           */
-          this.contentHidden = false;
+  class OverflowBehavior {
+      /**
+       * Creates an instance of OverflowBehavior.
+       * @param target - The element to check for overflow.
+       * @param propertyName - The name of the property to assign the overflow state to.
+       */
+      constructor(target, propertyName) {
+          this.target = target;
+          this.propertyName = propertyName;
       }
-  };
-  __decorate([
-      attr
-  ], Button$1.prototype, "appearance", void 0);
-  __decorate([
-      attr({ attribute: 'appearance-variant' })
-  ], Button$1.prototype, "appearanceVariant", void 0);
-  __decorate([
-      attr({ attribute: 'content-hidden', mode: 'boolean' })
-  ], Button$1.prototype, "contentHidden", void 0);
-  __decorate([
-      attr({ attribute: 'tabindex', converter: nullableNumberConverter })
-  ], Button$1.prototype, "tabIndex", void 0);
+      /**
+       * Bind this behavior to the source.
+       * @param source - The source to bind to.
+       * @param context - The execution context that the binding is operating within.
+       */
+      bind(source) {
+          this.source = source;
+          this.setSourceValue(false);
+          this.mouseOverHandler = () => {
+              const hasOverflow = this.target.offsetWidth < this.target.scrollWidth;
+              this.setSourceValue(hasOverflow);
+          };
+          this.mouseOutHandler = () => {
+              this.setSourceValue(false);
+          };
+          this.target.addEventListener('mouseover', this.mouseOverHandler);
+          this.target.addEventListener('mouseout', this.mouseOutHandler);
+      }
+      /**
+       * Unbinds this behavior from the source.
+       * @param source - The source to unbind from.
+       */
+      unbind() {
+          this.source = undefined;
+          this.target.removeEventListener('mouseover', this.mouseOverHandler);
+          this.target.removeEventListener('mouseout', this.mouseOutHandler);
+      }
+      setSourceValue(value) {
+          // @ts-expect-error set property on source
+          this.source[this.propertyName] = value;
+      }
+  }
   /**
-   * A function that returns a nimble-button registration for configuring the component with a DesignSystem.
-   * Implements {@link @ni/fast-foundation#buttonTemplate}
-   *
+   * A directive that observes if an element has overflow and sets a flag.
+   * @param propertyName - The name of the property to assign the overflow flag.
    * @public
-   * @remarks
-   * Generates HTML Element: \<nimble-button\>
-   *
    */
-  const nimbleButton = Button$1.compose({
-      baseName: 'button',
-      baseClass: Button$2,
-      template: template$U,
-      styles: styles$15,
-      shadowOptions: {
-          delegatesFocus: true
+  function overflow(propertyName) {
+      return new AttachedBehaviorHTMLDirective('nimble-overflow', OverflowBehavior, propertyName);
+  }
+
+  const severityTextTemplate = html `
+    <div
+        class="severity-text"
+        ${overflow('severityHasOverflow')}
+        title="${x => (x.severityHasOverflow && x.severityText ? x.severityText : undefined)}"
+        aria-live="polite"
+    >${x => x.severityText}</div>`;
+
+  const Severity = {
+      default: undefined,
+      error: 'error',
+      warning: 'warning',
+      success: 'success',
+  };
+  // 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 mixinSeverityPattern(base) {
+      /**
+       * Mixin to provide severity text related properties to an element
+       */
+      class SeverityPatternElement extends base {
+          constructor() {
+              super(...arguments);
+              /* @internal
+               * Indicates if the severity text has overflowed its container. The value should not be
+               * set directly. Instead, it is used with the `overflow` directive.
+               */
+              this.severityHasOverflow = false;
+          }
       }
-  });
-  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
-  const buttonTag = 'nimble-button';
+      attr({ attribute: 'severity-text' })(SeverityPatternElement.prototype, 'severityText');
+      observable(SeverityPatternElement.prototype, 'severityHasOverflow');
+      return SeverityPatternElement;
+  }
 
   /* 🤖 this file was generated by svg-to-ts */
   const add16X16 = {
@@ -18815,22 +19111,13 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$T = html `<div
+  const template$W = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  /**
-   * Set user-select: none in a way that works across all supported browsers.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#browser_compatibility
-   */
-  const userSelectNone$1 = cssPartial `
-    user-select: none;
-    -webkit-user-select: none;
-`;
-
-  const styles$14 = css `
+  const styles$17 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -18893,12 +19180,524 @@
   const registerIconSvg = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$T,
-          styles: styles$14
+          template: template$W,
+          styles: styles$17
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'exclamationMark' icon
+   */
+  class IconExclamationMark extends IconSvg {
+      constructor() {
+          super(exclamationMark16X16);
+      }
+  }
+  registerIconSvg('icon-exclamation-mark', IconExclamationMark);
+  const iconExclamationMarkTag = 'nimble-icon-exclamation-mark';
+
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'triangleFilled' icon
+   */
+  class IconTriangleFilled extends IconSvg {
+      constructor() {
+          super(triangleFilled16X16);
+      }
+  }
+  registerIconSvg('icon-triangle-filled', IconTriangleFilled);
+  const iconTriangleFilledTag = 'nimble-icon-triangle-filled';
+
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'check' icon
+   */
+  class IconCheck extends IconSvg {
+      constructor() {
+          super(check16X16);
+      }
+  }
+  registerIconSvg('icon-check', IconCheck);
+  const iconCheckTag = 'nimble-icon-check';
+
+  const template$V = (context, definition) => html `
+    <template slot="step">
+        <div class="
+            container
+            ${x => (x.stepInternals.orientation === 'vertical' ? 'vertical' : '')}
+            ${x => (x.stepInternals.last ? 'last' : '')}
+        ">
+            <a
+                class="control"
+                part="control"
+                download="${x => x.download}"
+                href=${x => (x.disabled ? null : x.href)}
+                hreflang="${x => x.hreflang}"
+                ping="${x => x.ping}"
+                referrerpolicy="${x => x.referrerpolicy}"
+                rel="${x => x.rel}"
+                target="${x => x.target}"
+                type="${x => x.type}"
+                tabindex="${x => x.tabIndex}"
+                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-expanded="${x => x.ariaExpanded}"
+                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')}
+            >
+                <div class="icon"> 
+                    <div class="icon-slot"><slot ${slotted('defaultSlottedContent')}></slot></div>
+                    <div class="icon-severity">
+                        ${when(x => x.severity === Severity.error, html `<${iconExclamationMarkTag}></${iconExclamationMarkTag}>`)}
+                        ${when(x => x.severity === Severity.warning, html `<${iconTriangleFilledTag}></${iconTriangleFilledTag}>`)}
+                        ${when(x => x.severity === Severity.success, html `<${iconCheckTag}></${iconCheckTag}>`)}
+                    </div>
+                </div>
+                <div class="content">
+                    <div class="title-wrapper">
+                        ${startSlotTemplate(context, definition)}
+                        <div class="title"><slot name="title"></slot></div>
+                        ${endSlotTemplate(context, definition)}
+                        <div class="line"></div>
+                    </div>
+                    <div class="subtitle">
+                        <slot name="subtitle"></slot>
+                    </div>
+                </div>
+            </a>
+            ${severityTextTemplate}
+        </div>
+    </template>
+`;
+
+  /**
+   * Orientation of steppers.
+   * @public
+   */
+  const StepperOrientation = Orientation;
+
+  /**
+   * Internal properties configurable for a step
+   */
+  class StepInternals {
+      constructor() {
+          this.orientation = StepperOrientation.horizontal;
+          this.last = false;
+      }
+  }
+  __decorate([
+      observable
+  ], StepInternals.prototype, "orientation", void 0);
+  __decorate([
+      observable
+  ], StepInternals.prototype, "last", void 0);
+
+  const AnchorStepSeverity = Severity;
+
+  /**
+   * A nimble-styled anchor step for a stepper
+   */
+  class AnchorStep extends mixinSeverityPattern(AnchorBase) {
+      constructor() {
+          super(...arguments);
+          /**
+           * @public
+           * @remarks
+           * HTML Attribute: disabled
+           */
+          this.severity = AnchorStepSeverity.default;
+          /**
+           * @public
+           * @remarks
+           * HTML Attribute: disabled
+           */
+          this.disabled = false;
+          /**
+           * @public
+           * @remarks
+           * HTML Attribute: readonly
+           */
+          this.readOnly = false;
+          /**
+           * @public
+           * @remarks
+           * HTML Attribute: selected
+           */
+          this.selected = false;
+          /**
+           * @internal
+           */
+          this.stepInternals = new StepInternals();
+      }
+  }
+  __decorate([
+      attr()
+  ], AnchorStep.prototype, "severity", void 0);
+  __decorate([
+      attr({ mode: 'boolean' })
+  ], AnchorStep.prototype, "disabled", void 0);
+  __decorate([
+      attr({ attribute: 'readonly', mode: 'boolean' })
+  ], AnchorStep.prototype, "readOnly", void 0);
+  __decorate([
+      attr({ mode: 'boolean' })
+  ], AnchorStep.prototype, "selected", void 0);
+  __decorate([
+      attr({ attribute: 'tabindex', converter: nullableNumberConverter })
+  ], AnchorStep.prototype, "tabIndex", void 0);
+  const nimbleAnchorStep = AnchorStep.compose({
+      baseName: 'anchor-step',
+      template: template$V,
+      styles: styles$18,
+      shadowOptions: {
+          delegatesFocus: true
+      }
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
+
+  const styles$16 = css `
+    ${display$2('inline-flex')}
+
+    :host {
+        position: relative;
+        font: ${buttonLabelFont};
+        height: ${controlHeight};
+        color: ${bodyFontColor};
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        text-wrap: nowrap;
+        --ni-private-active-indicator-width: 2px;
+        --ni-private-focus-indicator-width: 1px;
+        --ni-private-indicator-lines-gap: 1px;
+        --ni-private-focus-indicator-inset-width: 3px;
+    }
+
+    :host(:hover) {
+        background-color: ${fillHoverColor};
+    }
+
+    :host(:hover[aria-current]) {
+        background-color: ${fillHoverSelectedColor};
+    }
+
+    :host(:active) {
+        background: none;
+    }
+
+    :host([disabled]) {
+        cursor: default;
+        color: ${bodyDisabledFontColor};
+        background: none;
+    }
+
+    slot:not([name]) {
+        pointer-events: none;
+        display: block;
+        padding: ${mediumPadding} ${standardPadding}
+            calc(${mediumPadding} - ${borderWidth});
+    }
+
+    a::before {
+        content: '';
+        position: absolute;
+        bottom: calc(
+            var(--ni-private-active-indicator-width) +
+                var(--ni-private-indicator-lines-gap)
+        );
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-focus-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        a::before {
+            transition-duration: 0s;
+        }
+    }
+
+    a${focusVisible}::before {
+        width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));
+    }
+
+    a {
+        display: inline-flex;
+        text-decoration: none;
+        color: inherit;
+        cursor: inherit;
+        outline: none;
+        align-items: center;
+        justify-content: center;
+    }
+
+    a::after {
+        content: '';
+        position: absolute;
+        bottom: 0px;
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-active-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        a::after {
+            transition-duration: 0s;
+        }
+    }
+
+    a${focusVisible}::after {
+        width: 100%;
+        border-bottom-width: var(--ni-private-focus-indicator-width);
+    }
+
+    :host([aria-current]) a::after {
+        width: 100%;
+        border-bottom-width: var(--ni-private-active-indicator-width);
+    }
+
+    :host([disabled][aria-current]) a::after {
+        border-bottom-color: rgba(${borderHoverColor}, 0.3);
+    }
+
+    [part='start'] {
+        display: none;
+    }
+
+    [part='end'] {
+        display: none;
+    }
+`;
+
+  const template$U = (context, definition) => html `
+    <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
+        <a
+            download="${x => x.download}"
+            href=${x => (x.disabled ? null : x.href)}
+            hreflang="${x => x.hreflang}"
+            ping="${x => x.ping}"
+            referrerpolicy="${x => x.referrerpolicy}"
+            rel="${x => x.rel}"
+            target="${x => x.target}"
+            type="${x => x.type}"
+        >
+            ${startSlotTemplate(context, definition)}
+            <slot></slot>
+            ${endSlotTemplate(context, definition)}
+        </a>
+    </template>
+`;
+
+  /**
+   * A nimble-styled link tab
+   */
+  class AnchorTab extends AnchorBase {
+      constructor() {
+          super(...arguments);
+          /**
+           * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
+           * @public
+           * @remarks
+           * HTML Attribute: disabled
+           */
+          this.disabled = false;
+          /**
+           * Indicates the current "selected" state of various widgets.
+           * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-selected}
+           *
+           * @public
+           * @remarks
+           * HTML Attribute: aria-selected
+           */
+          this.ariaSelected = 'false';
+      }
+  }
+  __decorate([
+      attr({ mode: 'boolean' })
+  ], AnchorTab.prototype, "disabled", void 0);
+  __decorate([
+      attr({ attribute: 'aria-selected' })
+  ], AnchorTab.prototype, "ariaSelected", void 0);
+  // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
+  const nimbleAnchorTab = AnchorTab.compose({
+      baseName: 'anchor-tab',
+      template: template$U,
+      styles: styles$16,
+      shadowOptions: {
+          delegatesFocus: true
+      }
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
+
+  const styles$15 = css `
+    ${display$2('flex')}
+
+    :host {
+        flex-direction: column;
+    }
+
+    .tab-bar {
+        display: flex;
+    }
+
+    [part='start'] {
+        display: none;
+    }
+
+    .scroll-button.left {
+        margin-right: ${smallPadding};
+    }
+
+    .tablist {
+        display: flex;
+        width: max-content;
+        align-self: end;
+        overflow-x: scroll;
+        scrollbar-width: none;
+    }
+
+    .scroll-button.right {
+        margin-left: ${smallPadding};
+    }
+
+    [part='end'] {
+        flex: 1;
+    }
+
+    [part='tabpanel'] {
+        flex: 1;
+    }
+`;
+
+  const styles$14 = css `
+    ${styles$1d}
+    ${buttonAppearanceVariantStyles}
+`;
+
+  const template$T = (context, definition) => html `
+    <button
+        class="control"
+        part="control"
+        ?autofocus="${x => x.autofocus}"
+        ?disabled="${x => x.disabled}"
+        form="${x => x.formId}"
+        formaction="${x => x.formaction}"
+        formenctype="${x => x.formenctype}"
+        formmethod="${x => x.formmethod}"
+        formnovalidate="${x => x.formnovalidate}"
+        formtarget="${x => x.formtarget}"
+        name="${x => x.name}"
+        type="${x => x.type}"
+        value="${x => x.value}"
+        tabindex="${x => x.tabIndex}"
+        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-expanded="${x => x.ariaExpanded}"
+        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-pressed="${x => x.ariaPressed}"
+        aria-relevant="${x => x.ariaRelevant}"
+        aria-roledescription="${x => x.ariaRoledescription}"
+        ${ref('control')}
+    >
+        ${startSlotTemplate(context, definition)}
+        <span class="content" part="content">
+            <slot ${slotted('defaultSlottedContent')}></slot>
+        </span>
+        ${endSlotTemplate(context, definition)}
+    </button>
+`;
+
+  /**
+   * A nimble-styled HTML button
+   */
+  let Button$1 = class Button extends Button$2 {
+      constructor() {
+          super(...arguments);
+          /**
+           * @public
+           * @remarks
+           * HTML Attribute: appearance
+           */
+          this.appearance = ButtonAppearance.outline;
+          /**
+           * @public
+           * @remarks
+           * HTML Attribute: content-hidden
+           */
+          this.contentHidden = false;
+      }
+  };
+  __decorate([
+      attr
+  ], Button$1.prototype, "appearance", void 0);
+  __decorate([
+      attr({ attribute: 'appearance-variant' })
+  ], Button$1.prototype, "appearanceVariant", void 0);
+  __decorate([
+      attr({ attribute: 'content-hidden', mode: 'boolean' })
+  ], Button$1.prototype, "contentHidden", void 0);
+  __decorate([
+      attr({ attribute: 'tabindex', converter: nullableNumberConverter })
+  ], Button$1.prototype, "tabIndex", void 0);
+  /**
+   * A function that returns a nimble-button registration for configuring the component with a DesignSystem.
+   * Implements {@link @ni/fast-foundation#buttonTemplate}
+   *
+   * @public
+   * @remarks
+   * Generates HTML Element: \<nimble-button\>
+   *
+   */
+  const nimbleButton = Button$1.compose({
+      baseName: 'button',
+      baseClass: Button$2,
+      template: template$T,
+      styles: styles$14,
+      shadowOptions: {
+          delegatesFocus: true
+      }
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
+  const buttonTag = 'nimble-button';
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -19291,7 +20090,7 @@
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
       template: template$S,
-      styles: styles$16,
+      styles: styles$15,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -19595,80 +20394,6 @@
       .register(nimbleAnchoredRegion());
   const anchoredRegionTag = 'nimble-anchored-region';
 
-  /**
-   * Subscription for {@link ThemeStyleSheetBehavior}
-   */
-  class ThemeStyleSheetBehaviorSubscription {
-      constructor(value, styles, source) {
-          this.value = value;
-          this.styles = styles;
-          this.source = source;
-      }
-      handleChange() {
-          const theme$1 = theme.getValueFor(this.source);
-          if (Array.isArray(this.value)
-              ? this.value.includes(theme$1)
-              : this.value === theme$1) {
-              this.source.$fastController.addStyles(this.styles);
-          }
-          else {
-              this.source.$fastController.removeStyles(this.styles);
-          }
-      }
-  }
-  /**
-   * Behavior to conditionally apply theme-based stylesheets.
-   */
-  class ThemeStyleSheetBehavior {
-      constructor(theme, styles) {
-          this.theme = theme;
-          this.styles = styles;
-          this.cache = new WeakMap();
-      }
-      /**
-       * @internal
-       */
-      bind(source) {
-          const subscriber = this.cache.get(source)
-              || new ThemeStyleSheetBehaviorSubscription(this.theme, this.styles, source);
-          // Currently subscriber from cache may have gone through unbind
-          // but still be in cache so always resubscribe
-          // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
-          theme.subscribe(subscriber, source);
-          subscriber.handleChange();
-          this.cache.set(source, subscriber);
-      }
-      /**
-       * @internal
-       */
-      unbind(source) {
-          const subscriber = this.cache.get(source);
-          if (subscriber) {
-              theme.unsubscribe(subscriber);
-          }
-          // Currently does not evict subscriber from cache
-          // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
-      }
-  }
-  /**
-   * Behavior to conditionally apply theme-based stylesheets. To determine which to apply,
-   * the behavior will use the nearest ThemeProvider's 'theme' design system value.
-   *
-   * @public
-   * @example
-   * ```ts
-   * css`
-   *     // ...
-   * `.withBehaviors(
-   *     themeBehavior(Theme.light, css` ... `),
-   *     // Apply style for both dark and color theme
-   *     themeBehavior([Theme.dark, Theme.color], css` ... `)
-   * )
-   * ```
-   */
-  const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
-  /* eslint-enable max-classes-per-file */
-
   const styles$11 = css `
     ${display$2('flex')}
 
@@ -19784,19 +20509,6 @@
             }
         `));
 
-  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-  // See generation source in nimble-components/build/generate-icons
-  /**
-   * The icon component for the 'exclamationMark' icon
-   */
-  class IconExclamationMark extends IconSvg {
-      constructor() {
-          super(exclamationMark16X16);
-      }
-  }
-  registerIconSvg('icon-exclamation-mark', IconExclamationMark);
-  const iconExclamationMarkTag = 'nimble-icon-exclamation-mark';
-
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -19810,19 +20522,6 @@
   registerIconSvg('icon-info', IconInfo);
   const iconInfoTag = 'nimble-icon-info';
 
-  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-  // See generation source in nimble-components/build/generate-icons
-  /**
-   * The icon component for the 'triangleFilled' icon
-   */
-  class IconTriangleFilled extends IconSvg {
-      constructor() {
-          super(triangleFilled16X16);
-      }
-  }
-  registerIconSvg('icon-triangle-filled', IconTriangleFilled);
-  const iconTriangleFilledTag = 'nimble-icon-triangle-filled';
-
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -20116,7 +20815,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
   const styles$$ = css `
-    @layer base, hover, focusVisible, active, disabled;
+    @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display$2('inline-flex')}
@@ -20592,61 +21291,6 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  /**
-   * The runtime behavior for template overflow detection.
-   * @public
-   */
-  class OverflowBehavior {
-      /**
-       * Creates an instance of OverflowBehavior.
-       * @param target - The element to check for overflow.
-       * @param propertyName - The name of the property to assign the overflow state to.
-       */
-      constructor(target, propertyName) {
-          this.target = target;
-          this.propertyName = propertyName;
-      }
-      /**
-       * Bind this behavior to the source.
-       * @param source - The source to bind to.
-       * @param context - The execution context that the binding is operating within.
-       */
-      bind(source) {
-          this.source = source;
-          this.setSourceValue(false);
-          this.mouseOverHandler = () => {
-              const hasOverflow = this.target.offsetWidth < this.target.scrollWidth;
-              this.setSourceValue(hasOverflow);
-          };
-          this.mouseOutHandler = () => {
-              this.setSourceValue(false);
-          };
-          this.target.addEventListener('mouseover', this.mouseOverHandler);
-          this.target.addEventListener('mouseout', this.mouseOutHandler);
-      }
-      /**
-       * Unbinds this behavior from the source.
-       * @param source - The source to unbind from.
-       */
-      unbind() {
-          this.source = undefined;
-          this.target.removeEventListener('mouseover', this.mouseOverHandler);
-          this.target.removeEventListener('mouseout', this.mouseOutHandler);
-      }
-      setSourceValue(value) {
-          // @ts-expect-error set property on source
-          this.source[this.propertyName] = value;
-      }
-  }
-  /**
-   * A directive that observes if an element has overflow and sets a flag.
-   * @param propertyName - The name of the property to assign the overflow flag.
-   * @public
-   */
-  function overflow(propertyName) {
-      return new AttachedBehaviorHTMLDirective('nimble-overflow', OverflowBehavior, propertyName);
-  }
-
   const errorTextTemplate = html `
     <div
         class="error-text"
@@ -20752,7 +21396,7 @@ so this becomes the fallback color for the slot */ ''}
   const checkboxTag = 'nimble-checkbox';
 
   const styles$W = css `
-    ${styles$1b}
+    ${styles$1d}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -23399,18 +24043,6 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIconSvg('icon-chart-diagram-parent-focus-two-child', IconChartDiagramParentFocusTwoChild);
 
-  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-  // See generation source in nimble-components/build/generate-icons
-  /**
-   * The icon component for the 'check' icon
-   */
-  class IconCheck extends IconSvg {
-      constructor() {
-          super(check16X16);
-      }
-  }
-  registerIconSvg('icon-check', IconCheck);
-
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -65535,31 +66167,173 @@ ${nextLine.slice(indentLevel + 2)}`;
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
   const styles$A = css `
-    ${display$2('flex')}
+    ${styles$19}
+    ${'' /* Button specific styles */}
+    @layer base {
+        .control {
+            font: inherit;
+            border: none;
+            text-align: start;
+        }
+    }
 `;
 
-  const template$x = html `
-    <template>step</template>
+  const template$x = (context, definition) => html `
+    <template slot="step">
+        <div class="
+            container
+            ${x => (x.stepInternals.orientation === 'vertical' ? 'vertical' : '')}
+            ${x => (x.stepInternals.last ? 'last' : '')}
+        ">
+            <button
+                class="control"
+                part="control"
+                ?autofocus="${x => x.autofocus}"
+                ?disabled="${x => x.disabled}"
+                form="${x => x.formId}"
+                formaction="${x => x.formaction}"
+                formenctype="${x => x.formenctype}"
+                formmethod="${x => x.formmethod}"
+                formnovalidate="${x => x.formnovalidate}"
+                formtarget="${x => x.formtarget}"
+                name="${x => x.name}"
+                type="${x => x.type}"
+                value="${x => x.value}"
+                tabindex="${x => x.tabIndex}"
+                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-expanded="${x => x.ariaExpanded}"
+                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-pressed="${x => x.ariaPressed}"
+                aria-relevant="${x => x.ariaRelevant}"
+                aria-roledescription="${x => x.ariaRoledescription}"
+                ${ref('control')}
+            >
+                <div class="icon"> 
+                    <div class="icon-slot"><slot ${slotted('defaultSlottedContent')}></slot></div>
+                    <div class="icon-severity">
+                        ${when(x => x.severity === Severity.error, html `<${iconExclamationMarkTag}></${iconExclamationMarkTag}>`)}
+                        ${when(x => x.severity === Severity.warning, html `<${iconTriangleFilledTag}></${iconTriangleFilledTag}>`)}
+                        ${when(x => x.severity === Severity.success, html `<${iconCheckTag}></${iconCheckTag}>`)}
+                    </div>
+                </div>
+                <div class="content">
+                    <div class="title-wrapper">
+                        ${startSlotTemplate(context, definition)}
+                        <div class="title"><slot name="title"></slot></div>
+                        ${endSlotTemplate(context, definition)}
+                        <div class="line"></div>
+                    </div>
+                    <div class="subtitle">
+                        <slot name="subtitle"></slot>
+                    </div>
+                </div>
+            </button>
+            ${severityTextTemplate}
+        </div>
+    </template>
 `;
 
+  const StepSeverity = Severity;
+
   /**
    * A nimble-styled step for a stepper
    */
-  class Step extends FoundationElement {
+  class Step extends mixinSeverityPattern(Button$2) {
+      constructor() {
+          super(...arguments);
+          /**
+           * @public
+           * @remarks
+           * HTML Attribute: disabled
+           */
+          this.severity = StepSeverity.default;
+          /**
+           * @public
+           * @remarks
+           * HTML Attribute: readonly
+           */
+          this.readOnly = false;
+          /**
+           * @public
+           * @remarks
+           * HTML Attribute: selected
+           */
+          this.selected = false;
+          /**
+           * @internal
+           */
+          this.stepInternals = new StepInternals();
+      }
   }
+  __decorate([
+      attr()
+  ], Step.prototype, "severity", void 0);
+  __decorate([
+      attr({ attribute: 'readonly', mode: 'boolean' })
+  ], Step.prototype, "readOnly", void 0);
+  __decorate([
+      attr({ mode: 'boolean' })
+  ], Step.prototype, "selected", void 0);
+  __decorate([
+      attr({ attribute: 'tabindex', converter: nullableNumberConverter })
+  ], Step.prototype, "tabIndex", void 0);
   const nimbleStep = Step.compose({
       baseName: 'step',
       template: template$x,
-      styles: styles$A
+      styles: styles$A,
+      shadowOptions: {
+          delegatesFocus: true
+      }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());
 
   const styles$z = css `
-    ${display$2('flex')}
+    ${display$2('inline-flex')}
+
+    :host {
+        border: none;
+        gap: 0px;
+    }
 `;
 
+  /**
+   * Observable class to subscribe to changes in the page's device pixel ratio
+   * Based on: https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges/#the-less-code-and-more-flexible-js-solution
+   */
+  class DevicePixelRatio {
+      constructor() {
+          const update = () => {
+              this.current = window.devicePixelRatio;
+              window
+                  .matchMedia(`(resolution: ${this.current}x)`)
+                  .addEventListener('change', update, { once: true });
+          };
+          update();
+      }
+  }
+  __decorate([
+      observable
+  ], DevicePixelRatio.prototype, "current", void 0);
+  const devicePixelRatio = new DevicePixelRatio();
+
   const template$w = html `
-    <template>stepper: <slot></slot></template>
+    <style>:host{--ni-private-device-resolution: ${() => devicePixelRatio.current};}</style>
+    <slot name="step"></slot>
 `;
 
   /**
@@ -77907,7 +78681,7 @@ focus outline in that case.
       .register(nimbleTableColumnText());
 
   const styles$h = css `
-    ${styles$16}
+    ${styles$15}
 
     .tabpanel {
         overflow: auto;