@ni/ok-components 0.3.1 → 0.3.3

package/dist/all-components-bundle.js

@@ -13466,6 +13466,12 @@
            * @internal
            */
           this.direction = Direction.ltr;
+          /**
+           * The collection of focusable toolbar controls.
+           *
+           * @internal
+           */
+          this.focusableElements = [];
           /**
            * The orientation of the toolbar.
            *
@@ -13486,7 +13492,7 @@
       }
       set activeIndex(value) {
           if (this.$fastController.isConnected) {
-              this._activeIndex = limit(0, this.focusableElements.length - 1, value);
+              this._activeIndex = limit(0, this.focusableElements.length > 0 ? this.focusableElements.length - 1 : 0, value);
               Observable.notify(this, "activeIndex");
           }
       }
@@ -13501,7 +13507,7 @@
        * @internal
        */
       mouseDownHandler(e) {
-          const activeIndex = this.focusableElements?.findIndex(x => x.contains(e.target));
+          const activeIndex = this.focusableElements.findIndex(x => x.contains(e.target));
           if (activeIndex > -1 && this.activeIndex !== activeIndex) {
               this.setFocusedElement(activeIndex);
           }
@@ -13558,7 +13564,7 @@
               return !e.target.closest("[role=radiogroup]");
           }
           const nextIndex = this.activeIndex + incrementer;
-          if (this.focusableElements[nextIndex]) {
+          if (this.focusableElements.length > 0 && this.focusableElements[nextIndex]) {
               e.preventDefault();
           }
           this.setFocusedElement(nextIndex);
@@ -13581,7 +13587,7 @@
        * @internal
        */
       reduceFocusableElements() {
-          const previousFocusedElement = this.focusableElements?.[this.activeIndex];
+          const previousFocusedElement = this.focusableElements[this.activeIndex];
           this.focusableElements = this.allSlottedItems.reduce(Toolbar.reduceFocusableItems, []);
           // If the previously active item is still focusable, adjust the active index to the
           // index of that item.
@@ -13598,7 +13604,8 @@
       setFocusedElement(activeIndex = this.activeIndex) {
           this.activeIndex = activeIndex;
           this.setFocusableElements();
-          if (this.focusableElements[this.activeIndex] &&
+          if (this.focusableElements.length > 0 &&
+              this.focusableElements[this.activeIndex] &&
               // Don't focus the toolbar element if some event handlers moved
               // the focus on another element in the page.
               this.contains(getRootActiveElement(this))) {
@@ -17550,16 +17557,14 @@
         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;
+        padding: 0;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        width: 100%;
     }
-    
+
     :host([severity="error"]) .severity-text {
         display: block;
         color: ${failColor};
@@ -17664,9 +17669,6 @@
         ${display$2('inline-flex')}
         ${styles$1g}
         :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;
@@ -17680,21 +17682,36 @@
             width: 100%;
             height: 100%;
             position: relative;
+            list-style: none;
+            --ni-private-step-content-height: calc(${smallPadding} + ${controlSlimHeight} + ${errorTextFontLineHeight});
+            --ni-private-step-content-offset: calc(${controlHeight} + ${smallPadding});
         }
 
-        .control { 
-            display: inline-flex;
-            align-items: start;
-            justify-content: flex-start;
+        .control {
+            display: inline-grid;
             height: 100%;
             width: 100%;
+            grid-template-areas:
+                "icon top-spacer top-spacer"
+                "icon title line"
+                "icon subtitle subtitle";
+            grid-template-columns:
+                ${controlHeight} ${'' /* Icon width */}
+                min-content ${'' /* Show the full title and subtitle */}
+                1fr; ${'' /* Line is only fr unit so fills remaining space */}
+            grid-template-rows:
+                ${smallPadding}
+                ${controlSlimHeight}
+                min-content;
+            column-gap: 4px;
+
+            align-items: start;
+            margin: 0;
+            padding: 0;
             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);
@@ -17708,6 +17725,70 @@
             --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);
         }
 
+        .container.last .control {
+            grid-template-areas:
+                "icon top-spacer"
+                "icon title"
+                "icon subtitle";
+            grid-template-columns:
+                ${controlHeight}
+                min-content;
+            grid-template-rows:
+                ${smallPadding}
+                ${controlSlimHeight}
+                min-content;
+        }
+
+        .container.vertical .control {
+            ${'' /*
+Defines an interaction area clip-path that leaves out the severity text so it is easily selectable:
+1----------------2
+|    title       |
+|    subtitle    |
+|  4-------------3
+|  | severity-text
+|  |
+6--5
+*/}
+            clip-path: polygon(
+                0% 0%,
+                100% 0%,
+                100% var(--ni-private-step-content-height),
+                var(--ni-private-step-content-offset) var(--ni-private-step-content-height),
+                var(--ni-private-step-content-offset) 100%,
+                0% 100%
+            );
+            grid-template-areas:
+                "icon top-spacer"
+                "icon title"
+                "icon subtitle"
+                "line subtitle"
+                "line .";
+            grid-template-columns:
+                ${controlHeight}
+                min-content;
+            grid-template-rows:
+                ${smallPadding}
+                ${controlSlimHeight}
+                calc(${controlHeight} - ${smallPadding} - ${controlSlimHeight})
+                min-content
+                1fr;
+        }
+
+        .container.vertical.last .control {
+            grid-template-areas:
+                "icon top-spacer"
+                "icon title"
+                "icon subtitle";
+            grid-template-columns:
+                ${controlHeight}
+                min-content;
+            grid-template-rows:
+                ${smallPadding}
+                ${controlSlimHeight}
+                min-content;
+        }
+
         :host([severity="error"]) .control {
             --ni-private-step-icon-color: ${failColor};
             --ni-private-step-icon-border-color: ${failColor};
@@ -17741,6 +17822,7 @@
         }
 
         .icon {
+            grid-area: icon;
             display: inline-flex;
             align-items: center;
             justify-content: center;
@@ -17760,7 +17842,7 @@
                 ${'' /* 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)),
+                var(--ni-private-step-icon-background-color) calc(100% - 1px/var(--ni-private-device-pixel-ratio, 1)),
                 transparent 100%
             );
             background-origin: border-box;
@@ -17798,18 +17880,22 @@
                 outline-offset ${smallDelay} ease-in-out;
         }
 
-        .icon-slot {
+        .current-label {
+            ${accessiblyHidden}
+        }
+
+        .step-indicator {
             display: contents;
         }
 
-        :host([severity="error"]) .icon-slot,
-        :host([severity="warning"]) .icon-slot,
-        :host([severity="success"]) .icon-slot {
+        :host([severity="error"]) .step-indicator,
+        :host([severity="warning"]) .step-indicator,
+        :host([severity="success"]) .step-indicator {
             display: none;
         }
 
-        :host([selected]) .icon-slot,
-        :host([disabled]) .icon-slot {
+        :host([selected]) .step-indicator,
+        :host([disabled]) .step-indicator {
             display: contents;
         }
 
@@ -17828,62 +17914,80 @@
             display: none;
         }
 
-        .content {
-            display: inline-flex;
-            ${'' /* Control width - icon size */}
-            width: calc(100% - 32px);
-            flex-direction: column;
-            padding-top: ${smallPadding};
-            padding-bottom: ${smallPadding};
+        .top-spacer {
+            grid-area: top-spacer;
+            height: ${smallPadding};
         }
 
-        .title-wrapper {
-            display: inline-flex;
+        .title {
+            grid-area: title;
+            min-width: min-content;
             height: ${controlSlimHeight};
-            flex-direction: row;
-            align-items: center;
-            justify-content: start;
-            gap: ${smallPadding};
+            display: inline-block;
+            align-content: center;
             font: ${bodyFont};
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         [part='start'] {
             display: none;
         }
 
-        .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='end'] {
             display: none;
         }
-        
+
         .line {
+            grid-area: line;
+            align-self: center;
+            justify-self: center;
             display: inline-block;
-            flex: 1;
+            width: 100%;
             min-width: ${standardPadding};
             height: 1px;
+            min-height: 1px;
             background: var(--ni-private-step-line-color);
+            background-clip: content-box;
             transform: scale(1, 1);
             transition:
                 background-color ${smallDelay} ease-in-out,
                 transform ${smallDelay} ease-in-out;
         }
 
+        .container.last .line {
+            display: none;
+        }
+
+        .container.vertical .line {
+            width: 1px;
+            min-width: 1px;
+            height: 100%;
+            padding-top: ${smallPadding};
+            min-height: ${standardPadding};
+        }
+
         .subtitle {
+            grid-area: subtitle;
+            display: inline-block;
+            min-width: min-content;
+            height: ${errorTextFontLineHeight};
+            align-content: center;
             font: ${errorTextFont};
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            ${'' /* Content width */}
-            max-width: 100%;
+        }
+
+        .severity-text {
+            left: 0px;
+            top: var(--ni-private-step-content-height);
+        }
+
+        .container.vertical .severity-text {
+            width: calc(100% - var(--ni-private-step-content-offset));
+            left: var(--ni-private-step-content-offset);
         }
     }
 
@@ -17927,6 +18031,10 @@
         .control:hover .line {
             transform: scale(1, 2);
         }
+
+        .container.vertical .control:hover .line {
+            transform: scale(2, 1);
+        }
     }
 
     @layer focusVisible {
@@ -17966,7 +18074,7 @@
             --ni-private-step-icon-outline-inset-color: ${borderHoverColor};
             --ni-private-step-line-color: ${borderHoverColor};
         }
-    
+
         .control${focusVisible} .icon {
             border-width: 2px;
         }
@@ -17979,6 +18087,10 @@
         .control${focusVisible} .line {
             transform: scale(1, 2);
         }
+
+        .container.vertical .control${focusVisible} .line {
+            transform: scale(2, 1);
+        }
     }
 
     @layer active {
@@ -18148,6 +18260,7 @@
         ${overflow('severityHasOverflow')}
         title="${x => (x.severityHasOverflow && x.severityText ? x.severityText : undefined)}"
         aria-live="polite"
+        @click="${(_x, c) => c.event.stopImmediatePropagation()}"
     >${x => x.severityText}</div>`;
 
   const Severity = {
@@ -19234,9 +19347,83 @@
   registerIconSvg('icon-check', IconCheck);
   const iconCheckTag = 'nimble-icon-check';
 
+  const coreLabelDefaults = {
+      popupDismissLabel: 'Close',
+      numericIncrementLabel: 'Increment',
+      numericDecrementLabel: 'Decrement',
+      popupIconErrorLabel: 'Error',
+      popupIconWarningLabel: 'Warning',
+      popupIconCompletedLabel: 'Completed',
+      popupIconCurrentLabel: 'Current',
+      popupIconInformationLabel: 'Information',
+      filterSearchLabel: 'Search',
+      filterNoResultsLabel: 'No items found',
+      loadingLabel: 'Loading…',
+      scrollBackwardLabel: 'Scroll backward',
+      scrollForwardLabel: 'Scroll forward',
+      itemRemoveLabel: 'Remove'
+  };
+
+  const popupDismissLabel = DesignToken.create({
+      name: 'popup-dismiss-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.popupDismissLabel);
+  const numericDecrementLabel = DesignToken.create({
+      name: 'numeric-decrement-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.numericDecrementLabel);
+  const numericIncrementLabel = DesignToken.create({
+      name: 'numeric-increment-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.numericIncrementLabel);
+  const popupIconErrorLabel = DesignToken.create({
+      name: 'popup-icon-error-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.popupIconErrorLabel);
+  const popupIconWarningLabel = DesignToken.create({
+      name: 'popup-icon-warning-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.popupIconWarningLabel);
+  const popupIconCompletedLabel = DesignToken.create({
+      name: 'popup-icon-completed-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.popupIconCompletedLabel);
+  const popupIconCurrentLabel = DesignToken.create({
+      name: 'popup-icon-current-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.popupIconCurrentLabel);
+  const popupIconInformationLabel = DesignToken.create({
+      name: 'popup-icon-information-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.popupIconInformationLabel);
+  const filterSearchLabel = DesignToken.create({
+      name: 'filter-search-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.filterSearchLabel);
+  const filterNoResultsLabel = DesignToken.create({
+      name: 'filter-no-results-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.filterNoResultsLabel);
+  const loadingLabel = DesignToken.create({
+      name: 'loading-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.loadingLabel);
+  const scrollBackwardLabel = DesignToken.create({
+      name: 'scroll-backward-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.scrollBackwardLabel);
+  const scrollForwardLabel = DesignToken.create({
+      name: 'scroll-forward-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.scrollForwardLabel);
+  const itemRemoveLabel = DesignToken.create({
+      name: 'item-remove-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.itemRemoveLabel);
+
   const template$V = (context, definition) => html `
     <template slot="step">
-        <div class="
+        <li class="
             container
             ${x => (x.stepInternals.orientation === 'vertical' ? 'vertical' : '')}
             ${x => (x.stepInternals.last ? 'last' : '')}
@@ -19275,28 +19462,22 @@
                 aria-roledescription="${x => x.ariaRoledescription}"
                 ${ref('control')}
             >
-                <div class="icon"> 
-                    <div class="icon-slot"><slot ${slotted('defaultSlottedContent')}></slot></div>
+                <div class="icon">
+                    <span class="current-label">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>
+                    <div class="step-indicator"><slot name="step-indicator"><span aria-hidden="true">${x => x.stepInternals.position}</span></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>
+                        ${when(x => x.severity === Severity.error, html `<${iconExclamationMarkTag} role="img" aria-label="${x => popupIconErrorLabel.getValueFor(x)}"></${iconExclamationMarkTag}>`)}
+                        ${when(x => x.severity === Severity.warning, html `<${iconTriangleFilledTag} role="img" aria-label="${x => popupIconWarningLabel.getValueFor(x)}"></${iconTriangleFilledTag}>`)}
+                        ${when(x => x.severity === Severity.success, html `<${iconCheckTag} role="img" aria-label="${x => popupIconCompletedLabel.getValueFor(x)}"></${iconCheckTag}>`)}
                     </div>
                 </div>
+                <div class="top-spacer"></div>
+                <div class="title">${startSlotTemplate(context, definition)}<slot name="title"></slot>${endSlotTemplate(context, definition)}</div>
+                <div class="line"></div>
+                <div class="subtitle"><slot name="subtitle"></slot></div>
             </a>
             ${severityTextTemplate}
-        </div>
+        </li>
     </template>
 `;
 
@@ -19313,6 +19494,7 @@
       constructor() {
           this.orientation = StepperOrientation.horizontal;
           this.last = false;
+          this.position = 1;
       }
   }
   __decorate([
@@ -19321,6 +19503,9 @@
   __decorate([
       observable
   ], StepInternals.prototype, "last", void 0);
+  __decorate([
+      observable
+  ], StepInternals.prototype, "position", void 0);
 
   const AnchorStepSeverity = Severity;
 
@@ -19733,70 +19918,6 @@
   registerIconSvg('icon-arrow-expander-right', IconArrowExpanderRight);
   const iconArrowExpanderRightTag = 'nimble-icon-arrow-expander-right';
 
-  const coreLabelDefaults = {
-      popupDismissLabel: 'Close',
-      numericIncrementLabel: 'Increment',
-      numericDecrementLabel: 'Decrement',
-      popupIconErrorLabel: 'Error',
-      popupIconWarningLabel: 'Warning',
-      popupIconInformationLabel: 'Information',
-      filterSearchLabel: 'Search',
-      filterNoResultsLabel: 'No items found',
-      loadingLabel: 'Loading…',
-      scrollBackwardLabel: 'Scroll backward',
-      scrollForwardLabel: 'Scroll forward',
-      itemRemoveLabel: 'Remove'
-  };
-
-  const popupDismissLabel = DesignToken.create({
-      name: 'popup-dismiss-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.popupDismissLabel);
-  const numericDecrementLabel = DesignToken.create({
-      name: 'numeric-decrement-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.numericDecrementLabel);
-  const numericIncrementLabel = DesignToken.create({
-      name: 'numeric-increment-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.numericIncrementLabel);
-  const popupIconErrorLabel = DesignToken.create({
-      name: 'popup-icon-error-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.popupIconErrorLabel);
-  const popupIconWarningLabel = DesignToken.create({
-      name: 'popup-icon-warning-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.popupIconWarningLabel);
-  const popupIconInformationLabel = DesignToken.create({
-      name: 'popup-icon-information-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.popupIconInformationLabel);
-  const filterSearchLabel = DesignToken.create({
-      name: 'filter-search-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.filterSearchLabel);
-  const filterNoResultsLabel = DesignToken.create({
-      name: 'filter-no-results-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.filterNoResultsLabel);
-  const loadingLabel = DesignToken.create({
-      name: 'loading-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.loadingLabel);
-  const scrollBackwardLabel = DesignToken.create({
-      name: 'scroll-backward-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.scrollBackwardLabel);
-  const scrollForwardLabel = DesignToken.create({
-      name: 'scroll-forward-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.scrollForwardLabel);
-  const itemRemoveLabel = DesignToken.create({
-      name: 'item-remove-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.itemRemoveLabel);
-
   const template$S = (context, definition) => html `
     <div
         class="tab-bar"
@@ -26165,6 +26286,8 @@ so this becomes the fallback color for the slot */ ''}
       numericIncrement: numericIncrementLabel,
       popupIconError: popupIconErrorLabel,
       popupIconWarning: popupIconWarningLabel,
+      popupIconCompleted: popupIconCompletedLabel,
+      popupIconCurrent: popupIconCurrentLabel,
       popupIconInformation: popupIconInformationLabel,
       filterSearch: filterSearchLabel,
       filterNoResults: filterNoResultsLabel,
@@ -26197,6 +26320,12 @@ so this becomes the fallback color for the slot */ ''}
   __decorate([
       attr({ attribute: 'popup-icon-warning' })
   ], LabelProviderCore.prototype, "popupIconWarning", void 0);
+  __decorate([
+      attr({ attribute: 'popup-icon-completed' })
+  ], LabelProviderCore.prototype, "popupIconCompleted", void 0);
+  __decorate([
+      attr({ attribute: 'popup-icon-current' })
+  ], LabelProviderCore.prototype, "popupIconCurrent", void 0);
   __decorate([
       attr({ attribute: 'popup-icon-information' })
   ], LabelProviderCore.prototype, "popupIconInformation", void 0);
@@ -66201,7 +66330,7 @@ ${nextLine.slice(indentLevel + 2)}`;
 
   const template$x = (context, definition) => html `
     <template slot="step">
-        <div class="
+        <li class="
             container
             ${x => (x.stepInternals.orientation === 'vertical' ? 'vertical' : '')}
             ${x => (x.stepInternals.last ? 'last' : '')}
@@ -66244,28 +66373,22 @@ ${nextLine.slice(indentLevel + 2)}`;
                 aria-roledescription="${x => x.ariaRoledescription}"
                 ${ref('control')}
             >
-                <div class="icon"> 
-                    <div class="icon-slot"><slot ${slotted('defaultSlottedContent')}></slot></div>
+                <div class="icon">
+                    <span class="current-label">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>
+                    <div class="step-indicator"><slot name="step-indicator"><span aria-hidden="true">${x => x.stepInternals.position}</span></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>
+                        ${when(x => x.severity === Severity.error, html `<${iconExclamationMarkTag} role="img" aria-label="${x => popupIconErrorLabel.getValueFor(x)}"></${iconExclamationMarkTag}>`)}
+                        ${when(x => x.severity === Severity.warning, html `<${iconTriangleFilledTag} role="img" aria-label="${x => popupIconWarningLabel.getValueFor(x)}"></${iconTriangleFilledTag}>`)}
+                        ${when(x => x.severity === Severity.success, html `<${iconCheckTag} role="img" aria-label="${x => popupIconCompletedLabel.getValueFor(x)}"></${iconCheckTag}>`)}
                     </div>
                 </div>
+                <div class="top-spacer"></div>
+                <div class="title">${startSlotTemplate(context, definition)}<slot name="title"></slot>${endSlotTemplate(context, definition)}</div>
+                <div class="line"></div>
+                <div class="subtitle"><slot name="subtitle"></slot></div>
             </button>
             ${severityTextTemplate}
-        </div>
+        </li>
     </template>
 `;
 
@@ -66328,7 +66451,23 @@ ${nextLine.slice(indentLevel + 2)}`;
 
     :host {
         border: none;
-        gap: 0px;
+        gap: ${smallPadding};
+    }
+
+    :host([orientation="vertical"]) {
+        flex-direction: column;
+    }
+
+    ol {
+        display: contents;
+    }
+
+    slot[name="step"]::slotted(*) {
+        flex-grow: 1;
+    }
+
+    slot[name="step"]::slotted(:last-child) {
+        flex-grow: 0;
     }
 `;
 
@@ -66352,16 +66491,44 @@ ${nextLine.slice(indentLevel + 2)}`;
   ], DevicePixelRatio.prototype, "current", void 0);
   const devicePixelRatio = new DevicePixelRatio();
 
-  const template$w = html `
-    <style>:host{--ni-private-device-resolution: ${() => devicePixelRatio.current};}</style>
-    <slot name="step"></slot>
-`;
+  const template$w = html `<ol><slot
+        style="--ni-private-device-pixel-ratio: ${() => devicePixelRatio.current};"
+        name="step"
+        ${slotted('steps')}
+    ></slot></ol>`;
 
   /**
    * A nimble-styled stepper
    */
   class Stepper extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          this.orientation = StepperOrientation.horizontal;
+      }
+      orientationChanged() {
+          this.updateStepInternals();
+      }
+      stepsChanged() {
+          this.updateStepInternals();
+      }
+      updateStepInternals() {
+          if (!this.steps) {
+              return;
+          }
+          const lastIndex = this.steps.length - 1;
+          this.steps.forEach((step, index) => {
+              step.stepInternals.orientation = this.orientation;
+              step.stepInternals.last = index === lastIndex;
+              step.stepInternals.position = index + 1;
+          });
+      }
   }
+  __decorate([
+      attr
+  ], Stepper.prototype, "orientation", void 0);
+  __decorate([
+      observable
+  ], Stepper.prototype, "steps", void 0);
   const nimbleStepper = Stepper.compose({
       baseName: 'stepper',
       template: template$w,