@ni/ok-components 0.3.8 → 0.3.9

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

@@ -1877,6 +1877,7 @@ e&&Ma.unsubscribe(e)}}const vh=(t,e)=>new gh(t,e),bh=Mt`
         :host([selected]) .control {
             --ni-private-step-icon-color: ${cc};
             --ni-private-step-icon-border-color: ${cc};
+            --ni-private-step-icon-border-width: 2px;
             --ni-private-step-icon-background-color: rgb(from ${cc} r g b / 30%);
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
             --ni-private-step-line-color: ${cc};
@@ -1916,10 +1917,6 @@ e&&Ma.unsubscribe(e)}}const vh=(t,e)=>new gh(t,e),bh=Mt`
                 box-shadow ${Hd} ease-in-out;
         }
 
-        :host([selected]) .icon {
-            --ni-private-step-icon-border-width: 2px;
-        }
-
         .icon::before {
             content: '';
             position: absolute;
@@ -1929,7 +1926,8 @@ e&&Ma.unsubscribe(e)}}const vh=(t,e)=>new gh(t,e),bh=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;
@@ -2007,9 +2005,9 @@ e&&Ma.unsubscribe(e)}}const vh=(t,e)=>new gh(t,e),bh=Mt`
             min-width: ${Tc};
             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 ${Hd} ease-in-out,
                 transform ${Hd} ease-in-out;
@@ -2023,8 +2021,8 @@ e&&Ma.unsubscribe(e)}}const vh=(t,e)=>new gh(t,e),bh=Mt`
             width: 1px;
             min-width: 1px;
             height: 100%;
-            padding-top: ${Ec};
             min-height: ${Tc};
+            padding-top: ${Ec};
         }
 
         .subtitle {
@@ -2053,6 +2051,7 @@ e&&Ma.unsubscribe(e)}}const vh=(t,e)=>new gh(t,e),bh=Mt`
     @layer hover {
         .control:hover {
             --ni-private-step-icon-border-color: ${cc};
+            --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: ${cc};
         }
@@ -2083,8 +2082,12 @@ e&&Ma.unsubscribe(e)}}const vh=(t,e)=>new gh(t,e),bh=Mt`
             --ni-private-step-line-color: ${cc};
         }
 
-        .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 {
@@ -2094,11 +2097,16 @@ e&&Ma.unsubscribe(e)}}const vh=(t,e)=>new gh(t,e),bh=Mt`
         .container.vertical .control:hover .line {
             transform: scale(2, 1);
         }
+
+        :host([readonly]) .container .control:hover .line {
+            transform: revert-layer;
+        }
     }
 
     @layer focusVisible {
         .control${qo} {
             --ni-private-step-icon-border-color: ${cc};
+            --ni-private-step-icon-border-width: 2px;
             --ni-private-step-icon-outline-inset-color: ${cc};
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
             --ni-private-step-line-color: ${cc};
@@ -2134,10 +2142,6 @@ e&&Ma.unsubscribe(e)}}const vh=(t,e)=>new gh(t,e),bh=Mt`
             --ni-private-step-line-color: ${cc};
         }
 
-        .control${qo} .icon {
-            --ni-private-step-icon-border-width: 2px;
-        }
-
         .control${qo} .icon::before {
             outline-width: ${Oc};
             ${""}
@@ -2156,6 +2160,7 @@ e&&Ma.unsubscribe(e)}}const vh=(t,e)=>new gh(t,e),bh=Mt`
     @layer active {
         .control:active {
             --ni-private-step-icon-border-color: ${cc};
+            --ni-private-step-icon-border-width: 2px;
             --ni-private-step-icon-background-color: ${Jl};
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
             --ni-private-step-line-color: ${cc};
@@ -2187,26 +2192,45 @@ e&&Ma.unsubscribe(e)}}const vh=(t,e)=>new gh(t,e),bh=Mt`
             --ni-private-step-line-color: ${cc};
         }
 
-        .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: ${Ed};
             --ni-private-step-icon-color: rgb(from ${Id} 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(${ic}, 0.1);
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
             --ni-private-step-icon-outline-inset-color: transparent;
@@ -2317,7 +2341,7 @@ Km("icon-check",class extends Zm{constructor(){super(Tu)}})
 const Jm="nimble-icon-check",Qm="Close",tg="Increment",eg="Decrement",ng="Error",ig="Warning",og="Completed",rg="Current",sg="Information",ag="Search",lg="No items found",cg="Loading…",dg="Scroll backward",hg="Scroll forward",ug="Remove",pg=Ci.create({name:"popup-dismiss-label",cssCustomPropertyName:null}).withDefault(Qm),fg=Ci.create({name:"numeric-decrement-label",cssCustomPropertyName:null}).withDefault(eg),mg=Ci.create({name:"numeric-increment-label",cssCustomPropertyName:null}).withDefault(tg),gg=Ci.create({name:"popup-icon-error-label",cssCustomPropertyName:null}).withDefault(ng),vg=Ci.create({name:"popup-icon-warning-label",cssCustomPropertyName:null}).withDefault(ig),bg=Ci.create({name:"popup-icon-completed-label",cssCustomPropertyName:null}).withDefault(og),yg=Ci.create({name:"popup-icon-current-label",cssCustomPropertyName:null}).withDefault(rg),wg=Ci.create({name:"popup-icon-information-label",cssCustomPropertyName:null}).withDefault(sg),xg=Ci.create({name:"filter-search-label",cssCustomPropertyName:null}).withDefault(ag),Cg=Ci.create({name:"filter-no-results-label",cssCustomPropertyName:null}).withDefault(lg),kg=Ci.create({name:"loading-label",cssCustomPropertyName:null}).withDefault(cg),Sg=Ci.create({name:"scroll-backward-label",cssCustomPropertyName:null}).withDefault(dg),_g=Ci.create({name:"scroll-forward-label",cssCustomPropertyName:null}).withDefault(hg),$g=Ci.create({name:"item-remove-label",cssCustomPropertyName:null}).withDefault(ug),Mg=Ge
 class Ig{constructor(){this.orientation=Mg.horizontal,this.last=!1,this.position=1}}t([C],Ig.prototype,"orientation",void 0),t([C],Ig.prototype,"last",void 0),t([C],Ig.prototype,"position",void 0)
 const Eg=kh
-class Ag extends(Sh(Ho)){constructor(){super(...arguments),this.severity=Eg.default,this.disabled=!1,this.readOnly=!1,this.selected=!1,this.stepInternals=new Ig}}t([ft()],Ag.prototype,"severity",void 0),t([ft({mode:"boolean"})],Ag.prototype,"disabled",void 0),t([ft({attribute:"readonly",mode:"boolean"})],Ag.prototype,"readOnly",void 0),t([ft({mode:"boolean"})],Ag.prototype,"selected",void 0),t([ft({attribute:"tabindex",converter:ut})],Ag.prototype,"tabIndex",void 0)
+class Ag extends(Sh(Ho)){constructor(){super(...arguments),this.severity=Eg.default,this.disabled=!1,this.readOnly=!1,this.selected=!1,this.stepInternals=new Ig}onClick(t){(this.disabled||this.readOnly)&&(t.preventDefault(),t.stopImmediatePropagation())}}t([ft()],Ag.prototype,"severity",void 0),t([ft({mode:"boolean"})],Ag.prototype,"disabled",void 0),t([ft({attribute:"readonly",mode:"boolean"})],Ag.prototype,"readOnly",void 0),t([ft({mode:"boolean"})],Ag.prototype,"selected",void 0),t([ft({attribute:"tabindex",converter:ut})],Ag.prototype,"tabIndex",void 0)
 const Tg=Ag.compose({baseName:"anchor-step",template:(t,e)=>Q`
     <template slot="step">
         <li class="
@@ -2357,6 +2381,7 @@ const Tg=Ag.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>
@@ -11047,7 +11072,7 @@ const rL=Mt`
         }
     }
 `,sL=kh
-class aL extends(Sh(Ln)){constructor(){super(...arguments),this.severity=sL.default,this.readOnly=!1,this.selected=!1,this.stepInternals=new Ig}}t([ft()],aL.prototype,"severity",void 0),t([ft({attribute:"readonly",mode:"boolean"})],aL.prototype,"readOnly",void 0),t([ft({mode:"boolean"})],aL.prototype,"selected",void 0),t([ft({attribute:"tabindex",converter:ut})],aL.prototype,"tabIndex",void 0)
+class aL extends(Sh(Ln)){constructor(){super(...arguments),this.severity=sL.default,this.readOnly=!1,this.selected=!1,this.stepInternals=new Ig}onClick(t){(this.disabled||this.readOnly)&&(t.preventDefault(),t.stopImmediatePropagation())}}t([ft()],aL.prototype,"severity",void 0),t([ft({attribute:"readonly",mode:"boolean"})],aL.prototype,"readOnly",void 0),t([ft({mode:"boolean"})],aL.prototype,"selected",void 0),t([ft({attribute:"tabindex",converter:ut})],aL.prototype,"tabIndex",void 0)
 const lL=aL.compose({baseName:"step",template:(t,e)=>Q`
     <template slot="step">
         <li class="
@@ -11091,6 +11116,7 @@ const lL=aL.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>