@ni/ok-components 0.3.8 → 0.3.9

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;
@@ -19460,6 +19484,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>
@@ -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()
@@ -66527,6 +66561,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 +66615,15 @@ ${nextLine.slice(indentLevel + 2)}`;
            */
           this.stepInternals = new StepInternals();
       }
+      /**
+       * @internal
+       */
+      onClick(e) {
+          if (this.disabled || this.readOnly) {
+              e.preventDefault();
+              e.stopImmediatePropagation();
+          }
+      }
   }
   __decorate([
       attr()