@ni/nimble-components 35.5.4 → 35.5.5

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

@@ -1863,6 +1863,7 @@ e&&$a.unsubscribe(e)}}const ah=(t,e)=>new sh(t,e),lh=Mt`
         :host([selected]) .control {
             --ni-private-step-icon-color: ${sc};
             --ni-private-step-icon-border-color: ${sc};
+            --ni-private-step-icon-border-width: 2px;
             --ni-private-step-icon-background-color: rgb(from ${sc} r g b / 30%);
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
             --ni-private-step-line-color: ${sc};
@@ -1902,10 +1903,6 @@ e&&$a.unsubscribe(e)}}const ah=(t,e)=>new sh(t,e),lh=Mt`
                 box-shadow ${Od} ease-in-out;
         }
 
-        :host([selected]) .icon {
-            --ni-private-step-icon-border-width: 2px;
-        }
-
         .icon::before {
             content: '';
             position: absolute;
@@ -1915,7 +1912,8 @@ e&&$a.unsubscribe(e)}}const ah=(t,e)=>new sh(t,e),lh=Mt`
             outline-color: var(--ni-private-step-icon-outline-inset-color);
             outline-style: solid;
             outline-width: 0px;
-            outline-offset: 0px;
+            ${""}
+            outline-offset: -1px;
             border: none;
             border-radius: 100%;
             color: transparent;
@@ -1993,9 +1991,9 @@ e&&$a.unsubscribe(e)}}const ah=(t,e)=>new sh(t,e),lh=Mt`
             min-width: ${Cc};
             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 ${Od} ease-in-out,
                 transform ${Od} ease-in-out;
@@ -2009,8 +2007,8 @@ e&&$a.unsubscribe(e)}}const ah=(t,e)=>new sh(t,e),lh=Mt`
             width: 1px;
             min-width: 1px;
             height: 100%;
-            padding-top: ${wc};
             min-height: ${Cc};
+            padding-top: ${wc};
         }
 
         .subtitle {
@@ -2039,6 +2037,7 @@ e&&$a.unsubscribe(e)}}const ah=(t,e)=>new sh(t,e),lh=Mt`
     @layer hover {
         .control:hover {
             --ni-private-step-icon-border-color: ${sc};
+            --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: ${sc};
         }
@@ -2069,8 +2068,12 @@ e&&$a.unsubscribe(e)}}const ah=(t,e)=>new sh(t,e),lh=Mt`
             --ni-private-step-line-color: ${sc};
         }
 
-        .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 {
@@ -2080,11 +2083,16 @@ e&&$a.unsubscribe(e)}}const ah=(t,e)=>new sh(t,e),lh=Mt`
         .container.vertical .control:hover .line {
             transform: scale(2, 1);
         }
+
+        :host([readonly]) .container .control:hover .line {
+            transform: revert-layer;
+        }
     }
 
     @layer focusVisible {
         .control${Uo} {
             --ni-private-step-icon-border-color: ${sc};
+            --ni-private-step-icon-border-width: 2px;
             --ni-private-step-icon-outline-inset-color: ${sc};
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
             --ni-private-step-line-color: ${sc};
@@ -2120,10 +2128,6 @@ e&&$a.unsubscribe(e)}}const ah=(t,e)=>new sh(t,e),lh=Mt`
             --ni-private-step-line-color: ${sc};
         }
 
-        .control${Uo} .icon {
-            --ni-private-step-icon-border-width: 2px;
-        }
-
         .control${Uo} .icon::before {
             outline-width: ${Sc};
             ${""}
@@ -2142,6 +2146,7 @@ e&&$a.unsubscribe(e)}}const ah=(t,e)=>new sh(t,e),lh=Mt`
     @layer active {
         .control:active {
             --ni-private-step-icon-border-color: ${sc};
+            --ni-private-step-icon-border-width: 2px;
             --ni-private-step-icon-background-color: ${Kl};
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
             --ni-private-step-line-color: ${sc};
@@ -2173,26 +2178,45 @@ e&&$a.unsubscribe(e)}}const ah=(t,e)=>new sh(t,e),lh=Mt`
             --ni-private-step-line-color: ${sc};
         }
 
-        .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: ${wd};
             --ni-private-step-icon-color: rgb(from ${yd} 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(${tc}, 0.1);
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
             --ni-private-step-icon-outline-inset-color: transparent;
@@ -2303,7 +2327,7 @@ Pm("icon-check",class extends Bm{constructor(){super(xu)}})
 const Hm="nimble-icon-check",Um="Close",qm="Increment",jm="Decrement",Wm="Error",Gm="Warning",Zm="Completed",Km="Current",Ym="Information",Xm="Search",Jm="No items found",Qm="Loading…",tg="Scroll backward",eg="Scroll forward",ng="Remove",ig=Ci.create({name:"popup-dismiss-label",cssCustomPropertyName:null}).withDefault(Um),og=Ci.create({name:"numeric-decrement-label",cssCustomPropertyName:null}).withDefault(jm),rg=Ci.create({name:"numeric-increment-label",cssCustomPropertyName:null}).withDefault(qm),sg=Ci.create({name:"popup-icon-error-label",cssCustomPropertyName:null}).withDefault(Wm),ag=Ci.create({name:"popup-icon-warning-label",cssCustomPropertyName:null}).withDefault(Gm),lg=Ci.create({name:"popup-icon-completed-label",cssCustomPropertyName:null}).withDefault(Zm),cg=Ci.create({name:"popup-icon-current-label",cssCustomPropertyName:null}).withDefault(Km),dg=Ci.create({name:"popup-icon-information-label",cssCustomPropertyName:null}).withDefault(Ym),hg=Ci.create({name:"filter-search-label",cssCustomPropertyName:null}).withDefault(Xm),ug=Ci.create({name:"filter-no-results-label",cssCustomPropertyName:null}).withDefault(Jm),pg=Ci.create({name:"loading-label",cssCustomPropertyName:null}).withDefault(Qm),fg=Ci.create({name:"scroll-backward-label",cssCustomPropertyName:null}).withDefault(tg),mg=Ci.create({name:"scroll-forward-label",cssCustomPropertyName:null}).withDefault(eg),gg=Ci.create({name:"item-remove-label",cssCustomPropertyName:null}).withDefault(ng),vg=Ge
 class bg{constructor(){this.orientation=vg.horizontal,this.last=!1,this.position=1}}t([C],bg.prototype,"orientation",void 0),t([C],bg.prototype,"last",void 0),t([C],bg.prototype,"position",void 0)
 const yg=ph
-class wg extends(fh(Vo)){constructor(){super(...arguments),this.severity=yg.default,this.disabled=!1,this.readOnly=!1,this.selected=!1,this.stepInternals=new bg}}t([ft()],wg.prototype,"severity",void 0),t([ft({mode:"boolean"})],wg.prototype,"disabled",void 0),t([ft({attribute:"readonly",mode:"boolean"})],wg.prototype,"readOnly",void 0),t([ft({mode:"boolean"})],wg.prototype,"selected",void 0),t([ft({attribute:"tabindex",converter:ut})],wg.prototype,"tabIndex",void 0)
+class wg extends(fh(Vo)){constructor(){super(...arguments),this.severity=yg.default,this.disabled=!1,this.readOnly=!1,this.selected=!1,this.stepInternals=new bg}onClick(t){(this.disabled||this.readOnly)&&(t.preventDefault(),t.stopImmediatePropagation())}}t([ft()],wg.prototype,"severity",void 0),t([ft({mode:"boolean"})],wg.prototype,"disabled",void 0),t([ft({attribute:"readonly",mode:"boolean"})],wg.prototype,"readOnly",void 0),t([ft({mode:"boolean"})],wg.prototype,"selected",void 0),t([ft({attribute:"tabindex",converter:ut})],wg.prototype,"tabIndex",void 0)
 const xg=wg.compose({baseName:"anchor-step",template:(t,e)=>Q`
     <template slot="step">
         <li class="
@@ -2343,6 +2367,7 @@ const xg=wg.compose({baseName:"anchor-step",template:(t,e)=>Q`
                 aria-owns="${t=>t.ariaOwns}"
                 aria-relevant="${t=>t.ariaRelevant}"
                 aria-roledescription="${t=>t.ariaRoledescription}"
+                @click="${(t,e)=>t.onClick(e.event)}"
                 ${zt("control")}
             >
                 <div class="icon-background"></div>
@@ -11030,7 +11055,7 @@ const GN=Mt`
         }
     }
 `,ZN=ph
-class KN extends(fh(Ln)){constructor(){super(...arguments),this.severity=ZN.default,this.readOnly=!1,this.selected=!1,this.stepInternals=new bg}}t([ft()],KN.prototype,"severity",void 0),t([ft({attribute:"readonly",mode:"boolean"})],KN.prototype,"readOnly",void 0),t([ft({mode:"boolean"})],KN.prototype,"selected",void 0),t([ft({attribute:"tabindex",converter:ut})],KN.prototype,"tabIndex",void 0)
+class KN extends(fh(Ln)){constructor(){super(...arguments),this.severity=ZN.default,this.readOnly=!1,this.selected=!1,this.stepInternals=new bg}onClick(t){(this.disabled||this.readOnly)&&(t.preventDefault(),t.stopImmediatePropagation())}}t([ft()],KN.prototype,"severity",void 0),t([ft({attribute:"readonly",mode:"boolean"})],KN.prototype,"readOnly",void 0),t([ft({mode:"boolean"})],KN.prototype,"selected",void 0),t([ft({attribute:"tabindex",converter:ut})],KN.prototype,"tabIndex",void 0)
 const YN=KN.compose({baseName:"step",template:(t,e)=>Q`
     <template slot="step">
         <li class="
@@ -11074,6 +11099,7 @@ const YN=KN.compose({baseName:"step",template:(t,e)=>Q`
                 aria-pressed="${t=>t.ariaPressed}"
                 aria-relevant="${t=>t.ariaRelevant}"
                 aria-roledescription="${t=>t.ariaRoledescription}"
+                @click="${(t,e)=>t.onClick(e.event)}"
                 ${zt("control")}
             >
                 <div class="icon-background"></div>