@ni/ok-components 0.3.8 → 0.3.10

package/dist/all-components-bundle.js

@@ -17817,6 +17817,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         :host([selected]) .control {
             --ni-private-step-icon-color: ${borderHoverColor};
             --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-border-width: 2px;
             --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};
@@ -17856,10 +17857,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
                 box-shadow ${smallDelay} ease-in-out;
         }
 
-        :host([selected]) .icon {
-            --ni-private-step-icon-border-width: 2px;
-        }
-
         .icon::before {
             content: '';
             position: absolute;
@@ -17869,7 +17866,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             outline-color: var(--ni-private-step-icon-outline-inset-color);
             outline-style: solid;
             outline-width: 0px;
-            outline-offset: 0px;
+            ${'' /* outline-offset should always be <=-1 to always render inset */}
+            outline-offset: -1px;
             border: none;
             border-radius: 100%;
             color: transparent;
@@ -17947,9 +17945,9 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             min-width: ${standardPadding};
             height: 1px;
             min-height: 1px;
+            transform: scale(1, 1);
             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;
@@ -17963,8 +17961,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             width: 1px;
             min-width: 1px;
             height: 100%;
-            padding-top: ${smallPadding};
             min-height: ${standardPadding};
+            padding-top: ${smallPadding};
         }
 
         .subtitle {
@@ -17993,6 +17991,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     @layer hover {
         .control:hover {
             --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-border-width: 2px;
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
             --ni-private-step-line-color: ${borderHoverColor};
         }
@@ -18023,8 +18022,12 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
 
-        .control:hover .icon {
-            --ni-private-step-icon-border-width: 2px;
+        :host([readonly]) .control:hover {
+            --ni-private-step-icon-color: revert-layer;
+            --ni-private-step-icon-border-color: revert-layer;
+            --ni-private-step-icon-border-width: revert-layer;
+            --ni-private-step-icon-background-size: revert-layer;
+            --ni-private-step-line-color: revert-layer;
         }
 
         .control:hover .line {
@@ -18034,11 +18037,16 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         .container.vertical .control:hover .line {
             transform: scale(2, 1);
         }
+
+        :host([readonly]) .container .control:hover .line {
+            transform: revert-layer;
+        }
     }
 
     @layer focusVisible {
         .control${focusVisible} {
             --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-border-width: 2px;
             --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};
@@ -18074,10 +18082,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
 
-        .control${focusVisible} .icon {
-            --ni-private-step-icon-border-width: 2px;
-        }
-
         .control${focusVisible} .icon::before {
             outline-width: ${borderWidth};
             ${'' /* -1px control to outline edge -2px focus border -1px inset gap */}
@@ -18096,6 +18100,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     @layer active {
         .control:active {
             --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-border-width: 2px;
             --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};
@@ -18127,26 +18132,45 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
 
-        .control:active .icon {
-            --ni-private-step-icon-border-width: 2px;
+        :host([readonly]) .control:active {
+            --ni-private-step-icon-color: revert-layer;
+            --ni-private-step-icon-border-color: revert-layer;
+            --ni-private-step-icon-border-width: revert-layer;
+            --ni-private-step-icon-background-color: revert-layer;
+            --ni-private-step-icon-background-size: revert-layer;
+            --ni-private-step-line-color: revert-layer;
         }
 
         .control:active .icon::before {
             outline-width: 0px;
-            outline-offset: 0px;
+            outline-offset: -1px;
+        }
+
+        :host([readonly]) .control:active .icon::before {
+            outline-width: revert-layer;
+            outline-offset: revert-layer;
         }
 
         .control:active .line {
             transform: scale(1, 1);
         }
+
+        :host([readonly]) .control:active .line {
+            transform: revert-layer;
+        }
     }
 
     @layer disabled {
+        :host([readonly]) .control {
+            cursor: default;
+        }
+
         :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-border-width: 1px;
             --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;
@@ -19421,11 +19445,17 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       cssCustomPropertyName: null
   }).withDefault(coreLabelDefaults.itemRemoveLabel);
 
+  /**
+   * Orientation of steppers.
+   * @public
+   */
+  const StepperOrientation = Orientation;
+
   const template$V = (context, definition) => html `
     <template slot="step">
         <li class="
             container
-            ${x => (x.stepInternals.orientation === 'vertical' ? 'vertical' : '')}
+            ${x => (x.stepInternals.orientation === StepperOrientation.vertical ? 'vertical' : '')}
             ${x => (x.stepInternals.last ? 'last' : '')}
         ">
             <a
@@ -19460,6 +19490,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
                 aria-owns="${x => x.ariaOwns}"
                 aria-relevant="${x => x.ariaRelevant}"
                 aria-roledescription="${x => x.ariaRoledescription}"
+                @click="${(x, c) => x.onClick(c.event)}"
                 ${ref('control')}
             >
                 <div class="icon-background"></div>
@@ -19482,12 +19513,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     </template>
 `;
 
-  /**
-   * Orientation of steppers.
-   * @public
-   */
-  const StepperOrientation = Orientation;
-
   /**
    * Internal properties configurable for a step
    */
@@ -19545,6 +19570,15 @@ Defines an interaction area clip-path that leaves out the severity text so it is
            */
           this.stepInternals = new StepInternals();
       }
+      /**
+       * @internal
+       */
+      onClick(e) {
+          if (this.disabled || this.readOnly) {
+              e.preventDefault();
+              e.stopImmediatePropagation();
+          }
+      }
   }
   __decorate([
       attr()
@@ -23583,6 +23617,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
   registerIconSvg('icon-arrow-expander-up', IconArrowExpanderUp);
+  const iconArrowExpanderUpTag = 'nimble-icon-arrow-expander-up';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
@@ -66488,7 +66523,7 @@ ${nextLine.slice(indentLevel + 2)}`;
     <template slot="step">
         <li class="
             container
-            ${x => (x.stepInternals.orientation === 'vertical' ? 'vertical' : '')}
+            ${x => (x.stepInternals.orientation === StepperOrientation.vertical ? 'vertical' : '')}
             ${x => (x.stepInternals.last ? 'last' : '')}
         ">
             <button
@@ -66527,6 +66562,7 @@ ${nextLine.slice(indentLevel + 2)}`;
                 aria-pressed="${x => x.ariaPressed}"
                 aria-relevant="${x => x.ariaRelevant}"
                 aria-roledescription="${x => x.ariaRoledescription}"
+                @click="${(x, c) => x.onClick(c.event)}"
                 ${ref('control')}
             >
                 <div class="icon-background"></div>
@@ -66580,6 +66616,15 @@ ${nextLine.slice(indentLevel + 2)}`;
            */
           this.stepInternals = new StepInternals();
       }
+      /**
+       * @internal
+       */
+      onClick(e) {
+          if (this.disabled || this.readOnly) {
+              e.preventDefault();
+              e.stopImmediatePropagation();
+          }
+      }
   }
   __decorate([
       attr()
@@ -66608,15 +66653,61 @@ ${nextLine.slice(indentLevel + 2)}`;
 
     :host {
         border: none;
-        gap: ${smallPadding};
     }
 
     :host([orientation="vertical"]) {
         flex-direction: column;
     }
 
-    ol {
-        display: contents;
+    .scroll-button.start {
+        width: ${controlHeight};
+        height: ${controlHeight};
+        margin-right: ${smallPadding};
+        margin-bottom: 0px;
+    }
+
+    :host([orientation="vertical"]) .scroll-button.start {
+        margin-right: 0px;
+        margin-bottom: ${smallPadding};
+    }
+
+    .list {
+        flex-grow: 1;
+        display: inline-flex;
+        gap: ${smallPadding};
+        scrollbar-width: none;
+        padding: 0;
+        margin: 0;
+
+        flex-direction: row;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        width: max-content;
+        max-width: 100%;
+        height: auto;
+        max-height: none;
+    }
+
+    :host([orientation="vertical"]) .list {
+        flex-direction: column;
+        overflow-x: hidden;
+        overflow-y: scroll;
+        width: auto;
+        max-width: none;
+        height: max-content;
+        max-height: 100%;
+    }
+
+    .scroll-button.end {
+        width: ${controlHeight};
+        height: ${controlHeight};
+        margin-left: ${smallPadding};
+        margin-top: 0px;
+    }
+
+    :host([orientation="vertical"]) .scroll-button.end {
+        margin-left: 0px;
+        margin-top: ${smallPadding};
     }
 
     slot[name="step"]::slotted(*) {
@@ -66628,10 +66719,35 @@ ${nextLine.slice(indentLevel + 2)}`;
     }
 `;
 
-  const template$w = html `<ol><slot
-        name="step"
-        ${slotted('steps')}
-    ></slot></ol>`;
+  const template$w = html `
+    ${when(x => x.showScrollButtons, html `
+        <${buttonTag}
+            content-hidden
+            class="scroll-button start"
+            appearance="${ButtonAppearance.ghost}"
+            @click="${x => x.onScrollStartClick()}"
+            ${ref('startScrollButton')}
+        >
+            ${x => scrollForwardLabel.getValueFor(x)}
+            ${when(x => x.isHorizontal(), html `<${iconArrowExpanderLeftTag} slot="start"></${iconArrowExpanderLeftTag}>`, html `<${iconArrowExpanderUpTag} slot="start"></${iconArrowExpanderUpTag}>`)}
+        </${buttonTag}>
+    `)}
+    <ol ${ref('list')} class="list"><slot
+            name="step"
+            ${slotted('steps')}
+        ></slot></ol>
+    ${when(x => x.showScrollButtons, html `
+        <${buttonTag}
+            content-hidden
+            class="scroll-button end"
+            appearance="${ButtonAppearance.ghost}"
+            @click="${x => x.onScrollEndClick()}"
+        >
+            ${x => scrollBackwardLabel.getValueFor(x)}
+            ${when(x => x.isHorizontal(), html `<${iconArrowExpanderRightTag} slot="start"></${iconArrowExpanderRightTag}>`, html `<${iconArrowExpanderDownTag} slot="start"></${iconArrowExpanderDownTag}>`)}
+        </${buttonTag}>
+    `)}
+`;
 
   /**
    * A nimble-styled stepper
@@ -66640,12 +66756,70 @@ ${nextLine.slice(indentLevel + 2)}`;
       constructor() {
           super(...arguments);
           this.orientation = StepperOrientation.horizontal;
+          /** @internal */
+          this.showScrollButtons = false;
+      }
+      /** @internal */
+      onScrollStartClick() {
+          if (this.isHorizontal()) {
+              this.list.scrollBy({
+                  left: -this.list.clientWidth,
+                  behavior: 'smooth'
+              });
+          }
+          else {
+              this.list.scrollBy({
+                  top: -this.list.clientHeight,
+                  behavior: 'smooth'
+              });
+          }
+      }
+      /** @internal */
+      onScrollEndClick() {
+          if (this.isHorizontal()) {
+              this.list.scrollBy({
+                  left: this.list.clientWidth,
+                  behavior: 'smooth'
+              });
+          }
+          else {
+              this.list.scrollBy({
+                  top: this.list.clientHeight,
+                  behavior: 'smooth'
+              });
+          }
+      }
+      /** @internal */
+      connectedCallback() {
+          super.connectedCallback();
+          // Steps fill parent container so can't rely on a resize observer to track their space usage.
+          // Instead directly track each step's occlusion with intersection observer which is more compute intensive.
+          // When available can switch to container scroll state queries, see: https://github.com/ni/nimble/issues/2922
+          this.listIntersectionObserver = new IntersectionObserver(_ => {
+              this.handleListOverflow();
+          }, {
+              root: this.list,
+              threshold: 1.0
+          });
+      }
+      /** @internal */
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.listIntersectionObserver?.disconnect();
+      }
+      /** @internal */
+      isHorizontal() {
+          return this.orientation !== StepperOrientation.vertical;
       }
       orientationChanged() {
           this.updateStepInternals();
       }
       stepsChanged() {
           this.updateStepInternals();
+          this.listIntersectionObserver?.disconnect();
+          if (this.steps) {
+              this.steps.forEach(step => this.listIntersectionObserver?.observe(step));
+          }
       }
       updateStepInternals() {
           if (!this.steps) {
@@ -66653,15 +66827,38 @@ ${nextLine.slice(indentLevel + 2)}`;
           }
           const lastIndex = this.steps.length - 1;
           this.steps.forEach((step, index) => {
-              step.stepInternals.orientation = this.orientation;
+              step.stepInternals.orientation = this.isHorizontal()
+                  ? StepperOrientation.horizontal
+                  : StepperOrientation.vertical;
               step.stepInternals.last = index === lastIndex;
               step.stepInternals.position = index + 1;
           });
       }
+      handleListOverflow() {
+          let listVisibleSize = this.isHorizontal()
+              ? this.list.clientWidth
+              : this.list.clientHeight;
+          if (listVisibleSize !== undefined) {
+              const buttonSize = this.isHorizontal()
+                  ? this.startScrollButton?.clientWidth ?? 0
+                  : this.startScrollButton?.clientHeight ?? 0;
+              listVisibleSize = Math.ceil(listVisibleSize);
+              if (this.showScrollButtons) {
+                  listVisibleSize += buttonSize * 2;
+              }
+              const listScrollSize = this.isHorizontal()
+                  ? this.list.scrollWidth
+                  : this.list.scrollHeight;
+              this.showScrollButtons = listVisibleSize < listScrollSize;
+          }
+      }
   }
   __decorate([
       attr
   ], Stepper.prototype, "orientation", void 0);
+  __decorate([
+      observable
+  ], Stepper.prototype, "showScrollButtons", void 0);
   __decorate([
       observable
   ], Stepper.prototype, "steps", void 0);