@ni/spright-components 6.21.3 → 6.21.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/all-components-bundle.js +150 -16
  2. package/dist/all-components-bundle.js.map +1 -1
  3. package/dist/all-components-bundle.min.js +150 -16
  4. package/dist/all-components-bundle.min.js.map +1 -1
  5. package/package.json +2 -2
package/dist/all-components-bundle.min.js CHANGED
@@ -1858,18 +1858,18 @@ e&&Ia.unsubscribe(e)}}const yh=(t,e)=>new bh(t,e),wh=_t`
1858
1858
  }
1859
1859
 
1860
1860
  :host([severity="error"]) .control {
1861
- --ni-private-step-icon-color: ${rc};
1861
+ --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
1862
1862
  --ni-private-step-icon-border-color: ${rc};
1863
- --ni-private-step-icon-background-color: rgb(from ${rc} r g b / 30%);
1864
- --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
1863
+ --ni-private-step-icon-background-color: ${rc};
1864
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
1865
1865
  --ni-private-step-line-color: ${rc};
1866
1866
  }
1867
1867
 
1868
1868
  :host([severity="warning"]) .control {
1869
- --ni-private-step-icon-color: ${sc};
1869
+ --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
1870
1870
  --ni-private-step-icon-border-color: ${sc};
1871
- --ni-private-step-icon-background-color: rgb(from ${sc} r g b / 30%);
1872
- --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
1871
+ --ni-private-step-icon-background-color: ${sc};
1872
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
1873
1873
  --ni-private-step-line-color: ${sc};
1874
1874
  }
1875
1875
 
@@ -1890,6 +1890,27 @@ e&&Ia.unsubscribe(e)}}const yh=(t,e)=>new bh(t,e),wh=_t`
1890
1890
  --ni-private-step-line-color: ${dc};
1891
1891
  }
1892
1892
 
1893
+ :host([selected][severity="error"]) .control {
1894
+ --ni-private-step-icon-color: ${rc};
1895
+ --ni-private-step-icon-border-color: ${rc};
1896
+ --ni-private-step-icon-background-color: rgb(from ${rc} r g b / 30%);
1897
+ --ni-private-step-line-color: ${rc};
1898
+ }
1899
+
1900
+ :host([selected][severity="warning"]) .control {
1901
+ --ni-private-step-icon-color: ${sc};
1902
+ --ni-private-step-icon-border-color: ${sc};
1903
+ --ni-private-step-icon-background-color: rgb(from ${sc} r g b / 30%);
1904
+ --ni-private-step-line-color: ${sc};
1905
+ }
1906
+
1907
+ :host([selected][severity="success"]) .control {
1908
+ --ni-private-step-icon-color: ${lc};
1909
+ --ni-private-step-icon-border-color: ${lc};
1910
+ --ni-private-step-icon-background-color: rgb(from ${lc} r g b / 30%);
1911
+ --ni-private-step-line-color: ${lc};
1912
+ }
1913
+
1893
1914
  .icon-background {
1894
1915
  grid-area: icon;
1895
1916
  display: inline-block;
@@ -1958,7 +1979,6 @@ e&&Ia.unsubscribe(e)}}const yh=(t,e)=>new bh(t,e),wh=_t`
1958
1979
  display: none;
1959
1980
  }
1960
1981
 
1961
- :host([selected]) .step-indicator,
1962
1982
  :host([disabled]) .step-indicator {
1963
1983
  display: contents;
1964
1984
  }
@@ -1973,7 +1993,6 @@ e&&Ia.unsubscribe(e)}}const yh=(t,e)=>new bh(t,e),wh=_t`
1973
1993
  display: contents;
1974
1994
  }
1975
1995
 
1976
- :host([selected]) .icon-severity,
1977
1996
  :host([disabled]) .icon-severity {
1978
1997
  display: none;
1979
1998
  }
@@ -2064,14 +2083,16 @@ e&&Ia.unsubscribe(e)}}const yh=(t,e)=>new bh(t,e),wh=_t`
2064
2083
  }
2065
2084
 
2066
2085
  :host([severity="error"]) .control:hover {
2086
+ --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
2067
2087
  --ni-private-step-icon-border-color: ${rc};
2068
- --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
2088
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
2069
2089
  --ni-private-step-line-color: ${rc};
2070
2090
  }
2071
2091
 
2072
2092
  :host([severity="warning"]) .control:hover {
2093
+ --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
2073
2094
  --ni-private-step-icon-border-color: ${sc};
2074
- --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
2095
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
2075
2096
  --ni-private-step-line-color: ${sc};
2076
2097
  }
2077
2098
 
@@ -2083,12 +2104,37 @@ e&&Ia.unsubscribe(e)}}const yh=(t,e)=>new bh(t,e),wh=_t`
2083
2104
  }
2084
2105
 
2085
2106
  :host([selected]) .control:hover {
2086
- --ni-private-step-icon-color: ${Ad};
2107
+ --ni-private-step-icon-color: ${dc};
2087
2108
  --ni-private-step-icon-border-color: ${dc};
2088
- --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
2109
+ --ni-private-step-icon-border-width: 3px;
2110
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
2089
2111
  --ni-private-step-line-color: ${dc};
2090
2112
  }
2091
2113
 
2114
+ :host([selected][severity="error"]) .control:hover {
2115
+ --ni-private-step-icon-color: ${rc};
2116
+ --ni-private-step-icon-border-color: ${rc};
2117
+ --ni-private-step-icon-border-width: 3px;
2118
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
2119
+ --ni-private-step-line-color: ${rc};
2120
+ }
2121
+
2122
+ :host([selected][severity="warning"]) .control:hover {
2123
+ --ni-private-step-icon-color: ${sc};
2124
+ --ni-private-step-icon-border-color: ${sc};
2125
+ --ni-private-step-icon-border-width: 3px;
2126
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
2127
+ --ni-private-step-line-color: ${sc};
2128
+ }
2129
+
2130
+ :host([selected][severity="success"]) .control:hover {
2131
+ --ni-private-step-icon-color: ${lc};
2132
+ --ni-private-step-icon-border-color: ${lc};
2133
+ --ni-private-step-icon-border-width: 3px;
2134
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
2135
+ --ni-private-step-line-color: ${lc};
2136
+ }
2137
+
2092
2138
  :host([readonly]) .control:hover {
2093
2139
  --ni-private-step-icon-color: revert-layer;
2094
2140
  --ni-private-step-icon-border-color: revert-layer;
@@ -2097,6 +2143,14 @@ e&&Ia.unsubscribe(e)}}const yh=(t,e)=>new bh(t,e),wh=_t`
2097
2143
  --ni-private-step-line-color: revert-layer;
2098
2144
  }
2099
2145
 
2146
+ :host([selected][readonly]) .control:hover {
2147
+ --ni-private-step-icon-color: revert-layer;
2148
+ --ni-private-step-icon-border-color: revert-layer;
2149
+ --ni-private-step-icon-border-width: revert-layer;
2150
+ --ni-private-step-icon-background-size: revert-layer;
2151
+ --ni-private-step-line-color: revert-layer;
2152
+ }
2153
+
2100
2154
  .control:hover .line {
2101
2155
  transform: scale(1, 2);
2102
2156
  }
@@ -2120,16 +2174,18 @@ e&&Ia.unsubscribe(e)}}const yh=(t,e)=>new bh(t,e),wh=_t`
2120
2174
  }
2121
2175
 
2122
2176
  :host([severity="error"]) .control${Uo} {
2177
+ --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
2123
2178
  --ni-private-step-icon-border-color: ${rc};
2124
- --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
2125
- --ni-private-step-icon-outline-inset-color: ${rc};
2179
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
2180
+ --ni-private-step-icon-outline-inset-color: transparent;
2126
2181
  --ni-private-step-line-color: ${rc};
2127
2182
  }
2128
2183
 
2129
2184
  :host([severity="warning"]) .control${Uo} {
2185
+ --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
2130
2186
  --ni-private-step-icon-border-color: ${sc};
2131
- --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
2132
- --ni-private-step-icon-outline-inset-color: ${sc};
2187
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
2188
+ --ni-private-step-icon-outline-inset-color: transparent;
2133
2189
  --ni-private-step-line-color: ${sc};
2134
2190
  }
2135
2191
 
@@ -2149,6 +2205,27 @@ e&&Ia.unsubscribe(e)}}const yh=(t,e)=>new bh(t,e),wh=_t`
2149
2205
  --ni-private-step-line-color: ${dc};
2150
2206
  }
2151
2207
 
2208
+ :host([selected][severity="error"]) .control${Uo} {
2209
+ --ni-private-step-icon-color: ${rc};
2210
+ --ni-private-step-icon-border-color: ${rc};
2211
+ --ni-private-step-icon-outline-inset-color: ${rc};
2212
+ --ni-private-step-line-color: ${rc};
2213
+ }
2214
+
2215
+ :host([selected][severity="warning"]) .control${Uo} {
2216
+ --ni-private-step-icon-color: ${sc};
2217
+ --ni-private-step-icon-border-color: ${sc};
2218
+ --ni-private-step-icon-outline-inset-color: ${sc};
2219
+ --ni-private-step-line-color: ${sc};
2220
+ }
2221
+
2222
+ :host([selected][severity="success"]) .control${Uo} {
2223
+ --ni-private-step-icon-color: ${lc};
2224
+ --ni-private-step-icon-border-color: ${lc};
2225
+ --ni-private-step-icon-outline-inset-color: ${lc};
2226
+ --ni-private-step-line-color: ${lc};
2227
+ }
2228
+
2152
2229
  .control${Uo} .icon::before {
2153
2230
  outline-width: ${Fc};
2154
2231
  ${""}
@@ -2174,12 +2251,14 @@ e&&Ia.unsubscribe(e)}}const yh=(t,e)=>new bh(t,e),wh=_t`
2174
2251
  }
2175
2252
 
2176
2253
  :host([severity="error"]) .control:active {
2254
+ --ni-private-step-icon-color: ${rc};
2177
2255
  --ni-private-step-icon-border-color: ${rc};
2178
2256
  --ni-private-step-icon-background-color: rgb(from ${rc} r g b / 30%);
2179
2257
  --ni-private-step-line-color: ${rc};
2180
2258
  }
2181
2259
 
2182
2260
  :host([severity="warning"]) .control:active {
2261
+ --ni-private-step-icon-color: ${sc};
2183
2262
  --ni-private-step-icon-border-color: ${sc};
2184
2263
  --ni-private-step-icon-background-color: rgb(from ${sc} r g b / 30%);
2185
2264
  --ni-private-step-line-color: ${sc};
@@ -2199,6 +2278,27 @@ e&&Ia.unsubscribe(e)}}const yh=(t,e)=>new bh(t,e),wh=_t`
2199
2278
  --ni-private-step-line-color: ${dc};
2200
2279
  }
2201
2280
 
2281
+ :host([selected][severity="error"]) .control:active {
2282
+ --ni-private-step-icon-color: ${rc};
2283
+ --ni-private-step-icon-border-color: ${rc};
2284
+ --ni-private-step-icon-background-color: rgb(from ${rc} r g b / 30%);
2285
+ --ni-private-step-line-color: ${rc};
2286
+ }
2287
+
2288
+ :host([selected][severity="warning"]) .control:active {
2289
+ --ni-private-step-icon-color: ${sc};
2290
+ --ni-private-step-icon-border-color: ${sc};
2291
+ --ni-private-step-icon-background-color: rgb(from ${sc} r g b / 30%);
2292
+ --ni-private-step-line-color: ${sc};
2293
+ }
2294
+
2295
+ :host([selected][severity="success"]) .control:active {
2296
+ --ni-private-step-icon-color: ${Ad};
2297
+ --ni-private-step-icon-border-color: ${lc};
2298
+ --ni-private-step-icon-background-color: rgb(from ${lc} r g b / 30%);
2299
+ --ni-private-step-line-color: ${lc};
2300
+ }
2301
+
2202
2302
  :host([readonly]) .control:active {
2203
2303
  --ni-private-step-icon-color: revert-layer;
2204
2304
  --ni-private-step-icon-border-color: revert-layer;
@@ -2208,6 +2308,15 @@ e&&Ia.unsubscribe(e)}}const yh=(t,e)=>new bh(t,e),wh=_t`
2208
2308
  --ni-private-step-line-color: revert-layer;
2209
2309
  }
2210
2310
 
2311
+ :host([selected][readonly]) .control:active {
2312
+ --ni-private-step-icon-color: revert-layer;
2313
+ --ni-private-step-icon-border-color: revert-layer;
2314
+ --ni-private-step-icon-border-width: revert-layer;
2315
+ --ni-private-step-icon-background-color: revert-layer;
2316
+ --ni-private-step-icon-background-size: revert-layer;
2317
+ --ni-private-step-line-color: revert-layer;
2318
+ }
2319
+
2211
2320
  .control:active .icon::before {
2212
2321
  outline-width: 0px;
2213
2322
  outline-offset: -1px;
@@ -2274,10 +2383,35 @@ e&&Ia.unsubscribe(e)}}const yh=(t,e)=>new bh(t,e),wh=_t`
2274
2383
  --ni-private-step-icon-inverse-color: ${nl};
2275
2384
  }
2276
2385
 
2386
+ :host([severity="error"]) .control {
2387
+ --ni-private-step-icon-border-color:: rgb(from ${rc} r g b / 30%);
2388
+ --ni-private-step-icon-background-color: rgb(from ${rc} r g b / 30%);
2389
+ }
2390
+
2391
+ :host([severity="warning"]) .control {
2392
+ --ni-private-step-icon-border-color:: rgb(from ${sc} r g b / 30%);
2393
+ --ni-private-step-icon-background-color: rgb(from ${sc} r g b / 30%);
2394
+ }
2395
+
2277
2396
  :host([severity="success"]) .control {
2397
+ --ni-private-step-icon-border-color:: rgb(from ${lc} r g b / 30%);
2278
2398
  --ni-private-step-icon-background-color: rgb(from ${lc} r g b / 30%);
2279
2399
  }
2280
2400
  }
2401
+
2402
+ @layer focusVisible {
2403
+ :host([severity="error"]) .control${Uo} {
2404
+ --ni-private-step-icon-outline-inset-color: ${rc};
2405
+ }
2406
+
2407
+ :host([severity="warning"]) .control${Uo} {
2408
+ --ni-private-step-icon-outline-inset-color: ${sc};
2409
+ }
2410
+
2411
+ :host([severity="success"]) .control${Uo} {
2412
+ --ni-private-step-icon-outline-inset-color: ${lc};
2413
+ }
2414
+ }
2281
2415
  `)),xh=_t`
2282
2416
  ${wh}
2283
2417
  ${""}