@ni/nimble-components 35.12.1 → 35.12.2
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.
- package/dist/all-components-bundle.js +150 -16
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +1113 -979
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +83 -83
- package/dist/custom-elements.md +24 -24
- package/dist/esm/patterns/step/styles.js +150 -16
- package/dist/esm/patterns/step/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -17798,18 +17798,18 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
17798
17798
|
}
|
|
17799
17799
|
|
|
17800
17800
|
:host([severity="error"]) .control {
|
|
17801
|
-
--ni-private-step-icon-color:
|
|
17801
|
+
--ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
|
|
17802
17802
|
--ni-private-step-icon-border-color: ${failColor};
|
|
17803
|
-
--ni-private-step-icon-background-color:
|
|
17804
|
-
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-
|
|
17803
|
+
--ni-private-step-icon-background-color: ${failColor};
|
|
17804
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
|
|
17805
17805
|
--ni-private-step-line-color: ${failColor};
|
|
17806
17806
|
}
|
|
17807
17807
|
|
|
17808
17808
|
:host([severity="warning"]) .control {
|
|
17809
|
-
--ni-private-step-icon-color:
|
|
17809
|
+
--ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
|
|
17810
17810
|
--ni-private-step-icon-border-color: ${warningColor};
|
|
17811
|
-
--ni-private-step-icon-background-color:
|
|
17812
|
-
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-
|
|
17811
|
+
--ni-private-step-icon-background-color: ${warningColor};
|
|
17812
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
|
|
17813
17813
|
--ni-private-step-line-color: ${warningColor};
|
|
17814
17814
|
}
|
|
17815
17815
|
|
|
@@ -17830,6 +17830,27 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
17830
17830
|
--ni-private-step-line-color: ${borderHoverColor};
|
|
17831
17831
|
}
|
|
17832
17832
|
|
|
17833
|
+
:host([selected][severity="error"]) .control {
|
|
17834
|
+
--ni-private-step-icon-color: ${failColor};
|
|
17835
|
+
--ni-private-step-icon-border-color: ${failColor};
|
|
17836
|
+
--ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
|
|
17837
|
+
--ni-private-step-line-color: ${failColor};
|
|
17838
|
+
}
|
|
17839
|
+
|
|
17840
|
+
:host([selected][severity="warning"]) .control {
|
|
17841
|
+
--ni-private-step-icon-color: ${warningColor};
|
|
17842
|
+
--ni-private-step-icon-border-color: ${warningColor};
|
|
17843
|
+
--ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
|
|
17844
|
+
--ni-private-step-line-color: ${warningColor};
|
|
17845
|
+
}
|
|
17846
|
+
|
|
17847
|
+
:host([selected][severity="success"]) .control {
|
|
17848
|
+
--ni-private-step-icon-color: ${passColor};
|
|
17849
|
+
--ni-private-step-icon-border-color: ${passColor};
|
|
17850
|
+
--ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);
|
|
17851
|
+
--ni-private-step-line-color: ${passColor};
|
|
17852
|
+
}
|
|
17853
|
+
|
|
17833
17854
|
.icon-background {
|
|
17834
17855
|
grid-area: icon;
|
|
17835
17856
|
display: inline-block;
|
|
@@ -17898,7 +17919,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
17898
17919
|
display: none;
|
|
17899
17920
|
}
|
|
17900
17921
|
|
|
17901
|
-
:host([selected]) .step-indicator,
|
|
17902
17922
|
:host([disabled]) .step-indicator {
|
|
17903
17923
|
display: contents;
|
|
17904
17924
|
}
|
|
@@ -17913,7 +17933,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
17913
17933
|
display: contents;
|
|
17914
17934
|
}
|
|
17915
17935
|
|
|
17916
|
-
:host([selected]) .icon-severity,
|
|
17917
17936
|
:host([disabled]) .icon-severity {
|
|
17918
17937
|
display: none;
|
|
17919
17938
|
}
|
|
@@ -18004,14 +18023,16 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
18004
18023
|
}
|
|
18005
18024
|
|
|
18006
18025
|
:host([severity="error"]) .control:hover {
|
|
18026
|
+
--ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
|
|
18007
18027
|
--ni-private-step-icon-border-color: ${failColor};
|
|
18008
|
-
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-
|
|
18028
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
|
|
18009
18029
|
--ni-private-step-line-color: ${failColor};
|
|
18010
18030
|
}
|
|
18011
18031
|
|
|
18012
18032
|
:host([severity="warning"]) .control:hover {
|
|
18033
|
+
--ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
|
|
18013
18034
|
--ni-private-step-icon-border-color: ${warningColor};
|
|
18014
|
-
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-
|
|
18035
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
|
|
18015
18036
|
--ni-private-step-line-color: ${warningColor};
|
|
18016
18037
|
}
|
|
18017
18038
|
|
|
@@ -18023,12 +18044,37 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
18023
18044
|
}
|
|
18024
18045
|
|
|
18025
18046
|
:host([selected]) .control:hover {
|
|
18026
|
-
--ni-private-step-icon-color: ${
|
|
18047
|
+
--ni-private-step-icon-color: ${borderHoverColor};
|
|
18027
18048
|
--ni-private-step-icon-border-color: ${borderHoverColor};
|
|
18028
|
-
--ni-private-step-icon-
|
|
18049
|
+
--ni-private-step-icon-border-width: 3px;
|
|
18050
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
|
|
18029
18051
|
--ni-private-step-line-color: ${borderHoverColor};
|
|
18030
18052
|
}
|
|
18031
18053
|
|
|
18054
|
+
:host([selected][severity="error"]) .control:hover {
|
|
18055
|
+
--ni-private-step-icon-color: ${failColor};
|
|
18056
|
+
--ni-private-step-icon-border-color: ${failColor};
|
|
18057
|
+
--ni-private-step-icon-border-width: 3px;
|
|
18058
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
|
|
18059
|
+
--ni-private-step-line-color: ${failColor};
|
|
18060
|
+
}
|
|
18061
|
+
|
|
18062
|
+
:host([selected][severity="warning"]) .control:hover {
|
|
18063
|
+
--ni-private-step-icon-color: ${warningColor};
|
|
18064
|
+
--ni-private-step-icon-border-color: ${warningColor};
|
|
18065
|
+
--ni-private-step-icon-border-width: 3px;
|
|
18066
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
|
|
18067
|
+
--ni-private-step-line-color: ${warningColor};
|
|
18068
|
+
}
|
|
18069
|
+
|
|
18070
|
+
:host([selected][severity="success"]) .control:hover {
|
|
18071
|
+
--ni-private-step-icon-color: ${passColor};
|
|
18072
|
+
--ni-private-step-icon-border-color: ${passColor};
|
|
18073
|
+
--ni-private-step-icon-border-width: 3px;
|
|
18074
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
|
|
18075
|
+
--ni-private-step-line-color: ${passColor};
|
|
18076
|
+
}
|
|
18077
|
+
|
|
18032
18078
|
:host([readonly]) .control:hover {
|
|
18033
18079
|
--ni-private-step-icon-color: revert-layer;
|
|
18034
18080
|
--ni-private-step-icon-border-color: revert-layer;
|
|
@@ -18037,6 +18083,14 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
18037
18083
|
--ni-private-step-line-color: revert-layer;
|
|
18038
18084
|
}
|
|
18039
18085
|
|
|
18086
|
+
:host([selected][readonly]) .control:hover {
|
|
18087
|
+
--ni-private-step-icon-color: revert-layer;
|
|
18088
|
+
--ni-private-step-icon-border-color: revert-layer;
|
|
18089
|
+
--ni-private-step-icon-border-width: revert-layer;
|
|
18090
|
+
--ni-private-step-icon-background-size: revert-layer;
|
|
18091
|
+
--ni-private-step-line-color: revert-layer;
|
|
18092
|
+
}
|
|
18093
|
+
|
|
18040
18094
|
.control:hover .line {
|
|
18041
18095
|
transform: scale(1, 2);
|
|
18042
18096
|
}
|
|
@@ -18060,16 +18114,18 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
18060
18114
|
}
|
|
18061
18115
|
|
|
18062
18116
|
:host([severity="error"]) .control${focusVisible} {
|
|
18117
|
+
--ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
|
|
18063
18118
|
--ni-private-step-icon-border-color: ${failColor};
|
|
18064
|
-
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-
|
|
18065
|
-
--ni-private-step-icon-outline-inset-color:
|
|
18119
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
|
|
18120
|
+
--ni-private-step-icon-outline-inset-color: transparent;
|
|
18066
18121
|
--ni-private-step-line-color: ${failColor};
|
|
18067
18122
|
}
|
|
18068
18123
|
|
|
18069
18124
|
:host([severity="warning"]) .control${focusVisible} {
|
|
18125
|
+
--ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
|
|
18070
18126
|
--ni-private-step-icon-border-color: ${warningColor};
|
|
18071
|
-
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-
|
|
18072
|
-
--ni-private-step-icon-outline-inset-color:
|
|
18127
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
|
|
18128
|
+
--ni-private-step-icon-outline-inset-color: transparent;
|
|
18073
18129
|
--ni-private-step-line-color: ${warningColor};
|
|
18074
18130
|
}
|
|
18075
18131
|
|
|
@@ -18089,6 +18145,27 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
18089
18145
|
--ni-private-step-line-color: ${borderHoverColor};
|
|
18090
18146
|
}
|
|
18091
18147
|
|
|
18148
|
+
:host([selected][severity="error"]) .control${focusVisible} {
|
|
18149
|
+
--ni-private-step-icon-color: ${failColor};
|
|
18150
|
+
--ni-private-step-icon-border-color: ${failColor};
|
|
18151
|
+
--ni-private-step-icon-outline-inset-color: ${failColor};
|
|
18152
|
+
--ni-private-step-line-color: ${failColor};
|
|
18153
|
+
}
|
|
18154
|
+
|
|
18155
|
+
:host([selected][severity="warning"]) .control${focusVisible} {
|
|
18156
|
+
--ni-private-step-icon-color: ${warningColor};
|
|
18157
|
+
--ni-private-step-icon-border-color: ${warningColor};
|
|
18158
|
+
--ni-private-step-icon-outline-inset-color: ${warningColor};
|
|
18159
|
+
--ni-private-step-line-color: ${warningColor};
|
|
18160
|
+
}
|
|
18161
|
+
|
|
18162
|
+
:host([selected][severity="success"]) .control${focusVisible} {
|
|
18163
|
+
--ni-private-step-icon-color: ${passColor};
|
|
18164
|
+
--ni-private-step-icon-border-color: ${passColor};
|
|
18165
|
+
--ni-private-step-icon-outline-inset-color: ${passColor};
|
|
18166
|
+
--ni-private-step-line-color: ${passColor};
|
|
18167
|
+
}
|
|
18168
|
+
|
|
18092
18169
|
.control${focusVisible} .icon::before {
|
|
18093
18170
|
outline-width: ${borderWidth};
|
|
18094
18171
|
${'' /* -1px control to outline edge -2px focus border -1px inset gap */}
|
|
@@ -18114,12 +18191,14 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
18114
18191
|
}
|
|
18115
18192
|
|
|
18116
18193
|
:host([severity="error"]) .control:active {
|
|
18194
|
+
--ni-private-step-icon-color: ${failColor};
|
|
18117
18195
|
--ni-private-step-icon-border-color: ${failColor};
|
|
18118
18196
|
--ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
|
|
18119
18197
|
--ni-private-step-line-color: ${failColor};
|
|
18120
18198
|
}
|
|
18121
18199
|
|
|
18122
18200
|
:host([severity="warning"]) .control:active {
|
|
18201
|
+
--ni-private-step-icon-color: ${warningColor};
|
|
18123
18202
|
--ni-private-step-icon-border-color: ${warningColor};
|
|
18124
18203
|
--ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
|
|
18125
18204
|
--ni-private-step-line-color: ${warningColor};
|
|
@@ -18139,6 +18218,27 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
18139
18218
|
--ni-private-step-line-color: ${borderHoverColor};
|
|
18140
18219
|
}
|
|
18141
18220
|
|
|
18221
|
+
:host([selected][severity="error"]) .control:active {
|
|
18222
|
+
--ni-private-step-icon-color: ${failColor};
|
|
18223
|
+
--ni-private-step-icon-border-color: ${failColor};
|
|
18224
|
+
--ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
|
|
18225
|
+
--ni-private-step-line-color: ${failColor};
|
|
18226
|
+
}
|
|
18227
|
+
|
|
18228
|
+
:host([selected][severity="warning"]) .control:active {
|
|
18229
|
+
--ni-private-step-icon-color: ${warningColor};
|
|
18230
|
+
--ni-private-step-icon-border-color: ${warningColor};
|
|
18231
|
+
--ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
|
|
18232
|
+
--ni-private-step-line-color: ${warningColor};
|
|
18233
|
+
}
|
|
18234
|
+
|
|
18235
|
+
:host([selected][severity="success"]) .control:active {
|
|
18236
|
+
--ni-private-step-icon-color: ${buttonLabelFontColor};
|
|
18237
|
+
--ni-private-step-icon-border-color: ${passColor};
|
|
18238
|
+
--ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);
|
|
18239
|
+
--ni-private-step-line-color: ${passColor};
|
|
18240
|
+
}
|
|
18241
|
+
|
|
18142
18242
|
:host([readonly]) .control:active {
|
|
18143
18243
|
--ni-private-step-icon-color: revert-layer;
|
|
18144
18244
|
--ni-private-step-icon-border-color: revert-layer;
|
|
@@ -18148,6 +18248,15 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
18148
18248
|
--ni-private-step-line-color: revert-layer;
|
|
18149
18249
|
}
|
|
18150
18250
|
|
|
18251
|
+
:host([selected][readonly]) .control:active {
|
|
18252
|
+
--ni-private-step-icon-color: revert-layer;
|
|
18253
|
+
--ni-private-step-icon-border-color: revert-layer;
|
|
18254
|
+
--ni-private-step-icon-border-width: revert-layer;
|
|
18255
|
+
--ni-private-step-icon-background-color: revert-layer;
|
|
18256
|
+
--ni-private-step-icon-background-size: revert-layer;
|
|
18257
|
+
--ni-private-step-line-color: revert-layer;
|
|
18258
|
+
}
|
|
18259
|
+
|
|
18151
18260
|
.control:active .icon::before {
|
|
18152
18261
|
outline-width: 0px;
|
|
18153
18262
|
outline-offset: -1px;
|
|
@@ -18214,10 +18323,35 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
18214
18323
|
--ni-private-step-icon-inverse-color: ${Black15};
|
|
18215
18324
|
}
|
|
18216
18325
|
|
|
18326
|
+
:host([severity="error"]) .control {
|
|
18327
|
+
--ni-private-step-icon-border-color:: rgb(from ${failColor} r g b / 30%);
|
|
18328
|
+
--ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
|
|
18329
|
+
}
|
|
18330
|
+
|
|
18331
|
+
:host([severity="warning"]) .control {
|
|
18332
|
+
--ni-private-step-icon-border-color:: rgb(from ${warningColor} r g b / 30%);
|
|
18333
|
+
--ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
|
|
18334
|
+
}
|
|
18335
|
+
|
|
18217
18336
|
:host([severity="success"]) .control {
|
|
18337
|
+
--ni-private-step-icon-border-color:: rgb(from ${passColor} r g b / 30%);
|
|
18218
18338
|
--ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);
|
|
18219
18339
|
}
|
|
18220
18340
|
}
|
|
18341
|
+
|
|
18342
|
+
@layer focusVisible {
|
|
18343
|
+
:host([severity="error"]) .control${focusVisible} {
|
|
18344
|
+
--ni-private-step-icon-outline-inset-color: ${failColor};
|
|
18345
|
+
}
|
|
18346
|
+
|
|
18347
|
+
:host([severity="warning"]) .control${focusVisible} {
|
|
18348
|
+
--ni-private-step-icon-outline-inset-color: ${warningColor};
|
|
18349
|
+
}
|
|
18350
|
+
|
|
18351
|
+
:host([severity="success"]) .control${focusVisible} {
|
|
18352
|
+
--ni-private-step-icon-outline-inset-color: ${passColor};
|
|
18353
|
+
}
|
|
18354
|
+
}
|
|
18221
18355
|
`));
|
|
18222
18356
|
|
|
18223
18357
|
const styles$10 = css `
|