@ni/nimble-components 35.12.1 → 35.12.3

package/dist/all-components-bundle.js

@@ -121,6 +121,50 @@
   if ($global.trustedTypes === void 0) {
       $global.trustedTypes = { createPolicy: (n, r) => r };
   }
+  // Shims of globals for SSR environments that load client code in the server module graph
+  // Shim only what is not defined in-case SSR env is loading their own polyfills (which would need to be loaded first).
+  for (const name of [
+      "Node",
+      "Element",
+      "HTMLElement",
+      "ShadowRoot",
+      "Event",
+      "CustomEvent",
+      "MutationObserver",
+      "ResizeObserver",
+      "IntersectionObserver",
+      "CSSStyleSheet"
+  ]) {
+      if (typeof ($global[name]) === "undefined") {
+          $global[name] = class {
+          };
+      }
+  }
+  // Minimal custom elements registry for the react wrapper to leverage for tag names
+  if (typeof ($global.customElements) === "undefined") {
+      const constructorsByName = new Map();
+      const namesByConstructor = new Map();
+      $global.customElements = {
+          define(name, constructor) {
+              if (!constructorsByName.has(name)) {
+                  constructorsByName.set(name, constructor);
+                  namesByConstructor.set(constructor, name);
+              }
+          },
+          get(name) {
+              return constructorsByName.get(name);
+          },
+          getName(constructor) {
+              return namesByConstructor.get(constructor) ?? null;
+          },
+          whenDefined() {
+              return Promise.resolve();
+          },
+          upgrade() {
+              // no-op
+          },
+      };
+  }
   const propConfig = {
       configurable: false,
       enumerable: false,
@@ -250,7 +294,9 @@
       /**
        * Indicates whether the DOM supports the adoptedStyleSheets feature.
        */
-      supportsAdoptedStyleSheets: Array.isArray(document.adoptedStyleSheets) &&
+      supportsAdoptedStyleSheets: typeof document !== "undefined" &&
+          typeof CSSStyleSheet !== "undefined" &&
+          Array.isArray(document.adoptedStyleSheets) &&
           "replace" in CSSStyleSheet.prototype,
       /**
        * Sets the HTML trusted types policy used by the templating engine.
@@ -6913,7 +6959,8 @@
   /**
    * @alpha
    */
-  const supportsElementInternals = ElementInternalsKey in window &&
+  const supportsElementInternals = typeof window !== "undefined" &&
+      ElementInternalsKey in window &&
       "setFormValue" in window[ElementInternalsKey].prototype;
   const InternalsMap = new WeakMap();
   /**
@@ -9021,7 +9068,7 @@
       return false;
   }
 
-  const defaultElement = document.createElement("div");
+  const defaultElement = typeof document === "undefined" ? {} : document.createElement("div");
   function isFastElement(element) {
       return element instanceof FASTElement;
   }
@@ -9195,7 +9242,7 @@
        * @param root - the root to normalize
        */
       static normalizeRoot(root) {
-          return root === defaultElement ? document : root;
+          return (root === defaultElement && typeof document !== "undefined") ? document : root;
       }
   }
   // Caches PropertyTarget instances
@@ -9212,6 +9259,12 @@
    */
   const PropertyTargetManager = Object.freeze({
       getOrCreate(source) {
+          if (typeof document === "undefined") {
+              return {
+                  setProperty() { },
+                  removeProperty() { },
+              };
+          }
           if (propertyTargetCache.has(source)) {
               /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
               return propertyTargetCache.get(source);
@@ -14922,7 +14975,10 @@
    */
   class DocumentElementLang {
       constructor() {
-          this.lang = document.documentElement.lang;
+          this.lang = typeof document === 'undefined' ? '' : document.documentElement.lang;
+          if (typeof document === 'undefined') {
+              return;
+          }
           const observer = new MutationObserver(mutations => {
               for (const mutation of mutations) {
                   if (mutation.type === 'attributes'
@@ -17798,18 +17854,18 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         :host([severity="error"]) .control {
-            --ni-private-step-icon-color: ${failColor};
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
             --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-icon-background-color: ${failColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
             --ni-private-step-line-color: ${failColor};
         }
 
         :host([severity="warning"]) .control {
-            --ni-private-step-icon-color: ${warningColor};
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
             --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-icon-background-color: ${warningColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
             --ni-private-step-line-color: ${warningColor};
         }
 
@@ -17830,6 +17886,27 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
 
+        :host([selected][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-line-color: ${failColor};
+        }
+
+        :host([selected][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-line-color: ${warningColor};
+        }
+
+        :host([selected][severity="success"]) .control {
+            --ni-private-step-icon-color: ${passColor};
+            --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};
+        }
+
         .icon-background {
             grid-area: icon;
             display: inline-block;
@@ -17898,7 +17975,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             display: none;
         }
 
-        :host([selected]) .step-indicator,
         :host([disabled]) .step-indicator {
             display: contents;
         }
@@ -17913,7 +17989,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             display: contents;
         }
 
-        :host([selected]) .icon-severity,
         :host([disabled]) .icon-severity {
             display: none;
         }
@@ -18004,14 +18079,16 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         :host([severity="error"]) .control:hover {
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
             --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-background-size: var(--ni-private-step-icon-background-inset-size);
             --ni-private-step-line-color: ${failColor};
         }
 
         :host([severity="warning"]) .control:hover {
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
             --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-background-size: var(--ni-private-step-icon-background-inset-size);
             --ni-private-step-line-color: ${warningColor};
         }
 
@@ -18023,12 +18100,37 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         :host([selected]) .control:hover {
-            --ni-private-step-icon-color: ${buttonLabelFontColor};
+            --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-inset-size);
+            --ni-private-step-icon-border-width: 3px;
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
             --ni-private-step-line-color: ${borderHoverColor};
         }
 
+        :host([selected][severity="error"]) .control:hover {
+            --ni-private-step-icon-color: ${failColor};
+            --ni-private-step-icon-border-color: ${failColor};
+            --ni-private-step-icon-border-width: 3px;
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-line-color: ${failColor};
+        }
+
+        :host([selected][severity="warning"]) .control:hover {
+            --ni-private-step-icon-color: ${warningColor};
+            --ni-private-step-icon-border-color: ${warningColor};
+            --ni-private-step-icon-border-width: 3px;
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-line-color: ${warningColor};
+        }
+
+        :host([selected][severity="success"]) .control:hover {
+            --ni-private-step-icon-color: ${passColor};
+            --ni-private-step-icon-border-color: ${passColor};
+            --ni-private-step-icon-border-width: 3px;
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-line-color: ${passColor};
+        }
+
         :host([readonly]) .control:hover {
             --ni-private-step-icon-color: revert-layer;
             --ni-private-step-icon-border-color: revert-layer;
@@ -18037,6 +18139,14 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: revert-layer;
         }
 
+        :host([selected][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 {
             transform: scale(1, 2);
         }
@@ -18060,16 +18170,18 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         :host([severity="error"]) .control${focusVisible} {
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
             --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-icon-background-size: var(--ni-private-step-icon-background-inset-size);
+            --ni-private-step-icon-outline-inset-color: transparent;
             --ni-private-step-line-color: ${failColor};
         }
 
         :host([severity="warning"]) .control${focusVisible} {
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
             --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-icon-background-size: var(--ni-private-step-icon-background-inset-size);
+            --ni-private-step-icon-outline-inset-color: transparent;
             --ni-private-step-line-color: ${warningColor};
         }
 
@@ -18089,6 +18201,27 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
 
+        :host([selected][severity="error"]) .control${focusVisible} {
+            --ni-private-step-icon-color: ${failColor};
+            --ni-private-step-icon-border-color: ${failColor};
+            --ni-private-step-icon-outline-inset-color: ${failColor};
+            --ni-private-step-line-color: ${failColor};
+        }
+
+        :host([selected][severity="warning"]) .control${focusVisible} {
+            --ni-private-step-icon-color: ${warningColor};
+            --ni-private-step-icon-border-color: ${warningColor};
+            --ni-private-step-icon-outline-inset-color: ${warningColor};
+            --ni-private-step-line-color: ${warningColor};
+        }
+
+        :host([selected][severity="success"]) .control${focusVisible} {
+            --ni-private-step-icon-color: ${passColor};
+            --ni-private-step-icon-border-color: ${passColor};
+            --ni-private-step-icon-outline-inset-color: ${passColor};
+            --ni-private-step-line-color: ${passColor};
+        }
+
         .control${focusVisible} .icon::before {
             outline-width: ${borderWidth};
             ${'' /* -1px control to outline edge -2px focus border -1px inset gap */}
@@ -18114,12 +18247,14 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         :host([severity="error"]) .control:active {
+            --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-line-color: ${failColor};
         }
 
         :host([severity="warning"]) .control:active {
+            --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-line-color: ${warningColor};
@@ -18139,6 +18274,27 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
 
+        :host([selected][severity="error"]) .control:active {
+            --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-line-color: ${failColor};
+        }
+
+        :host([selected][severity="warning"]) .control:active {
+            --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-line-color: ${warningColor};
+        }
+
+        :host([selected][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([readonly]) .control:active {
             --ni-private-step-icon-color: revert-layer;
             --ni-private-step-icon-border-color: revert-layer;
@@ -18148,6 +18304,15 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: revert-layer;
         }
 
+        :host([selected][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: -1px;
@@ -18214,10 +18379,35 @@ Defines an interaction area clip-path that leaves out the severity text so it is
                     --ni-private-step-icon-inverse-color: ${Black15};
                 }
 
+                :host([severity="error"]) .control {
+                    --ni-private-step-icon-border-color:: rgb(from ${failColor} r g b / 30%);
+                    --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
+                }
+
+                :host([severity="warning"]) .control {
+                    --ni-private-step-icon-border-color:: rgb(from ${warningColor} r g b / 30%);
+                    --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
+                }
+
                 :host([severity="success"]) .control {
+                    --ni-private-step-icon-border-color:: rgb(from ${passColor} r g b / 30%);
                     --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);
                 }
             }
+
+            @layer focusVisible {
+                :host([severity="error"]) .control${focusVisible} {
+                    --ni-private-step-icon-outline-inset-color: ${failColor};
+                }
+
+                :host([severity="warning"]) .control${focusVisible} {
+                    --ni-private-step-icon-outline-inset-color: ${warningColor};
+                }
+
+                :host([severity="success"]) .control${focusVisible} {
+                    --ni-private-step-icon-outline-inset-color: ${passColor};
+                }
+            }
         `));
 
   const styles$10 = css `