@ni/nimble-components 35.12.1 → 35.12.3

package/dist/all-components-bundle.min.js

@@ -21,7 +21,9 @@ if("undefined"!=typeof self)return self
 if("undefined"!=typeof window)return window
 try{return new Function("return this")()}catch{return{}}}()
 void 0===a.trustedTypes&&(a.trustedTypes={createPolicy:(t,e)=>e})
-const l={configurable:!1,enumerable:!1,writable:!1}
+for(const t of["Node","Element","HTMLElement","ShadowRoot","Event","CustomEvent","MutationObserver","ResizeObserver","IntersectionObserver","CSSStyleSheet"])void 0===a[t]&&(a[t]=class{})
+if(void 0===a.customElements){const t=new Map,e=new Map
+a.customElements={define(n,i){t.has(n)||(t.set(n,i),e.set(i,n))},get:e=>t.get(e),getName:t=>e.get(t)??null,whenDefined:()=>Promise.resolve(),upgrade(){}}}const l={configurable:!1,enumerable:!1,writable:!1}
 void 0===a.FAST&&Reflect.defineProperty(a,"FAST",{value:Object.create(null),...l})
 const c=a.FAST
 if(void 0===c.getById){const t=Object.create(null)
@@ -36,7 +38,7 @@ function n(){if(e.length)throw e.shift()}function i(t){try{t.call()}catch(t){e.p
 for(;e<t.length;)if(i(t[e]),e++,e>1024){for(let n=0,i=t.length-e;n<i;n++)t[n]=t[n+e]
 t.length-=e,e=0}t.length=0}return Object.freeze({enqueue:function(e){t.length<1&&a.requestAnimationFrame(o),t.push(e)},process:o})}),p=a.trustedTypes.createPolicy("fast-html",{createHTML:t=>t})
 let f=p
-const m=`fast-${Math.random().toString(36).substring(2,8)}`,g=`${m}{`,v=`}${m}`,b=Object.freeze({supportsAdoptedStyleSheets:Array.isArray(document.adoptedStyleSheets)&&"replace"in CSSStyleSheet.prototype,setHTMLPolicy(t){if(f!==p)throw new Error("The HTML policy can only be set once.")
+const m=`fast-${Math.random().toString(36).substring(2,8)}`,g=`${m}{`,v=`}${m}`,b=Object.freeze({supportsAdoptedStyleSheets:"undefined"!=typeof document&&"undefined"!=typeof CSSStyleSheet&&Array.isArray(document.adoptedStyleSheets)&&"replace"in CSSStyleSheet.prototype,setHTMLPolicy(t){if(f!==p)throw new Error("The HTML policy can only be set once.")
 f=t},createHTML:t=>f.createHTML(t),isMarker:t=>t&&8===t.nodeType&&t.data.startsWith(m),extractDirectiveIndexFromMarker:t=>parseInt(t.data.replace(`${m}:`,"")),createInterpolationPlaceholder:t=>`${g}${t}${v}`,createCustomAttributePlaceholder(t,e){return`${t}="${this.createInterpolationPlaceholder(e)}"`},createBlockPlaceholder:t=>`\x3c!--${m}:${t}--\x3e`,queueUpdate:u.enqueue,processUpdates:u.process,nextUpdate:()=>new Promise(u.enqueue),setAttribute(t,e,n){null==n?t.removeAttribute(e):t.setAttribute(e,n)},setBooleanAttribute(t,e,n){n?t.setAttribute(e,""):t.removeAttribute(e)},removeChildNodes(t){for(let e=t.firstChild;null!==e;e=t.firstChild)t.removeChild(e)},createTemplateWalker:t=>document.createTreeWalker(t,133,null,!1)})
 class y{constructor(t,e){this.sub1=void 0,this.sub2=void 0,this.spillover=void 0,this.source=t,this.sub1=e}has(t){return void 0===this.spillover?this.sub1===t||this.sub2===t:-1!==this.spillover.indexOf(t)}subscribe(t){const e=this.spillover
 if(void 0===e){if(this.has(t))return
@@ -597,7 +599,7 @@ this.slottedBreadcrumbItems.forEach(e=>{const n=e===t
 this.setItemSeparator(e,n),this.setAriaCurrent(e,n)})}}setItemSeparator(t,e){t instanceof _n&&(t.separator=!e)}findChildWithHref(t){return t.childElementCount>0?t.querySelector("a[href]"):t.shadowRoot?.childElementCount?t.shadowRoot?.querySelector("a[href]"):null}setAriaCurrent(t,e){const n=this.findChildWithHref(t)
 null===n&&t.hasAttribute("href")&&t instanceof _n?e?t.setAttribute("aria-current","page"):t.removeAttribute("aria-current"):null!==n&&(e?n.setAttribute("aria-current","page"):n.removeAttribute("aria-current"))}}
 t([C],Mn.prototype,"slottedBreadcrumbItems",void 0)
-const In="form-associated-proxy",En="ElementInternals",An=En in window&&"setFormValue"in window[En].prototype,Tn=new WeakMap
+const In="form-associated-proxy",En="ElementInternals",An="undefined"!=typeof window&&En in window&&"setFormValue"in window[En].prototype,Tn=new WeakMap
 function Dn(t){const e=class extends t{static get formAssociated(){return An}get validity(){return this.elementInternals?this.elementInternals.validity:this.proxy.validity}get form(){return this.elementInternals?this.elementInternals.form:this.proxy.form}get validationMessage(){return this.elementInternals?this.elementInternals.validationMessage:this.proxy.validationMessage}get willValidate(){return this.elementInternals?this.elementInternals.willValidate:this.proxy.willValidate}get labels(){if(this.elementInternals)return Object.freeze(Array.from(this.elementInternals.labels))
 if(this.proxy instanceof HTMLElement&&this.proxy.ownerDocument&&this.id){const t=this.proxy.labels,e=Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`)),n=t?e.concat(Array.from(t)):e
 return Object.freeze(n)}return d}valueChanged(t,e){this.dirtyValue=!0,this.proxy instanceof HTMLElement&&(this.proxy.value=this.value),this.currentValue=this.value,this.setFormValue(this.value),this.validate()}currentValueChanged(){this.value=this.currentValue}initialValueChanged(t,e){this.dirtyValue||(this.value=this.initialValue,this.dirtyValue=!1)}disabledChanged(t,e){this.proxy instanceof HTMLElement&&(this.proxy.disabled=this.disabled),b.queueUpdate(()=>this.classList.toggle("disabled",this.disabled))}nameChanged(t,e){this.proxy instanceof HTMLElement&&(this.proxy.name=this.name)}requiredChanged(t,e){this.proxy instanceof HTMLElement&&(this.proxy.required=this.required),b.queueUpdate(()=>this.classList.toggle("required",this.required)),this.validate()}get elementInternals(){if(!An)return null
@@ -686,7 +688,7 @@ class ni{}function ii(t){const e=t.parentElement
 if(e)return e
 {const e=t.getRootNode()
 if(e.host instanceof HTMLElement)return e.host}return null}t([C],ni.prototype,"ariaAutoComplete",void 0),t([C],ni.prototype,"ariaControls",void 0),je(ni,Wn),je(ei,ne,ni)
-const oi=document.createElement("div")
+const oi="undefined"==typeof document?{}:document.createElement("div")
 class ri{setProperty(t,e){b.queueUpdate(()=>this.target.setProperty(t,e))}removeProperty(t){b.queueUpdate(()=>this.target.removeProperty(t))}}class si extends ri{constructor(){super()
 const t=new CSSStyleSheet
 this.target=t.cssRules[t.insertRule(":root{}")].style,document.adoptedStyleSheets=[...document.adoptedStyleSheets,t]}}class ai extends ri{constructor(){super(),this.style=document.createElement("style"),document.head.appendChild(this.style)
@@ -705,9 +707,10 @@ const n=pi.getOrCreate(this.normalizeRoot(t))
 for(const t in di.properties)n.setProperty(t,di.properties[t])}}static unregisterRoot(t){const{roots:e}=di
 if(e.has(t)){e.delete(t)
 const n=pi.getOrCreate(di.normalizeRoot(t))
-for(const t in di.properties)n.removeProperty(t)}}static normalizeRoot(t){return t===oi?document:t}}const hi=new WeakMap,ui=b.supportsAdoptedStyleSheets?class extends ri{constructor(t){super()
+for(const t in di.properties)n.removeProperty(t)}}static normalizeRoot(t){return t===oi&&"undefined"!=typeof document?document:t}}const hi=new WeakMap,ui=b.supportsAdoptedStyleSheets?class extends ri{constructor(t){super()
 const e=new CSSStyleSheet
-e[nt]=!0,this.target=e.cssRules[e.insertRule(":host{}")].style,t.$fastController.addStyles(Q.create([e]))}}:li,pi=Object.freeze({getOrCreate(t){if(hi.has(t))return hi.get(t)
+e[nt]=!0,this.target=e.cssRules[e.insertRule(":host{}")].style,t.$fastController.addStyles(Q.create([e]))}}:li,pi=Object.freeze({getOrCreate(t){if("undefined"==typeof document)return{setProperty(){},removeProperty(){}}
+if(hi.has(t))return hi.get(t)
 let e
 return t===oi?e=new di:t instanceof Document?e=b.supportsAdoptedStyleSheets?new si:new ai:e=t instanceof kt?new ui(t):new ci(t),hi.set(t,e),e}})
 class fi extends St{get appliedTo(){return[...this._appliedTo]}static from(t){return new fi({name:"string"==typeof t?t:t.name,cssCustomPropertyName:"string"==typeof t?t:void 0===t.cssCustomPropertyName?t.name:t.cssCustomPropertyName})}static isCSSDesignToken(t){return"string"==typeof t.cssCustomProperty}static isDerivedDesignTokenValue(t){return"function"==typeof t}static{this.uniqueId=(()=>{let t=0
@@ -1016,7 +1019,7 @@ class zo extends xn{}const Vo=t=>`${function(t){return`:host([hidden]){display:n
         color-scheme: dark;
     }
 `
-class Ca{constructor(){this.lang=document.documentElement.lang
+class Ca{constructor(){if(this.lang="undefined"==typeof document?"":document.documentElement.lang,"undefined"==typeof document)return
 new MutationObserver(t=>{for(const e of t)"attributes"===e.type&&"lang"===e.attributeName&&(this.lang=e.target.lang)}).observe(document.documentElement,{attributeFilter:["lang"]})}}t([C],Ca.prototype,"lang",void 0)
 const ka=new Ca
 function Sa(t){try{return new Intl.Locale(t),!0}catch(t){return!1}}const $a=xi.create({name:"lang",cssCustomPropertyName:null}).withDefault(()=>Sa(ka.lang)?ka.lang:"en-US"),_a=xi.create({name:"direction",cssCustomPropertyName:null}).withDefault(mn.ltr),Ma=xi.create({name:"theme",cssCustomPropertyName:null}).withDefault(Uo)
@@ -1844,18 +1847,18 @@ e&&Ma.unsubscribe(e)}}const lh=(t,e)=>new ah(t,e),ch=_t`
         }
 
         :host([severity="error"]) .control {
-            --ni-private-step-icon-color: ${nc};
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
             --ni-private-step-icon-border-color: ${nc};
-            --ni-private-step-icon-background-color: rgb(from ${nc} r g b / 30%);
-            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-icon-background-color: ${nc};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
             --ni-private-step-line-color: ${nc};
         }
 
         :host([severity="warning"]) .control {
-            --ni-private-step-icon-color: ${ic};
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
             --ni-private-step-icon-border-color: ${ic};
-            --ni-private-step-icon-background-color: rgb(from ${ic} r g b / 30%);
-            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-icon-background-color: ${ic};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
             --ni-private-step-line-color: ${ic};
         }
 
@@ -1876,6 +1879,27 @@ e&&Ma.unsubscribe(e)}}const lh=(t,e)=>new ah(t,e),ch=_t`
             --ni-private-step-line-color: ${ac};
         }
 
+        :host([selected][severity="error"]) .control {
+            --ni-private-step-icon-color: ${nc};
+            --ni-private-step-icon-border-color: ${nc};
+            --ni-private-step-icon-background-color: rgb(from ${nc} r g b / 30%);
+            --ni-private-step-line-color: ${nc};
+        }
+
+        :host([selected][severity="warning"]) .control {
+            --ni-private-step-icon-color: ${ic};
+            --ni-private-step-icon-border-color: ${ic};
+            --ni-private-step-icon-background-color: rgb(from ${ic} r g b / 30%);
+            --ni-private-step-line-color: ${ic};
+        }
+
+        :host([selected][severity="success"]) .control {
+            --ni-private-step-icon-color: ${rc};
+            --ni-private-step-icon-border-color: ${rc};
+            --ni-private-step-icon-background-color: rgb(from ${rc} r g b / 30%);
+            --ni-private-step-line-color: ${rc};
+        }
+
         .icon-background {
             grid-area: icon;
             display: inline-block;
@@ -1944,7 +1968,6 @@ e&&Ma.unsubscribe(e)}}const lh=(t,e)=>new ah(t,e),ch=_t`
             display: none;
         }
 
-        :host([selected]) .step-indicator,
         :host([disabled]) .step-indicator {
             display: contents;
         }
@@ -1959,7 +1982,6 @@ e&&Ma.unsubscribe(e)}}const lh=(t,e)=>new ah(t,e),ch=_t`
             display: contents;
         }
 
-        :host([selected]) .icon-severity,
         :host([disabled]) .icon-severity {
             display: none;
         }
@@ -2050,14 +2072,16 @@ e&&Ma.unsubscribe(e)}}const lh=(t,e)=>new ah(t,e),ch=_t`
         }
 
         :host([severity="error"]) .control:hover {
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
             --ni-private-step-icon-border-color: ${nc};
-            --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: ${nc};
         }
 
         :host([severity="warning"]) .control:hover {
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
             --ni-private-step-icon-border-color: ${ic};
-            --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: ${ic};
         }
 
@@ -2069,12 +2093,37 @@ e&&Ma.unsubscribe(e)}}const lh=(t,e)=>new ah(t,e),ch=_t`
         }
 
         :host([selected]) .control:hover {
-            --ni-private-step-icon-color: ${wd};
+            --ni-private-step-icon-color: ${ac};
             --ni-private-step-icon-border-color: ${ac};
-            --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: ${ac};
         }
 
+        :host([selected][severity="error"]) .control:hover {
+            --ni-private-step-icon-color: ${nc};
+            --ni-private-step-icon-border-color: ${nc};
+            --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: ${nc};
+        }
+
+        :host([selected][severity="warning"]) .control:hover {
+            --ni-private-step-icon-color: ${ic};
+            --ni-private-step-icon-border-color: ${ic};
+            --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: ${ic};
+        }
+
+        :host([selected][severity="success"]) .control:hover {
+            --ni-private-step-icon-color: ${rc};
+            --ni-private-step-icon-border-color: ${rc};
+            --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: ${rc};
+        }
+
         :host([readonly]) .control:hover {
             --ni-private-step-icon-color: revert-layer;
             --ni-private-step-icon-border-color: revert-layer;
@@ -2083,6 +2132,14 @@ e&&Ma.unsubscribe(e)}}const lh=(t,e)=>new ah(t,e),ch=_t`
             --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);
         }
@@ -2106,16 +2163,18 @@ e&&Ma.unsubscribe(e)}}const lh=(t,e)=>new ah(t,e),ch=_t`
         }
 
         :host([severity="error"]) .control${Ho} {
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
             --ni-private-step-icon-border-color: ${nc};
-            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
-            --ni-private-step-icon-outline-inset-color: ${nc};
+            --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: ${nc};
         }
 
         :host([severity="warning"]) .control${Ho} {
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
             --ni-private-step-icon-border-color: ${ic};
-            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
-            --ni-private-step-icon-outline-inset-color: ${ic};
+            --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: ${ic};
         }
 
@@ -2135,6 +2194,27 @@ e&&Ma.unsubscribe(e)}}const lh=(t,e)=>new ah(t,e),ch=_t`
             --ni-private-step-line-color: ${ac};
         }
 
+        :host([selected][severity="error"]) .control${Ho} {
+            --ni-private-step-icon-color: ${nc};
+            --ni-private-step-icon-border-color: ${nc};
+            --ni-private-step-icon-outline-inset-color: ${nc};
+            --ni-private-step-line-color: ${nc};
+        }
+
+        :host([selected][severity="warning"]) .control${Ho} {
+            --ni-private-step-icon-color: ${ic};
+            --ni-private-step-icon-border-color: ${ic};
+            --ni-private-step-icon-outline-inset-color: ${ic};
+            --ni-private-step-line-color: ${ic};
+        }
+
+        :host([selected][severity="success"]) .control${Ho} {
+            --ni-private-step-icon-color: ${rc};
+            --ni-private-step-icon-border-color: ${rc};
+            --ni-private-step-icon-outline-inset-color: ${rc};
+            --ni-private-step-line-color: ${rc};
+        }
+
         .control${Ho} .icon::before {
             outline-width: ${$c};
             ${""}
@@ -2160,12 +2240,14 @@ e&&Ma.unsubscribe(e)}}const lh=(t,e)=>new ah(t,e),ch=_t`
         }
 
         :host([severity="error"]) .control:active {
+            --ni-private-step-icon-color: ${nc};
             --ni-private-step-icon-border-color: ${nc};
             --ni-private-step-icon-background-color: rgb(from ${nc} r g b / 30%);
             --ni-private-step-line-color: ${nc};
         }
 
         :host([severity="warning"]) .control:active {
+            --ni-private-step-icon-color: ${ic};
             --ni-private-step-icon-border-color: ${ic};
             --ni-private-step-icon-background-color: rgb(from ${ic} r g b / 30%);
             --ni-private-step-line-color: ${ic};
@@ -2185,6 +2267,27 @@ e&&Ma.unsubscribe(e)}}const lh=(t,e)=>new ah(t,e),ch=_t`
             --ni-private-step-line-color: ${ac};
         }
 
+        :host([selected][severity="error"]) .control:active {
+            --ni-private-step-icon-color: ${nc};
+            --ni-private-step-icon-border-color: ${nc};
+            --ni-private-step-icon-background-color: rgb(from ${nc} r g b / 30%);
+            --ni-private-step-line-color: ${nc};
+        }
+
+        :host([selected][severity="warning"]) .control:active {
+            --ni-private-step-icon-color: ${ic};
+            --ni-private-step-icon-border-color: ${ic};
+            --ni-private-step-icon-background-color: rgb(from ${ic} r g b / 30%);
+            --ni-private-step-line-color: ${ic};
+        }
+
+        :host([selected][severity="success"]) .control:active {
+            --ni-private-step-icon-color: ${wd};
+            --ni-private-step-icon-border-color: ${rc};
+            --ni-private-step-icon-background-color: rgb(from ${rc} r g b / 30%);
+            --ni-private-step-line-color: ${rc};
+        }
+
         :host([readonly]) .control:active {
             --ni-private-step-icon-color: revert-layer;
             --ni-private-step-icon-border-color: revert-layer;
@@ -2194,6 +2297,15 @@ e&&Ma.unsubscribe(e)}}const lh=(t,e)=>new ah(t,e),ch=_t`
             --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;
@@ -2260,10 +2372,35 @@ e&&Ma.unsubscribe(e)}}const lh=(t,e)=>new ah(t,e),ch=_t`
                     --ni-private-step-icon-inverse-color: ${el};
                 }
 
+                :host([severity="error"]) .control {
+                    --ni-private-step-icon-border-color:: rgb(from ${nc} r g b / 30%);
+                    --ni-private-step-icon-background-color: rgb(from ${nc} r g b / 30%);
+                }
+
+                :host([severity="warning"]) .control {
+                    --ni-private-step-icon-border-color:: rgb(from ${ic} r g b / 30%);
+                    --ni-private-step-icon-background-color: rgb(from ${ic} r g b / 30%);
+                }
+
                 :host([severity="success"]) .control {
+                    --ni-private-step-icon-border-color:: rgb(from ${rc} r g b / 30%);
                     --ni-private-step-icon-background-color: rgb(from ${rc} r g b / 30%);
                 }
             }
+
+            @layer focusVisible {
+                :host([severity="error"]) .control${Ho} {
+                    --ni-private-step-icon-outline-inset-color: ${nc};
+                }
+
+                :host([severity="warning"]) .control${Ho} {
+                    --ni-private-step-icon-outline-inset-color: ${ic};
+                }
+
+                :host([severity="success"]) .control${Ho} {
+                    --ni-private-step-icon-outline-inset-color: ${rc};
+                }
+            }
         `)),dh=_t`
     ${ch}
     ${""}